FrontEngineer JungBam

HTTP란? HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜 (HTTP는 기본적으로 TCP/IP 기반 프로토콜) HTTP 메시지 (구조 : start line - headers - black line - body) - request는 클라이언트가 서버에 보내는 요청 start line의 method에 요청 의도를 담고 있고, headers에는 쿠키를 포함한 추가정보를 담고 있다. body에는 request에 전송하는 데이터를 담고 있다. - response는 이 request에 대한 응답으로 서버가 클라이언트에 보내는 메시지 start line에는 Status Code를 포함한 정보를 갖고 있고 body는 서버에서 클라이언트로 보내는 데이터가 담겨있다.

캐시란? 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시장소를 이야기 한다. - 장점 : 자주 사용되는 데이터나 반복되는 연산에 대하여 원래 데이터를 접근하는 것보다 빠르게 꺼내서 사용할 수 있다. - 단점 : 임시로 저장하는 과정에서 리소스가 사용되기 때문에 불필요한 캐시가 많다면 역으로 캐시 메모리가 늘어남에 따른 저장 공간의 낭비가 될 수 있다. HTTP 캐시 사용하기 서버에 요청되어 얻어진 값을 캐싱할 수 있는데, 웹 브라우저가 요청하는 리소스가 캐시에 있다면 서버에 요청을 보내지 않고 캐싱되어 있는 리소스를 읽어와 사용하게 됩니다. 이는 서버에서 Cache-Control에 max-age를 설정하여 관리할 수 있습니다. webpack 캐시 사용하기 webpack에서 번들링하는 과정에서 브라우..

프레임워크란? 전체적인 흐름을 스스로가 주도하는 경우를 이야기합니다. 쉽게 말하면 프레임워크가 정해놓은 양식과 규칙을 사용자가 따라야 하는 것입니다. 라이브러리란? 전체적인 흐름을 주도하는 것이 라이브러리 스스로가 아닌 사용자에 있습니다. 즉, 사용자가 라이브러리를 사용자의 입맛에 따라 쉽게 변경하고 다른 대체 라이브러리로 사용할 수 있다는 것입니다. 그렇다면 React는 프레임워크일까? 라이브러리일까? React의 라이프사이클을 사용자가 조작하여 흐름을 바꿀수 있는 점에 있어서 React는 라이브러리라고 생각을 한다. 공식 홈페이지에서 또한 라이브러리라고 소개한다.

매개변수란 함수가 호출될 때 인수로 전달된 값을 함수 내부에서 사용할 수 있도록 해주는 값을 이야기 한다. 인수와 매개변수를 간단하게 짚고 넘어가자. const add = (a, b) => a+b add(1,2) 라고 했을 때 파라미터는 a와 b를 이야기하는 것이고 인수란 1과 2를 이야기 하는 것이다. 그렇다면 arguments란 무엇일까? function으로 불려지게 된다면 들어오는 인수들이 arguments라는 객체에 들어오게 되고 function 내부에서 이 arguments 객체를 통해서 들어온 값에 접근할 수 있다. 예전에 화살표 함수를 공부하면서 arguments가 없다라는 것이 기억난다. 화살표 함수는 fucntion으로 만들어진 친구들과 달리 익명함수이고, this가 바인딩되어 있지 않아..

호이스팅이라는 개념을 알기 위해서는 자바스크립트에서의 변수 선언에 대해서 알 필요가 있다. const a = 1 이라는 코드를 쳤다고 했을 때, 이는 선언과 초기화, 할당을 동시에 진행한 것이다. 선언 : const a 초기화 / 할당: a = 1 왜 이 개념을 먼저 알아야 하냐면 호이스팅이란 자바스크립트 인터프리터가 동작할 때에 선언된 것들을 싹다 끌어올리는 것을 이야기 한다. 중요한 점은 각각이 선언하는 방식에 따라 호이스팅 된 결과가 다르다는 점이다. var로 선언된 변수와 const, let으로 선언된 변수는 각각 다르게 동작하는데 var의 경우에는 호이스팅되어질 때에 undefined로 값을 초기화하기 때문에 값을 할당하는 코드라인 이전에는 undefined가 출력된다. const와 let은 E..

제어 컴포넌트 HTML에서 input, textarea, select와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 속성에 유지되며 setState()에 의해 업데이트 됩니다. 우리는 React state를 '신뢰 가능한 단일 출처'로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 '제어 컴포넌트'라고 합니다. 여기서 잘 이해가 되지 않는다. 먼저는 state를 신뢰 가능한 단일 출처로 만들어 두 요소를 결합하고 그러면 폼을 렌더링하는 ..

리액트가 업데이트를 시도하는 경우 1. props가 변경될 때 2. state가 변경될 때 3. 사용하고 있는 전역상태가 변경될 때 4. 부모 컴포넌트가 리렌더링될 때 즉, state와 props는 리렌더링에 관여하는 것이라는 점과 어떤 상태에 대해서 클라이언트 사이드의 메모리 위에 값을 저장하는 값이라는 점에서 공통되지만 props는 자식 컴포넌트가 부모 컴포넌트에게서 받은 값으로 자식컴포넌트는 컴포넌트 내부에서 업데이트를 시킬 수 없지만 state는 컴포넌트 내부 자체적으로 setState를 통해 업데이트 할 수 있다는 차이가 있다.

RESTFUL이란 REST API의 설계방식을 따라서 설계된 API 구조를 말한다. RESTFUL이란 결국 정형화된 방식을 준수함으로써 서로 협업하기 쉽게 해주는 것 같다. REST API 설계의 가장 대표적인 방법은 GET, POST, DELETE, PUT, PATCH로 CRUD에 대한 API 설계하는 것이다. 예를 들어 모든 API를 POST로 작성한다고 하더라도 문제될 것은 없으나 단지 RESTFUL하지 않은 설계가 될 뿐이다. 실제 RESTFUL API를 깐깐하게 지키는 곳은 크게 없는 것 같다. 카카오 로그인 API를 보더라도 다 POST로 작성되어 있다.. 결국 RESTFULT한 지키지 않는다고 문제될 것은 없는 취향의 문제? 라는 생각이 든다.