본문 바로가기

노드12

[220422] 리액트로 덧글기능 만들기 (CRUD 중 UD), 생명주기함수 CRUD 중 U 만들기 클릭했을때 input박스가 나오도록 만들기 //App.jsx componentDidMount(){ //최초실행 this.setState({ ...this.state, list:[ //클릭유무를 알 수 있도록 updateflag 추가 {userid:'ingoo7022',content:'안녕하세요2222',date:'2022-04-21',updateflag:true}, ... //CommentList.jsx handleSubmit = e=> { e.preventDefault() console.log(this.state.value) const obj={ userid:'ingoo7022', content:this.state.value, date:'2022-04-21', //클릭유무를 알 .. 2022. 4. 29.
[220209] 세션 사용하기 : express-session, memorystore 설치 npm install express-session memorystore 매번 실행할때마다 쿠키를 가져오는 expres-session과 메모리를 저장할 장소에 관한 memorystore 라이브러리기 때문에 npm을 통해서 설치해준다. 세팅 const session = require('express-session') const memorystore = require('memorystore')(session) 세션을 사용할때 3가지를 기억하고 가자 1) 암호화 : 생성하는 결과물들이 겹치지 않게하는 처리 2) 세션을 저장할 공간 : 메모리에 하니? 하드에 하니? 서버에 하니? -> 우리는 메모리에 저장함. 3) 쿠키의 설정 : 세션이라면 기본적으로 필요한 쿠키. 보통은 쿠키의 만료시간이나 쿠키의 범위를 .. 2022. 2. 9.
[220209] 라우터 2개 사용하기, 라우터를 폴더화 시키는 2가지 방법 목록 1) 라우터 2개 사용하기 2) 다른 파일에 있는 코드를 불러오기 3) 라우터를 폴더화 시키기 라우터에 미들웨어 2개 넣기 app.get('/join', (req,res,next)=>{console.log('join1'); next()}, (req,res)=>{console.log('join2')} ) 2개를 이렇게 넣을 수도 있지만 보기에 복잡해서 따로 변수로 받아 넣는 경우가 더 많다. //2) 코드 안에 없으므로 코드 밖에서 a를 찾는다 let a = (req,res,next)=>{ console.log('join1'); next() } app.get('/join', a, (req,res)=>{ //1) a를 코드 안에서 찾는다. //3) a를 실행한다 //4) 그 다음 인자를 실행한다. co.. 2022. 2. 9.
[220208] 세션의 정의, 세션 구조 구현하기, 세션과 쿠키🍪의 관계 목차 1. 세션이 생겨난 이유 2. 세션 구현하기 3. 쿠키를 생성해서 서버에 저장하기 세션을 만든 이유 : 보안성을 위해. 이처럼 브라우저에 쿠키가 없으면 웹서버에 요청을 하며, 웹서버는 응답을 하며 🍪쿠키를 준다. 그 이후부터 브라우저는 쿠키를 같이 붙여서 웹서버에 요청을 하고, 웹서버는 쿠키를 붙여서 응답한다. 즉, 웹서버는 기본적으로 항상 쿠키를 받는다. 다만 문제가 있다면, 브라우저에 저장을 하다보니 다른 사람이 접근하기도 쉬워진다. pc방을 예로 들어보자. A가 이용을 끝낸 후, B가 브라우저를 열어 쿠키를 확인하면 로그인정보가 고스란히 남아있다. 그걸 보고 게임머니나 각종 개인정보를 털어갈 수 도 있다. 이를 방지하기 위해, 쿠키를 서버에 저장하게 하는것이 세션이다. 구현할 기능 청사진 청사.. 2022. 2. 9.
[220207] 로그인 페이지 만들기 목록 1. 청사진 그리기 2. login 페이지 3. logout 페이지 4. profile 페이지 청사진 그리기 login페이지 정보를 입력할 창 만들기 & 입력한 정보가 터미널에 찍히도록 만들기. 브라우저에서 입력한 정보와 user라는 객체에 있는 정보가 서로 일치하는지 확인하기 오류해결 [ERR_HTTP_HEADERS_SENT]:Cannot set headers after they are sent to the client at new NodeError 해결하기 코드를 잘못 적어서 에러가 났는데, if문이나 반복문에서 중복된 값이 호출될때 생기는거라고하더라. 보니까 사이트를 2번 호출하게 잘못 적어서 해결함. 로그인이 성공했을때, 쿠키 만들어주기 res.setHeader(`Set-Cookie`,`lo.. 2022. 2. 8.
[220204] nvm 완벽삭제하기, 맥OS(M1칩) nvm is not compatible with the npm config "prefix" option: currently set to "/opt/homebrew" Run `npm config delete prefix` or `nvm use --delete-prefix v16.13.2 --silent` to unset it. 갑자기 터미널을 시작하면 이런 메세지가 뜬다. nvm은 npm 구성 "접두사" 옵션과 호환되지 않습니다: 현재 "/opt/homebrew"로 설정됨 `npm config delete prefix` 또는 `nvm use --delete-prefix v16.13.2 --silent`를 실행하여 설정을 해제합니다. 구글에 검색해보니 이런 메세지가 뜨는데 어.. 뭔 말이지. 그냥 싹 지우고.. 2022. 2. 4.
[220204] 서버로 이루어진 게시판 만들기(CRUD 구현 : 생성,작성,수정,삭제) 목록 1. 홈 만들기 2. 리스트 게시판 만들기 3. 글쓰기 게시판 만들기 4. 글보기 게시판 만들기 5. 글삭제 기능 만들기 6. 글수정 기능 만들기 여태까지 배웠던 내용을 총 정리하면서 게시판을 만들어보자. 웹템플릿 express, 템플릿엔진 nunjucks를 사용하기 위한 전제코드는 밑에 적어놓고, 앞으로 설명할때는 생략하겠다. //express를 쓰기 위한 세팅 const express=require('express') const app=express() //nunjucks를 쓰기 위한 세팅 const nunjucks=require('nunjucks') app.set('view engine','html') nunjucks.configure('views',{ express:app }) //heade.. 2022. 2. 4.
[220128] nunjucks 설치, 세팅, 사용 목록 1. 템플릿엔진 2. nunjucks 설치 3. nunjucks 세팅 4. nunjucks 사용 5. nunjucks 흐름 이해도 (링크) node.js 시작하기전 프로그램 세팅하는 법은 여기에! https://hancoco.tistory.com/70?category=1035202 [220125] 맥북에서 터미널, nodejs 개발환경 세팅하기 (M1칩) + 용어설명, npm, nvm, express 터미널 명령어 알기 기본적인 명령어 ls : 현재 있는 디렉토리 안의 파일 리스트를 출력해주는 -a : 숨긴 디렉토리까지 보여줌 -l : 자세히 보기 pwd : 어떤 디렉토리 경로에 있는지 절대 경로로 표 hancoco.tistory.com 템플릿 엔진 웹 개발에서, 지정된 템플릿 양식과 데이터가 합쳐.. 2022. 2. 2.
[220127] promise, then, resolve 목록 1. promise의 목적 2. promise의 매개변수 2가지 3. then 사용법 4. promise의 상태 3가지 5. resolve 사용하는 법 promise를 사용하기 위한 선수지식 : 객체와 this 간단 정리! this에 관한 자세한 설명은 아래 블로그 게시글에 --> https://hancoco.tistory.com/36 [220107] this와 new 그리고 arrow function 객체를 만드는 놀라운 기술을 배웠다! 이제 대량생산을 어떻게 쉽고 간단하게 만드는지 알아보자. 객체란 붕어빵을 만드는 붕어빵 틀, this !주의! 우선, 가볍게만 알자. 깊게 들어가면 내용이 상 hancoco.tistory.com promise의 목적 콜백 기능은 그대로! 하지만 코드는 좀 더 깔끔.. 2022. 2. 2.
[220127] require, export 명령문 목록 1. require 메서드 2. exports를 통해 추가하기 NODEJS의 require 메서드 require은 표준 문법이 아니다 : 표준에 없는데 왜 nodejs에 이게 필요할까? 자바스크립트는 여러 파일에서 사용할 경우, 불편했다. 왜? A 파일에 있는 변수가 왜 B 파일에서 실행될때 같이 실행되지? (브라우저의 예시) 다른 사람들과 협업할때 불편함. (예시) 내가 a변수를 만들었는데, 다른사람도 a변수를 선언하거나 사용 --> 에러발생 이를 방지하기 위해 모듈(파일을 가져와서 사용할 수 있게끔 만들어 주는 시스템)이 나옴. 모듈은 ES7부터 있었음. -> import문이 생겨있음 근데!! import가 나오기 전에 NODEJS가 먼저 만들어 놓은 require가 존재. import(리액트때.. 2022. 2. 2.