스마일 노트

pug에서 h1=pageTitle 이렇게 쓰면 text가 아니라 variable로 인식함 다만 h1은 오직 pageTitle의 값만 가질 수 있음 이렇게 쓰는 거랑 똑같음 다른 text랑 섞어서 사용할 때는 #{}을 이용해서 사용하는 것이 좋음 Conditionals fakeUser를 만들어 주고 home에 fakeUser함수를 보내준다. 와 옛날에는 { fakeUser: fakeUser }이 부분이 이해가 안갔는데 지금은 이해가 간다. conditionals은 JavaScript에서 쓰던 if, else if랑 같음 loggedIn상태일 때는 Log out 링크를 보여주고 아닐때는 Login 링크를 보여줌 Iteration Iteration은 기본적으로 elements의 list를 보여줌 임의로 vid..

1단계: pug를 설치한다 2단계: pug를 뷰 엔진으로 설정한다 3단계: 실제로 pug 파일을 생성한다 npm i pug Express한테 이제부터 사용할 뷰 엔진은 pug라고 말해주기 기본적으로 Express는 여기있는 views 폴더 안에 있는 파일을 찾음 views 폴더 만들기 pug사용법 일단 모든 것은 소문자로 작성하고, 속성이 있으면 괄호안에 작성함 그리고 모든건 부모속성보다 안쪽에 있어야됨 2칸을 띄우거나 탭을 사용하면됨 그리고 이제 render해주면 됨 기본적으로 Express가 pug파일을 views에서 찾는 것을 아니까 import는 안해도됨 근데 에러가 땋땋땋ㄸㅎㅎㅎ default값 때문임 Express는 Wetube/views를 찾는데 우리가 만든 파일은 Wetube/src/vie..

라우터는 우리가 작업중인 주제를 기반으로 URL을 그룹화해준다 누군가가 "/videos"로 시작하는 url에 접근하면 Express는 videoRouter 안으로 들어감 그리고 이 라우터 안에는 "/watch"라는 url이 하나 있음 이게 "/videos/watch"라는 url이 만들어지는 방법임 default로 글로벌 라우터를 export 하는 방법 모든 파일은 분리된 모듈이라서 쓰려면 import, export를 해줘야됨 globalRouter라는 변수만 export함 사용하려면 import하면 됨 근데 이렇게하면 1개밖에 export를 못함 해결책: 여러개를 export하기 const 앞에 export를 써주면 됨 대신 default로 하면 이름을 다른걸로 써줘도 됐지만 export const로 하..

범위 #2.4 Nodemon package.json에 babel로 컴파일 하는 scripts 만들기 npm install @babel/core @babel/node --save-dev @babel/core는 이미 설치했지만 같이 적어도 상관 없음 npm은 똑똑해서 이미 설치된거 아닌거 구분해서 없는것만 설치해줌 짜잔! 설치됨 scripts에 명령어를 dev로 설정해주고 babel-node를 실행시키는 것으로 써주기 @babel/node를 설치했기 때문에 babel-node라는 명령어를 사용할 수 있다 babel 문제점 터미널에 실행시키면 됨 이 2개는 같은 코드인데 import espress from "express"; 얘가 최신 자바 문법임 최신 자바 문법을 사용할 수 있게끔 babel을 설치해준 것임..

범위 #2.3 The Tower of Babel express 사용하려면 이렇게 작성해야한다 그리고 app 만들기 // 설명은 나중에~ Babel Babel은 자바스크립트 컴파일러다 nodeJS는 우리가 작성한 자바스크립트를 이해할것임 그러나 아직 nodeJS가 이해하지 못하는 최신 자바스크립트 코드가 있음 option 1 nodeJS가 이해하는 자바스크립트만 쓴다 option 2 아니면 babel을 사용 babel은 우리가 작성한 최신 자바스크립트를 컴파일 해줌 npm install --save-dev @babel/core 설치! package.json에 설치된게 찍힘 package.json은 text파일이기에 이렇게 옮겨도 상관없음 dependencies 프로젝트를 실행하기 필요한 dependenci..

범위 #2.2 Understanding Dependencies Dependencies npm i npm i express를 하지 않아도 dependencies에 express가 써져 있어서 express를 자동으로 깔아줌 똑똑이! package.json에 프로젝트를 동작시킬 때 필요한 모듈이 어떤 건지 정보를 담고 있다. 좋은 이유: 만약 팀으로 nodeJS 프로젝트를 진행하거나 컴퓨터를 바꿀 때 깃허브에 node_modules를 올릴 필요가 없음 node_modules 폴더는 용량이 크기 때문에 만약 올리면 시간이 오래걸림 그냥 package.json에 dependencies가 있고 npm i만 누르면 전부 다운받아줌 😎 package-lock.json package-lock.json은 패키지를 안전하..

범위 #2.1 Installing Express 이거는 node를 사용하는 방법인데 우리는 안쓸거임 node를 이용해서 파일을 실행하지 않을 것임 왜냐하면 가끔 node를 실행하기 전에 다른 작업을 수행하고 싶을 수 있기 때문 우리가 만들고 배포한 package를 다른 사람들이 설치하면 main을 사용할 것임 하지만 지금은 우리가 만든 패키지를 아무도 다운받지 않을테니 main 부분은 bye bye main은 필수 요소가 아니니까 없어도 됨 description, author 원하면 지워도 됨 scripts 추가 scripts는 실행하고 싶은 것을 말함 아까 실행했던 것을 win으로 설정하는 것 따옴표하고 콤마를 잘 써줘야함 npm run win 이걸 적어주면 아까처럼 실행됨 물론 프로젝트 폴더 안에서 ..

범위 #2.0 Your First NodeJS Project json json은 프로그래머가 파일에 정보를 저장하기 위해 만든 방식 중 하나다. 파일에 정보를 입력하는 방식임 nodeJS인 경우 파일의 이름은 package.json(꼭 소문자로 써야함)이어야 한다. package.json은 nodeJS 프로젝트를 만들 때 가장 먼저 만들어야 할 파일이다 장점: 시작할 때 쉬움, 작은 것에서부터 시작 가능 git 연결하기 git init 폴더에 git repository 만들기 github 들어가서 repository 만들기 git remote add origin git 연결 끗 package.json 만들기 npm init npm이 멋진 package.json 만드는 것을 도와줌 이렇게 만들면 됨 pac..

범위 #1.3 What is NodeJS #1.4 What is NPM NodeJS NodeJS를 쉽게 말하면 크롬 V8 자바스크립트 엔진으로 빌드 된 자바스크립트 런타임이다 브라우저 밖에서 돌아가는 자바스크립트 전에는 브라우저에서 자바스크립트를 사용해서 웹사이트와 상호작용을 하거나 데이터를 불러오거나 클래스를 제거하고 생성하면서 시각 효과를 만들어 낼 수 있었다. 이 모든 것을 브라우저에서만 할 수 있었다. 그런데 이걸 브라우저에서 분리하고 Python, Java, C처럼 프로그래밍 언어로 만듦 아하! 이렇게 브라우저에서만 콘솔을 찍을 수 있었다 nodeJS덕분에 이렇게 브라우저 밖에서도 콘솔을 찍을 수 있음 이걸로 다른 프로그래밍 언어처럼 백엔드를 만들 수도 있고, 이미지 파일 처리도 가능하고, 계산..