천진난만 코딩 스토리

오늘은 어제 멘탈터져서 다른 공부하느라 못 했던 과제를 했다. 스타일트 컴포넌트로 버튼, 인풋, 모달, 셀렉트를 만들어내는 것이었다. 버튼은 어려울 것 없이 뚝딱!! 인풋도 괜찮았지만 단 하나, 인풋창에 숫자만 입력되게 하고 세자릿수마다 콤마가 찍히도록 하기 위해서 정규식을 사용해야만 했던 것이다... const priceChangHandler = (setPrice, e) => { e.target.value = e.target.value.replace(/[^0-9]/g, ""); // 입력값이 숫자가 아니면 공백 e.target.value = e.target.value.replace(/,/g, ""); // ,값 공백처리 e.target.value = e.target.value.replace(/\B(?=..

리액트 패턴중에 하나인 컴파운드 패턴을 연습했다. 최대한 컴파운드를 기능단위로 쪼개서 칠드런으로 컴파운드를 계속 뱉어 들어간다. 이렇게하면 코드 재사용이 매우 편해진다는 장점이 있다. 애지간하면 props를 자제하는게 좋은데 분기가 단순한 경우에는 props 한둘 정도는 넣어도 괜찮다. 컴파운드컴포넌트 패턴을 사용하면 복잡한 컴포넌트를 유연하게 사용할수 있다는 장점이 있다. 해당 패턴이 들어가는 컴파운드 부분에서 전체적인 구조를 한눈에 알아 볼 수 있고, 스타일 지정하고 디자인을 변경하는게 아주 용이하다. 협업시 다른 개발자가 볼 경우 한번에 뭐가 뭔지 알아볼 수 있게 하는 게 중요하니깐 네이밍이 중요하니 연습이라도 해보았다. 밑은 예시코드이다! return ( Submit uuid를 이용한 고유한 값 ..

오늘은 만들던 투두 리스트 과제를 끝냈다!!!!! 상세페이지도 연결하고, 수정기능과 글자수 제한도 만들었당. 다른 것보다 수정기능이 너무 어려웠지만! 잘 이겨냈다!! 비록 커스텀 훅을 만드는 것을 잊어버렸지만....제출을 해버렸으니,, 그래도 내일 한번 만들어 보려고 한당~ 1) 상세 페이지 연결 // Working 컴포넌트 const navigate = useNavigate(); 상세페이지 // 1번째 방법 { navigate(`/sub/${item.id}`); }} > 버튼이나 링크로 상세페이지를 연결했다. id로 연결하였고, //Router.js 라우터 파일에서도 id로 연결되게 했다. 이후에 스타일을 주고 배포까지 했다! 뿌듯 별거 없는 것 같지만 3일동안 날 괴롭힌 친구다... https://t..

오늘은 어제 파일을 날렸기 때문에 다시는 그런 불상사가 일어나지 않기 위해..... 깃 명령어를 공부하고 커밋하는 습관을 가져야겠다. 1) 깃 처음 깃 연결 및 커밋 푸시 할 때, git init git add . git commit -m "커밋명" git remote add origin 깃허브주소 git push origin 브랜치명 변경 사항 있을때마다, git add . git commit -m "새로운 커밋명" git push origin 브랜치명 -이 외 $ git remote -v 현재 연결되어 있는 원격 레파지토리를 확인한다. git remote remove origin을 사용해 주시면 연결되어 있는 저장소를 간단하게 끊을 수 있다. 2) 투두 리스트 대략적인 과정 리덕스와 라우터 돔 기본 ..

오늘은 리액트 훅과 리덕스, 라우터 돔에 대해 총정리를 했다. 리액트 훅은 어제 정리를 했지만, 리덕스와 라우터 돔은 오늘 시작했다. 개념 정리도 하고 코드도 치고 페이지도 만들어보며 다 완성을 했지만,,,,, 커밋도 하지 못한 내 파일... 날려버렸다..... 진짜 오류도 많이 나고 힘들게 만들었는데 그걸 날렸...... 진짜 너무 속상했다. 하루종일 공부하고 정리한 내용이 그대로 모래가........... 진짜 너무 속상해서 울 뻔 했는데 그거 꾹 참고 있었다. 근데 이저어언 조의 팀원분이 오셔서 도와주실 거 있나 하셨다가 그 소리에 눈물이 터져버렸다ㅠㅠ 민망하셨을텐데ㅠㅠㅠㅠ 난 그런거도 안보이고 속상한 맘이 더 컸다...힝 ㅠㅠ 그 후에 다른 분들까지 우르르 오셔서 위로해주시고 걱정해주셔서 감사했다..

