DevLog:-)

Learned1. 서버 컴포넌트와 클라이언트 컴포넌트의 차이서버 컴포넌트 (RSC: React Server Component)데이터 페칭 역할.async 함수를 기본으로 사용할 수 있음.use client 키워드 없이 작성된 컴포넌트는 기본적으로 서버 컴포넌트.클라이언트 컴포넌트 아래에는 존재할 수 없음. 만약 클라이언트 컴포넌트 아래에 위치하면 더는 서버 컴포넌트로 작동하지 않음.클라이언트 컴포넌트 (RCC: React Client Component)사용자와의 상호작용을 처리 (예: 버튼 클릭, 상태 관리 등).useState, useEffect 같은 클라이언트 훅 사용 가능.use client 키워드를 명시해야 클라이언트 컴포넌트로 동작.초기 렌더링은 서버에서 진행되지만, 이후 클라이언트 사이드에서 ..

프로젝트 캠프 : Next.js 2기를 수강하며 배운 내용을 정리했습니다. 웹 개발에서 SEO(Search Engine Optimization)는 검색 결과에서 웹사이트 노출을 극대화하는 중요한 요소입니다. 특히 B2C 기업처럼 검색 트래픽이 중요한 비즈니스라면, 검색엔진이 잘 이해할 수 있는 구조로 웹사이트를 개발하는 것이 필수입니다.하지만 React와 같은 CSR(Client-Side Rendering) 프레임워크는 SEO에 불리할 수 있습니다. SEO 최적화의 핵심 원리와 Next.js를 활용해 이를 극복하는 방법을 정리했습니다.😊 CSR의 한계와 SEO 문제CSR 방식에서는 초기 HTML이 거의 비어 있습니다. React 사이트의 소스코드를 보면 태그만 포함된 것을 확인할 수 있습니다. 이는 ..

Learned리액트의 불변성과 상태 업데이트, 그리고 리듀서와 Context API1. 불변성이란 무엇인가?불변성(Immutable): 데이터의 원본을 변경하지 않고 새로운 데이터를 생성하여 업데이트하는 것.리액트는 불변성을 기반으로 상태 업데이트를 감지한다.기존 주소값이 변경되지 않으면 React는 상태가 업데이트되지 않았다고 파단한다.따라서 새로운 참조값(주소)을 전달해야 화면이 변경된다.2. 왜 불변성을 유지해야 하는가?React는 상태의 참조값(주소)이 변경되는지 확인하여 리렌더링을 트리거한다.같은 참조값(주소)을 유지하면 React는 상태가 변경되지 않았다고 판단하여 화면에 변화가 발생하지 않는다.이를 위해 객체나 배열 같은 참조형 데이터는 새로운 값을 생성하여 업데이트해야 한다.3. 불변성을 ..

Liked운이 좋게 프로젝트 Next.js2기에 참여하게 되었다. 3주 동안 JavaScript, TypeScript, React, Next.js을 공부하고 기업 프로젝트를 진행하게 된다. JavaScript와 React는 학습과 프로젝트 경험이 있어 복습을 하고 다시 개념을 다지기 좋은 기회라 생각이 든다. 또 Next.js은 단순 프로젝트 경험만 있어 아쉬웠는데 개념적인 부분부터 탄탄한 학습을 할 수 있을 거 같아 기대가 된다.  첫 주는 JavaScript 를 위주로 진행되었다. 강사님께서 정말 잘 설명해 주셔서 머릿속에서 떠돌고 있던 개념이 유기적으로 잘 정리된 느낌이어서 좋았다👍모던 자바스크립트 스터디를 하면서 어려웠던 개념도 확실히 기초부터 하니 이해하게 된 거 같다. 1주일 동안 배운 내용..

picky 프로젝트 개발시에 토스트가 두 번씩 출력되는 문제를 발생했습니다.서칭 결과 이 문제는 React의 개발 단계에서만 발생하는 현상으로, Strict Mode의 특성 때문에 생기는 일입니다. 이 글에서는 왜 이런 현상이 발생하는지, 그리고 이를 어떻게 해결할 수 있는지에 대해 알아보았습니다.😊 Strict Mode란?React의 Strict Mode는 개발 단계에서 잠재적인 문제를 감지하고 경고를 제공하기 위해 사용됩니다. React 공식 문서에 따르면, Strict Mode는 안전하지 않은 코드 패턴을 확인하고 경고하며, 일부 함수형 컴포넌트의 이펙트를 두 번 호출하는 동작을 포함합니다.Strict Mode 주요 기능:컴포넌트의 사이드 이펙트 감지useEffect 클린업 함수 확인React 렌..

