비실이의 개발 성장기

오랜만에 삽질기를 올린다. 아직 Typescript 기반으로 React 개발을 해본 적도 없고.. Parcel 번들러도 경험해보고 싶어서 요즘 끄적끄적하고 있다. 오늘 상대 경로를 절대 경로로 변경하기 위해 Parcel 공식문서를 찾아보다 Tilde (~)를 사용한 절대 경로 적용에 대해 알게 되었다. Parcel 공식 Docs Tilde path 바로가기 📔 Module Resolution Getting Started Features 📦 Asset Types Advanced 📔 Module Resolution The Parcel resolver implements a modified version of the node_modules resolution algorithm. Module resolution..

git update-index --assume-unchanged [file path] > 원격 저장소에도 필요하고 로컬 워킹 디렉토리에도 존재해야 하는 파일이나, 내용 수정이 되어도 추적은 되지 않게 할 때 사용한다. 예) ABC 사이트 접속을 위한 토큰 상수가 선언 된 tokenInfo 파일이 있다. tokenInfo 파일은 프로젝트 빌드에 필요하므로 원격 저장소에 푸시 된 상태다. tokenInfo 에 토큰정보는 프로젝트 작업자(개발자) 마다 서로 다른 토큰을 사용한다. A 개발자가 로컬에서 작업을 위해 tokenInfo 에 토큰정보를 변경했다. git 은 tokenInfo 파일 내용이 변경되었으므로 추적을 한다. 이 때, git update-index --assume-unchanged [file p..

호이스팅 이란변수나 함수의 호출 코드가 선언 코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 호이스팅(Hoisting) 이라고 한다. 호이스팅 현상이 발생하는 이유javascript는 코드가 실행될 때 실행 컨텍스트가 생성된다. 이 때, 실행 컨텍스트 내부 변수 객체에서 현재 컨텍스트에 사용되는 변수 또는 함수를 생성한다. 변수가 생성되는 과정은 3단계로 나뉜다. 1. 변수 선언2. 변수 초기화3. 변수에 사용자가 지정한 값으로 초기화 여기서 3. 변수에 지정한 값 할당은 해당 실행 컨텍스트의 변수 객체 생성이 완료된 뒤에 실행된다. 즉, 변수의 선언 + 초기화 와 사용자가 지정한 값 초기화가 발생되는 환경이 나뉘어 발..

실행 컨텍스트란 (Execution Context, E.C) 실행 가능한 javascript 코드 블럭이 실행되는 환경 실행 컨텍스트가 생성되는 시점실행 가능한 코드(전역 코드, eval() 로 실행되는 코드, 함수 내부의 코드) 가 실행되면 각각의 독립적인 실행 컨텍스트가 생성된다. (ex. 함수가 실행되는 시점에 해당 함수의 실행 컨텍스트가 생성된다.) 생성 된 실행 컨텍스트는 순서대로 콜 스택(Call Stack) 에 push 된다. 스택이므로 가장 마지막에 추가 된 실행 컨텍스트가 현재 실행되고 있는 컨텍스트다. 실행 컨텍스트는 작업이 종료되면 콜 스택에서 pop 된다. 실행 컨텍스트 생성 코드 예123456789101112console.log('this is global context'); fu..

ES6 class 문법으로 react 컴포넌트 개발 시, 이벤트핸들러 메소드를 선언하고 반드시 constructor 내부에서 바인딩을 해줘야 한다. 만약, 이벤트핸들러 메소드에 바인드를 해주지 않으면 이벤트콜백이 발생했을 시 메소드 내부 this 는 예상과는 다른 곳을 참조하게 된다. 아래는 버튼을 누르면 handleClickIncrement 이벤트 함수가 호출되어 count 값을 1씩 증가시키는 간단한 react 컴포넌트다. 12345678910111213141516171819202122232425262728class Application extends React.Component { constructor(props) { super(props); this.state = { count: 0 } } han..

Javascript를 처음 접했을 당시, 타입이 엄격하지 않음과 더불어 함수가 변수처럼 어떠한 함수의 인자로 전달될 수 있고, 함수의 반환 결과로도 사용 가능하다는 것에 매력을 느꼈었다. Javascript에서 함수를 자유롭게(?) 사용가능한 이유는 함수를 일급 객체(First-class citizen) 로 취급하기 때문이었다. 어떠한 특징이 있으면 일급 객체라고 부르는 것일까 라는 생각이 들어 위키백과를 찾아봤다. 일급 객체란? '컴퓨터 프로그래밍 언어 디자인에서 일반적으로 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.' 일급 객체가 되기위한 조건 1. '변수나 데이터 구조안에 담을 수 있다.' testList 배열을 선언한 뒤, 0번째 인덱스에 익명함수를 추가했다. 2. '파라미터..

getDerivedStateFromProps() 와 getSnapshotBeforeUpdate() 메서드는 React v16.3.0 에서 새로 추가된 lifecycle 메서드다. 새로 추가 된 getDerivedStateFromProps(), getSnapshotBeforeUpdate() 메서드와 deprecated 예정 인 componentWillMount(), componentWillUpdate(), componentWillReceiveProps() 메서드를 혼용하여 사용하면 warning이 발생하게 된다. componentWillMount(), componentWillUpdate(), componentWillReceiveProps() 에서 처리하던 로직은 getDerivedStateFromProps..

React 릴리즈 버전이 16.4.x 버전까지 올랐다는 걸 React 공식페이지나 여러 기술블로그를 통해 알고 있었다. 하지만, 변경 된 사항들에 대해 글을 읽기만 했을 뿐 간단한 예를 만들어서 해보지는 않았다. 최근 이직 준비로 인한 시간이 생겨 변경 된 사항들을 직접 해보고 있다. 오늘은 React v16.0 에 새로 추가 된 componentDidCatch() 함수에 대해 알아보고 이 함수를 어떠한 경우 사용하면 좋을지에 대해 알아보려한다. React 프로젝트는 수 많은 UI 컴포넌트 트리로 구성되어 있다. 화면 렌더링이 시작되면 수 많은 UI 컴포넌트 들이 각자 역할에 맞게 수행되며 가장 마지막에 위치한 컴포넌트의 역할이 끝나면 페이지 렌더링이 완료된다. 만약 렌더링 도중 어떠한 컴포넌트에서 런타..