Front/React

[React] VSCode React Debugging

1. VSCode Extension 설치 (JavaScript Debugger) 2. .vscode/launch.json 파일에 아래와 같이 설정 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] } 3. yarn/npm 명령으로 프로젝트 실행 후 F5 클릭 새로운 크롬 페이지로 설정한 url 페이지가 열린다 이제 디버깅 포인트를 잡아 디버깅을 할 수 있다

[React] Form Validation (Formik VS React Hook Form)

Validation 이란? 서버에 데이터를 제출하기 전에 양식이 올바른지 확인하는 과정 사용자가 데이터를 목적지로 보내기 전에, 올바를 데이터를 입력했는지 유효성을 체크해주는 것. Client Validation react form validation은 client validation check에 해당 1. 사용자에게 편리함을 제공하기 위함 클라이언트 측에서 유효성 체크를 하지 않을 경우, 데이터가 서버까지 다녀온 뒤에야 잘못된 데이터임을 알 수 있다. 시간이 오래걸려 사용자도 불편함을 겪고, 서버도 너무 많이 일을 혼자 하게된다. 2. 이상한 데이터가 들어와 공격당하는 일이 없도록 하기 위한 보안조치 사용자가 의도적으로 이상한 데이터를 넣어 공격을 하는 것을 맊을 수 있다. 하지만 클라이언트 유효성 체..

[React] memo의 효과_컴포넌트를 어떻게 분리하는게 리렌더링이 효율적으로 될까?

[의문 : 왜 컴포넌트를 하나가 아닌 두개로 분리하였을까?] [결과물 화면] const TagList = React.memo(({ tags }) => ( {tags.map((tag) => ( #{tag} ))} )); 이와 같이 한번에 해결할 수 있는데 왜 나눴을까 의심이 들었다. 어차피 tag값이 바뀌면 둘다 렌더링 되는건 똑같지 않나? 라고 생각했지만 다르다. // React.memo를 사용하여 tag 값이 바뀔 때만 리렌더링되도록 처리 const TagItem = React.memo(({ tag }) => #{tag}); // React.memo를 사용하여 tags 값이 바뀔 때만 리렌더링되도록 처리 const TagList = React.memo(({ tags }) => ( {tags.map((t..

[React] hooks에서 최적화

hooks에서 최적화 useMemo(callback, [변경되는값]); 두번째 배열이 바뀌기전까지 값을 기억 함수 컴포넌트는 매번 함수가 새로 그려지며 실행되기 때문에 한번만 실행되면 되는 함수도 계속 호출되는 문제 발생 변경되는 값이 없다면 한번만 실행후 값을 보관하는 역할로 쓸 수 있다. useRef()와 useMemo() 차이점 useRef : 클래스로 치면 멤버변수 혹은 dom객체 처럼 특정한 '값'만 기억해야 할 때 useMemo : 복잡한 함수의 'retur값'을 기억해야 할 때 useCallback(callback, [변경되는값]); 두번째 배열이 바뀌기전까지 함수 자체를 기억 함수 생성 자체가 오래걸리는 경우 쓰면 최적화에 도움됨 변경되는 값이 없다면 state 값을 맨처음 값만 기억(co..

[React] JWT를 통한 회원 인증 시스템 구현

1. JWT의 이해 jwt은 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 두 개체가 서로 안전하게 정보를 주고받을 수 있도록 웹 표준으로 정의된 기술 1.1. 세션 기반 인증과 토큰 기반 인증의 차이 [세션 기반 인증] 서버가 사용자가 로그인 중임을 기억하고 있다는 뜻 서버는 세션 저장소에 사용자의 정보를 조회하고 세션id를 발급한다. 발급된 id는 주로 브라우저의 쿠키에 저장 그 다음 사용자가 다른 요청을 보낼 때마다 서버는 세션 저장소에서 세션을 조회한 후 로그인 여부를 결정하여 작업을 처리하고 응답한다. 세션 저장소는 주로 메모리, 디스크, 데이터베이스 등을 사용한다. 단점 서버를 확장하기 번거로워질 수 있다. 만약 서버의 인스턴스가 여러 개 된다면, ..

[React] mongoose를 이용한 MongoDB 연동 실습2

6. MongoDB Compass의 설치 및 사용 MongoDB Compass는 MongoDB를 위한 GUI 프로그램. 데이터베이스를 쉽게 조회하고 수정할 수 있다. Window의 경우 MongoDB설치할 때 자동 설치 7. 데이터 생성과 조회 7.1. 데이터 생성 [src/api/posts/posts.ctrl.js] import Post from '../../models/post'; export const write = ctx => {}; export const list = ctx => {}; export const read = ctx => {}; export const remove = ctx => {}; export const update = ctx => {}; 기존 PUT 메서드에 연결했던 repl..

[React] mongoose를 이용한 MongoDB 연동 실습1

1. 소개하기 관계형 데이터베이스 한계 데이터 스키마 고정적 확장성(RDBMS는 처리해야 할 데이터양이 늘어나면 여러 컴퓨터에 분산시키는 것이 아니라, 해당 데이터베이스 서버의 성능을 업그레이트 해야 한다.) MongoDB는 이런 한계를 극복한 문서 지향적 NoSQL 데이터베이스 유동적 스키마 확장성(여러 컴퓨터로 분산하여 처리 가능하도록 쉽게 설계) MongoDB가 무조건 좋은 것은 하니다. 상황별로 적합한 데이터베이스가 다르다. 까다로운 조건으로 데이터를 필터링 또는 ACID특성을 지켜야 한다면 RDBMS가 유리 1.1. 문서란? 여기서 말하는 문서(document)는 RDBMS의 레코드와 개념이 비슷하다. 문서의 데이터 구조는 한 개 이상의 키-값 쌍으로 되어 있다. 문서의 예시 { "id": Ob..

[React] 백엔드 프로그래밍: Node.js의 Koa 프레임워크

1. 소개하기 1.1. 백엔드 서버를 만들어 데이터를 여러 사람과 공유한다. 데이터를 담을 때 여러 가지 규칙이 필요 사용자 인증, 데이터 종류 구분, 데이터 검증 등 어떤 종류의 데이터를 몇 개씩 보여줄지 백엔드 프로그래밍 다양한 언어로 구현 가능 PHP, 파이썬, Golang, 자바, 자바스크립트 자바스크립트로 서버를 구현할 수 있는 Node.js를 사용해보자 1.2. Node.js 처음엔 자바스크립트를 웹 브라우저에서만 사용했다. 시간이 지나면서 자바스크립트는 계속 발전했으며, 구글이 크롬 웹 브라우저를 소개하면서 V8이라는 자바스크립트 엔진도 공개했다. 이 자바스크립트 엔진을 기반으로 웹 브라우저뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임을 개발했다. 이것이 바로 Node.js이다..