분류 전체보기

NextJs

[NextJs] 서버 렌더링 vs 클라이언트 렌더링

[참고: Server Components - next.js docs][참고: Server Components - react docs] React Server Components – ReactThe library for web and native user interfacesreact.dev Rendering: Server Components | Next.jsLearn how you can use React Server Components to render parts of your application on the server.nextjs.orgReact v18에서 도입되고, NextJs v13에서 기본 컴포넌트로 사용된 서버 컴포넌트에 대해서 알아보려합니다.Server Components are a new..

React

[React] 사이드 이펙트는 렌더링에 영향을 주지 말아야합니다

[참고: Synchronizing with Effects] Synchronizing with Effects – ReactThe library for web and native user interfacesreact.devSome components need to synchronize with external systems. Effects let you run some code after rendering so that you can synchronize your component with some system outside of React. 리액트 공식문서를 살펴보다보면 흥미로운 카테고리가 존재합니다.Escape Hatches 라는 탈출구라는 카테고리입니다. 여기에 속해있는 내용들을 살펴보면, ref / ..

React

[React] ref는 단순히 DOM 조작 용도가 아닙니다

[참고: Referencing Values with Refs] Referencing Values with Refs – ReactThe library for web and native user interfacesreact.devWhen you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref. React에서 `ref`에 대해서 학습할 때, 보통 직접적인 DOM 조작을 위해서 사용한다고 배웁니다.물론 맞는 말입니다. 하지만 React 팀에서는 그 용도보다 강조하는 용도가 존재합니다상태를 저장하고 싶지만, 해당 상태가 렌더링 흐름에 관..

React

[React] React에서 불변성은 왜 중요할까?

[참고: react.dev - Props and state are immutable] Components and Hooks must be pure – ReactThe library for web and native user interfacesreact.dev위의 react 공식문서는 React에서 불변성이 중요한 이유와 왜 불변성을 유지해야하는지에 대해서 설명하고있습니다.이 문서에서는 처음부터 전달하고 싶은 내용을 요약해서 제공합니다A component’s props and state are immutable snapshots. Never mutate them directly 컴포넌트의 props와 state는 불변의 스냅샷이므로, 이를 직접 수정하지 말라고 합니다.이 문장을 끊어서 보겠습니다. 컴포넌트..

기타

[shadcn-ui] shadcn-ui 깃허브에 올라온 버그 이슈 수정해보기

버그 이슈: https://github.com/shadcn-ui/ui/issues/4654#issue-2491018149 [bug]: Duplicate classNames(border) in checkbox, radio group · Issue #4654 · shadcn-ui/uiDescribe the bug If I install checkbox in CLI, I encountered duplicate border-color issue. PR#1089 said that this problem has fixed... I found accurate comment on related first bug issue, and I che...github.com버그 이슈에 대한 제 코멘트: https://github..

기타

[기타] 네이버 카페 페이지 이동 시 url에 반영하기

문제: 네이버 카페를 PC에서 이용할 때, 동일한 탭에서 페이지 이동을 할 때 URL이 반영안되는 현상문제 이유: 네이버 카페가 iframe으로 구현되어있어서참고: 네이버 고객센터 공식 답변 개별 카페에서 게시글 내용 확인 시, 주소창에는 게시글 URL이 아닌 개별 카페의 URL이 노출되는 것을 확인할 수 있습니다. 이는 카페 PC버전의 게시글 페이지가 iframe구조로 되어 있어서 입니다. 문의주신 현상도 이런 구조로 인해 발생하는 문제인데요,현재 카페 구조이미지에서 보이듯, 특정 게시글에서도 카페 메인 url로 설정되어있습니다따라서 이 페이지에서 새로고침을 하면 메인화면으로 이동됩니다 해결방법: 크롬 확장프로그램으로 페이지 이동시 Iframe 내부의 DOM 변화를 캐치하고 해당 DOM에서 url 정보..

OLD/NextJs

[NextJs] NextJs 공식문서로 학습하기 - 01 app router에서 예약어 파일

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 프로젝트를 구성하면 ..

OLD/React

React 19 문제점

몇주간 react 19에 대해서 말들이 많길래 궁금해서 찾아보았습니다대부분 깃허브나 레딧을 번역한것이기때문에 잘못된 내용이 있을수있습니다관련 링크들        - 깃허브 이슈        - Reddit React 19 변경점        - React 19에서는 suspended 컴포넌트와 같은 레벨의 컴포넌트들을 미리 렌더링하지 않도록 변경된다고함 문제 제기        - 깃허브        1. 병렬 데이터 로딩 불가능            function ParentComponent() { return ( ..

joseph0926
'분류 전체보기' 카테고리의 글 목록 (3 Page)