NextJs 공식문서 Getting Started: Project Structure | Next.jsA list of folders and files conventions in a Next.js projectnextjs.orgGithub GitHub - joseph0926/next-docs: nextjs docs로 학습하는 레포입니다nextjs docs로 학습하는 레포입니다. Contribute to joseph0926/next-docs development by creating an account on GitHub.github.com app router에서 예약어 파일들 1. layout.tsx layout이란? layout 파일은 해당 경로(폴더)에 공유되는 UI입니다NextJs 프로젝트를 구성하면 ..
몇주간 react 19에 대해서 말들이 많길래 궁금해서 찾아보았습니다대부분 깃허브나 레딧을 번역한것이기때문에 잘못된 내용이 있을수있습니다관련 링크들 - 깃허브 이슈 - Reddit React 19 변경점 - React 19에서는 suspended 컴포넌트와 같은 레벨의 컴포넌트들을 미리 렌더링하지 않도록 변경된다고함 문제 제기 - 깃허브 1. 병렬 데이터 로딩 불가능 function ParentComponent() { return ( ..
React에서 상태를 다루다 보면 이전 상태에 기반해서 상태를 업데이트를 해야하는 경우가 많습니다 예를들어 토글 버튼이 있을 수 있습니다.버튼을 클릭할때마다 드롭다운이 나타나고 사라지는 예시가 될 수 있습니다. 그럴때 아래와 같이 코드를 작성할 수 있습니다.const [isOpen, setIsOpen] = useState(false)const dropdownHandler = () => { setIsOpen(!isOpen)} 하지만 위와 같이 작성한 코드는 React 팀에서 권장하는 코드가 아닙니다.React 공식문서 Updating state based on the previous state useState – ReactThe library for web and native user interfacesr..
렌더링이란? 일반적인 렌더링 의미: 초기 입력을 받아 최종적으로 사용할 수 있는 결과물을 생성하는 과정 리액트에서 렌더링 의미: 이전 스냅샷과 최신 스냅샷의 차이를 찾아(리렌더링) + 차이가 존재하면 DOM을 업데이트(리페인팅)하는 프로세스 리렌더링은 리페인팅이 아닙니다. 리렌더링은 무엇을 변경해야 하는지 파악하는 React의 프로세스 중 하나입니다. 리페인팅은 DOM이 변경될 때마다 브라우저가 관련 픽셀을 다시 그리는 프로세스입니다. 즉, 리렌더링이 일어나도 스냅샷간의 차이가 없다면 DOM을 업데이트하지 않습니다. 리렌더링 !== 리페인팅 리액트는 아래의 과정으로 리렌더링을 수행합니다 React는 렌더링이 될 때 스냅샷을 찍습니다. 그후 상태 변경등으로 인해 이전 스냅샷과 최신 스냅샷의 차이가 발생하면..
작년 처음 블로그를 시작하면서 React와 Javascript 정리를 블로그에 올렸었는데, 1년이 지나면서 현업에서 경험한 것들과, 추가적인 공부한 것들을 포함하여 React와 Javascript의 어려운 부분들을 다시 정리 해보려합니다. 1. 객체에서의 this 객체 안에서 this를 사용할때, this가 나타내는 것은 해당 객체를 뜻합니다. const obj = { name: "asdf", greet: function() { console.log(`This is `) } } obj.greet() // This is: {name: 'asdf', greet: ƒ} 하지만 이걸 함수에서 바로 나타내보면 function greet() { console.log("This is: ", this) } greet(..
- 사용 기술 docker, kubernetes, tilt, npm package - 과정 각 서비스에서 공통으로 사용될 로직등을 npm package로 배포했습니다. 배경 마이크로서비스를 구축하면서 공용으로 사용될 파일들이 매우 많았습니다 (ex: 타입, 에러 헨들링 등.,,) 이를 각 서비스마다 중복되게 구현하는 것보단, 하나의 패키지로 만드는게 낫다는 판단을 하였습니다. 기대효과 각 서비스에서 별도의 중복 로직 없이 npm install을 통해 공용 로직 사용 가능 문제 - 해결 문제 처음에는 공용 패키지를 private하게 관리하고 싶어서 .npmrc를 이용하여 http://npm.pkg.github.com/ 로 publish를 계획하였습니다 하지만, 도커화하면서 계속되는 인증 문제가 발생하였습니..
1. 사용 기술 - NextJs v14, Tailwind(shadcn-ui) 2. 프로젝트 구성 - 초기 next 프로젝트 설치 npx create-next-app@latest - 필요 라이브러리 설치 npm i zod // 유효성 검사 // shadcn-ui npx shadcn-ui@latest init npx shadcn-ui@latest add input form - 폴더 구조 src/ |-- app/ |-- layout.ts |-- (root)/ |-- page.tsx |-- layout.tsx // 메인 레이아웃을 사용하는 페이지들 |-- sign/ |-- page.tsx |-- layout.tsx |-- api/ |-- components/ |-- auth/ |-- ui/ |-- lib/ |-..
