본문 바로가기

TIL

 (45)
TIL) 토큰기반 인증 : JWT 토큰기반 인증을 쓰는 이유 - 세션기반인증 = 서버(혹은 DB)에 유저 정보를 담는 방식 -> 유저 정보를 매 번 확인하는 부담존재. 이를 클라이언트에 넘겨줄 순 없을까? 토큰을 사용하면 가능 - 클라이언트가 토큰을 갖고있으면 웹사이트 사용가능 - 대표적 토큰기반 인증 = JWT(JSON Web Token) JWT 구조 - Header + payload + signature로 구성 토큰기반 인증절차 - (Client -> server)로그인요청 - (server -> Client)JWT 토큰 전달 - (Client -> server)get 요청 - (server)토큰 확인 - (server -> Client)응답 JWT 사용방법(Javascript) 1. 라이브러리 const jwt = require('..
TIL) res.status 자주 사용하는 status 200 OK 성공했을 때 201 Created 새로 뭔가가 만들어졌을 때 400 Bad request 요청이 syntax 에러로 이해 불가능한 상태일 때 401 Unauthorized 유저의 승인이 필요한 request일 때 403 Forbidden 금지된 request 일 때 500 Internal Server Error 서버 내에서 작동 오류가 있을 때 참고 HTTP/1.1: Status Code Definitions part of Hypertext Transfer Protocol -- HTTP/1.1 RFC 2616 Fielding, et al. 10 Status Code Definitions Each Status-Code is described below, includi..
TIL) Debug: Sequelize migration error Situation - migration을 위한 sequelize 명령어 실행 시 오류 발생 1) #sequelize db:migrate sequelize: 명령을 찾을 수 없습니다. 2) #npx sequelize-cli db:migrate ERROR: Unkown database 'authentication' 3) # sequelize db:seed:all ERROR: Table 'authentication.Users' doesn't exist - migration을 위한 file 이미 생성되어 있음 ./migrations/xxxxxx-create-user.js - migration을 위한 seeders 파일도 존재 ./seeders/xxxxx-first-user.js Solution 1) 명령어 문제..
TIL) 학습내용 점검: JS 풀스택 기술 익혀가는 중, 보완할 부분 매우 많음 블록체인 부트캠프에서 JS를 기본으로 웹 앱 개발에 대해 배우고 있다. 현재 JS 기본 문법(HTML, CSS), 리엑트 사용법 등에 대해 배웠으며 Front end 쪽은 어느정도 개념을 익혔다. 부수적으로 linux, git 다루는 법, 자료구조, 알고리즘 등 프로그래밍에 대해 배웠다. 그리고 지난주와 이번주 수업을 통해 node js, express에 대해 배우며 웹 서버 구성방법, 네트워크 동작 원리 등을 익혔고 Back end 쪽에 대해서도 알게 되었다. 다음 주에 SQL, NOSQL, mongoDB에 대해 배울 예정이니, 다음주까지 하면 풀스택을 한 번은 다뤄본 셈이 되는 거다. 지금 매일, 매주 조금씩 복습하고 있지만, 전반적으로 이해가 부족한 편이다. 특히 React 사용법(state 관리와..
TIL) hook 개념 및 useEffect 사용법 hook이란? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. hook의 종류 hook에는 useState, useEffect 등이 있다. useEffect 사용법 useEffect(함수, [종속성1, 종속성2...]) - 배열 내의 종속성1, 2의 값이 변할 때 첫번째 인자인 함수가 실행됨 - 종속성이 선언되지 않으면 컴포넌트 렌더링 될 때 함수 자동 실행 - 만약 종속성으로 [](빈배열)이 선언되면 컴포넌트가 처음 생성될 때만 함수가 실행됨 참고 https://velog.io/@khy226/%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-..
TIL) useState 통해서 상태 업데이트 할 때 String 타입으로 변경 #배운것 useState를 통해서 state 값을 업데이트할 때는 상태값이 string으로 변한다. 따라서 if 문을 통해서 업데이트 한 상태값을 비교해주는 경우, 타입 변환을 하거나 느슨한 비교를 사용하자. **썸네일 컴포넌트** import source from '../data/images' import Gallery from '../page/Gallery' function Thumbnail(props) { return {source.map((e) => { return { // event.preventDefault() props.onChangeMode(event.target.id) }}/> }) } } export default Thumbnail; **갤러리 컴포넌트** import { useStat..
TIL) 생활코딩 React delete #배운 것 : 복수의 태그를 묶을 때 사용. 아무 의미가 없으며 묶는 용도로만 사용됨. #느낀 점 delete라고 해서 fancy하게 태그를 삭제하거나 그런 게 있을 줄 알았는데, 빈 배열을 생성하고 삭제할 값을 제외하고 나머지를 담아주는 식으로 구현되어서 의외로 허무?했다 코딩을 배울수록 느끼는 거지만, 항상 인간이 생각하는 방법은 컴퓨터랑 많이 다르다는 것. 가장 저차원적으로 생각하는게 코딩에 도움이 되는 거 같다. contextControl = { event.preventDefault(); setMode('UPDATE'); }}>Update { const newTopics = [] for(let i=0; i 참고 https://opentutorials.org/course/4900/31271 삭제 기..
TIL) 생활코딩 React update # 배운 것 - 상태가 Object일 때 useState 사용법 1) 배열이 아닌 객체일때 newValue = {...value} -> 복제본 만들기 newValue 변경 -> 새로운 값 push setValue(newValue) 2) 배열일때 newValue = [...value] -> 복제본 만들기 newValue 변경 -> 새로운 값 push setValue(newValue) # 복습한 것 - 태그 : 정보를 서버로 전달할 때 사용 ex) - 태그 : 하나의 문단을 만들 때 사용. 줄바꾸기 기능 -이벤트 핸들러 onSubmit : submit 버튼 클릭했을 때 발생 # 느낀 것 react는 참 어렵다. state에 따라 동작의 흐름이 달라지니 이를 상상하면서 머릿속으로 굴려보는게 잘 안되네. 여러번..
TIL) React State, Props, 알고리즘, StringifyJSON, TreeUI 학습 내용 - React state & props - React event handler - 알고리즘 문제해결 - 재귀함수 - StringifyJSON, TreeUI React state & props #Props vs State - props : 외부로부터 전달받은 값으로 바꿀 수 없다. 1) 컴포넌트 입력값(property, 속성)으로 사용 2) 부모 컴포넌트로부터 전달받은 값 3) 객체(object) 형태 4) 읽기 전용 - state : 내부에서 변화하는 값. 바꿀 수 있음 - 데이터가 props인지 state인지 확인하는 법 1) 부모로부터 전달되는가? -> props 2) 시간이 지나도 변하지 않는가? -> props 3) 컴포넌트 안에서 다른 state나 props를 갖고 계산 가능한가? -..
TIL) React, SPA, React Router React 기초 학습목표 1. React 3가지 특징 2. JSX는 왜 명시적인가? 3. React 컴포넌트의 필요성 React란? - 프론트 엔드 개발을 위한 오픈소스 툴 - 리액트 3가지 특징 1) 선언형 - 하나의 파일에 HTML/CSS/JS를 함께 작성하게 만듬 2) 컴포넌트 기반 - 하나의 기능을 위해 여러 종류의 코드를 묶어놓아 독립성/재사용성이 좋음 3) 범용성 - 기 작성한 컴포넌트를 기반으로 다른 프로젝트에 붙여서 사용 가능 JSX란? - Javascript XML - React에서 UI를 구성할 때 사용하는 문법으로 Javascript를 확장한 문법이다. - React는 JSX를 사용해 분리되었던 html의 마크업과 javascript의 로직을 component란 유닛을 통합하여 한 번..

티스토리툴바