최근 진행하는 프로젝트에서 Drag Carousel을 구현해야했었습니다. 원래는 직접 구현하려했으나.. 시간이 좀 빠듯하기도 하고 한번 사용해보고싶기도 해서 라이브러리를 뒤져봤는데 react-slick이라는 라이브러리가 있더라구요 Neostack The last react carousel you will ever need react-slick.neostack.com 상당히 여러가지 옵션들을 제공하니, 한번 써보시는거 추천드립니다. 직접 구현해보는 것도 좋지만, 저는 css 스타일링하는게 너무 머리가 아팠어요 들어가면 예시로 주는 코드가 class로 되어있어서 좀 골치 아프실텐데.. import React, { PropsWithChildren, ReactNode, } from 'react'; import ..

토스 넥스트 시험을 봤습니다. 어차피 잘 풀거라고 생각하지는 않았었고 해서,, 과제 테스트는 처음이기도 하니 그냥 문제만 잘 보고 할수있는만큼만 풀어보자는 생각으로 시험을 시작했던거같습니다. 시험시간은 2시간 반, 오후 2시부터 오후 4시 반까지였구 저는 한 4시쯤에 gg치고 손 놨던 것 같네요 문제를 업로드하면 당연히,, 걸리기때문에 후기와 제가 부족했던점을 적어보려고 합니다. 문제 후기 문제 자체는 키패드 구현하는 문제였고, 주는 Api 잘 받아서 쓰면 되는 문제였습니다. 얼마나 더 이야기 할 수 있는지는 잘 모르겠어서 이정도만.. 부족하다고 느꼈던 부분들 1. 타입스크립트 숙련도 이슈 가장 먼저 느낀 부족한 점 이었습니다. 타입스크립트로 코딩을 많이 하지 않았어서, 여기저기서 터져나가는 오류를 잡는..

저번에 프로젝트를 하면서 어떻게하면 사이트를 더 최적화할 수 있을까에 대해서 고민하다가 유용한 팁을 발견해서 공유드리려고 합니다. 사실 노마드코더님 영상이라 볼 분들은 다 봤겠지만은... 우리는 흔히 html에서 사진을 넣고 싶을 때 그냥 태그를 많이 사용합니다. 뭐 물론 img 태그 쓰는게 틀리진 않았다지만.. 더 좋은 방법이 있습니다 1. Lazy Loading 사용하기 태그에 lazy loading을 설정하는 것 만으로도 최적화에 도움을 줄 수 있습니다. lazy loading은 이미지를 처음에 다 불러오는게 아니라, 유저가 실제로 이미지를 볼 때 로딩하는 기법입니다. 처음에 모든 사진을 로딩하지 않으니 초기 로딩속도가 증가하겠죠? 2. 사용하기 사실 이렇게 쓰는것과 img 태그를 그냥 쓰는것의 퍼..

한학기동안 학교 기초캡스톤 과목을 수강하며 13명(사실 5명정도)이 만든 프로젝트... (달리 api가 쓰면 돈나가서, BE 맡으신분에게 달리 지갑 닫혀있냐고 물어보고 링크 올리겠습니다) 물론 생각보다 좀 덜 개발된 부분도 있었고, 오류도 있었고 했으나 전체적으로 봤을 때 성공적인 프로젝트였다고 생각합니다. (입상은 못해서 너무 아쉬웠어요) FE단은 리액트로 내가 거의 다 만들었고, (PM하는 친구가 웹 풀스택이었기에 도와줬습니다) 그렇기에 아쉬움이 좀 남네요. 사실상 두 번째로 하는 프로젝트였고, 이전에 썼던 툴과는 다른 툴을 썼습니다 (redux -> recoil, axios -> react query) 새로운 툴을 배워간다는 생각으로 시작했던 프로젝트여서 사실 완성도가 좀 떨어질거라고 생각은 했으나..

리액트는 엄청나게 다양한 hook들이 있습니다. 이 글을 쓰고 있는 지금도 제가 모르는 훅들이 정말 많구요, 이번 프로젝트를 하면서 유용하게 사용했던 useParams에 대해서 포스팅해보고자 합니다. 준비 사용하기 위해서는 react-router-dom 을 설치해야합니다. npm install react-router-dom 자바스크립트 개발자라면 개나소나 다 알고있는 npm을 사용하셔도 되고, yarn을 쓰셔도 됩니다. 사용 저같은경우는 이런식으로 route에다가 : 기호를 달아놓고 이후에 값을 지정해줬습니다 가령 /post/:postNum은, /post에서 파라미터로 postNum을 붙인다는거죠 /mypage/:userId도 마찬가지입니다, /mypage에서 파라미터로 userId를 받아오게 되는거죠 ..

우선 가끔 너무 당당하게 헛소리를 하는 GPT 선생님께 해당 내용에 대해서 질의를 해보았습니다 이번에 프로젝트를 하면서 특정 값들이 component(prop) drilling이 되는 상황을 발견했습니다. 전역 상태로 관리하는 항목들이 저러한 값들이 있는것들은 생각을 하고 있는 내용이긴 했으나, 한 3~4개정도의 컴포넌트를 drilling하다보니, 이정도면 위의 항목에는 해당하지 않아도 전역상태로 관리해줘야 하는게 아닐까? 라는 생각을 했습니다. 해서, 해당 내용까지 GPT에 함께 질의해보았습니다. GPT 선생님꼐서도, prop drilling 이 발생한다면 전역 상태로 분리하는것이 좋은 방법이라고 대답을 해주시네요, 하지만 단순 지피티만 곧이 곧대로 믿기에는 곤란해서, 해당 내용을 구글링하여 좋은 포스..