NODE_ENV 환경변수는 CRA 내부에서 자체적으로 설정되어 변경할 수 없다.빌드 시점에 웹팩 플러그인으로 process.env.NODE_ENV에 해당하는 곳을 아래 해당 문자열로 모두 대체한다.https://itchallenger.tistory.com/11

7월부터 시작한 항해가 드디어 끝났다.어떻게 3개월이 흘렀는지 모를 정도로 정신없이 지냈는데 항해99 전후로 달라진 내 실력과 시력을 보면 열심히 했구나 싶고..항해 시작 전 내 결심은 딱 하나였다.질릴 정도로 코딩해서 제일 잘하거나, 제일 열심히 하는 사람이 되자.9

SSE란 SSE(Server Sent Event)란 서버에서 클라이언트로 데이터를 보내는 단방향 통신을 의미한다. 실시간 알림처럼 서버가 클라이언트에게 데이터를 '단방향'으로 전달해야 할 때 사용한다. (실시간 알림에서 양방향 통신은 불필요) SSE는 첫 연결 시

access token, refresh token이 필요한 이유 : accessToken, refreshToken서버에 request를 보낼 때 access token이 만료될 경우 그에 대한 error response를 받고 바로 토큰 갱신 request를 보내야 한

JWT 토큰이란 JWT(JSON Web Token)이란 선택적 서명 및 선택적 암호화를 사용해 데이터를 만들기 위한 인터넷 표준이다. 이 토큰들은 한쪽 당사자의 비공개 키(일반적으로 서버의 비공개 키)에 의해 서명이 가능하며, 당사자는 최종적으로 토큰의 유효성을 확인

Local State: (client) 리액트 컴포넌트 안에서만 사용되는 state Global State: (client) Global Store에 정의되어 프로젝트 어디에서나 접근할 수 있는 stateServer State: (server) 서버로부터 받아오는 st

socket.io로 채팅 구현하기 마지막 실전 프로젝트 기획 단계에서 단체 채팅 기능을 넣기로 결정하면서 socket.io를 사용하게 되었다. 전에 Firebase를 사용해서 채팅을 만든 적은 있지만, 직접 웹소켓을 다루면서 만든게 아니라 새로운 기분이었다. 웹소켓

검색 기능 구현 방식에 대해 여러 가지 방식을 고민하게 되었다.GET 요청으로 검색 대상 데이터를 한번에 불러온 다음에 그 데이터 내부에서 검색창 입력 키워드로 찾는다.검색 키워드마다 GET 요청을 보낸다.검색 키워드마다 GET 요청을 보내면 불필요한 서버 통신이 많지

인스타그램 클론코딩 프로젝트 진행 중 클라이언트에서 백엔드로 이미지를 전송하려면 FormData로 보내야한다는 것을 알게 되었다.클라이언트와 서버 간 통신은 HTTP 메시지를 통해 이루어지는데, 이미지 파일 또한 문자열로 이루어져 있으므로, 이미지 파일을 jpg등의 파

소셜 로그인게시글 GET, POST, DELETE 구현게시글 댓글 GET, POST 구현게시글 무한스크롤게시글 이미지 캐러셀게시글 텍스트 줄바꿈 표현, 해시태그 표현사용자 팔로우해시태그 검색다중 이미지 업로드clone_wireframe_01clone_wireframe_

mini_prototype_01mini_prototype_02mini_prototype_03mini_prototype_04mini_prototype_05mini_prototype_06

밀집 배열 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조. 배열의 요소는 하나의 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다.배열의 요소가 동일한 크기를 가지며 빈틈없이 연속적으로 이어져 있으므로, 효율적으로 빠르게 동작한다.희소 배열

실행 컨텍스트란, 실행 가능한 코드(전역 코드, 함수 코드)가 실행되기 위해 필요한 환경실행 컨텍스트는 물리적으로 객체의 형태이다.변수객체전역 코드 실행 시 생성되는 전역 컨텍스트와 함수를 실행할 때 생성되는 함수 컨텍스트가 가리키는 객체가 다르다. 클로저란 함수와 그

클래스 기반 객체지향 프로그래밍 언어(Java, C++ 등)는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성하지만, 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이 객체를 생성할 수 있다.자바스크립트의 모든 객체는 자신의 부모 역할을 담당

원시값을 객체처럼 메서드로 접근할 수 있도록 '래퍼 객체'를 만든다. (문자열, 숫자, 불린, 심볼의 메서드와 프로퍼티에 접근할 수 있도록 언어 차원에서 허용)원시값이 메서드나 프로퍼티에 접근하려 하면 추가 기능을 제공해주는 특수한 객체, "원시 래퍼 객체(object

리액트 내 모든 컴포넌트는 초기화, 업데이트, 소멸 순으로 생명주기를 가지며 각 단계에서 호출되는 메서드를 '생명주기 메서드'라 한다.초기화 단계 : 컴포넌트 객체가 최초 생성 될 때 한번 수행되는 과정업데이트 단계 : 컴포넌트가 마운트 된 이후 컴포넌트의 속성값(pr

객체란, 다양한 타입의 값(원시값 or 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조객체를 변수에 할당하면 변수에는 '참조 값'이 저장된다.객체는 0개 이상의 프로퍼티로 구성된 집합으로, 프로퍼티는 key-value의 조합으로 구성되어 있다.객체 리터럴의 { }

redux, axios, json-server, react-router-dom을 활용한 투두리스트 만들기재사용 가능한 컴포넌트 만들어서 활용하기아직 컴포넌트를 재사용하는 것이 익숙하지 않기 때문에 가장 많이 활용되는 input, textarea, button eleme

서버는 클라이언트의 상태를 보존하지 않는다. 클라이언트 요청에 서버가 응답하면 연결을 끊는다.클라이언트는 서버가 요청을 이해하고 응답하는데 필요한 모든 정보를 제공해야 한다.→ HTTP 환경에서 클라이언트의 상태와 정보를 기억해야 할 때 쿠키, 세션 등을 사용한다.장점

변수란? 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 or 그 메모리 공간을 식별하기 위해 붙인 이름 (값의 위치를 가리키는 상징적인 이름) | > | | :---: | | 10 (메모리 주소.. 0X0000F2) | | ... |