1️⃣ React 앱 배포 Overview 인터넷에서 내가 만든 앱에 접근할 수 있어야 한다. 지속적으로 앱을 수정하고 배포해야 한다. Public IP 주소로 직접 접근할 수 있도록 해야 한다. IP를 부여받은 서버에 React 앱을 배포 → 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달 → 사용자는 IP를 통해 앱에 접근 ▶ React 앱 배포 프로세스 1) IP를 부여받은 서버(VM)에 React 앱을 배포 2) 앱을 빌드하고, 웹서버를 세팅 3) 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달 4) 사용자는 필요한 데이터를 받아 앱을 로딩 💡 프론트엔드 앱 배포 시 유의할 점 - 서버와 통신 시, CORS가 허용되었는지 점검해야 한다. - 브라우저, 디바이스별로 앱이 정상적으로 동작하는지 점..
1️⃣ Server Side Rendering 소개 ▶ Server Rendering , Client Side Rendering, Server Side Rendering Server Rendering - React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드했다. - 클라이언트는 별도의 처리 없이 웹페이지 노출한다. Client Side Rendering - Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 되었다. - 데이터는 XML, JSON 형태로 클라이언트에 전송된다. 장점 - CSR은 자바스크립트만으로 완전히 페이지를 만들 수 있다. - 자바스크립트를 최대한도로..
1️⃣ React 테스팅 ▶ 코드 테스트가 필요한 경우- 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 한다.- 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 한다.- 코드를 리팩토링하면, 원래대로 동작하는지 테스트한다. 리액트 앱의 컴포넌트가 늘어날수록 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다.→ 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다. ▶ 테스팅 코드 작성의 이점- 언급한 상황들에 대한 테스팅 코드를 작성하여 미연의 에러를 방지한다.- TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상한다.- 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다.- ..
Currying과 Composition 모두 함수형 프로그래밍의 핵심들이다. Currying - f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합되도록 변환하는 것 - currying은 함수를 호출하지 않는다. 변환한다. - 함수의 재사용성을 높이기 위해 사용된다. const order = store => menu => console.log(`${store}에서 ${menu}를 주문`) // 호출 order('카페')('아메리카노'); order('카페')('라떼'); 위 함수를 ES5로 바꾸면 아래와 같다. function order(store) { return function (menu) { console.log(`${..
나는 React를 처음 배울 때부터 useState나 useEffect 등의 Hooks을 사용하여 함수 컴포넌트를 작성하는 것부터 배웠지만 React에서 Hooks를 사용한 함수형 프로그래밍이 가능하게 된 것은 2019년 React 버전 16.8부터로 그렇게 오래되지 않았다. 이 Hooks의 역사는 recompose라는 라이브러리에서 시작되었다. recompose 깃헙 레포지토리는 현재 읽기 전용으로 변경되었지만, 아래 README 내용을 보면 우리가 알고있는 useState와 비슷한 형태로 사용이 가능다는 것을 알 수 있다. 이 recompse라는 라이브러리가 리액트 팀에 인수되었고, 리액트에서 Hooks가 릴리즈된 것이다. 먼저, 간단한 카운터 예제를 통해 class를 사용한 코드과 hook..
1️⃣ 동기식 처리 모델 vs 비동기식 처리 모델 글로 설명하기 전에 동기와 비동기를 비유한 아래 그림을 보면 이해가 훨씬 쉬울 것 같다. 동기식 처리 모델 (Synchronous processing model) 동기식 처리 모델은 태스크(task)를 직렬적으로 처리한다. → 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 동기 프로그래밍 const name = 'Miriam'; const greeting = `Hello, my name is ${name}!`; console.log(greeting); 브라우저는 위 코드를 프로그램을 작성한 순서대로 한 줄씩 실행한다. 1) name이라는 문자열을 선언한다. 2) name을 사용하여 greeting이란 또다른 문자열을 선..
CORS Cross-Origin Resource Sharing : 교차 출처 자원 공유 1️⃣ 출처(Origin)란? 웹에서 출처(origin)란 scheme(protocol), hostname(domain), 액세스에 사용되는 URL의 port로 정의된다. - 스키마, 호스트 이름, 포트가 모두 일치하는 경우에만 동일한 출처를 가진다고 한다. - 일부 작업은 동일 출처 콘텐츠로 제한되며 이 제한은 CORS를 사용하여 해제할 수 있다 . 일반적인 URL 예시를 살펴보자. 예시 URL의 구성요소는 아래 그림과 같다. 위 URL의 구조에서 Protocol, Host, Port가 같다면 같은 출처라고 취급한다. 자바스크립트로 location객체의 origin 속성을 찍어보면 출처를 확인할 수 있다. conso..
호이스팅에 대해서는 옛날에 퍼블리셔 수업에서 제이쿼리를 배울 때 함수를 어디에다 선언해도 사용할 수 있도록 선언을 맨위로 끌어올려주는 기술이라고 배웠던 기억이 난다. 지금까지 그정도의 개념만 가지고 코드를 작성하는데에 문제는 없었지만 자바스크립트에 대해 제대로 공부하고 있으니 자바스크립에서의 호이스팅에 대해서도 자세하게 알아보자. 1️⃣ 호이스팅이란? 자바스크립트는 ES6에서 도입된 let, const를 포함한 모든 선언(var, let, const, function, function*, class)을 호이스팅한다. 여기서 호이스팅이란 무엇일까? 호이스팅(hoisting)에 대한 다양한 정의를 찾아보았다. "인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다." - MDN "..
자바스크립트에서 함수는 일급객체(first-class object)이다.일급 객체란 변수처럼 대상을 다룰 수 있는 것을 얘기하는데 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다.클로저는 함수의 일급객체성질을 이용한다. 함수가 생성될 때 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다.함수와 함수가 사용하는 변수들을 저장한 공간을 클로저라고 한다. 여기까지는 아직 무슨 말인지 이해가 안가니 클로저의 정의에 대해 더 찾아보기로 했다. 클로저(Closure) 정의 찾아보기 - 함수와 그 함수가 선언된 어휘적 환경( Lexical Environment)의 조합이다.- 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.- 내부함수..
브라우저 콘솔의 Sources 탭에서 원하는 라인의 라인넘버를 클릭한 뒤 새로고침하면 해당 라인에 브레이크 포인트가 걸려 해당 라인에서 프로그램이 멈춰있게 된다. debugger 기본 사용방법 정리글 아래와 같은 예시 코드를 디버깅할 때 2번 라인(n0 ='n0')에 브레이크 포인트를 걸고 우측 노란 표시된 버튼(한 줄씩 실행하는 버튼)을 클릭하면 Scope의 Global에서 n0를 확인할 수 있다. → 변수 선언 시 var, let, const 등을 붙이지 않고 이름만 주면 그 값은 Global에 저장된다. ESC를 눌러 console을 열고, n0를 입력하면 n0값을 가져온다. → 자바스크립트는 어떤 변수를 읽으려고 할 때 Scope에서 변수를 찾는다. Scope의 Script 안에 변수가 없으면 G..
