Next.js

▶ 개발자가 리액트 자체에만 집중할 수 있게 도와주는 프레임워크 1. Next.js 흐름 MPA : 새로고침 + 깜빡거림 의 개선 => (개선) SPA SPA : 초기 로딩 속도 시간이 걸림 => (개선) 코드 분할: 필요한 곳에서만 로딩 : seo가 좋지 않음 => SSR : 서버에서 미리 랜더링 + 관련 html 랜더링 (런타임/빌드타임) 2. 랜더링 (1) JS 를 이용해서 HTML을 만드는 행위 (2) Pre-rendering - SSG : 빌드할 때 랜더링되는 경우 - SSR : 런타임에 랜더링되는 경 * Page Router ( 기존에 사용했음) * App Router (최근에 나옴) *공식 문서 Next.js 13.4 Next.js 13.4 moves App Router to stable, ..

• format_list_bulleted Next.js
• · 2023. 12. 18.
• textsms

[프로그래머스 | javascript] 두 개 뽑아서 더하기

1. 내 코드 function solution(numbers) { //오름차순 정렬 //각각 다 더하기 //set으로 중복 없애기 (정렬을 마지막에 ) let newNum = []; for (let i = 0; i 두 숫자 더하기 > set 중복 없애기 : 테스트 오류 발생하여 순서를 바꾸니 되었다. 끝.

• format_list_bulleted 코딩테스트
• · 2023. 12. 18.
• textsms

TypeScript : 투두리스트 만들기 (5단계 - React Query + Axios )

TypeScript : 투두리스트 만들기 (4단계 - Thunk + Axios ) TypeScript : 투두리스트 만들기 (3단계 - Json-server) TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit) TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, zerotonine2da.tistory.com Lv5 Lv4의 과제에서 Redux를 react-query로 리팩토링 합니다. Keyword query 1. React-Query 설치 yarn add react-query 2. index.tsx import ReactDOM from 'react-dom/client';..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 17.
• textsms

React : React Query + Axios ( 데이터 조회 + 추가 )

React Query 1. 기존 미들웨어의 한계 (Redux-Thunk) 보완 : 보일러 플레이트 => 코드량이 너무 많음 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님 2. 강점 : 사용 방법이 쉽고 직관적임 : 보일러 플레이트 만들다가 오류 날 일이 없음 3. 주요 키워드 3가지 (1) Query : 데이터 물어보기 : axios의 get요청과 유사 (2) Mutation : 어떤 데이터 변경 : CRUD 중 CUD에 해당 : axios의 post,patch,delete와 유사 (3) Query Invalidation (★) : 위에서 본 쿼리를 인벨리데이션한다 = 무효화 시킨다. : 저녁 8시의 데이터와 저녁 9시의 데이터는 일치하지 않음 => 무효화시키고 => 9시의 데이터를 ..

• format_list_bulleted React
• · 2023. 12. 17.
• textsms

TypeScript : 투두리스트 만들기 (4단계 - Thunk + Axios )

TypeScript : 투두리스트 만들기 (3단계 - Json-server) TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit) TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이 zerotonine2da.tistory.com Lv4 Lv4의 과제에서 데이터베이스의 비동기 처리 로직을 추가합니다. Lv3의 코드에서, createAsyncThunk를 추가하여 json-server 상태 관리 로직을 다루도록 합니다. Keyword Thunk 1. redux -thunk 설치 yarn add redux-thunk ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 17.
• textsms

TypeScript : 투두리스트 만들기 (3단계 - Json-server)

TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit) TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drillin zerotonine2da.tistory.com Lv3 Lv3의 과제에서 json-server를 추가합니다. Todo를 Create, Delete, Update(완료/취소), Read(From Json-server)가 가능해야 합니다. Lv2의 코드를 고쳐서 만듭니다. Keyword DB 1. json-server 설치 y..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 16.
• textsms