오늘은! 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지정방법과 스크롤 이펙트가 어렵다. 그래서 오늘은 예제 코드를 뜯어보면서 사용법을 익혀볼 생각이다.(코드펜 예제를 바탕으로 주석 설명을..

오늘은 복잡한 구조로 이루어져있는 json을 변환해서 트리구조로 읽기 쉽게끔 리더기를 만들어볼 거다 디자인에 신경을 쓰고싶지만.. 귀찮아서 대충 긁어오는중..ㅋㅋ JSON Reader 구조 JSON Reader 변환 원래 파일 첨부기능도 넣고싶었지만.. 그 input type=file 스타일링이 귀찮아서 뺐다..ㅋㅋ 스크립트는 적용시켜놨으니까 참고해주시긔 여기서는 button을 눌렀을 때 displayJson함수가 실행되는 onClick 이벤트 정도만 봐도 될 듯 싶다. CSS @font-face { font-family: "Pretendard-Regular"; src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretenda..

오늘은 날씨 오픈 API를 활용해서 간단하게 만들어보았다! 단점은... 영어로만 도시를 검색해야한다는 점 ㅜㅜ 되게 간단한 기능인데도 자스 코드가 그렇게 간결하지가 않다.. (최대한 리팩토링 해봤는데도..) 아마 괜히 효과주고 싶어서 gsap랑 css 뭐 이것저것 넣었는데 별 호과없음 ㅋㅋㅋ 다음엔 좀 더 멋지게 만들어야징. Weather App 구조 유효하지 않습니다! 다시 한 번 확인해주세요. 습도 풍속 배경쪽은 무시해주시고 ㅎㅎ.. 에러문구는 display: none으로 감춰놨다가 if문을 사용해 잘못 검색했을 시 에러 문구를 노출시키게끔 스크립트를 짰다. CSS @font-face { font-family: "SUIT-Regular"; src: url("https://cdn.jsdelivr.net..

코딩테스트를 보러갔는데.. 자바스크립트로 심플한 투두리스트를 만드는 과제였다. 마크업과 스타일링은 20분?정도 걸렸는데 문제는... 자바스크립트를 다 까먹어서 ㅋㅋㅋㅋ... 추가하는 기능까진 만들었는데... 시간이 없어서 나머지는 못 만들었다. 그래서 만들어본 투두리스트.. 자바스크립트 공부 좀 열심히 해야겠다 ^^; To-Do List 구조 ✍️ T o - D o L i s t Add h1태그에선 CSS로 애니메이션 효과를 주고싶어서 span으로 쪼갰습니다. // 폰트 @font-face { font-family: "SUITE-Regular"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.wo..

코딩테스트 51일차 소수 찾기 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) function solution(n) { var answer = 0; // 소수 개수를 저장할 변수 초기화 for (var i = 2; i