< HwanLog />

📌 SOLID 원칙에 맞게 컴포넌트 리팩토링 평소에 내 코드는 왜 가독성이 좋지 못할까? 왜 내 코드는 이렇게 길지? 라는 생각을 했었는데 컴포넌트 설계 방식을 바꾸니 좀 더 읽기 쉽고 책임 분할된 좋은 코드를 설계할 수 있게 되어서 쓰는 후기입니다. 만약 저와 같이 생각하시는 분들이 있다면 한번 봐주시면 좋을 거 같습니다. - SRP (Single Responsibility Principle) 단일 책임 원칙 단일 책임 원칙이란 쉽게 말해서 코드는 하나의 작업을 해야 한다라고 볼 수 있습니다. 하지만 그전에 제가 짜던 코드를 보면 컴포넌트 자체에서 여러 가지 로직을 돌면서 UI로직까지 행하고 있다는 것을 알 수 있습니다. 밑에 예시가 책임 분할되기 전 코드입니다. 코드를 보면 CouponList 컴포넌..

🤩 React Styled Component를 활용한 컴포넌트 재사용 1. 시작하기에 앞서서 재사용 컴포넌트란 정의가 무엇일까요 ?? 말 그대로 컴포넌트를 다시 사용한다는 개념 이라고 보시면 됩니다. 컴포넌트를 재사용 한다는 것은 ? 1. 중복을 제거해준다. 2. 좀 더 깔끔한 코드 사용이 가능하게 해준다. 위와 같은 장점이 있지만 , 저는 그동안 재사용 컴포넌트를 사용하지 않고 있었습니다. 2. 그동안 나는 어떻게 코드를 짰나 ?? 사실 재사용컴포넌트를 사용해라 ! 라는 말은 블로그나 , 유튜브 영상 등을 통해서 충분히 인지하고 있었지만 , 평소에 제가 짜는 코드는 재사용 컴포넌트를 고려하지 않고 코드를 짜고 있었습니다. 머리속으로 인지는 하고 있지만 , 막상 코드를 짜면 이곳 저곳 중복이 발생하고 ,..

Warning: validateDOMNesting(...): cannot appear as a descendant of 에러 확인 1. 에러 발생 원인 form 안에 form 이 중복적을 선언 되어 있을때 발생한다. return ( 작성자 : title : { // You can store the "editor" and use when it is needed. // console.log('Editor is ready to use!', editor); }} onChange={(event, editor) => { const data = editor.getData(); console.log("data : ", data) // console.log({ event, editor, data }); setFormDa..

Form Data 더 쉽게 다루기 적용한 토이 프로젝트 https://github.com/JEONGHWANMIN/raect-json-server 평소 내가 작성하던 방식 평소에는 각각의 useState()를 작성해 놓고 나서 onChange() 를 이용해서 각각 setWriter , setTitle , setText 이런식으로 이벤트를 다뤘었는데 오늘 좀더 새로운 방식을 공부 했는데 신선하고 좀 더 가독성이 좋은거 같아서 정리해 보려고 한다. const [writer, setWriter] = useState("") const [title, setTitle] = useState("") const [text, setText] = useState("") const onChange = (e) => { const..

프로젝트 : https://github.com/JEONGHWANMIN/raect-json-server React 에서 JsonServer 사용하기 npx json-server ./data.json --port 4000 port 4000번으로 json 서버를 연다. { "posts": [ { "id": 1, "writer": "HwanMin", "title": "첫 메모 제목", "body": "첫 메모 내용" }, { "writer": "json", "title": "hi", "text": "hello", "id": 2 } ] } 아까 처음에 json-server를 띄운 port에 posts로 데이터가 들어있는걸 볼 수 있다. id는 자동생성 해준다. axios 모듈을 통해서 데이터를 추가할 수 있다. ..

npm이 설치되어 있다는 전제하에 설치가 됩니다. 1. 설치 npx create-react-app appname npx 명령어를 사용해서 설치합니다. * npx : npm@5.2.0 이상버전에서 지원하는 npm을 좀더 편하게 사용하기 위해 제공되는 하나의 도구 appname 대문자나 특수기호를 넣게 되면 네이밍 오류가 발생한다. 설치중 이런 오류가 뜬다면 npm버젼을 업그레이드 시켜주면 오류가 뜨지 않는다. npm 버젼 업그레이드 방법 1. node -v 2. npm cache clean -f 3. npm install -g n -> node 버젼 관리인 n이라는 모듈 설치 4. n 모듈 사용해서 node.js 설치 // 그냥 설치하면 permission denied 뜸 sudo 명령어 통해서 설치하니 ..