말은 쉽지, 코드를 보여줘!

나는 백엔드 개발자다. 최근에는 프론트엔드에도 많은 관심을 가지고 학습을 이어가고 있지만 정작 자바스크립트에 흥미를 느꼈던 시기에는 SI업체에 있었기 때문에 주어진 백엔드 작업을 쳐내는 것도 바빴고 게임에도 빠져 있어서 출퇴근 길에 구글링으로 지적호기심을 채우는 것이 고작이었다. 그때가 약 5년 전 이었던 것 같은데 Node가 등장하고 지금의 라인플러스에서 자바스크립트 고급 개발자를 공격적으로 모집하던 시기였던 것 같다. 자바스크립트의 발전을 넋놓고 지켜볼 수 밖에 없었다. 아무튼 지금에 와서 리액트를 학습하며 자바스크립트를 다시 들여다보게 되었고 과거 완전히 이해하지 못하고 넘어갔던 클로저에 대해 확실히 정리를 해두려 한다. 클로저가 대체 뭘까? 자바스크립트의 특정 함수를 가리키는 건가? 아니면 특정 ..

velog.io/@gwak2837/React-%EC%BD%94%EB%94%A9-%EA%B7%9C%EC%B9%99 React 코딩 규칙 페스타에서 인턴하면서 개인적으로 느낀 React, Next, Apollo, JavaScript, CSS 코딩 규칙아래에서 언급된 규칙 외에도 좋은 저명한 레퍼런스 사이트가 있으면 추가해주세요 😎 velog.io

1. 디버깅을 위한 크롬 브라우저 확장 프로그램 설치 크롬 웹 스토어 로 접속해서 React Developer Tools, Redux DevTools 를 브라우저에 설치한다. 설치를 완료하고 크롬 개발자모드(F12)를 확인하면 Redux, Components, Profiler 탭이 추가된 것을 볼 수 있다. Redux 탭에서는 어플리케이션에 적용된 Redux의 상태정보를 실시간으로 확인할 수 있다. Components 탭에서는 컴포넌트의 트리구조를 확인할 수 있다. Profiler 탭을 통해 프로파일링을 해볼 수 있다. 추가로 이벤트에 따라 리렌더링 되는 컴포넌트 영역을 실시간으로 확인하려면 아래 설정을 추가해 진행해야 한다. 위 설정을 하면 아래와 같이 리렌더링 되는 컴포넌트를 화면상에서 실시간으로 확..

관련 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com src/index.js 파일에서 최상위 컴포넌트인 src/App.js 를 라우터 태그로 감싼다. src/App.js 에서는 실제 라우팅 설정을 한다. 태그로 url별 호출한 컴포넌트를 지정한다. path 는 위와 같이 배열형태로 여러개를 지정할 수도 있다. /, /page1 과 같이 경로가 겹치는 부분을 처리하기 위해 exact={true} 설정이 필요하다. 태그를 ..

전체 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com 리액트에서 상태를 관리하는 방법은 두가지가 있다. 전역적으로 관리가 필요하거나 상태를 관리하는 과정에서 api호출을 통해 외부데이터와 동기화 되어야 하는 경우에는 리덕스를 사용하고 컴포넌트 내부에서만 관리하면 되거나 외부데이터와 동기화가 필요없다면 State를 사용한다. 아래 Counter가 State를 이용해 상태관리를 한다. Counter.js 파일이 최종 렌더링..

jQuery 라면 selector로 Element를 찾아서 직접 DOM을 조작해야 한다. 하지만 리액트는 실제 DOM 변경 전에 내부적으로 가상 DOM이라는 개념이 사용되기 때문에 직접적으로 DOM을 조작하지 않고 HTML과 비슷한 JSX 문법을 통해 View를 정의하되 특정 상태값에 따라 컴포넌트를 어떤식으로 렌더링할지 선언하는 방식이다. 이러한 상태와 컴포넌트는 옵저버 패턴처럼 연결되어 있어서 컴포넌트는 참조하는 상태값의 변화할때마다 자동으로 리렌더링 된다. 렌더링 과정에서 내부적으로 가상DOM 에 페이지 자체를 새로 만들고 실제 DOM 과 비교하여 변경된 부분만 적용한다. 리액트에서는 이를 위한 상태관리가 필요하다. 이러한 상태는 기본적으로 State 가 있는데 이는 컴포넌트 내부에서만 사용되는 상..

Hook의 복수형인 듯하고 Hook는 소프트웨어 공학에서 의미하는 Hooking 과 동일한 의미로 보면 될 거 같다. 참고로 Hooking은 구성 요소 간에 발생하는 함수 호출, 메시지, 이벤트 등을 중간에서 바꾸거나 가로채는 명령, 방법, 기술이나 행위를 말한다. 간단하게 말해 특정동작을 보강하거나 변경하는 방법이다. Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태를 관리할 수 있도록 도와준다. 리액트에서 기본적으로 제공하는 몇가지 Hooks 이 존재하고 우리는 이를 확장해서 커스텀훅으로 만들어서 활용할 수도 있다. 참고로 Hooks는 함수 내에서만 call 할 수 있다.

리액트에서 다른 js 파일을 import 할때 기본적으로 아래와 같이 상대경로로 지정해야 한다. import { startLoading, finishLoading } from '../../modules/loading'; 이것도 좀 지져분한데 Depth 가 더 깊어질 경우 ../../../ 이 굉장히 길어진다. 하지만 몇가지 설정으로 절대경로로 import 할 수 있는 방법을 제공한다. 프로젝트 root에 jsconfig.json파일을 생성하고 아래와 같이 입력한다. { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 이제 src 디렉토리를 기준점으로 해서 아래와 같이 import 할 수 있다. import { startLoading, fi..

프론트개발을 할 경우 대부분 css, js 파일들은 퍼블리싱 팀에서 전달받는다. 이런 파일들은 일반적으로 cdn을 통해 전달 받는데 대략 아래와 같은 것들이다. 리액트에서 이를 적용하는 가장 간단한 방법은 Index.html 에 직접 추가하는 것이다. 하지만 페이지별로 필요한 js, css 파일이 다를 것이기 때문에 각 화면의 최상위 컴포넌트에 아래와 useEffect 를 선언해서 index.html에 동적으로 element 를 추가할 수 있다. useEffect(() => { const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js..

script 태그에 src 자원이 존재할때만 지정할 수 있는 옵션으로 아래와 같이 정의할 수 있다. 모두 페이지 렌더링을 막지 않으면서 스크립트 코드를 다운로드 하는 점은 동일한데 아래와 같은 차이가 있다. defer를 지정할 경우 다운로드는 백그라운드에서 독립적으로 수행되지만 스크립트 실행은 페이지 구성이 끝난 뒤에 수행된다. defer 이 지정된 script 태그가 여러개일 경우 다운로드는 각각 수행되지만 실행은 페이지 구성이 끝나고 문서에 추가한 순서대로 진행된다. async 를 지정할 경우 해당 스크립트는 다운로드와 실행 모두 독립적으로 수행된다. async 가 지정된 script 태그가 여러개일 경우에도 각각 독립적으로 수행된다. 다만 스크립트 실행 중에는 페이지 렌더링이 멈춘다. 아래와 같은 ..