■ 리액트 소스 노출 차단 React로 구현한 웹의 소스가 노출되는 것을 방지하지 않고 그대로 베포하게 되면, 크롬 웹 브라우저의 개발자 도구에서 쉽게 소스를 확인하거나 디버깅할 수 있다. 소스를 확인하거나 디버깅을 할 수 있다는 의미는 보안적인 부분에서 치명적인 문제가 아닐수 없다. 따라서 React로 개발한 소스가 노출되지 않도록 차단하는 작업을 진행 1. [.env] 파일 생성 후 내용 추가 GENERATE_SOURCEMAP = false 2. 프로젝트 빌드 후 반영 npm run build 3. 크롬 웹 브라우저 개발자 도구에서 확인 프로젝트내에 임의로 MainView.js 파일 생성하였지만 노출되지 않음을 확인할 수 있다.

■ 스토리북 스토리북은 비주얼 테스트를 위한 도구이며, 화면을 구성하는 컴포넌트들을 독립적으로 관리하고 변화를 테스트해 볼 수 있다. ■ 스토리북 활용 1. 스토리북 설치 프로젝트의 루트 폴더로 이동 명령어 실행 package.json에 자동으로 스토리북이 추가된걸 확인 > yarn add -dev @storybook/react@5.2.6 2. package.json에 스토리북 실행 명령어 추가 package.json의 script 블록에 npm 또는 yarn으로 실행할 명령어를 추가 storybook 명령어가 스토리북 서버를 9001 프토를 통해 실행시킬 수 있도록 설정 * package.json의 script블록은 리액트 서버를 구동하는 명령어인 yarn start와 같이 실행할 명령어를 정의하는 공..

■ 컴포넌트의 생명주기 컴포넌트의 생명주기는 컴포넌트의 생성부터 소멸까지의 과정을 의미하며, 생명주기 함수는 리액트 엔진에서 자동으로 호출되며, 각 함수의 기능을 이해하면 컴포넌트를 효율적으로 활용할 수 있다. ■ 생명주기 함수 1) constructor(props) 함수 컴포넌트가 생성될 때 한 번만 호출되며, 상태를 선언할 때 사용된다. constructor 함수를 정의할 때는 항상 super 함수를 가장 상위에 호출해야 한다. * super 함수는 프로퍼티와 생명 주기 상태 등을 초기화하는 과정을 포함하고 있다. 2) static getDerivedStateFromProps(props, state) 함수 getDerivedStateFromProps 함수는 정적 함수이다. 따라서 함수 안에서 this..

■ 디바운스 내용을 입력하다가 특정 시간 동안 대기하고 있으면 마지막에 입력된내용을 바탕으로 서버 요청을 하는 방법이다.구글의 검색창을 떠올리면 이해하는데 도움이 된다.검색창에 입력을 하다가 입력을 멈추면 검색창 하단에 연관 검색어가 나오는 것이 디바운스로 구현한 기능이다. 예시) ■ 스로틀 페이스북의 타임라인 기능으로 이해하기 쉽다. 스크롤을 내리는 동안 계속해서 다음 내용이 출력되는 무한 스크롤 기능이다. 예시)

■ 웹팩(Webpack) 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 한다. 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build)라는 과정을 통해 하나의 파일로 만들어 준다. 예시로 JAVA 스프링 프레임워크를 활용하느 프로젝트에서 해당 프로젝트를 빌드하여 jar파일로 말아서 생성하는것과 유사하다. ■ 바벨(Babel) 바벨은 코드 변환기다. 개발자들은 최신의 코드로 작업을 진행하고 최대한 많은 사용자가 사용하는데 불편함이 없도록 만들어 주는게 바벨이다. 바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다.

■ foreach() 함수 * 반복문의 순번 또는 배열의 크기를 따로 변수에 저장하지 않고도 반복작업이 가능하다. * 반환값이 없어도 된다. function parse(qs) { const queryString = qs.substr(1); // querystring = 'banana=10&apple=20&orange=30' const chunks = queryString.split('&'); // chunks = ['banana=10', 'apple=20', 'orange=30'] let result = {}; chunks.forEach((chunk) => { const [ key, value ] = chunk.split('='); // key = 'banana', value = '10' result[k..