Age of Discovery

사이드 프로젝트를 진행하면서 제어컴포넌트와 비제어컴포넌트에 대해 알게되었다. 리액트에서 input을 이용하는 방식 중에 state와 onChange를 이용해 실시간으로 value를 감지하며 input을 제어하는 방식이랑 ref로 렌더링은 일으키지 않으면서 input의 value값만 취하는 방식이 있다 라는 정도만 알고 있었는데 정확한 명칭이 있었다.. 같이 프로젝트 하는 분께서 https://legacy.reactjs.org/docs/uncontrolled-components.html Uncontrolled Components – React A JavaScript library for building user interfaces legacy.reactjs.org 이 링크를 주시면서 공식문서를 읽어보면 ..

디벨킷 프로젝트를 타입스크립트로 열심히 마이그레이션하는 중에 react-full-page라는 라이브러리가 타입스크립트를 지원하지 않아서 생기는 오류에 대해서 정리해보려고한다. 자동으로 타입스크립트까지 지원해주는 라이브러리가 있는가 하면 스타일드 컴포넌트처럼 @types/styled-components 이런식으로 타입스크립트 패키지까지 추가설치해줘야하는 라이브러리도 있다. 하지만 저 오류메시지가 알려주는 것처럼 npm install --save-dev @types/react-full-page 명령어를 실행해 타입 패키지까지 추가설치해봐도 install자체가 안되고 온통 빨간 오류만 뜰 뿐이다. 바로 구글링에 들어갔다. https://github.com/zwug/react-full-page/issues/48..

타입스크립트는 설치나 컴파일 등의 부분에서 까다로운 녀석이다. (eslint, prettier할 때도 마찬가지..) 그럼에도 사용하는 이유는 동적인 언어를 정적으로 바꿔주어 프로젝트 규모가커질수록 안정적인 유지보수가 가능하게 한다. 디버깅 또한 쉬워진다. (추상적인 오류메시지 해결) 그리고 타입을 미리 지정함으로서 누리는 혜택인 자동완성 기능은 타의 추종을 불허한다. 처음 세팅만 잘한다음 타입스크립트를 어느정도 공부해놓으면 안정적으로 개발할 수 있다. CRA로 세팅된 초기프로젝트를 만질일이 있었는데 clone후 typescript를 설치한다음 react에서 사용하는 router-dom이나 styled-components 등을 설치하려고 할 때 이런 오류가 났다. npm패키지로 리액트프로젝트를 하다보면 누..

서버를 따로 구축하지 않고 nextJS만으로 풀스택 투두리스트를 구현해보자..! prisma를 사용해 postgreSQL 데이터베이스를 NextJS의 API router와 연동하는 작업이 필요하다. 가장 먼저 postgreSQL이 설치 된 후 실행되어있어야 한다. 맥OS 기준으로 https://semtax.tistory.com/12 맥 OS 에서 PostgreSQL 설치하기 1. Postgres SQL 설치 아래 명령어를 이용해서 PostgreSQL을 설치한다. brew install postgresql 설치가 완료 되었으면 아래 명령어를 이용해 postgresql 서비스를 시작한다. pg_ctl -D /usr/local/var/postgres start && brew se semtax.tistory.c..

리액트의 프레임워크인 nextJS를 사용해 투두리스트를 만들어보자! nextJS를 이용하면 기존 CSR방식의 문제점들을 보완할 수 있다. ( 애플리케이션의 규모가 커질수록 초기로딩속도가 느리거나 혹은 SEO최적화가 힘든 점 등의 문제들 ) 또한 API router를 통해 서버를 구축하지 않고도 풀스택으로 개발할 수 있다는 점이 매혹적이었다. 이번 기회를 통해 백엔드를 간접적으로 경험해 볼 수 있다고 느꼈고 배우지 않을 이유가 전혀 없었다. 내가 처음 자바스크립트와 리액트를 공부할 때도 투두리스트를 만들었는데 nextJS로도 투두리스트를 만들며 익숙해진 후에 개인프로젝트로 생각하고 있는 개인 블로그를 만들어볼까 한다. nextJS typescript tailwind CSS prisma postgreSQL ..

