티스토리

Jaddong's Lab

검색하기

블로그 홈

Jaddong's Lab

jaddong.tistory.com/m

Front-end web developer based in Seoul.

구독자: 17

방명록 방문하기

주요 글 목록

디자인 시스템을 개발하면서 알게 된 peerDependencies의 역할 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... 공감수 0 댓글수 1 2024. 6. 10.
i18n(국제화 언어)리액트에서 적용하기 목적 국제화(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.. 공감수 0 댓글수 0 2024. 3. 11.
리액트에서 DOM 사이즈 줄이는 최적화 방법 어셋 최적화를 포함한 웹서비스에서의 최적화에 관심을 가지게 되면서 작업했던 것 중 하나이다. 아이템 리스트에서 처음에 썸네일 이미지가 보이기 전에 스켈레톤 UI를 보여주곤 한다. 그래서 스켈레톤 컴포넌트를 공통으로 쓰고 있었다. 그러다 보니 단순 이미지 엘리먼트뿐만 아니라 스켈레톤 UI의 DOM도 포함됨으로써 시각적으로 좀 느린 느낌이 느껴졌다! 물론 사용자 입장에서는 크게 느끼지 못할 수 있으나, 개발자 입장에서는 사소한 느린 로딩도 알아채기가 쉽다.... 그래서 찾게 된 방법이다. 특히나 emotion이나 styled-component 같은 CSS-in-JS를 사용한다면 DOM구조가 나도 모르게 엄청 깊어지는 걸 알 수 있다. 그래서 이 최대한 DOM요소를 줄여 로드되는 시간을 줄이고자 했다. DOM.. 공감수 0 댓글수 0 2024. 1. 10.
리액트에서 라이브러리없이 간단하게 이미지 최적화하기 서비스가 심미적이나 기능적으로 모두 구현되었다고 끝이 아님을 대부분 개발자들이 알고 있을 것이라 생각한다. 그중에 꼭 짚고 넘어가야 할 것이 어셋들(image, video, sound 등)에 대한 성능 최적화 작업이다. 성능 최적화 작업은 프론트엔드, 벡엔드, 디자이너 단에서 모두 각자의 방식으로 작업이 가능하나 그중 나는 프론트엔드 쪽에서 작업한 경험을 간단하게 정리해 보았다. 이미지 최적화하기 svg svg 이미지는 sources로 사용하는 것보다 svg그대로 사용하는 것이 성능에 좋다. import { ReactComponent as Logo } from "assets/icons/logo_bg.svg"; const LogoComponent = () => { return ( ); }; sources .. 공감수 0 댓글수 2 2024. 1. 3.
useEffect와 useLayoutEffect의 차이 예제로 쉽게 이해하기 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 댓글수 0 2023. 1. 13.
React Clean Code 를 위한 팁 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.. 공감수 2 댓글수 0 2022. 9. 4.
Cannot use JSX unless the '--jsx' flag is provided.ts(17004) 빨간줄 없애기 갑자기 재택을 하게 되어서 회사 노트북은 아닌 개인 노트북으로 작업을 하게되었다. git 계정 변경하고 노드 버전 nvm 설치하고 오전을 거의 셋팅하는데 시간을 쓴 듯 싶었다. 그런데 clone을 잘하고 나서도 vscode에 빨간줄이 쫘아악나는 걸 볼 수 있었다. 오류는 아니고 typescript버전에 따른 문제였다. F1을 눌러 typescript 입력 TypeScript : Select TypeScript Version...을 클릭한다. 보면 Use VS Code's Version 이 선택되어 있음을 알 수 있다. 요걸 아래에 있는 Use Workspace Version 을 클릭하여 바꿔준다. node_modules 맞춘다는 뜻이다. 그러면 빨간줄이 모두 없어진다! .vscode파일 내에 있는 .se.. 공감수 0 댓글수 0 2022. 2. 9.
커스텀 훅 기본 형태 예제 React에서 제공하는 Hook들 보통 많이 쓰이는 useEffect, useCallback 같은 것들은 이미 리액트에서 재공해주는 훅이고, 커스컴 훅은 말그대로 use{블라블라} 형태로 내가 만들고 싶은 훅을 만드는 것이다. 그냥 보통 쇼핑몰 사이트만 생각했을 때, 회원가입, 로그인, 문의사항 폼이 있다고 생각해보자. 각 폼에만 해도 아이디, 이메일, 비밀번호, 내용 등의 input들이 있을 것이고 각각을 구성할 수 도 있지만, 리액트의 기본인 컴포넌트로 재사용성을 높힌 것 처럼 커스텀훅을 사용하여 공통적인 것들은 따로 분리하고 가능한 재사용할 수 있도록 하여 로직을 최소화할 수 있다는 장점이 있다. 내가 커스텀훅을 써본 적이 없다고 생각을 했는데, 생각보니 전에서 썼던 react-hook-form 이.. 공감수 0 댓글수 0 2022. 1. 1.
useState object 형태 업데이트하기 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 } }; } 리액.. 공감수 9 댓글수 0 2021. 9. 16.
Nextjs에서 Quill Editor 적용하기 서버사이드렌더링을 위한 프레임워크인 Nestjs를 사용해서 프로젝트를 시도해서 개발중이다.🙄 물론 처음이니까 아직 Nextjs를 안다기보단 겉햙기 중인데, 워낙 도큐멘트나 깃에 정리가 잘 되어있는 편이라 조금씩 읽어보면서 셋팅 및 개발해보고 있다. 이번 프로젝트에서 에디터 적용이 필요한 경우여서, 여러 개를 서칭해봤는데 React와 Quill Editor를 많이 사용하고 있는 것 같아서 선택하게 되었다. (summernote만 해본자,,,, 🧐) 허나, 서버사이드렌더링이란 특징때문에 그대로 Quill을 적용하게 되면 아래와 같이 document is not defined라는 에러가 발생하게 될 것이다. 그래서 해결한 소스는 아래와 같다! Next.js는 JavaScript 용 ES2020 dynamic .. 공감수 2 댓글수 2 2021. 3. 27.
react-native 에서 expo start 했을 때, "EMFILE: too many open files, watch" error 해결하기 window 에서는 바로 되더니, 오랜만에 맥북을 꺼내 셋팅하려니까 에러가 뜬다.....ㅠ_ㅠ 해결방법!! 터미널에 아래와 같이 명령어를 치면 brew install watchman Homebrew 를 업데이트하기 시작한다. 리액트 네이티브 내부에서 파일들의 변경을 감시하기 위해 watchman을 사용하기때문이라고 한다. 공감수 1 댓글수 2 2021. 1. 5.
[firebase] 구글/깃허브 로그인/로그아웃 (+그냥 로그인/로그아웃) 그냥 이메일, 패스워드를 활용한 로그인/로그아웃이 있는가 하면 google, github, facebook 같은 소셜 로그인이 있다. 어드민 같은 경우에는 소셜 로그인을 할 필요는 없을 것 같다고 판단했고, 작업은 이메일과 패스워드로 Create Account를 해서 해당 Account가 firebas Authentication User에 남도록 하는 목표로 수정하였다. 그래도 소셜로그인 테스트도 진행해보았다. 최종코드 : github.com/jayounglee92/react-firebase 1. 선행작업 자세한 선행작업은 스킵하겠다. CRA로 프로젝트 생성 : https://ko.reactjs.org/docs/getting-started.html react-router-dom 설치 : https://r.. 공감수 0 댓글수 1 2020. 9. 15.
[firebase] 백엔드없이 firebase로 리액트 프로젝트 만들기 매번 하드코딩으로 마크업하던 걸 좀 자동화하기 위해서 회사에서 간단한 어드민을 개발하려고 하는데, 백엔드까지 혼자서 손보기에는 시간과 힘이 너무 들기에,,,,😥 파이어베이스로 백엔드 프로세싱을 하고 프론트만으로 개발할 수 있다는 걸 알게 되서 시작한 프로젝트이다. 혼자서 깃허브에서 테스팅을 완료했고, 실제 사내에서 이용하기 위한 프로젝트를 개발하면서 블로깅할 예정이다. 매번 혼자서 공부하면서 하려니,,,, 좀 시간이 걸릴 것 같다 😂 아무튼 화이텡....! 최종코드 : github.com/jayounglee92/react-firebase 1. 목표설정 우선! 하고자하는 목표는 아래와 같다. (스타일은 나아중에 추가적인 부분....!) - 소스 관리 : GitLab - 호스팅 : Netlify - 백엔드 .. 공감수 0 댓글수 0 2020. 9. 14.
yarn 글로벌 인스톨 하고 npx 설치 및 최신화(업그레이드) 1. yarn 글로벌 인스톨하기 $ yarn global add npx 2. npx 설치 및 최신화(업그레이드) $ npm i npx -g 3. 리액트 프로젝트 셋팅 $ npx create-react-app {프로젝트 폴더명} 공감수 0 댓글수 0 2020. 5. 19.
오랜만에 yarn start 또는 npm start 시 나는 오류 TypeError ERR_INVALID_ARG_TYPE: The "path" argument must be of type string yarn start 또는 npm start 시 나는 오류 해결 오랜만에 레파지토리를 작업하려고 git pull을 한 후에 yarn start 를 했는데 아래와 같은 오류가 나왔다. (아래 ....은 생략한 것) TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined at assertPath (path.js:39:11) ...... 구글링해보니 버전 문제로 보이고 아래와 같은 단계로 하니 문제없이 yarn start 가 되었다 :) package.j.. 공감수 0 댓글수 0 2020. 4. 21.
리액트에서 img 태그 버그 해결방법 : alt 의 중요성 img elements must have an alt prop, either with meaningful text, or an empty string for decorative i... 위와 같은 형식으로 이미지 태그를 작성 했더니 아래와 같은 오류나 났다. Windows PowerShell Compiled with warnings. ./src/component/About.js Line 17:29: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Search for the keywords to learn more about each .. 공감수 13 댓글수 2 2020. 4. 21.
리액트 프로젝트 레파지토리 받아서 세팅하기 이미 리액트 빌드 되어진 저장소에서 프로젝트는 받아서 작업하여 빌드, 배포합니다. 1. 프로젝드받아서 실행하기 프로젝트의 깃주소로 저장소 프로젝트를 로컬에 clone 및 실행합니다. git clone https://github.com/{username}/{repo-name}.git // 예시 cd {repo-name} // 로컬 프로젝트 폴더로 들어감 yarn yarn start 2. 작업 후에 저장소로 커밋, 푸쉬 git add . // 내가 수정한 전체내역을 git commit -m "커밋메세지" // 커밋하고 git push // 푸쉬 3. 빌드 후 배포 $ yarn build $ yarn run deploy 공감수 0 댓글수 1 2020. 4. 21.
리액트 프로젝트 만들기 node, npm/yarn, create-react-app 설치, build와 GitHub Pages 배포까지 1. node.js 설치 리액트 작업에 필요한 라이브러리들을 손쉽게 설치하기 위한 node의 패키지 매니저 npm/yarn을 위해 먼저 node.js 를 설치합니다. node.js 사이트 : https://nodejs.org/ko/ 설치가 잘 되었다면 터미널에서 버전확인이 가능합니다. $ node -v v10.15.1 npm은 node.js를 설치할 때 함께 설치되기 때문에 따로 설치할 필요가 없습니다. $ npm -v 6.8.0 2. create-react-app 설치 및 사용 프로젝트들을 담아둘 디렉토리에서 아래와 같이 설치를 하면 "my-app"이라는 폴더가 생깁니다. $ npx creat.. 공감수 0 댓글수 0 2020. 4. 21.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.