Jaddong's Lab

어셋 최적화를 포함한 웹서비스에서의 최적화에 관심을 가지게 되면서 작업했던 것 중 하나이다. 아이템 리스트에서 처음에 썸네일 이미지가 보이기 전에 스켈레톤 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", }..

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

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

그냥 이메일, 패스워드를 활용한 로그인/로그아웃이 있는가 하면 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..

매번 하드코딩으로 마크업하던 걸 좀 자동화하기 위해서 회사에서 간단한 어드민을 개발하려고 하는데, 백엔드까지 혼자서 손보기에는 시간과 힘이 너무 들기에,,,,😥 파이어베이스로 백엔드 프로세싱을 하고 프론트만으로 개발할 수 있다는 걸 알게 되서 시작한 프로젝트이다. 혼자서 깃허브에서 테스팅을 완료했고, 실제 사내에서 이용하기 위한 프로젝트를 개발하면서 블로깅할 예정이다. 매번 혼자서 공부하면서 하려니,,,, 좀 시간이 걸릴 것 같다 😂 아무튼 화이텡....! 최종코드 : github.com/jayounglee92/react-firebase 1. 목표설정 우선! 하고자하는 목표는 아래와 같다. (스타일은 나아중에 추가적인 부분....!) - 소스 관리 : GitLab - 호스팅 : Netlify - 백엔드 ..

1. yarn 글로벌 인스톨하기 $ yarn global add npx 2. npx 설치 및 최신화(업그레이드) $ npm i npx -g 3. 리액트 프로젝트 셋팅 $ npx create-react-app {프로젝트 폴더명}

이미 리액트 빌드 되어진 저장소에서 프로젝트는 받아서 작업하여 빌드, 배포합니다. 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

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..