WEB/React

요즘 최대 관심사는 [성능]이다. 그래서 최근 Reflow와 Repaint 관련 글을 보다가 브라우저 렌더링으로 관심사가 넘어가게 되었고 더 나아가 리엑트 렌더링과 최적화 관련해 글을 보던 중 한 가지 궁금한 점을 발견했다. 내 궁금증은 [10분 테코톡] 앨버의 리액트 렌더링 최적화]로부터 시작되었다. 렌더링 최적화 하는 방법으로는 `useMemo`, `React.memo`, `useCallback`을 사용할 수 있다. 다만, 이 작업은 값비싼 비용이 발생하기 때문에 많이 사용하게되면 성능에 오히려 좋지 않다. Childrend Props를 이용해서 리렌더링을 최적화할 수 있다. 불필요한 렌더링이 발생하지 않도록 처음부터 코드를 잘 작성하자. 근본적인 코드를 개선하자. 그 중, 가장 궁금했던 내용은 ..

이번에는 파일 드라이브라는 클라우드 웹을 만들었다. 지난 토이 프로젝트 회고때 말한 것 처럼 이번 토이 프로젝트는 스프링 부트를 이용해 백엔드 서버를 만들고 리액트로 프론트를 만들었다. "파일 드라이브" 라는 걸 만들기로 결심한 이유는, 여느때와 같이 유튜브를 보다가 Next.js로 FileDrive라는 웹 사이트를 만드는 영상을 보았다. 맨 앞에 완성된 프로젝트가 어떻게 돌아가는 지 조금 보다가 만들어보면 재밌겠다🤔 생각이 들었고, 바로 프로젝트 구상을 했다. 저분의 기능에 폴더 관리 기능을 추가하기로 했다. 그리고, 저 영상은, 다 보게 되면 왠지 저 분의 코드 구조를 따라하고 따라 칠 것만 같아서 영상은 더 이상 보지 않았다. 구성은 스프링 부트와 MySQL를 백엔드로 하고 업로드할 파일들은 파일..

지난번 단어장 웹에 이어서 이번에는 더키라는 블로그 웹을 만들었다. 더 큰 프로젝트다 보니 많은 리액트 라이브러리를 사용했다. 물론 별도의 라이브러리 없이 직접 만들면 좋겠지만 나는 편리하고 좋은 라이브러리를 찾아서 사용하는 것도 좋은 방법이라 생각한다. 미천한 나의 실력으로 직접 만든 불안정한 라이브러리를 사용하여 사이드 이슈를 많이 발생시키는 것보다 많은 사용 하며업데이트고 관리되는 라이브러리를 찾아 사용하는 것도 프로젝트를 구현하는 데 있어서 좋은 방법이라 생각한다. (구차한 변명 같네ㅎ) 이번 프로젝트 개발 기간은 ( 라이브러리를 많이 써서 그런가 ) 이전보다 짧은 총 6일 걸렸다(첫 커밋 ~ 마지막 커밋). 아무래도 이전 프로젝트에서 파이어베이스 인증을 제외한 간단한 쿼리 사용법에 대해 배웠다..

프론트엔드 개발자로 전향하기 위해 최근 리액트를 배우고 있다. [리액트를 다루는 기술]이라는 책 한권을 완독했고, 게시판 만들기보다 더 재미난걸 만들어 보고 싶어 고민하다가 단어장이라는 웹을 만들어 보았다. 자바스크립트는 알지만 리액트뿐만 아니라 처음 접하는 라이브러리가 많았기 때문에 원하는 걸 구현하려면 어떻게 사용하면 되는지 문서를 찾느라 고생했다. 그래서 코딩하는 시간보다 구글링하는 시간이 더 많았다. 개발 기간은 총 7일 걸렸다(첫 커밋 ~ 마지막 커밋). 순수 개발시간은 아마 30시간정도 되지 않을까 싶다. # 구상 게시판처럼 리스트 조회/수정/삭제가 있으면서 간단한 걸 만들어 보고 싶었다. 초기 UI 구상은 피그마를 사용하면 참 좋겠지만 할 줄 모르니... 아래와 같이 종이에 끄적거렸다. 처음..