Jaddong's Lab

package.json에서는 우리가 해당 프로젝트에 대한 정보 및 의존 정보들을 작성하게된다.name, verson, repository, scripts, dependencies, devDependencies 등의 정보가 json형태로 존재한다.package.json에서 대부분 쓰는 항상 항목들만 쓰는 경우가 많을 것이다.하지만 만약 공통 모듈 패키지나 라이브러리를 개발중이라면 peerDependencies에 집중할 필요가 있다는 걸 알게되었다.  1. 문제 발견my-app 리액트 프로젝트에서 내가 개발한 라이브러리 my-packge와 another-package를 설치해 사용하려고했다.아래와 같은 package.json를 작성하였다. { "name": "my-app", "version": "1.0...

목적 국제화(internalization)된 애플리케이션은 다양한 언어로 서비스를 할 수 있습니다. 그러기 위해서는 사용자의 언어/지역을 자동으로 감지하거나 사용자가 직접 선택할 수 있도록 합니다. 라이브러리 비교 React에서 사용할 수 있는 국제화(internalization, 이하 i18n) 라이브러리는 두 종류가 있습니다. react-intl react-i18next Next.js지원을 강화한 next-i18next 결론부터 말하자면 다음과 같습니다. Next.js와 Server Side Rendering(SSR)을 사용해야 한다면 next-i18next Next.js의 Static Site Generation(SSG)을 사용해야 한다면 react-i18next SSR이 필요해질 경우 next-i..

어셋 최적화를 포함한 웹서비스에서의 최적화에 관심을 가지게 되면서 작업했던 것 중 하나이다. 아이템 리스트에서 처음에 썸네일 이미지가 보이기 전에 스켈레톤 UI를 보여주곤 한다. 그래서 스켈레톤 컴포넌트를 공통으로 쓰고 있었다. 그러다 보니 단순 이미지 엘리먼트뿐만 아니라 스켈레톤 UI의 DOM도 포함됨으로써 시각적으로 좀 느린 느낌이 느껴졌다! 물론 사용자 입장에서는 크게 느끼지 못할 수 있으나, 개발자 입장에서는 사소한 느린 로딩도 알아채기가 쉽다.... 그래서 찾게 된 방법이다. 특히나 emotion이나 styled-component 같은 CSS-in-JS를 사용한다면 DOM구조가 나도 모르게 엄청 깊어지는 걸 알 수 있다. 그래서 이 최대한 DOM요소를 줄여 로드되는 시간을 줄이고자 했다. DOM..

서비스가 심미적이나 기능적으로 모두 구현되었다고 끝이 아님을 대부분 개발자들이 알고 있을 것이라 생각한다. 그중에 꼭 짚고 넘어가야 할 것이 어셋들(image, video, sound 등)에 대한 성능 최적화 작업이다. 성능 최적화 작업은 프론트엔드, 벡엔드, 디자이너 단에서 모두 각자의 방식으로 작업이 가능하나 그중 나는 프론트엔드 쪽에서 작업한 경험을 간단하게 정리해 보았다. 이미지 최적화하기 svg svg 이미지는 sources로 사용하는 것보다 svg그대로 사용하는 것이 성능에 좋다. import { ReactComponent as Logo } from "assets/icons/logo_bg.svg"; const LogoComponent = () => { return ( ); }; sources ..

React로 개발하는 사람들에게는 useEffect는 아주 익숙한 Hook이다. 페이지 뿌려줄 data를 불러오기 위해 api call해서 data set하기도 하고 useEffect(() => { const getData = async () => { const res = await getData(); setData(res); }; getData(); }, []); store에 있는 값을 체크해 페이지 이동을 하기도 하고 useEffect(() => { if (!storeValue) { history.goBack(); } }, []); 처음 페이지가 떴을 때 스크롤의 위치를 셋팅하기도 한다. useEffect(() => { window.scrollTo({ top: 0, behavior: "auto", }..

1. The imports statements : React Import Structure(RIS) import를 사용하여 파일과 모듈을 가져올 수 있습니다 . 대부분의 경우, 특히 대규모 프로젝트로 작업할 때 더 나은 가독성과 리팩토링을 위해 절대 가져오기 를 설정하고 사용하는 것이 좋습니다. 방법 참고링크 : https://bgradecoding.tistory.com/14 Bad example // Note: A not-so-good example for unorganized & relative imports import React from 'react'; import Alert from '@material-ui/lab/Alert'; import GoogleMap from '../../../compo..

갑자기 재택을 하게 되어서 회사 노트북은 아닌 개인 노트북으로 작업을 하게되었다. git 계정 변경하고 노드 버전 nvm 설치하고 오전을 거의 셋팅하는데 시간을 쓴 듯 싶었다. 그런데 clone을 잘하고 나서도 vscode에 빨간줄이 쫘아악나는 걸 볼 수 있었다. 오류는 아니고 typescript버전에 따른 문제였다. F1을 눌러 typescript 입력 TypeScript : Select TypeScript Version...을 클릭한다. 보면 Use VS Code's Version 이 선택되어 있음을 알 수 있다. 요걸 아래에 있는 Use Workspace Version 을 클릭하여 바꿔준다. node_modules 맞춘다는 뜻이다. 그러면 빨간줄이 모두 없어진다! .vscode파일 내에 있는 .se..

React에서 제공하는 Hook들 보통 많이 쓰이는 useEffect, useCallback 같은 것들은 이미 리액트에서 재공해주는 훅이고, 커스컴 훅은 말그대로 use{블라블라} 형태로 내가 만들고 싶은 훅을 만드는 것이다. 그냥 보통 쇼핑몰 사이트만 생각했을 때, 회원가입, 로그인, 문의사항 폼이 있다고 생각해보자. 각 폼에만 해도 아이디, 이메일, 비밀번호, 내용 등의 input들이 있을 것이고 각각을 구성할 수 도 있지만, 리액트의 기본인 컴포넌트로 재사용성을 높힌 것 처럼 커스텀훅을 사용하여 공통적인 것들은 따로 분리하고 가능한 재사용할 수 있도록 하여 로직을 최소화할 수 있다는 장점이 있다. 내가 커스텀훅을 써본 적이 없다고 생각을 했는데, 생각보니 전에서 썼던 react-hook-form 이..

useState로 object형태의 상태를 업데이트 하는 방법은 두 가지가 있다. 보기엔 문제없이 동일하게 동작하지만 차이가 있고, 1번보다는 2번은 권장한다. const [userInput, setUserInputs] = useState({ title: '', amount: '', date: '' }); const titleChangeHandler = (event) => { // 방법 (1) : not good setUserInputs({ ...userInput title: event.target.value }); // 방법 (2) : good setUserInputs((prevState) => { return { ...prevState, title: event.target.value } }; } 리액..

서버사이드렌더링을 위한 프레임워크인 Nestjs를 사용해서 프로젝트를 시도해서 개발중이다.🙄 물론 처음이니까 아직 Nextjs를 안다기보단 겉햙기 중인데, 워낙 도큐멘트나 깃에 정리가 잘 되어있는 편이라 조금씩 읽어보면서 셋팅 및 개발해보고 있다. 이번 프로젝트에서 에디터 적용이 필요한 경우여서, 여러 개를 서칭해봤는데 React와 Quill Editor를 많이 사용하고 있는 것 같아서 선택하게 되었다. (summernote만 해본자,,,, 🧐) 허나, 서버사이드렌더링이란 특징때문에 그대로 Quill을 적용하게 되면 아래와 같이 document is not defined라는 에러가 발생하게 될 것이다. 그래서 해결한 소스는 아래와 같다! Next.js는 JavaScript 용 ES2020 dynamic ..