소소한 코딩일지

Atomic Design 관련해서 기술 블로그를 보다가 원자 단위의 컴포넌트를 합치는 과정에서 태그로 감싸는 것을 보았다. 그 코드를 보고, `음, 빈 태그()로 감싸면 안 되나? 의미상 차이가 큰가?`라는 생각을 하게 되었다. 그리고 '빈 태그가 React.Fragment와 같다고 했던 거 같은데' 하는 생각이 연달아 들었기에 호다닥 , , React.Fragment를 살짝 정리해보고 왜 로 감싸게 되었는지 알아보려고 한다. div 태그는 컨텐츠를 담는 컨테이너로서 쓰인다. 콘텐츠가 보일 영역을 구분하는 태그이다. React.Fragment React.Fragment는 컴포넌트가 새로운 노드를 추가하지 않고 여러 자식을 그룹화할 수 있게 해 준다. 공식 문서의 설명을 참고하면, class Table e..

API 로직을 작성하면서 단순하게 요청, 응답 데이터 처리, 에러 메시지 전달 로직을 작성하는 것에 그쳤다. 이번에 Axios Interceptors로 기존의 API 로직을 수정해보았다. Axios Interceptors Axios Interceptors는 interceptor라는 단어의 의미에 알맞게 API 요청/응답을 주고받을 때, 요청 전/ 요청 후에 각 동작을 가로채서 특정 전처리를 해준다. // 요청 인터셉터 추가 axios.interceptors.request.use( function (config) { // 요청을 보내기 전에 수행할 일 // ... return config; }, function (error) { // 오류 요청을 보내기전 수행할 일 // ... return Promise...

Vue의 computed와 method의 차이를 스스로 명확하게 설명하지 못하고 있다고 생각해서 공식문서와 블로그를 보면서 차이점을 정리해보았다. 가장 큰 차이는 함수 연산 값을 사용하는지(computed) 또는 항상 함수를 실행하는지(method)이다. computed의 경우, 템플릿의 data(종속된 값)에 따라 메서드의 연산 결과 값을 사용한다. 종속된 값의 변경을 확인하고, 변경되지 않았을 경우에는 캐싱되어있는 값을 그대로 사용한다. method의 경우, 화면이 랜더링되어서 메서드를 호출할 때마다 연산을 수행한다. 실제 VS 코드에서 computed옵션을 타고 computedOptions를 보니 cache 여부를 boolean으로 판단하고 있는 것을 확인할 수 있었다. 추가) 전에 공부하면서 co..

문제 상황 react-router-dom 패키지를 사용하면서 Link 태그를 통해 다른 url로 이동하는 버튼을 만들어 주었다. 여기서 Link 태그의 state 속성을 사용해 이동하는 페이지에 특정 데이터를 전달하는 코드를 작성하였다. 이동한 페이지에서 Location과 관련한 값을 useLocation() Hook을 활용하여 받아오도록 했다. 필요한 데이터는 pathname과 state다. 여기서 문제가 발생했는데 기존에 타입을 지정하는 방식대로 pathname과 state를 지정해주었을 때 타입과 관련한 에러가 발생했다. interface { pathname: string; state: { id: string; } } 해결방법 여러가지 구글링을 해본 결과 아래의 사진과 같이 타입을 Generic 하..

Sass를 사용하면 원하는 디자인 값을 변수에 할당하여 사용할 수 있는 장점이 있다. 디자인 변수를 사용하면 나중에 변수의 값만 바꾸어 줌으로써 유지보수 부분에서 엄청난 장점을 가지게 된다. 현재 진행하고 있는 프로젝트의 사이즈가 조금 더 커질 예정이라 Sass 변수를 사용해보려고 한다. 사용할 변수는 가장 많이 사용할 것 같은 프로젝트 메인 컬러와 서브 컬러로 우선 테스트해보았다. Vue 프로젝트에서 변수명을 사용할 경우, 변수 파일을 만들고, 해당 각 파일을 import 해서 사용한다. // Main.vue ... ... 하지만 여러 변수를 사용하다 보면 대부분의 파일에서 변수 파일을 import 할 텐데, 모든 파일에 `@import ~`를 써주는 코드 중복도 해결해 보았다. 기존의 vue.conf..

