Recoil : 리액트 전역상태관리 라이브러리

*상미튜터님 리코일 강의* 1. Atoms (데이터 변수 하나 만들어 놓기 => 다른 곳에서 사용 하기) 2.Selectors (atoms 값을 변형해서 사용 가능) * 리덕스와 차이점 1) 리덕스 : 보일러 플레이트 코드를 많이 작성해야함 2) 리코일 : 직관적이고 간단한 구조 (React의 useState 훅과 유사) 1. 설치 yarn add recoil 2. 설정 프로파이더 같은 recoilRoot로 감싸주기 -> 최상위 루트 컴포넌트를 ( App.jsx : Router 설정하는 구간에) function App(){ return 3. 전역관리를 위한 변수 atom - userId라는 이름을 다른 곳에서 쓸 건데, 여러 변수 중에 구분값은 키(key)야, default는 처음 초기값 느낌이야 4. ..

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

React : 리액트 쿼리 LifeCycle (+ isLoading, isFetching)

★ 제천 튜터님: 리액트쿼리의 찐 동작원리 ★ 1. 리액트 쿼리 리액트 쿼리 : 서버 상태관리를 쉽게 도와주는 라이브러리 ▼ ▼ 서버상태 : 서버에 요청하고 응답받는 모든 과정과 연관된 데이터들 (1) fetching : 서버에서 데이터 받아오기 (2) caching : 서버에서 받아온 데이터를 따로 보관 => 동일한 데이터가 단 시간 내에 다시 필요하면 서버 요청 없이 보관된 데이터 꺼내서 사용 (3) synchronizing : 서버상 데이터와 보관 중인 캐시 데이터를 동일하게 만들기 (동기화) (4) updating : 서버 데이터 변경 용이 => mutation & invalidateQueries 리액트 쿼리 미사용 : useState + useEffect 사용 const [todos, setTo..

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

[프로그래머스 | javascript] 푸드 파이트 대회

function solution(food) { let answer = [0]; for (let i = food.length; i > 0; i--) { let cnt = Math.floor(food[i] / 2); for (let j = 0; j < cnt; j++) { answer.push(i); answer.unshift(i); } } return answer.join(''); } //food[0] :물 (항상 1) //food[1] :1번 음식 개수 //food[2] :2번 음식 개수 //1번음식 /2 = 갯수를 양쪽에서 증가 //0번째는 물이니깐 i=1 //let i =0 ; i 반복문을 역순으로 해야함 끝.

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

next.js : 데이터 변경 및 삭제

데이터 변경 (클라이언트 컴포넌트) 1) create 하는 화면(클라이언트 컴포넌트) 2) read 하는 화면(서버 컴포넌트) 1. page.js 파일 생성 (변경) > update폴더 > [id]폴더 > page.js 파일을 만들어줌 2. page.js 코드 구현 (변경) (1) create 하는 화면 코드 가져오기 (2) read 하는 화면(서버 컴포넌트) --> read하는 부분을 useEffect로 가져와야함 update > [id] > page.js 'use client'; import { useParams, useRouter } from 'next/navigation'; // 넥스트 13버전 (app router) import { useEffect, useState } from 'react';..

• format_list_bulleted 카테고리 없음
• · 2023. 12. 20.
• textsms

next.js : 서버 컴포넌트에서 클라이언트 컴포넌트 분리

update하기 위해서는 해당 id를 알아야함 => useParams 를 사용해야함 (client 컴포넌트 훅임) --> 서버 컴포넌트에서는 사용 불가능 => 클라이언트 컴포넌트로 변경할 수 있지만, 그렇게 되면 서버 컴포넌트의 장점을 잃어버림 (가능한 서버 컴포넌트 위주로 사용하기!) ==> 특정 부분만 클라이언트 컴포넌트화 시키기! [layout.js] (변경 전) Create Update (변경 후) function Control() { return ( Create Update ); } export default async function RootLayout({ children }) { {children} ▶ 컴포넌트화 시키기 [layout.js] import { Control } from './C..

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

Next.js : 데이터 조회 (서버 컴포넌트) & 새글 작성( 클라이언트 컴포넌트) + 캐시

1. 읽기 (READ) : 서버 컴포넌트 read 폴더 > [id] 폴더 > [page.js] (1) 여기는 데이터를 읽어서 출력할 뿐! 사용자와 상호 작용 x => server 컴포넌트 이용! (2) 데이터를 가져올 때는 async + await로 변경 export default async function Read(props) { const response = await fetch(`http://localhost:9999/topics/${props.params.id}`); const topic = await response.json(); return ( Read {topic.body} ); } 2. 오류 해결 (.next 파일 삭제 후 재실행) ▶ 해결 (1) dev 서버 재실행 : npm run de..

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