개발작 노트

1. Warning: Prop `className` did not match" 에러 이유 Next.js랑 Styled Components를 함께 사용할 경우 발생하는 에러임서버에서 렌더링된 컴포넌트의 className이 클라이언트에서 렌더링된 className랑 일치하지 않아서 생기는 에러임이런 에러는 서버사이드 렌더링(SSR)이 발생할때 생길수 있는 에러로 초기렌더링 될때만 발생하고 그 이후엔 발생하지 않음2. Warning: Prop `className` did not match" 해결 방법해결방법은 의외로 간단함 프로젝트 파일에 next.confing.js를 변경만해주면됨 프로젝트를 만들면 초기에 아래와 같이 코드가 작성 되어있을텐데/** @type {import('next').NextConfig}..

1. Page Router특징 : Page 컴포넌트는 각각의 페이지를 정의하는 데 사용됩니다. 각 페이지는 고유한 경로를 가지며 해당 경로로 사용자가 이동할 때마다 렌더링됨장점 :각 페이지에 대해 고유한 레이아웃 및 동작을 정의할 수 있음페이지마다 필요한 데이터를 가져오고 렌더링할 수 있음필요에 따라 동적 라우팅을 구현할 수 있음단점 :페이지 간의 공통된 레이아웃을 관리하기 위해 추가적인 노력이 필요할 수 있음페이지마다 코드 중복이 발생할 수 있음2. App Router특징 : App 컴포넌트는 전체 애플리케이션의 레이아웃을 정의하는 데 사용됩니다. 일반적으로 모든 페이지에서 공통되는 레이아웃, 머리글, 바닥글 등을 포함됨장점 :전역 상태 관리 또는 레이아웃 관리를 위해 사용할 수 있음모든 페이지에 반복..

1. 소켓 통신 소켓 통신은 컴퓨터 네트워크에서 프로세스 간에 데이터를 교환하기 위한 기술 소켓 통신은 TCP/IP 프로토콜 스택 위에서 작동 TCP는 연결 지향형 프로토콜로, 데이터 전송의 신뢰성을 보장하고, UDP는 비연결성 프로토콜로, 데이터를 신속하게 보내고 받는 데 사용함 ㄱ. 소켓 통신의 순서 서버 소켓 생성: 서버는 클라이언트의 연결 요청을 수신하기 위해 소켓을 생성하고 바인딩 연결 대기: 서버는 클라이언트의 연결 요청을 기다리고 클라이언트 연결: 클라이언트는 서버에 연결을 요청하고, 서버는 이를 수락함 데이터 송수신: 연결된 클라이언트와 서버는 데이터를 주고받음 연결 종료: 통신이 끝나면 클라이언트와 서버는 연결을 종료 ㄴ. 소켓 메소드 onopen : 처음 소켓이 연결되면 실행하는 메소드..

1. 소개React 앱을 개발하면서 성능 최적화는 항상 고려해야 할 중요한 측면임. 이때 useMemo 훅은 메모이제이션을 통해 성능을 향상시킬 수 있는 강력한 Hook임이번 글에서는 React의 useMemo 훅에 대해 알아보고, 그 특징과 장점에 대해 시작해보겠음2. 특징메모이제이션: useMemo 훅은 이전에 계산된 값을 기억하여 동일한 계산을 반복하지 않고 이전에 계산된 값을 재사용하고,  이를 통해 불필요한 계산을 방지하여 성능을 향상시킴의존성 배열: useMemo 훅은 두 번째 매개변수로 의존성 배열을 받고, 이 배열에 포함된 값들이 변경될 때에만 메모이제이션된 값이 다시 계산됨3. 장점성능 향상: useMemo를 사용하면 렌더링 시간을 줄일 수 있음! 특히 계산 비용이 높거나 자주 변경되지 ..

1. 소개 React에서 상태 관리는 애플리케이션의 복잡성과 효율성을 결정짓는 중요한 요소임. 이 중에서도 React Custom Hook과 Context API는 각각의 특징과 사용 방법으로 효과적인 상태 관리를 가능하게함. 2. Custom Hook: 로직과 상태 재사용 Custom Hook은 주로 특정 컴포넌트 또는 컴포넌트 그룹의 상태와 관련 로직을 재사용하기 위한 도구임. 이를 통해 컴포넌트의 로직을 추상화하고 독립적으로 만들 수 있으며, 이를 다른 컴포넌트에서 재사용할 수 있게됨. 이는 "지역 상태"를 관리하는 데 효과적일 수 있지만, 그것이 지역 상태 관리만을 위한 것은 아님! 3. Context API: 상태 공유와 prop drilling 해결 Context API는 애플리케이션 전반에 ..

-->1주차 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: http://naver.com/"> 하이퍼링크 img 태그입니다: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요?