리액트 (4) 썸네일형 리스트형 [스터디] React 폴더 구조, FSD Atomic Design 모노레포까지 ❓폴더 구조 : 그게 뭔데지금까지 나는 폴더 구조에 대해 별 생각이 없었다.이전 회사에서는 혼자서 일했었고, 새로운 사람이 오고 나서도 프로젝트가 급박해서 다른 생각을 할 여력이 없었다. 그러다 퇴사를 하고 이직을 준비하면서 항해 부트캠프를 듣게 되었고, FSD를 알게 되었다.FSD를 공부하면서 느꼈던 것은 ‘왜 이렇게까지 해야 하지?’였다.처음 보는 개념에, 그 개념에 따라 폴더를 나눠야 하니 감이 오지 않았다.팀원들과 이야기를 나누면서 해봐도 의견이 나뉘었다.회사에서 프로젝트 진행하기도 바쁜데 이거 하나까지 이렇게 정해야 한다고?라는 생각에 ‘FSD는 별로다’라고 정해버렸다. 그리고 이 생각을 끝으로 폴더 구조는 다시 저 멀리 사라졌다. ‼️ 깨달음의 순간 그러다 새로운 직장에 들어오게 되고, 다른.. React 19 톺아보기 - use 스터디의 두 번째 주제로 정한 hook은 use였다.이번 주는 갓생 살기로 다짐해서 나름 열심히 공부해 봤다. 1. Useconst value = use(resource); Promise나 Context와 같은 데이터를 참조하는 hook. 다른 React hook과 달리 use는 조건문과 반복문 내부에서 호출이 가능하다.다만, 컴포넌트 또는 훅 안에서만 호출해야 한다. resource : 참조 데이터. Promise나 Context일 수 있다.Promise나 Context에서 참조한 값을 반환한다. 1) Context 참조import { createContext, useState } from "react";import ThemeDisplay from "../components/ThemeDisplay".. React 19 톺아보기 - useTrasition 항해 플러스 부트캠프가 완료되고, 항해 사람들끼리 비대면 스터디를 진행하기로 했다.주제는 React19 톺아보기로 한 달 동안 진행하기로 했다! 신규 메서드 혹은 hook을 살펴보고,실무에 도입할만한 메서드가 있는지, 기존 코드를 어떻게 효율적으로 개선할 수 있을지 고민하는 것이 목표이다. 첫 주자차에는 hook을 살펴보며 어떤 변화가 있었는지 이야기하는 시간을 가졌다.대체로 "굳이 왜 사용해야 하는지 모르겠다"는 의견이 강했다.그래서 그 중 메서드들을 몇 개 꼽아서 실제로 구현해 보기로 했다.사용해 보면 다를 수도 있으니까! 처음 선택한 메서드는 useTransition이다. 1. UseTransitionconst [isPending, startTransition] = useTransition() u.. [Next] Next.js 란? SSR, CSR 1. Next.js Next.js 는 리액트(react)로 만드는 서버 사이드 렌더링(SSR, Server Side Rendering) 프레임워크이다. 서버 사이드 렌더링(SSR)은 말 그대로 서버에서 자바스크립트를 렌더링 하는 것을 의미한다. 리액트의 경우 클라이언트 사이드 렌더링(CSR, Client Side Rendering)이기 때문에 자바스크립트를 클라이언트에서 로드한다. 즉, 사용자가 웹사이트를 요청하면 우선 빈 html을 가져오고 스크립트를 로딩한다. 따라서 자바스크립트가 모두 로드될 때까지 기다려야만 웹을 볼 수 있기 때문에 첫 로딩 시간이 오래 걸리고, 검색 엔진 최적화(SEO, Search Engine Optimization)에 취약하다. 반면, 서버 사이드 렌더링(SSR)의 경우 서버.. 이전 1 다음
