이 기술 블로그를 만들기 위해 5년을 미뤘다.

리액트의 특징 - state 값이 변경되면 DOM을 업데이트하지 않고 아예 새로 만듦 - JSX라는 문법을 사용 - Webpack, babel 등 리액트의 Virtual DOM - 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM - Javascript 객체 => 실제 DOM보다 속도가 굉장히 빠름 JSX - babel을 통해 JSX 문법이 Javascript로 변환 - 닫힌 태그가 꼭 있어야 함(혹은 self closing tag) - 하나의 최상단 태그로 감싸야 함 => 리액트의 Fragment 사용 가능() - JSX 내부에 자바스크립트를 사용해야 할 경우 {}로 감싸서 사용 Babel - 자바스크립트 문법 확장 도구 - 아직 지원되지 않는 최신 문법 혹은 실험적인 문법을..

회사 업무로 elasticsearch를 이용한 영화 대사 검색 API를 만들었다. 검색 API 호출 시, 입력한 검색어와 일치하는 부분은 태그로 강조되도록 기능을 만들었다. 브라우저로 호출 테스트를 해 보니 정상적으로 기울여지게 출력되는 것을 확인할 수 있었다! 하지만 문제는 웹에서 발생했으니... 리액트 기반으로 검색 웹 프론트를 만들었는데, 태그가 그대로 문자열로 표출이 된다... 검색해 보니, 리액트는 XSS 공격을 막기 위해 무조건 렌더링할 때 저런 식으로 HTML 태그를 문자열로 변환한다고 한다. 해결법은 입력하고자 하는 상위 HTML 태그에 다음과 같이 써주면 된다. (보안 위험이 있으니 되도록 사용을 지양하자!) 나는 span 태그를 따로 만들어서 영화 대사가 들어가는 부분에 넣어줬다. 결과..

리액트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있는데, 주로 함수형 컴포넌트가 많이 사용된다. 이유가 무엇일까? 함수형 컴포넌트의 가장 큰 장점으로는 간단하게 함축적인 프로그래밍이 가능하다는 것이다. 각각의 특징을 표로 정리해 보았다. 클래스형 컴포넌트 함수형 컴포넌트 특징 render() 메소드와 Component 상속 필수 간편한 컴포넌트 선언 및 프로그래밍 가능 React Hook을 사용 단점 state, props 사용 불편 많은 메모리 사용 state와 생명주기(Life Cycle) 메소드를 별도로 구현해야 함 => useState, useEffect 사용 보통 서점에서 리액트 서적을 구입하면 클래스형 컴포넌트 기준으로 주로 기술되어 있어서 처음 리액트를 공부하는 사람들은 복잡한 코드에 진..

React는 함수형과 클래스형 컴포넌트의 생명주기 형태가 다르다. 나같은 경우는 처음 리액트를 독학할 때는 클래스형 기준으로 공부하고 이후 프로젝트 개발할 때는 함수형으로 주로 쓰다 보니 개념이 뒤죽박죽이 되었다. 블로그에 정리하면서 복습해 보자. (2021-11-01에 부족한 부분을 업데이트했습니다.) 마운트 1. construnctor() : 컴포넌트가 처음 렌더링될 때 호출(생성자 메소드) => 단 한 번만 실행 constructor(props) { super(props); } 2. getDerivedStateFromProps() : props로 받아온 값을 통해 state를 갱신하기 위한 메소드 render() 직전에 실행되며, 여러 번 실행될 수 있음 return된 값이 초기 state의 초기값..

심심해서 이번 주말에 LH 전환보증금 계산기를 만들었다. 리액트 문법 까먹을까봐 리액트로 만들었는데 컴포넌트도 안나누고 넘나 개떡같이 만든 것 같다. 다음 리액트 프로젝트는 이쁘게 만들어 보자. 이건 내가 까먹을까봐 정리하는 리액트 프로젝트 github pages에 배포하는 방법이다. 절차 1. gh-pages 패키지 설치 npm install --save gh-pages // 또는 yarn add gh-pages 2. 프로젝트 폴더 내 package.json를 열고 "homepage" 요소 추가 { // ... "homepage" : "http://sap03110.github.io/lh-deposit-calculator", // 본인 깃허브 주소 + 리퍼지토리명 // ... } 3. package.js..