리액트의 고차함수에 대해서 알게 된 내용을 정리하고자 한다. HOC(Higher-Order-Components)는 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다. 다른 분들이 써놓으신 블로그랑 공식문서를 찾아보면서 재밌어 보였고 고오급 기술이라는게 눈에 띄어서 공부해봤다. HOC를 쉽게 정의하면 상태관리 로직을 재사용하는 컴포넌트고 생각하면 된다. 여기서 사용하는 로직은 데이터를 받아와서 뿌려주는 정도로 아주 간단하게 작성했다. 바로 코드부터 살펴보자 import React, { ComponentType } from 'react'; import axios from 'axios'; import { useEffect, useState } from 'r..

https://jurgen-94.tistory.com/93 [React] - Intersection Observer로 무한스크롤 (1) 프로젝트 내에서 무한스크롤을 구현하기 위해 Intersection Observer API를 사용했으며 그 원론적인 상세내용은 React 무한 스크롤 구현하기 with Intersection Observer 🔥🔥 Intersection Observer API를 이용한 React jurgen-94.tistory.com 1탄에 이어 두번째 글!! 현 프로젝트에서 Intersection Observer를 사용하여 무한스크롤을 구현한 곳은 총 세 곳인데 우선은 공지사항을 받아오는 것부터 해보자! Intersection Observer의 동작원리에 대해서는 1탄에서 설명했고 실제로..

간단하지만 강력하다. useModalOverlay라는 jsx파일을 만들어 준다. import { useCallback, useState } from 'react'; export default function useModalOverlay() { const [isOpen, setOpen] = useState(false); return { isOpen, open: useCallback(() => { setOpen(true); }, []), close: useCallback(() => { setOpen(false); }, []), toggle: useCallback(() => { setOpen((e) => !e); }, []), }; } 위와 같이 useCallback과 useState를 import해온 다음 ..

프로젝트를 시작하기에 앞서 디자인 패턴을 어떻게 잡을지에 대한 고민을 꽤 많이 했다. 규모가 꽤 있는 프로젝트는 처음이었기 때문에 무턱대고 진행했다가는 불상사를 겪을 수 있겠다는 마음이었다. 결과적으로 커스텀 훅 디자인 패턴을 적용하기로 결정했고 실제로도 프로젝트 중반까지는 잘 지켜졌지만 그 후엔 로직이 복잡해지면서 커스텀 훅을 만드는 것 자체에 어려움을 느꼈다. (역량 부족 이슈..) CUSTOM HOOK 패턴이란? 위와 같이 pages를 폴더별로 나눠 UI가 렌더링되는 부분을 index.jsx로 따로 두고 렌더링되는 부분이 복잡해지면 파트별로 구분해 components폴더안에 둔다. 그리고 hooks 폴더안에 메인로직을 둔 상태에서 제어하는 것이다. 위와 같은 패턴의 장점은 로직과 렌더링이 분리되어 ..

글 쓰고 기록하는 습관이 점점 사라지고 있는 것 같아 무섭지만 틈틈이 조금씩이라도 써보려고 한다. 저번 주차 클론 코딩 때는 모달 창 띄우는 게 처음이고 도저히 구글링 해서 새로 공부할 시간이 없어서 모달 창 관리를 개떡같이 했는데 프로젝트 규모가 커졌기 때문에 기능 구현에 급급한 코드는 지양해야 할 것 같다. 리액트 portal을 사용하면 모달 라이브러리를 설치하지 않고도 간편하게 모달을 띄울 수 있다! public / index.html 파일에서 id가 root인 div아래에 같은 경로로 id가 modal인 div를 만들어주면 root(전역) 안에서 어떤 컴포넌트가 어떻게 렌더링 되던지 전혀 영향을 받지 않는 modal을 만들 수 있다. ModalContainer.jsx파일을 하나 만들어주자 impo..