Image Preloading Preload는 페이지를 전환하면 바로 데이터를 볼 수 있도록 미리 데이터를 로드하는 방식. pokedex의 퀴즈에서 문제로 제시되는 이미지가 다음이 이미지로 넘어갈 때마다 새로 로드하기 때문에 이미지에 따라 아래 선택지 보다 늦게 로드되거나, 화면이 순간 깜빡하는 현상이 발생한다. 이를 해결하기 위해서 preload를 적용하여 현상을 해결해보았다. 문제를 생성하는 곳에서 useEffect(() => { const imageList: HTMLImageElement[] = []; pokemonQuestion.forEach((question) => { const image = new Image(); image.src = `https://raw.githubusercontent.c..

나는 function Modal() {} 로서 컴포넌트를 선언하는 함수형 컴포넌트를 주로 사용해 왔다. 이번에 타입 스크립트를 사용을 연습하면서 React.FC라는 것을 처음 보게 되었다. 컴포넌트를 선언하면서 사용하게 되었는데 정확한 사용법을 알고 싶어서 이번 블로그 글을 작성하게 되었다. FC 타입 React.FC는 함수형 컴포넌트의 타입을 선언할 때 사용한다. React.FC 와 같은 식으로 안에 props에 대한 타입을 선언해줌으로써 사용할 수 있다. interface Props { content: string } const Modal: React.FC = ({ content }) => ( { content } ) FC 타입이 정의되어있는 코드를 보면 type FC = FunctionCompone..

Redux Toolkit (RTK)와 TypeScript를 활용하여 작성한 로직입니다. Redux Thunk Redux Store는 state의 변화에 따라 UI를 업데이트하기 위해서, 동기적으로 로직이 돌아간다. Redux Store에서 비동기적인 로직을 처리할 수 없기 때문에, Middleware를 추가하여 비동기적으로 처리되는 로직을 담당하게 한다. Redux Thunk는 Redux의 Middleware 중 하나로서, store와 상호작용하여 비동기적인 로직을 사용할 수 있다. 이번 프로젝트에서는 Redux Toolkit을 사용하기 때문에, configureStore 메서드 내부에 Redux Thunk가 기본적으로 세팅되어 있다. Create useSelector & useDispatch 우선 여러..

프런트엔드 프로젝트를 진행하면서 모달을 사용할 때가 너무나도 많다. Modal의 사용성에 대해서 알아보던 중, Portal이라는 개념을 사용해서 모달을 사용하는 경우를 알게 되었다. 그래서 Portal이 어떤 것이고, 실제로 Portal을 활용해서 Modal까지 만들어 보았다. Portal Portal을 들었을 때, 처음 드는 생각은 약간 순간이동 이런 건가? 하는 생각이 들었다. React 공식 문서에 따르면 Portal이란 상위 DOM 계층 외부에 존재하는 DOM 노드로 자식 컴포넌트를 랜더링 시키는 방법이라고 정의되어있다. ReactDOM.createPortal(child, container) 첫 번째 인자로는 Child (자식 컴포넌트) 요소가 들어가고, 두 번째 인자로는 자식 컴포넌트가 담길 상..

React에서 데이터는 일반적으로 위에서 아래(부모 컴포넌트 → 자식 컴포넌트)로 props를 통해 전달된다. 하지만 프로덕트의 크기가 커지고, 컴포넌트의 깊이가 깊어지면 Props의 사용이 번거롭게 느껴진다. Context를 활용하면 컴포넌트 사이에 이러한 값을 props 전달없이 공유할 수 있다. 언제 Context를 사용해야 할까 Context는 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안한 방법이다. 현재 로그인 상태, 테마, 현재 사용중인 언어 이러한 데이터를 자주 사용한다. // context를 사용하면 모든 컴포넌트를 일일이 통하지 않고도 // 원하는 값을 컴포넌트 트리 깊숙한 곳까지 보낼 수 있습니다. // light를 기본값으로 하는 테마 context를 만들어 봅시다..