개발일지

* 한입 넥스트 도서는 인프런, 유데미에 있는 "한입 크기로 잘라먹는 Next.js(v15)"강의 기반으로 제작된 도서입니다. 한 입 시리즈 대망의 Next.js한입 넥스트 강의는 작년부터 들었지만 1년여만에 드디어 책으로도 나오게 되었습니다!! 🥳( 오래 기다렸어요 ) 이 책은 Next.js를 처음 접하는 개발자를 위한 가장 친절하고 상세한 학습 가이드를 제시합니다.단순히 최신 기술만 다루는 것이 아니라, 페이지 라우터와 앱 라우터라는 두 가지 핵심 라우터 버전을 모두 깊이 있게 다루며 Next.js의 발전 과정과 각 버전의 장단점을 명확히 이해할 수 있도록 돕습니다.특히 323장의 풍부한 그림 자료와 끊김 없는 개연성 있는 설명을 통해 복잡한 서버 사이드 렌더링, 리액트 서버 컴포넌트 등의 개념을 ..

Q. React에서 useReducer 훅이 무엇이며, useState와의 차이점을 설명해주세요A. useReducer는 복잡한 상태 로직을 관리하기 위한 훅으로, 상태 변화를 액션 객체를 통해 명시적으로 처리합니다. 상태 업데이트 로직이 컴포넌트 외부에 존재하여 테스트와 재사용이 용이하며, 다수의 상태값이 연관되어 있거나 이전 상태에 의존하는 복잡한 상태 관리에 적합합니다. 반면 useState는 단순한 상태 관리에 적합하며 사용법이 간단하고 직관적입니다.  Q. React에서 forwardRef는 무엇이며, 어떤 상황에서 유용하게 사용할 수 있는지 설명해주세요A. forwardRef는 부모 컴포넌트에서 자식 컴포넌트의 DOM에 직접 접근할 수 있게 해주는 React 기능입니다.일반 컴포넌트는 ref ..

Q. React에서 동적 스타일링(Dynamic Styling)을 적용하는 방법을 3가지 이상 설명하고, 각각의 장단점을 비교해주세요.A.  인라인 스타일링 (Inline Styling)객체를 이용해 직접 스타일을 적용하는 방식으로, 상태나 props에 따라 스타일을 쉽게 변경할 수 있습니다. DOM에 직접 스타일이 적용되어 성능상 이점이 있지만, 미디어 쿼리나 의사 클래스(:hover 등)를 사용할 수 없고, 가독성이 떨어집니다.   클래스네임조건부로 클래스를 추가/제거하여 스타일을 동적으로 적용합니다. 기존 CSS 지식을 활용할 수 있고 의사 클래스나 미디어 쿼리를 사용할 수 있습니다. 다만 클래스명 관리가 복잡해질 수 있으며, 여러 조건에 따른 스타일링이 많아지면 코드가 복잡해질 수 있습니다.  C..

Q. React에서 useMemo와 useCallback 훅의 차이를 메모이제이션과 함께 설명해주세요.A. useMemo는 비용이 큰 연산에 대한 결과를 저장(메모이제이션)해 두고, 이 저장된 값을 반환하는 훅이다.useCallback은 인수로 넘겨받은 콜백 자체를 기억한다. 특정 함수를 새로 만들지 않고 다시 재사용한다. 이처럼 함수의 재생성을 막아 불필요한 리소스 또는 리렌더링을 방지하고 싶을 때 useCallback을 사용해 볼 수 있다.    Q. React에서 Strict Mode란 무엇이며, 이를 사용하는 목적과 주요 기능을 설명해주세요.A. React의 Strict Mode는 애플리케이션의 잠재적인 문제를 조기에 발견하고 더 나은 개발 방식을 적용하도록 도와주는 개발 모드 전용 기능입니다.주..

Q. React에서 서버 컴포넌트(Server Components)란 무엇인지 설명해주세요.A. 서버에서 렌더링되고 실행되는 컴포넌트 입니다.(번들링 전에 클라이언트 앱이나 SSR(Server Side Rendering) 서버와는 분리된 환경에서 미리 렌더링되는 새로운 유형)*이 별도의 환경이 바로 React 서버 컴포넌트에서의 “서버”입니다.   Q. React에서 useLayoutEffect와 useEffect의 차이점을 설명하고, 각각의 훅이 적합한 상황을 예제와 함께 제시해주세요. A. useEffect는 컴포넌트들이 render 와 paint 된 후 비동기적으로 실행됩니다.EX) 데이터 페칭, 이벤트 리스너 등록, 비동기 작업 처리 ... useLayoutEffect의 경우 DOM이 변경된 후에..

Q. Zustand에서 비동기 상태 관리를 구현하는 방법을 설명해주세요.A. Zustand에서 상태 관리는 set 함수를 사용하여 데이터 상태를 업데이트합니다. 일반적으로 async/await를 사용하여 API 호출을 처리하고, try-catch 구문으로 에러를 처리하며, 컴포넌트에서는 useEffect를 통해 데이터를 불러옵니다.  Q. React에서 컨트롤드 컴포넌트(Controlled Component)와 언컨트롤드 컴포넌트(Uncontrolled Component)의 차이를 설명해주세요.A. 컨트롤드 컴포넌트는 React가 폼 데이터를 완전히 제어하는 방식입니다. 입력값이 변경될 때마다 React의 state가 업데이트되고, 이 state가 다시 입력 요소의 값을 제어합니다. 언컨트롤드 컴포넌트는..

Q. 타입스크립트에서 Mapped Type이란 무엇인지 설명하고, 이를 활용해 객체의 모든 속성을 읽기 전용(readonly)으로 만드는 타입을 작성해보세요.A. Mapped Type은 기존 타입의 속성들을 변환하여 새로운 타입을 만드는 기능입니다. 이를 통해 모든 속성을 readonly로 만들거나, 옵셔널로 변경하는 등 타입의 속성을 일괄적으로 수정할 수 있습니다.// 모든 속성을 readonly로 만듭니다type MakeReadonly = { readonly [P in keyof T]: T[P]}interface User { name: string; age: number; email: string;}// User 타입의 모든 속성이 readonly가 됩니다type ReadonlyUser = M..

오랜만에 소프트웨어 업데이트를 진행했습니다!mac 15.1.1으로 업데이트했는데 사실 이거 때문인지는 몰라도 재시동 후에 spotlight가 정신을 못 차리더라구요 (...?) 검색이안댐.. 슥 보다가 유용한 프로그램을 소개받아서 짧게 올려봅니다  download 후  command+space bar를 Raycast로 변경 후 체크해야할 부분이 하나 더 있는데설정 > 키보드 > 키보드 단축키 > spotlight의 검색 보기 를 체크해제해두면 됩니다  * spotlight가 가끔 오류로 검색이안된다고 하는데 다른 방법이 더 있을까요??