이번 투표플랫폼 Picky프로젝트에 메타데이터를 적용하면서 난감했던 부분은 바로 잘 적용되었는지 검증하는 과정이었습니다. sns 공유상 메타데이터가 잘 적용되었는지 확인하기 위해서는 배포 후의 결과물을 공유하는 과정이 필요했고 이를 위해서는 한번의 테스팅을 위해commit → push → PR → merge → main building → sns 공유위의 과정을 거쳐야했습니다. 근데 여기서 테스팅 결과 어떠한 문제로 적용이 잘 안되었다면 이 과정을 계속 반복해야한다는 것이 너무 번거롭게 느껴졌습니다.  이에 로컬 개발환경에서 쉽게 메타데이터 적용결과를 확인할 수 있는 방법을 구글링을 통해 발견했습니다. 여러 방법 중 제가 채택한 방법을 설명드리겠습니다!😊 1. Chrome Extension 활용하기로컬..

Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 손쉽게 구현할 수 있도록 도와줍니다.Next.js를 사용할 때 중요한 요소 중 하나가 메타데이터(metadata)인데요. 최근 투표 플랫폼 Picky 프로젝트에서 Metadata를 적용하게 되어 적용기를 작성하게 되었습니다!Metadata란?메타데이터(metadata)는 웹 페이지에 대한 정보를 설명하는 데이터입니다. 보통 HTML 문서의 태그 내에 포함되며, 웹 브라우저와 검색 엔진이 페이지를 이해하고 적절히 처리할 수 있도록 도와줍니다. 대표적인 메타데이터 요소로는 title, meta 태그의 description, keywords 속성 등이 있습니다. Metadata와 SEOSEO(검색 엔진 최적화)는 웹사이트가 검색 엔진..

한 달 동안 소셜 네트워크 서비스 구현 프로젝트를 진행했다. 그 한 달간의 회고이다. 😅긴장되는 첫 프로젝트 웹 프론트엔드 개발 프로젝트는 처음이어서 긴장을 많이 했다. 프로젝트 기간 이전에 온라인 강의를 들으면서도 계속 프로젝트를 걱정했던 거 같다. 그러던 중에 팀에서 일찍이 팀프로젝트를 준비하는 것이 어떠냐는 의견이 나왔고 공식 일정보다 일찍 프로젝트를 시작하게 되었다. 걱정이 있었던 지라 일찍 시작하는 게 심적으로 부담도 적고 여유롭게 마칠 수 있을 것 같아 너무 좋았다. 본격적 팀프로젝트에 앞서 팀 역할로 서기를 맞게 되었다. 초반에는 팀원분들이 말씀하시는 중간에 끊기가 힘들어 놓치기도 했고 익숙하지 않은 개발 용어에 당황할 때도 있었다. 점점 시간이 지나면서 나름의 정리하는 방법도 생기고 팀원분..

✔️이번 단위기간에 공부한 것들 vue react ✔️과제 회고 영화검색페이지(Vue) 배포링크 타입스크립트와 Vue.js을 활용하여 영화 검색 사이트를 만들었다. 라우터 설정과 관리가 중요했던 과제인 거 같다. 라우터 관련 코드리뷰를 많이 받으면서 route구조를 더 깔끔히 하고 효율적인 렌더링 방식으로 리팩토링할 수 있었다. 또 이번에 Tailwind CSS 도 사용하면서 새로운 스타일 툴도 사용해 본 좋은 경험이었다. 코드가 너무 길어지고 복잡해지는 단점이 있지만 따로 className을 설정하지 않아도 되어 장단점이 명확한 라이브러리 인 거 같다. 또 이번에 코드리뷰를 진행하면서 meta태그도 알게 되었다. 이후 과제나 프로젝트에서 meta태그를 적극적으로 활용해봐야겠다. Tooltip 컴포넌트 ..

이번 단위기간에 공부한 것들 VanillaJS typescript vue 프로젝트 & 과제 회고 노션클로닝 프로젝트 VanillaJS를 이용해 첫 번째 프로젝트인 노션 클로닝 프로젝트를 진행했다. 상태관리부터 디렉토리 구성, 컴포넌트 간의 데이터의 흐름 파악 등 공부하고 고려할 부분이 너무 많아서 쉽지 않은 과정이었다. 코드 상의 사소한 실수로 삽질도 하면서 시간 투자를 많이 한 거 같다. 아직 부족한 부분이 많아서 손봐야 할 부분이 많지만 기본 요구사항을 하나하나 지켜서 결과물을 만들고 배포까지 하니 확실히 뿌듯하고 재밌었던 같다. 배포 link scss 활용 유튜브 클로닝 scss과제를 통해 유튜브 클로닝을 했다. 확실히 보이는 부분을 다듬는게 흥미로운 것 같다. scss에서 제공하는 기능은 css와..