올해 처음으로 카카오브레인에서 채용연계형 인턴인 패스파인더 1기를 모집했다. AI와 관련된 서비스를 하는 서비스 개발자들을 영입하는 것처럼 보였다. AI 경험이 있고 우아한테크코스에서 웹 프론트엔드 역량을 갈고닦은 상태였기에, 알 수 없는 끌림이 나를 지원하게 했다. 서류 이력서와 포트폴리오를 첨부하고, 자기소개서를 작성했다. (최종합격 후, 오픈채팅방에 들어가보니 포트폴리오를 첨부하지 않은 분이나, 협업 경험이 없는 분도 계신것 같았따. 그래서 지원하는데 자신이 없어도 일단 지원해보도록 하자.) 자소서 문항은 다음과 같았다. 1. AI는 ______ 이다! (본인만의 한마디 정의를 내려주세요) 2. 다른 사람과 협업하여 참여했던 프로젝트 중 기억에 남는 프로젝트가 있다면 어떤 것이고 어떤 역할로 어떻게..

React에서 $$typeof 심볼은 무엇인가? react element를 console.log로 찍어보면 $$typeof 라는 심볼이 있는것을 한번쯤은 보았을 것이다. 보통 아래와 같은 객체로 찍힌다. { type: 'div', props: { bgcolor: '#ffa7c4', children: 'hi', }, key: null, ref: null, $$typeof: Symbol.for('react.element'), } jsx로 문법을 작성하게 되면, React에서는 React.createElement(type, props, children) 라는 메서드를 이용하여 변환되게 되는데, 이 React.createElement 함수가 $$typeof 프로퍼티를 추가해준다. 그 이유는 XSS 공격을 막기위..

react로 개발을 하다보면, 상태관련 로직이 중복되는 경우를 발견할 수 있다. 이때에는 HOC이나 render props를 사용하여 중복되는 코드를 줄일 수 있는데, 커스텀 훅을 사용하면 위 방법을 사용하지 않고도 그것을 가능하게 해줍니다. 커스텀 훅을 사용함으로써 상태관련 로직을 재사용할 수 있으며, 각 state가 각각 완전히 독립적이게 할 수 있습니다.

공식문서 ko.reactjs.org/docs/hooks-intro.html#motivation "훅은 컴포넌트로부터의 상태 관련 로직을 추상화 할 수 있다." 훅이 있기 전까지는 class 컴포넌트를 사용했습니다. class는 그 자체가 새로운 인스턴스를 반환하고 그 인스턴스는 "this"를 저장하고 있기 때문에, 그 인스턴스 자체가 react에서 알고 있는 값이 되므로 react에서 제거하지 않는 이상, 페이지가 새로 렌더링 되더라도 해당 인스턴스를 기억하고 있기때문에, 상태관리를 자유롭게 할 수 있기 때문입니다. 반면에 함수 컴포넌트는 함수의 라이프 사이클 특성상, 생성 -> 갱신 -> 제거 과정을 거치고 return이 되면 메모리상에서 제거된다. 그렇기 떄문에 함수 컴포넌트는 자신의 동작이 끝나면 ..

리액트는 JSX라는 문법을 사용합니다. 하지만 자바스크립트는 해당 문법을 모릅니다! "저는 리액트 쓰는데 jsx써도 잘만 되던데요?" 맞다. 왜냐하면 바벨에서 jsx문법을 읽을 수 있기 때문이다. 실제 바벨로 번역해보자 a를 보면 jsx문법인데 우측에서 React.createElement로 자동 변환되어 적용된것을 볼 수 있다. 우리는 React라고 말해주지도 않았는데, JSX문법을 보고 바로 React.createElement로 바꿔버린 것이다! 하지만 우리는 JSX 문법을 쓰고 React는 우리가 만들어 나갈 것이기 때문에 별도의 셋팅이 필요하다. 위 코드에는 생략되어 있지만 위 코드는 아래와 같다. 파일의 최상단에 주석으로, jsx문법에 사용할 함수를 우리가 직접 정할 수 있다. 기본값으로 Reac..

리액트는 어떻게 동작하는 걸까? 아무래도 라이브러리를 뜯어보지 않는 이상은 개념적으로만 동작 방식을 알고 있을 것이다. 좀 더 완벽한 이해를 위해서, 이번 포스팅 시리즈를 통해 (완벽하지는 않지만) 리액트 기능을 비슷하게 따라할 수 있도록 구현을 하는 방법을 차례대로 포스팅할 계획이다. 셋팅 위 폴더를 다운받아서 프로젝트를 초기 셋팅을 하자. scripts 폴더엔 babel이, style 폴더안에는 css 들이, dom.js에는 react 로직이 들어갈 것이고 (예정), index.js에는 실제로 테스트할 수 있는 코드들이 들어갈 것이다. (예정) 그리고 index.html에서는 그 파일들을 사용하고 있으며 참고로 dom.js, index.js는 script type이 text/babel이다. 실제로 서..

CRA에서 모든 환경 변수는 REACT_APP이라는 prefix가 붙어야한다. 만약 내가 PORT = 4000이라고 .env에 정의한다고 하면, REACT_APP_PORT = 4000 라고 선언해야 정상적으로 값을 읽어올 수 있는 것이다. 그리고 따로 dotenv를 설치해서 사용하지 않아도 node_modules에 dotienv-expand라는 라이브러리가 CRA에 종속되어 있는 것같다. (정상동작) 만약 dev, prod 개발환경을 나누고 싶으면 package.json에 "start:stage": "REACT_APP_ENV=production && react-scripts start", "start:dev": "REACT_APP_ENV=development && react-scripts start", ..

공식문서를 기반으로 작성되었습니다. ko.reactjs.org/docs/faq-functions.html 컴포넌트에 함수 전달하기 – React A JavaScript library for building user interfaces ko.reactjs.org react를 통해 컴포넌트를 구성하다보면, 하위 컴포넌트에게 onClick같은 메소드를 넘겨줘야할 일이 있다. 그리고 높은 확률로 그 함수는 상위 컴포넌트의 this를 사용하고 있는 경우가 많기 때문에, .bind(this)로 this를 바꾸어주어야한다. 그에 대한 방법은 3가지가 존재한다. 1. 클래스 프로퍼티 class Foo extends Component { // 주의: 이 문법은 실험단계이며 아직 표준이 아닙니다. handleClick =..