지선생 코딩딩 지선생 코딩딩

전부터 안쓰는 기능이 많은 CRA를 안쓰고 직접 빌드를 해봐야겠다고 생각만 해보다가 프로젝트에 vite를 사용한다고 해서 냅다 시작해 보았다. 장점 서버 구동시간 공식 문서에서 가장 먼저 어필하던게 서버 구동이 빠르다는 점이다. dependencies 그리고 source code 두 가지 카테고리로 나누어 따로 번들링 한다고 한다. dependencies는 개발하는 와중에 바뀌지 않을 내용이다. Esbuild를 사용한 사전 번들링으로 기존 번들러 (Webpack, Parcel 포함) 보다 10~100배 빠르다고 한다. 실행해 보니까 첫 구동때 체감이 될정도로 빠르다. 보통 5~6초 걸리던 프로젝트 시작시간이 한 2~3초 걸리는 느낌? 코드 갱신 시간 source code 부분 코드 갱신도 빠르다고 하는데..

저번 프로젝트도 그렇고 지금 프로젝트도 그렇고 자꾸 별점 컴포넌트를 필요로 합니다. 이번 프로젝트는 MUI, 라이브러리 등을 사용하지 않고 만들고 있습니다. 근데 구글링을 해보니 딱히 프로젝트에 적용할 만한 글이 없길래 직접 만들었습니다. 만드는 김에 재활용성 빵빵하게 만들어서 두고두고 쓰자 라는 생각이 들었습니다. 제 생각엔 어디든 쓸 수 있을 거 같으니 퍼가서 써도 좋을 거 같습니다. 결과물부터 보여드리면 원리를 간단하게 설명하면 1. 별을 누르면 값이 변하고 2. 변한 값보다 작으면 별을 색칠하고 3. 변한 값을 부모로 보낸다 입니다. 진짜 간단하네요 RatingSection.tsx // line 26 까지는 css const RatingContainer = styled.div` display: f..

지금 쇼핑몰 프로젝트를 하고 있는데 구현하고 싶은 기능이 있다. 이렇게 생긴 버튼을 클릭하면 해당 부분으로 스크롤을 자동으로 움직여주는 기능이다. 거의 모든 쇼핑몰에서 사용하고 있길래 이번 프로젝트에서 적용해 보았다. 첨에는 쉽지 않겠다... 싶었는데 찾아보니 useRef에 구현해놓은 메서드가 이미 존재했다 (https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView) element.scroolIntoView라는 메서드였다. 바로 useMoveScroll라는 hook을 만들어 활용해 보았다. import { useRef } from 'react'; //hook function useMoveScrool() { const element = us..

새로운 프로젝트를 시작하며 준비기간 동안 하고 싶었던 공부를 하고 있는데 벤치마킹을 하며 여러 쇼핑몰을 돌아보니 https://lckshop.com/ LCKshop.com - LCK샵 LCKshop.com - LCK샵 The official Online Shop of LCK lckshop.com 이 사이트처럼 애니메이션 css를 도입하면 좋을 거 같아서 Hook으로 만들어 적용해 보자 라는 생각에 여러 가지 블로그와 깃허브를 참고했습니다. 구현 결과 화려하진 않지만 나름 쓸만 합니다. 구동방식은 다음과 같습니다. 특정 element를 사용자가 보고 있는지 확인한다 Animation을 실행한다. 이벤트를 DOM에 지정한다. hook을 실행하기전 props값을 받아 재사용성을 고려합니다. const useS..

Next.js 에서 페이지 이동을 하고싶을때 router.push 로 하는게 좋을까 Link로 하는게 좋을까? 저번 프로젝트를 같이 하셨던분이 컴포넌트에 Link를 쓰지않고 router.push로 작동을 시켰길래 궁금증이 생겼다. next에서 만든 Link 태그가 따로 있는데 둘이 차이점이 뭘까? 검색을 해보니 1초만에 나왔다. router.push는 onclick에 사용되는 행동(action) 이기 때문에 Link 태그보다 검색에 불리하다. NextJs의 장점이 SEO (search engine optimization : 검색엔진최적화) 인걸 고려했을때, Link 사용을 추천한다 라고 한다. (쉽게말해 Link를 썻을때 검색봇에 노출될 가능성이 높아짐) 이제부터 Link 써야겠다.

인프런 John ahn 선생님의 강의를 들으면서 정리한 글이다. 강의는 백엔드에서 1. 회원가입 2. 로그인 3. 누가 로그인했는지 확인 : 관리자인지? 일반 사용자인지? 4. 로그아웃 까지 하는 걸 목표로 삼고 있다. node js, express js 설치부터 시작해서 NODE MON, mongoDB, POST MAN, 패키지(bodyparser,cookieparser...) 등등 개발에 필요한 작업들을 처음부터 알려주시는 게 좋았다. 익숙치 않아서 처음 들을 때는 따라가기에 급급했는데 다 하고 나서 천천히 살펴보니 생각보다 단순했다. User.js에서 함수를 만들고 index.js 에서 활용하는 식이다. 하나 아쉬운 점은 모든 함수가 에러가 났을 때 if(err) ~~~ cb으로 에러처리를 한다는건..