개발작 노트

1.  PostMan은 API Test 하기 좋은 웹페이지포스트맨을 알기전Vscode로 프로젝트 생성js파일을 하나 만든후express 설치하여 Sever PORT를 열고 아래와 같은 코드를 작성해서 API를 테스트 했었음 const url = "API URL"; const payload = { email: "아이디", password: "비밀번호!", }; try { const response = await axios.post(url, payload); console.log('결과값' ,response.data) } catch (error) { console.error( "Error:", error.respon..

1.  핸드폰 인증(다날)임시로 4000번 포트를 열어 테스트하기로함다날 인증창 불러오기핸드폰 인증결과 조회 2.  계좌 1원인증(UseB)UseB를 사용하여 1원 인증하기UseB 사이트에 접속후 회원가입하기계좌 실명인증하기 3. 1원 입금하여 계좌확인하기  4. 1원 입금시 받은 문자코드 입력 3.  신분증 인증(UseB OCR)

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. 클린코드 !== 짧은코드 클린코드는 짧은코드인가?라고 묻는다면 짧기만 하면 안된다 라고 생각한다. 그 이유는 짧음에 대한 기준이 개인마다 다르고 짧음에 집중하면 코드 본연의 기능에 대한걸 놓칠수 있다고 생각하기 때문이다 2. 클린코드 === 찾고싶은 로직을 빠르게 찾는 코드? 아직 이뜻이 정확히 이해가 되지는 않는다 하지만 이해 하기위해 공부해야하는걸 알고있다 3. 경력 1년차인 내가 생각하는 클린코드란 함수명, 변수명만 보고도 이 함수가 어떤기능을 수행하는지에 대한걸 알 수 있어야한다. 스크롤을 내리지 않고도 모든 코드가 한눈에 들어와야하고(그렇다면 짧은코드가 클린코드인가?) 예를 들어보자하나의 함수에서 하나의 기능만 수행해야한다고한다. 아래의 코드는 하나의 함수가 1가지의 일을 수행하는걸까 아니..

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

1. AWS Iot AWS IoT는 Amazon Web Services의 인터넷 물건(Things) 서비스로, 사물 인터넷(IoT) 애플리케이션을 빌드하고 관리하기 위한 플랫폼 이 서비스를 사용하면 다양한 사물(디바이스)을 연결하고 데이터를 수집, 저장, 분석하여 실시간으로 관리하고 제어할 수 있음 AWS IoT는 여러 가지 프로그래밍 언어를 지원하는 디바이스 SDK를 제공하고, 이 SDK를 사용하면 디바이스를 AWS IoT 서비스에 쉽게 연결이 가능함 디바이스와 AWS IoT 서비스 간의 통신을 지원하는 디바이스 게이트웨이이고, 이 게이트웨이는 여러 프로토콜을 지원하여 다양한 디바이스와 통신이 가능함 2. WebSocket 웹소켓(WebSocket)은 웹 브라우저와 웹 서버 간의 양방향 통신을 지원하는..

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. 맥북으로 Node 버전을 쉽게 바꾸는방법 개발을 하다 보면 Node의 버전이 높거나 낮아서 라이브러리 혹은 프레임워크가 작동하지 않는경우가 있는데 그럴때 유용하게 사용한 Node 버전을 쉽게 변경하는 방법을 포스팅 하겠습니다. ㄱ. npm n을 설치 sudo npm install -g n ㄴ. 현재 설치된 Node의 버전을 확인 sudo n ls ㄷ. Node 버전 설치방법 sudo n install 16 === Node 16 버전중 최신버전설치하기 sudo n install 18 === Node 18 버전중 최신버전설치하기 ㄹ. Node 버전 삭제방법 sudo n rm 16 === Node 16 버전 삭제하기