June 01, 2023
서론 React 18 에서는 이라는 기능이 추가되었다. 이 기능은 이전 버전의 보다 향상된 성능을 자랑한다. 본고에서는 기본적으로 이란 무엇인지, 그리고 이 기능을 사용하여 어떠한 효과를 가져오는지 실제 예시를 통해 알아보도록 하겠다. 본론 상태 변경과 렌더링: React의 핵심 React는 UI 라이브러리로, 우리가 어떤 화면을 보여줘야 하는지…
September 25, 2022
서론 멋쟁이 사자처럼 10기 전체 해커톤에서 우리학교 팀원들과 이라는 물물경매 플랫폼으로 약 900명 / 150팀 중 이라는 좋은 성적을 받게 되었다. 깃헙 링크: https://github.com/bunderLikeLion 하지만 해커톤의 특성상 짧은 시간내로 를 만들어야 했었고, 개발 과정에서 놓치고 지나간 부분이 꽤나 많다는 부분을 인지하고 …
May 01, 2022
서론 항상 나는 리액트라는 를 올바르게 사용하고 있는지에 대한 고민이 있다. 망치를 가지고 있다고 가정하였을때 망치 손잡이를 잡을지 아니면 망치 머리 가까이에 손을 위치할지 결정할 수 있다. 망치 제작자들은 방법을 하지 않지만, 더 방법은 존재하리라 믿는다. 이는 리액트에도 해당되지 않을까 싶다. 본고에서는 단순히 리액트를 사용한다는 관점을 넘어서 …
February 14, 2022
서론 아래의 링크에서 내가 왜 리액트같은 SPA 에서 을 해야하는지에 대해 서술하였지만, 이번에는 내가 현재 진행하고 있는 프로젝트 내부에서 코드분할 전 후 를 비교하며 결과를 기록하려한다. https://hwani.dev/react-code-splitting/ 본론 SPA (Single Page Application) 의 특성상 맨처음 페이지에 진…
January 09, 2022
서론 외부 api 를 사용하는 상황에서 Docs 를 읽어본다 한들 실제 데이터의 형태가 어떻게 구성되어있는지 정확히 예상하고 코드를 짜는 행위는 불가능에 가깝다고 생각하고 에러를 유발한다. 나는 데이터 구성을 확인하기 위해 데이터 fetching 후 직접 콘솔로 찍어 확인하는 방법을 사용하였는데, 이는 차후에 코드의 에러를 유발할 수 있고, 자칫 까먹고 …
January 08, 2022
서론 가상화폐를 다루는 사이드 프로젝트를 하다가 사용자의 을 받아 검색결과에 맞는 가상화폐들만 보여주어야 하는 Search Input 을 구현하고 있었다. 해당 과정에서 사용자가 input 을 넣은 결과에 따라 output 을 도출해야 하지만, 사용자가 input 을 끝냈는지(마무리했는지) 에 대한 로직을 내가 직접 예측하기에는 무리라 생각이 들었다.…
January 04, 2022
서론 Javascript 를 사용할때, 특정 DOM 을 선택하여 정보를 얻거나 임의로 조작해야 할때, 혹은 과 같은 DOM Selector 함수를 사용하여 DOM 을 선택하였다. 하지만, React 는 이 기능을 대체할 수 있는 훅을 제공한다. 본론 useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한…
January 03, 2022
서론 나는 을 사용하다가 유료이기도 하고, 나름 에 비교하면 무겁다고 체감이 되어 다시 로 돌아왔는데, webstorm 에서는 훅을 사용할때 따로 import 를 해주지 않더라도 자동적으로 import 를 해주어 이 기능이 대단하단것을 몰랐다. 따라서, VSC 에서도 기능을 사용 할 수 없는지에 대해 구글링을 해보았다. 본론 결론적으로는 쉽게 가능…
January 02, 2022
서론 종종 리액트 공부를 하다보면 문법을 사용할 것이기 때문에 와 같이 리액트를 import 해주어야 한다는 말들을 들었다. 하지만 생각해보면 나는 딱히 리액트로 프로젝트를 진행할때, JSX 문법을 사용해야 한다 하더라도 컴포넌트마다 리액트를 import 하는 행위는 따르지 않고도 문제가 발견되지 않았었다. 본론 이에따라 와 을 통하여 찾아보니, …
December 27, 2021
서론 평소 프로젝트를 진행할때, 리액트를 사용한 Client 단만을 만들었는데, 나는 Express.js 에 대한 이해가 어느정도 있긴 하였다. 하지만 항상 느꼈던 점은 어떻게 Server(Node.js) 단과, Client(React ) 단을 동시에 연결할지를 몰랐었고, 알게된 과정을 기록하려 한다. 본론 내가 사용한 모듈 : Express nodemo…