이번주에는 리액트와 리덕스에 배워가는 시간이었다. 리액트 훅..... 공부하면 잊어버리고... 마치 내 머릿속에 지우개가 있는 느낌이었다. 리덕스는 할만 한 듯 했지만 뒤통수 맞았다.하ㅣ하하핳 ㅠㅠㅠㅠㅠㅠ 이번 개념들을 배우기 위해 다시한번 레더링에 대한 것을 공부하게 되었고, 직접 써보며 공부하는 시간도 가졌다.... 다시한번 배운 내용들을 총정리 느낌으로 리액트 훅과 리덕스와 라우터 돔을 공부 한 후에 과제를 해야겠다. 매우 머리가 아프지만 해내보겠다!!!!

라우터 돔은 생각보단 괜찮았는데 손에 익지는 않아서 내일 리덕스와 함께 해봐야겠다는 생각을 했다. 일요일이지만 쉴 수 없다....... 이해 못한 나를 탓해야지...어쩔 수 없지!!!! 1) react-router-dom 페이지를 구현할 수 있게 해주는 패키지이다. //아래의 명령어로 설치한다 yarn add react-router-dom react-redux처럼 react-router-dom도 폴더를 생성해 주어야 한다. pages폴더 생성 -> 안에 필요한 여러 페이지 생성 ex) Home.jsx , About.jsx ... shared 폴더 생성 -> 안에 Router.js 생성 -> router 설정 코드 작성 App.js 에서 import도 해야한다. Routes안에 있는 Route에는 reac..

오늘은 리덕스를 배웠다. 새로운 개념이라 긴장하고 좀 두려운 마음으로 리덕스를 접했다. 생각보다는 어떤 건지 감은 일찍 잡을 수 있었지만.............. 머릿속에 콕 박히지 않았다. 그래서 중간에 머리를 식힐 겸 드라이브를 하고 와서 다시 보니 조금은 이해가 되긴 했지만 확실하게 이해하기 위해서는 내일 코드를 여러 번 쳐봐야 할 것 같다. 1) 리덕스란 리덕스란 “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리)이다. 프론트엔드 개발자들은 “리덕스”를 전역 상태관리 라이브러리라고 많이 표현한다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문이다. ① useState의 불편함 컴포넌트에서 컴포넌트로 State를 보내..

오히려 리액트 훅만 볼 때 보다 최적화를 위한 훅이 더 잘 와 닿았다. 콘솔을 여러번 찍어보며 보니 더 와닿을 수 있었다. 이것도 마찬가지로 많이 사용해볼 수 있으려나 모르겠다..... 2) React Hooks - 최적화 ① 리-렌더링의 발생 조건과 최적화 ❶ 리-렌더링의 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 ❷ 최적화 리액트에서 리렌더링이 자주 일어난다는 것은 좋지 않다. 비용이 발생하는 것은 최대한 줄여야 하는 작업을 최적화(Optimization)이라고 한다. 최적화하는 대표적인 방법 memo(React.memo) : 컴포넌트를 캐싱 useCallback : 함수를 캐싱 useMemo..

리액트 훅....... 이게 매우 중요하다는 것도 알고, 어려운 내용이고 공부할 양이 많다고 다들 말해주셨다. 근데 주어진 자료를 보고 자료수집을 더 해보아도, 어떻게 사용하는 것인지, 어떤 상황에서 사용하는지 감은 잡히지만, 막상 코드로 작성해보려니 코드적인 상황이 떠오르지 않아서 좀 멘탈이 터졌다... 많이 사용해보고 적응해야 하는 건 알지만, 아직은 많이 사용해볼 만한 상황을 못 찾았다........ 1) Reat Hooks ① useState setState를 사용하는 방식에는 우리가 알고 있는 방식이 아닌 또 다른 방식인 함수형 업데이트 방식이 있다. 일반 업데이트 방식은 버튼을 클릭했을 때 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리한다. -아래코드를 참고하여 설명..