FE8 리액트에 대한 나의생각 진입장벽은 낮지만, 들여다보면 심연이다. - Owon(나) 리액트, 리액트, 리액트 리액트를 접한지는 1년이 되어간다. 그 동안 리액트만 사용하고 공부한 건 아니지만, 프론트엔드 개발자로서 취업을 준비하면서 가장 많이 사용했던 기술 스택이 리액트였다. 나에게 리액트란 자신있게 이력서 한켠에 적을 수 있는 기술스택이기도 했다. 처음엔 리액트가 개발의 전부라고 생각했었으며, 리액트의 장단점이 명확히 눈에 보이고, 하나의 기술로서 어떤 속성을 갖고있는지 파악하게 되는데 많은 시간이 걸렸던 것 같다. 요즘 렌더링 엔진에 대해서 많은 공부를 하면서 느낀점이 많았었는데, 이번 글에선 리액트에 대한 나의 개인적인 생각을 두서없이 적어볼 생각이다. 우리 리액트는요.. 리액트는 특별하다. 함수형 프로그래밍과 클래스 기반.. 2023. 11. 13. 캘린더 개발기 I React-Calender 라이브러리를 참조하여 코드 작성에 많은 도움을 받았습니다. 아직 확장 중인 기능이 많아 캘린더 개발기 2편도 준비하고 있습니다. 켈린더를 만들어볼까? 사건의 발단은 같은 모각코 일원인 선우님의 자료 공유에 있었다. 서로 심도 깊은 개발 얘기를 나누다 2022년 토스의 컨퍼런스의 한 세션인 유연한 컴포넌트 만들기 내용으로 주제가 전환됐다. 해당 세션에선 useCalendar를 이용하여 수정과 확장에 훨씬 용이한 코드를 구현했다. 영상에서 보여준 예시 코드는 매우 간결한 버전의 일부분이었지만, 선우님과 나는 함께 고민해보며 직접 예시를 구현해보기로 했다. 유연한 컴포넌트란? 스피커가 생각하는 유연한 컴포넌트는 다음과 같은 특징을 갖고있다: 1. Headless 기반의 추상화하기 -.. 2023. 11. 13. 어색했던 Hook의 규칙 Hook의 규칙 옛 버전의 리액트 공식문서를 보고있을 때 였다. 요즘 들어 커스텀 훅을 자체적으로 구현 할 일 이 많아져서 Hook 부분을 보게됐는데, Hook을 사용할 때 지켜야 할 규칙이 있다는 내용을 보게됐다. 처음 보는 내용이라 참신했었는데, 그 내용은 아래와 같다: 1. 최상위(at the Top Level)에서만 Hook을 호출해야 한다. -> 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 말자. 2. 오직 React 함수 내에서 Hook을 호출해야 한다. -> Hook을 일반적인 Javascript 함수에서 호출하지 말자. 규칙에 대한 의문점 최상위가 아닌 조건문에서 Hook을 호출하면, 왜 안될까? Hook의 실행 여부는 리액트 스케줄러에 의존한다고만 알고 있었지, 실제로 어.. 2023. 11. 13. console.log에선 빈 배열/객체인데 펼쳐보면 값이 있을 때 array.push로 값을 넣어준 다음 console.log로 찍어줄 때 문제가 생겼다. 자료를 찾아본 결과 근본적인 원인은 array.push를 비동기 함수에서 진행했고, 브라우저에선 이미 출력된 console.log값을 업데이트 하지 않는 다는 점에 있었다. 스택오버플로우에서 똑같은 현상을 겪은 케이스가 있었는데, 아래에 참고자료로 사용해봤다. 위와 같이 코드를 작성했을 때, 5초가 지나기 전엔 array가 비어있는 상태여서 빈 배열을 출력할 것이고, 5초가 다 지난 다음엔 배열에 값이 다 입력이 되어 console창에 꽉찬배열을 볼 수 있다. 만일 이렇게 생각한다면 큰 오산이다. 직접 그려서 조잡해보이지만, 전체적은 흐름은 이렇다: 브라우저 엔진의 console창에선 출력된 내용은 다시 업데이트 하.. 2023. 5. 26. 리액트 - 재조정 (Reconciliation) with (구)공식문서 머리말 포스트 내용은 구버전 리액트 공식문서를 참조하며 작성된 내용이다. 리액트의 DOM 렌더링 방식에 대해서 공부하는 시간을 가져보도록 한다. 갱생하는 리액트 (Reconciliation) React는 디핑알고리즘(diffing)을 이용해 컴포넌트의 갱신을 효율적으로 구현했다. state 또는 props 가 갱신될 때 마다 render()함수는 새로운 element를 렌더링 해주는데, render 부분을 보면 전체적인 element 트리를 return 해주는 것을 볼 수 있다. 하나의 트리에서 다른 트리로 변환하기 위한 최소한의 연산은 O(n3)의 시간복잡도를 갖는데, 이는 천개의 자식노드가 존재할 때 최대 십억번의 연산을 마쳐야된다는 의미다. 브라우저에서 이런 알고리즘 동작을 너무나도 비효율적인 방식.. 2023. 5. 12. [5월11일] 웹팩을 사용하며 생긴 일 (CSR 설정) 리액트에서 제공되는 프로젝트 템플릿인 CRA만을 고집해왔던 내가 이번엔 웹팩을 사용하면서 웹팩의 오류를 맛봤다(우웩). 리액트를 사용하면 당연히 CSR 형식으로 작동할거라 생각했던 나는 평소와 같이 react-router-dom을 이용해서 페이지간 라우팅을 진행해줬는데, 실제 작동 시 브라우저의 주소를 변경해도 404 페이지 오류가 뜨는 것이다. 혹시나 해서 navigate를 이용해 로그인 페이지에서 회원가입페이지로 접근을 해봤다. navigate를 이용한 방식은 정상작동한다. 자료를 찾아보던 중 웹팩에 별개로 devServer안에 따로 설정을 해줘 해결을 했다. devServer: { open: true, static: { directory: path.join(__dirname, 'public'), }.. 2023. 5. 11. 이전 1 2 다음
