🧐 회고 1. 배운 것 (핵심 내용 & 인사이트) 2. 앞으로 더 조사해볼 내용 3. 앞으로 적용해야겠다고 느낀 점 4. 학습 평가 및 다짐/목표 📒 학습 내용 Next.js에서 서버 컴포넌트와 클라이언트 컴포넌트 서버 컴포넌트 (RSC, React Server

🧐 회고 1. 배운 것 (핵심 내용 & 인사이트) 컴포넌트 구조 및 이벤트 처리 방식: React의 기본 컴포넌트 구조와 이벤트 핸들링 방법을 배웠다. props: 읽기 전용 특성과 단방향 데이터 흐름에 대한 깊이 있게 조사했다. 즉시 실행 함수로 조건부 렌더링: 즉시 실행 함수를 사용해서 조건부 렌더링을 하는 방법을 새롭게 알게 됐다. 2. 앞으로 더 ...

🧐 회고 1. 배운 점 npm과 npx의 차이: npm은 패키지 설치 및 관리를 위한 도구이며, npx는 패키지를 실행하는 데 특화된 도구라는 점을 알게 되었다. 특히, npx는 설치 없이도 패키지를 즉시 실행할 수 있어 편리하다. 가상 돔의 원리와 사용 이유: 리액

오늘은 본가에 가야 해서 온라인으로 수업을 들었다. DOM, 이벤트, 타입스크립트에 대해 배웠는데, 프레임워크를 배우고 나서부터 DOM에 대한 내용을 많이 잊어버려 복습할 수 있어 의미 있었다. 하지만 내용이 방대해서 간략하게만 집고 넘어가서 지난번에 공부하고 기록해

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 3일차(컨텍스트, 생성자 함수, 프로토타입)

복습을 하며 부족한 부분을 중점적으로 필기했다.변수 선언 방법 3가지 및 차이점, 자바스크립트 프로그래밍 용어, 연습 문제 풀기를 했다. 이미 아는 내용이었지만 이론을 깔끔하게 정리할 수 있어서 좋았다. 특히 var, let, const의 차이점을 명확히 하고 호이스팅

참여 계기 원래 "프론트엔드 프로젝트 캠프 : Next.js 1기"에 참여하려 했지만 2024 관광데이터 활용 공모전 일정과 겹쳐서 신청하지 못했다. 1기에 참여한 분들의 후기도 좋아서 아쉬웠던 차에 2기도 모집한다는 사실을 알게됐다. 최종적으로 다음 3가지 내용을 배우고 싶어서 2기에 지원했다. App Router: 이전부터 서버 컴포넌트와 클라이언트 ...

지난 주에 이어서 "코스 메이커" 프로젝트의 코드를 리팩토링 할 때 9장의 기술을 적용해 보기로 했다.변수에 값을 여러 번 대입할 수밖에 없는 경우루프 변수수집 변수긴 코드의 결과를 저장했다가 나중에 쉽게 참조하려는 목적으로 쓰이는 경우이런 변수에는 값을 단 한 번만

요즘 "코스메이커" 프로젝트에서 리팩터링을 진행하고 있는데, 이번 챕터에서 나온 기술들을 직접 적용해 보기로 했다.함수를 옮길지 말지를 정하기란 쉽지 않다. 그럴 땐 대상 함수의 현재 컨텍스트와 후보 컨텍스르틑 둘러보면 도움이 된다.좋은 소프트웨어 설계의 핵심은 모듈화

State: A Component's Memory사용자가 어플리케이션의 인풋창에 무언가를 입력하면 입력 필드가 업데이트 되고, 캐러셀에서 다음을 클릭하면 이미지가 변경되며, '구매'를 클릭하면 제품이 장바구니에 담겨야 합니다. 이처럼 컴포넌트는 사용자와 어플리케이션 간

이 경우는 아주 간단한 경우로 아래 순서대로 하면 된다.추출할 코드를 잘라내서 새 함수에 붙인다.원래 자리에 새 함수 호출문을 넣는다.지역 변수를 사용하지만 다른 값을 다시 대입하지는 않는 경우다.지역 변수를 매개변수로 받는 함수로 추출하면 된다.만약 지역변수가 배열,

뉴스레터 요약 리액트 공식 사이트에 리액트 19 베타 버전에 대한 설명이 올라왔다. 이 글에는 리액트 19에서 새롭게 추가된 기능, 개선된 사항 등을 소개하고 있다. 리액트 19에서 새롭게 추가된 기능과 훅, API 로는 기능: Actions, ``Actions 훅:

4장에서는 테스트를 작성하는 방법 보다는 테스트를 작성했을 때 효율이 좋아지는 이유에 대해 이야기 하고 있다. 자가 테스트 코드의 가치 > 모든 테스트를 완전히 자동화하고 그 결과까지 스스로 검사하게 만들자. 자가 테스트: 프로그램이 제대로 된 값을 출력했는지 사람

2장에서는 리팩터링 전반에 적용된는 원칙을 이야기 하고 있다. 리팩터링의 정의부터 리팩터링을 어떤 자세로 해야하는지, 리팩터링을 하는 이유는 무엇인지, 리팩터링 시 고려해야 할 문제는 무엇인지 등을 이야기 하고 있다.리팩터링: 소프트웨어의 겉보기 동작은 그대로 유지한

3장에서는 리팩터링을 언제 적용해야 하는지를 판단하는 기준을 제시한다. 책에서는 리팩터링할 '시점'을 설명할 때 '냄새'라는 표현을 사용했다. 쓰레기를 제때 치우지 않으면 악취가 나고 문제를 일으키기 마련인데 정리되지 않은 코드도 문제를 일으킬 수 있고 찜찜함을 남긴다

문제 상황 1. 특정 페이지에 들어갈 때마다 아이콘을 불러올 때 네트워크 요청을 너무 많이 한다는 사실을 발견했다. 2. 특히 기술 스택 인풋을 열때 마다 네트워크 요청을 너무 많이 하는 것 또한 문제였다. 너무 많은 네트워크 요청을 하게되면 발생할 수 있는 문제점

이미지가 아래 그림처럼 나와야 정상임npm run dev로 실행했을 때는 정상으로 이미지가 잘 나왔음하지만 빌드를 하고 npm run preview를 하면 아래 캡쳐와 같이 원하는 이미지가 나오지 않음개발자 도구에서 css를 확인해 보니 미디어 쿼리에 적용해놓은 코드

HTML 속성과 DOM 프로퍼티는 모두 HTML 요소의 특성을 나타내지만, 다음과 같은 차이가 있음차이점HTML 속성: HTML 문서에 직접 작성되는 추가 정보로, 대소문자를 구분하지 않고 문자열로 표현됨DOM 프로퍼티: HTML 요소가 DOM 객체로 변환되면서 생성되

리팩터링은 겉으로 드러나는 코드의 기능 (겉보기 동작)은 바꾸지 않으면서 내부 구조를 개선하는 방식으로 소트프웨어 시스템을 수정하는 과정이다.1장에서는 간단한 예시 코드를 가지고 리팩터링의 전반적인 과정을 보여주고 있다.그 다음 챕터들에서 배울 내용들을 미리 맛보는 식