이번 주차는 인스타그램을 클론코딩 하기로했다...! 생각보다 주제가 빨리 정해졌고 API설계도 금방 완료돼서 순항하게 될 줄 알았다 그러나 주말내내 스타일드컴포넌트로 css작업을 한땀한땀 하려니까 현타가 와서 '이거 맞는건가...' 싶었다ㅋㅋㅋ 그래도 어찌저찌 뷰는 완성....! 일요일에는 하루종일 파이어베이스작업에 매진했는데 자꾸 한끗차이로 마지막에 업로드가 안되는 버그가 있어서 계속 찾아보다가 매니저님한테 도움을 요청해놓은 상태 .... 만약 매니저님 면담 후에도 안될 시 백엔드 분들에게 양해를 구하고 base64로 다시 회귀해야 될것같다.. 파이어베이스 쓰면 진짜 편할거 같은데 이것도 비동기통신을 해야되다보니 까다로운 조건이 많았다. 게시글 댓글 CRUD작업 후에 다시 돌아오겠다...!

길지만 짧았던(?) 6주차 미니 프로젝트를 끝내고 회고를 해보려고 한다. https://www.youtube.com/watch?v=QHJPkb07igE 중고물품 거래하는 사이트였으며 처음에 구현하려했던 기능은 리액트와 리덕스를 사용한 게시글, 댓글 CRUD외에도 찜하기, 검색, 카테고리 분류 등 많았으나 시간이 부족한 관계로 이번에도 게시글과 댓글의 CRUD만으로 만족해야했다.... 슬프다..... 하지만 정말 많이 배웠다 전부 소화할 수는 없겠지만 습득했던 내용이 많았다. 처음에 백엔드 분들과 API명세서를 작성하고 데이터를 주고받기위해 연동하는 과정에서 오류가 무수히 많았지만 소통이 잘돼서 큰 문제없이 넘어가게 됐다. http와 https의 관계 그리고 JWT와 세션방식의 차이 등을 알게 됐으며 JW..

이렇게 오랫동안 블로그 공백기를 가져본적이 없었는데 약 일주일정도 포스팅을 안했다. 5주차 프로젝트가 너무 힘들어서 그랬나.... 5주차 땐 리액트 4명이 모여 팀과제를 했고 그럭저럭 겨우 마감했다. 그에 대한 글은 가볍게 스킵하고 6주차 출바알~ 드디어 리액트와 스프링 프론트와 백이 한 팀을 이뤄 미니프로젝트를 진행한다. 분명 들리는 소문에 의하면 쉬어가는 주차라고 했던 것 같은데 기능을 하나하나 추가하다보니까 더 달려야되는 한 주가 될듯하다. 우리 조는 중고나라와 당근마켓을 합쳐 당근나라라는 프로젝트를 진행하게 됐는데 딱 봐도 중고물품 관련 플젝이라는 감이 오지 않는가? 와이어프레임은 이런식으로 짜게됐고 구현할 기능은 위와 같다. 프론트 인원 2명에 기간이 일주일이라 저걸 다 리액트와 리덕스로 소화해..

지금까지 react-redux로 만든 투두리스트를 리덕스 툴킷으로 덮어씌워보자 툴킷을 앞으로 사용해야하니 익숙해지기 위함인데 기존의 코드를 뜯어고치고 변경해줘야한다는 막연한 두려움때문에 '그냥 새로 만들까...'하다가 이정도 리팩토링도 못하면 나중엔 회피에 대한 대가를 강하게 치를까 무서워 그냥 시도해봤다. 생각보다 간단하게 마무리됐다. import { createStore } from "redux"; import { combineReducers } from "redux"; import todo from "../modules/todos"; const rootReducer = combineReducers({ todo, }); const store = createStore(rootReducer); expor..

아무래도 코드설명을 하면 글이 길어지다보니 간단한 투두리스트 프로젝트도 블로그 포스팅이 나눠질 수 밖에 없는 듯..... 이제 남은 컴포넌트인 TodoItem과 Detail 그리고 모듈폴더의 todos.js 스토어를 살펴보자 const TodoItem = ({todo, i}) => { const dispatch = useDispatch(); const onDelete = (id) => dispatch(deleteTodo(id)) const onToggle = (id) => dispatch(toggleTodo(id)) const navigate = useNavigate(); const isDone = todo.isDone; return ( {navigate("/detail/" + todo.id)}}> 상세..