오늘은! Zustand 사용법을 알아볼 것이다. 바야흐로 n개월전... 정말 라이브러리라는 것을 거의 몰랐던 나는 실무에서 엄청난 코드를 마주하게 된다.. 어느정도 규모가 좀 있는 프젝이였는데 초반에 코드를 짜던 분이 (그분도 프론트는 익숙치 않다 했음,,) 상태 관리를 useState로 다 하고있었던 .. (근데 그게 맞는 건줄 알았ㅋ) 원래 useState로 하는 거 아냐? 라고 한다면 맞긴한데,,, 정말 단순한 로직일 경우에만 쓰지 사실상 실무에서는 거의 상태관리 라이브러리를 쓴다. (상태관리가 복잡하기 때문) useState로 하다보니 감당할 수 없는 사이드이펙트들......... 정말 울고싶었다. 아무래도 그렇게 뼈저리게 느끼다보니 아 이래서 개발자들 다 상태관리 라이브러리 쓰는 구나.. 괜히 ..

1편과 이어집니다! https://duektmf34.tistory.com/199 React Hooks 종류(1) 오늘은 React에서 유용하게 쓸 수 있는 Hook에 대해 알아보려한다. 사실 뭣도 모를 때 useState와 useEffect만 있는 줄 알았는데... (그것도 사실 뭐하는 용도인지 잘 몰랐음) 실무에서 처음보는 use접두사 duektmf34.tistory.com 이번에 다뤄볼 건 useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue 아마 마지막 3개는 간단하게 설명하고 마무리할 것 같다. useCallback useCallback Hook은 함수를 기억하고 새로 렌더링될 때마다 함수를 재생성하는 것을 방지하..

오늘은 React에서 유용하게 쓸 수 있는 Hook에 대해 알아보려한다. 사실 뭣도 모를 때 useState와 useEffect만 있는 줄 알았는데... (그것도 사실 뭐하는 용도인지 잘 몰랐음) 실무에서 처음보는 use접두사가 붙은 것들이 꽤 있어서 어버버했었다. 그 뒤로 천천히 알아가며 개념을 익혔는데 다시 한 번 정리하고자 티스토리에 기록하려함!! React Hooks 🤔 React Hooks? React 버전 16.8부터 도입된 개념으로, 함수형 컴포넌트에서도 상태 관리와 다양한 React 기능을 사용할 수 있도록 해줍니다. 이전에는 클래스형 컴포넌트에서만 상태 관리와 라이프사이클 메서드를 사용할 수 있었지만, Hook을 사용하면 함수형 컴포넌트에서도 이러한 기능을 사용할 수 있게 되었습니다. 🤔..

Matter.jsMatter.js는 웹 기반 2D 물리 엔진으로, 웹 페이지나 웹 애플리케이션에서 간단한 물리 시뮬레이션을 구현하는 데 사용된다.이 엔진은 HTML5 Canvas를 기반으로 하며, 자바스크립트로 작성되어 있다. Matter.js를 사용하면 물리적인 특성을 가진 객체들을 생성하고, 그들 간의 상호작용을 구현하여 현실적인 움직임 및 충돌 효과를 만들 수 있다. 물리엔진? 그게 뭔데 ㅠㅠ  정말 처음보는 거라 먼소린지 모르겠고,.. 공식 문서도 참 불친절하구,,,,,,,,,,,,기본 효과같은 건 구글링이나 공식문서를 보면 충분히 활용 가능하지만저 ... path지정방법과 스크롤 이펙트가 어렵다. 그래서 오늘은 예제 코드를 뜯어보면서 사용법을 익혀볼 생각이다.(코드펜 예제를 바탕으로 주석 설명을..

개인적으로 따고싶은 자격증이라 신청했는데 프젝과 면접준비땜시 준비도 못했다ㅋ. 토요일인데 가능하겠지..? 대충 기능은 쉬운데 시간 분배가 어렵다.. (특히 펜툴있는 문제)

전 글과 이어집니다! https://duektmf34.tistory.com/194 Next.js로 Car-showcase 클론코딩해보기! 사실 요건 작년 여름에 했던 건데.. .그땐 무작정 따라치기 바빠서 개념도 제대로 모르고 했었다. 그래서 다시 영상을 보며 모르는 부분을 체크하고 전반적인 흐름을 블로그에 작성해보려한다. duektmf34.tistory.com 다음으로 할 작업은 API 연동이다. 사용할 API는 요기! https://api-ninjas.com/api/cars Cars API - API Ninjas The Cars API provides detailed information on thousands of vehicle models from over a hundred automakers./..

사실 요건 작년 여름에 했던 건데.. .그땐 무작정 따라치기 바빠서 개념도 제대로 모르고 했었다. 그래서 다시 영상을 보며 모르는 부분을 체크하고 전반적인 흐름을 블로그에 작성해보려한다. 참고 영상: https://youtu.be/pUNSHPyVryU?si=Yihi2edO2Ym-A-Jk 아쉬운 건 API로 이미지 불러와야하는데 쓰려면 뭐 허가를 받아야하고..허가를 받으려면 통화를 해서 어떻게 쓸 건지 외국인과 통화해야했던 걸로 기억한다.. (작년 여름에 학원 사람들이랑 하면서..) 기술 스택 Next.js, Typescript, tailwind css, Post css 사용한 API https://rapidapi.com/apininjas/api/cars-by-api-ninjas/ Cars by API-N..

면접에서 기술적인 질문은 물론이고 내가 했던 프로젝트를 어떻게 어필하느냐가 중요한 것 같다. 프로젝트를 설명하면서 질문 폭격이 있을 수도 있으니 .. 제대로 준비해가야겠다. + 포폴을 다시 작업해야할 것 같다. 면접보러간 곳 중 받은 피드백이 국비지원에서 만든 포폴은 그닥 큰 매력이 느껴지지 않는다 했다. 그도 그럴 것이.. 똑같은 커리큘럼으로 배운 거라 이놈이 과연 개발 공부를 진짜 잘 한게 맞는지... 모를만도 하다..ㅋㅋ 프로젝트를 다양하게 해보면서 다시 포폴을 작업해봐야겠다! 면접 질문에서 받은 것들 리액트 뷰 어떤게 자신에게 잘 맞는지 , 그 이유는? 리액트를 쓰면서 제일 어려웠던 개념 자바스크립트 타입스크립트 둘 중에 어떤게 편한지 리액트 라이브러리 어떤 거 써보셨는지, 썼다면 어떤 게 제일 ..