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/ |-..
GameCord 개요 기간: 2023.09 ~ 진행중 개발자: 1인 Github: [Github 링크] 배포: [배포링크] 기술 스택 Frontend: NextJs v14, Tailwindcss(shadcn-ui), React-Query, Clerk Backend: PostgreSQL(prisma), Redis(upstash) Additional Libraries: uploadthing, Zustand, Pusher 프로젝트 설명 GameCord는 게임에 대한 평가와 리뷰를 공유하며, 모더들을 위한 커뮤니티 기능까지 갖춘 플랫폼입니다. 주요 성과 및 기능 성능 최적화 NextJs v14의 서버 컴포넌트를 활용하여 초기 로딩시 JS 번들 크기를 최소화하고, 병렬적인 데이터 fetch를 통해 로딩 속도 향상..
GameAuction 개요 기간: 2023.05 ~ 진행중 개발자: 김영훈 (1인 개발) Github: GameAuction Repository 배포 상태: 준비 중 기술 스택 프론트엔드: React, TailwindCSS, React-Query, RTK (Redux Toolkit) 백엔드: NodeJs, 마이크로서비스 아키텍처, Redis, RabbitMQ DevOps: Jenkins, Elasticsearch, Kibana, Docker, Kubernetes 프로젝트 설명 GameAuction은 게임 거래를 위한 온라인 플랫폼입니다. 이 프로젝트는 사용자가 간편하고 효율적으로 게임을 사고팔 수 있는 환경을 제공하는 것을 목표로 합니다. 주요 성과 및 기능 사용자 인터페이스 개선 React와 Tailw..
