[MERN] SNS Chat App 만들기 (1)

React.js를 공부하다가 포트폴리오 겸 공부 겸 연습도 할겸 여러 소스도 많고 공부할 요소가 많은 SNS로 선정해서 공부하게 되었습니다. 사용한 기술스택은 간단하게 요약하자면 MERN으로 MONGODB, Express, React.js, Node.js 입니다. (MERN) 첫번째로 위에 사용할 라이브러리들을 설치해줍니다. https://www.mongodb.com/try/download/community https://nodejs.org/en/download/current/ 설치가 완료되었으면 본격적으로 들어가겠습니다. (Node와 관련된 것은 이전에 포스팅을 해두었습니다.) 각자 사용할 편집기를 열기 전에 먼저 cmd로 진행하겠습니다. cd desktop -> desktop으로 이동 yarn cre..

• format_list_bulleted Node.js
• · 2021. 11. 24.
• textsms

[Node.js] Express Server 구축

https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS 버전으로 설치하시는게 좋습니다. 설치가 완료되시면 아래 커맨드를 이용해 설치가 잘 되었는지 확인하실 수 있습니다. node --version 프로젝트 생성하기 원하시는 위치에 프로젝트 디렉터리를 생성해주시고 프로젝트 루트 폴더에서 아래 커맨드를 실행해주세요. npm init -y npm 은 nodeJS에서 여러 패키지들을 설치하고 관리할 때 사용되는 패키지 매니저로 위 커맨드를 실행할 시 프로젝트 폴더 내에서 package.json이라는 파일이 생성될 겁니다. 강의를 진행하며 npm을 사용해 패..

• format_list_bulleted Node.js
• · 2021. 11. 9.
• textsms

[Node.js/vue.js] 영화정보 페이지 제작(frontend, backend 연동)

vs code 터미널에서 작성 작업 디렉토리 생성 $ mkdir movie 프론트엔드와 백엔드 작업을 하게 될 작업디렉토리를 생성한다. Frontend 작업디렉토리 생성 및 front 서버 실행 $ npm install -g yarn $ npm install -g @vue/cli $ vue create frontend $ cd frontend $ npm run serve npm 명령으로 vue.js 개발을 위해 필요한 패키지를 설치한다. 그리고 vue create 명령을 이용해 frontend 디렉토리를 생성하고, 새로 생성된 frontend 프로젝트 디렉토리에서 서버를 실행하고 브라우저에서 http://localhost:8080에 접속하면 다음과 같은 페이지를 확인할 수 있다. 위와 같이 페이지가 정상..

• format_list_bulleted Node.js
• · 2021. 9. 17.
• textsms

[Node.js] 템플릿엔진

'템플릿엔진'이란? 웹 프로그래밍을 할 때 주로 사용하는 마크업 언어인 HTML은 정적인 언어이다. 따라서 Javascript로 표현하면 반복문으로 간단하게 처리할 수 있는 동적 연산을 HTML으로만 표현하게 되면 일일이 직접 적어주어야 하는데, 이런 과정이 불편해서 나온것이 '템플릿엔진' 이다. 템플릿 엔진은 Javascript를 사용해서 HTML을 렌더링할 수 있게 도와주는 도구이다. 템플릿엔진의 종류 Pug(Jade) EJS Handlebars ...... 템플릿엔진에는 굉장히 다양한 종류가 있지만, 대표적으로는 Pug와 EJS를 많이 사용한다. Pug(Jade) 예전 이름인 Jade로 더 유명한 Pug는 꾸준히 많은 인기를 얻고 있는 엔진이다. Pug 구조와 HTML 구조 비교 doctype ht..

• format_list_bulleted Node.js
• · 2021. 9. 14.
• textsms

[Node.js] Session & Cookies

서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않고 한 번 통신이 되면 끊어진다. 따라서 서버는 클라이언트가 누구인지 계속 인증을 해주어야 한다. 하지만 그것은 매우 귀찮고 번거로운 일이다. 또한 웹페이지의 로딩을 느리게 만드는 요인이 되기도 한다. 그런 번거로움을 해결하는 방법이 바로 쿠키와 세션이다. 정리하면, 클라이언트와 정보 유지를 하기 위해 사용하는 것이 쿠키와 세션이다. ◆동작방식 ◆쿠키 1. 개념 쿠키는 클라이언트 로컬(local)에 저장되는 키와 값(key, value)이 들어있는 작은 데이터 파일이다. 쿠키는 서버에서 HTTP Response Header에 Set-Cookie 속성을 이용하여 클라이언트에 쿠키를 제공한다. 쿠키에는 이름, 값, 만료 날짜/시간(쿠키 저장기간)..

• format_list_bulleted JavaScript, JQuery
• · 2021. 9. 14.
• textsms