우리는 고정적인 스크립트와 css 파일을 가져오고 싶다. 하지만 서버는 이러한 파일을 바로 읽어들일 수 있는 것은 아니기 때문에 정적인 url을 가져오기 위한 미들웨이를 설정해준다. 이때 모든 수신요청을 받아들일 수 있는데 이 과정이 일어나면 어떤 파일에 대한 수신요청인지 확인하는 절차가 일어난다. const express=require('express'); const path=require('path'); const app=express(); // 경로 설정, 익스프레스 함수 호출 현재 내 폴더 'public' 폴더 안에 있는 정적인 스크립트를 호출할 생각이다. app.use(express.static('public')); 이 매개변수에는 제공하려는 정적파일을 보관해야 하는 프로젝트의 폴더 이름이 들어..

서버는 우리의 컴퓨터 내에 있는 파일을 절대로 스스로 찾아서 읽어들일 수가 없다. 따라서 우리가 직접 경로를 만들어주고 파일을 찾아서 서버에서 읽어들일 수 있게 해줘야 하는 것이다. 이러한 방법을 익스프레스를 통해 경로를 지정해줄 수 있다. const express= require('express'); const path = require('path'); 1. 경로 패키지 저장= 모든 폴더의 경로를 쉽게 지정해줌 require: 패키지를 불러들일 수 있는 라이브러리 express 패키지를 불러들이고 경로를 쉽게 저장해주기 위해 path 패키지를 가져온 것 const app=express(); 2. express는 함수로 호출이 될 수 있다. 따라서 express를 호출해준다. app.get('/', fu..

앗 express가 뭐지! 앞의 블로그에서 Node.js를 사용하려면 서버를 미리 만들어야 한다고 말을 했었다. Node.js를 통해 쉽게 서버를 구성할 수 있게 만드는 라이브러리 이다. Express.js는 요청이 들어올 때 그에 따른 응답을 보내주는데 응답을 보내주기 전에 어떠한 동작을 수행해 줄 수 있다. express는 가볍고 유연하게 웹 프레임워크를 구성할 수 있다는 장점이 있다. 이것은 middleware(미들웨어) 구조 때문에 가능한 것인데 JavaScript 코드로 작성된 다양한 기능의 미들웨어는 개발자가 필요한 것만 선택하여 express와 결합해 사용할 수 있다. middleware(미들웨어) 미들웨어란? 이름처럼 요청에 대한 응답 과정 중간에 끼어서 어떠한 동작을 수행해주는 프로그램 ..

사용자가 서버에 요청을 보내면(request) 서버는 요청에 대한 응답(response) 을 보내준다. 이 응답에는 해당하는 웹 페이지의 내용, 이미지, 스타일 시트, 자바스크립트 등의 파일이 포함되어 있다. 웹 표준 -어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야 함 -따라서 표준적인 규칙과 기술을 만든 것 Web & HTML 작동 원리 -서버는 클라이언트의 요청을 분석하여 결과값으로 html을 전송함 -서버는 결과값을 전송한 후 클라이언트의 연결을 종료 -각 웹 브라우저에는 브라우저 엔진이 내장되어 있고 이 엔진이 html 을 구성하고 있는 태그를 해석하여 화면에 표현함 HTML 기본 원리 * html 이란? Hypertext Markup Language 문서에 하이..

웹개발을 시작한다고 했을 때 어디선가 한번씩은 들어본 프로그래밍 언어들이다.각 언어는 어떤 역할을 하는지 알아보자! 1. 자바스크립트란? -HTML이 웹페이지의 프레임을 만드는 언어라고 한다면 웹페이지의 조작과 변경, 이벤트 동작을 만드는데 필요한 프로그래밍 언어이다-즉 정적 언어인 HTML을 조작해서 이벤트를 추가하고 웹페이지를 움직이게끔 만들어주는 것이 자바스크립트의 역할이다.  사실상 웹페이지를 만들기 위해서는 기본적으로는 HTML, CSS, Java Script만 있으면 기본적인 웹페이지를 만들 수 있다. 하지만 이렇게만 하면 복잡한 데이터가 들어오거나 서버를 이용하는 사용자가 많아지면 서버가 느리게 동작하는 경우가 많다.  이러한 불편함으로 인해 자바스크립트 엔진에 대한 필요성이 커져갔다.*자바..

**본 블로그는 '노마드코더-바닐라JS로 canvas에서 그림그리기' 강의를 클론코딩한 것입니다! 코드는 깃허브, 자세한 설명은 강의를 참고해주세요 * 바닐라 JS란? : 프레임워크 혹은 라이브러리가 저장되지 않은 순수한 자바스크립트 / 아무것도 포함이 되지않은 순수한 자바스크립트 0. 캔버스 그리기 -getContext const canvas = document.querySelector("canvas"); const ctx=canvas.getContext("2d"); 1. 사각형 그리기 -fillRect() 사각형의 선 그리기 ctx.rect(x,y,w,h) >이때 선의 색이 적용되지 않아 보이지 않는다. > stroke(): 테두리 그리기/ > fill() : 색으로 채우기 (**** 선을 만든 후에..

문제 설명 알파벳 대소문자로 된 단어가 주어지면, 이 단어에서 가장 많이 사용된 알파벳이 무엇인지 알아내는 프로그램을 작성하시오. 단, 대문자와 소문자를 구분하지 않는다. 입력 첫째 줄에 알파벳 대소문자로 이루어진 단어가 주어진다. 주어지는 단어의 길이는 1,000,000을 넘지 않는다. 출력 첫째 줄에 이 단어에서 가장 많이 사용된 알파벳을 대문자로 출력한다. 단, 가장 많이 사용된 알파벳이 여러 개 존재하는 경우에는 ?를 출력한다. 문제 핵심 1. 대소문자 구별하지 않음>> 지금 대소문자가 섞여있으니까 하나로 통일시 해줘야 함 >> 대문자로 치환 2. 가장 많이 사용된 알파벳 알아보기 3. 가장 많이 사용된 알파벳이 여러개인 경우 "?" 출력하기 alphabet= input().upper() alph..

1. Math() 메소드 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 객체 웹브라우저마다 다른 결괏값을 얻을 가능성이 높음 따라서 아주 정확한 결괏값이 필요한 작업에는 추천하지 않음 Math.min() 인수로 전달받은 값 중에서 가장 작은 수를 반환 Math.max() 인수로 전달받은 값 중에서 가장 큰 수 반환 Math.random() 0보다 크거나 같고 1보다 작은 무작위 숫자 반환 Math.floor() 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수 반환 Math.floor(10.95); >> 10 Math.floor(11.01); >>11 Math.ceil() 인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수 반환 Math.ceil(10.95) >>11 Math.ce..

Visual studio Code 설치를 하여 터미널 내에서 create-react-app react-project 라고 입력을 했더니 이러한 오류가 뜨는 상황이었다. 챗지피티 선생님과 구글에 오류를 계속해서 서치해 본 결과... 시스템 자체에서 스크립트를 허용하지 않아 패키지 모듈이 4개 정도만 설치되는 상황이었다. ※ 해결방법 window 검색에서 Window PowerShell 을 입력해준다. 관리자로 실행을 눌러서 창을 열어주고 Get-ExecutionPolicy 로 현재정책을 확인해보았다. 으앗 AllSigned로 나온다! AllSigned는 모든 스크립트가 디지털 서명되어야만 실행이 허용된다는 것을 의미한다. 그래서 이걸 허용으로 다 바꾸어줘야 한다. Set-ExecutionPolicy Rem..

이 대회는 타이타닉호를 탄 승객들의 이름, 성별, 나이, 지불한 운임, 가족수 등 여러 정보를 주고, 각 승객이 살았는지 죽었는지 예측하는 경진대회. 훈련용 데이터에는 승객 정보와 생사여부가 모두 표기되어 있고 테스트용 데이터에는 승객 정보만 표기되어 있습니다. 훈련용 데이터로 모델을 훈련한 뒤 테스트용 데이터에 있는 승객의 정보를 기반으로 생사여부를 예측해야 함. 가장 기본적인 대회 훈련용 데이터인 train.csv로 모델 훈련 테스트용 데이터인 test.csv로 결과 예측/ 제출용 샘플 데이터인 gender_submission.csv형식에 맞게 제출 https://www.kaggle.com/competitions/titanic/code Titanic - Machine Learning from Disa..