행복을 담는 블로그

헤헿 똥멍청이 같은 실수를 했따,,, 멍청한 실수... 2탄...!! 바로 return도 안 하고 왜 안 보임???????? 이러고 있었다!!! letter 수정하기 버튼을 실행을 하는데, 처음에는 그냥 p 태그로 보여주다가, "수정하기" 버튼을 누르면 textarea 태그로 바뀌어 수정할 수 있도록 하려고 했다! 그래서 겨우 생각을 정리해서, 코드를 짰는데 왜 안 돼!!! // letter 수정하기 const updateBtnClickHandler = () => { updateBtn(id); }; const updateContent = () => { if (isUpdate === false) { {content}; } else { {content}; } }; {updateContent()} {isUpd..

벌써 2월이라니... 시간이 너무 빨리 지나가는 것 같다. 하는거라곤 매일 앉아서 12시간씩 코딩하는 것 밖에 없는데 말이야... 시간 제발 멈춰봐 아직 해야 할 게 너무 많이 남았는데 왜 벌써 목요일이신지... 하하하... 아무튼 간에 이번주는 React 숙련 주차로 react hook과 context api, 그리고 redux 까지 엄청난 강의를 들으며 또다시 새로운 기술들을 배우고 익히고, 이를 적용한 "그룹 아티스트 팬레터 만들기"를 진행하는 중이다. 한 번에 모든 코드 리뷰 쓰려면 엄청 힘들듯 하여, 오늘부터 조금씩 작성해보고자 한다. 1. 프로젝트 셋업 1) CRA 로 프로젝트 생성 npx create-react-app fan-letter 이 명령어를 이용하여 프로젝트를 생성하였다. 2) pa..

1. React 개인과제 "그룹 아티스트 팬레터함" 만들기 멍청한 실수 1) App.jsx을 Router의 하위 컴포넌트로 부르다...🤦🏻‍♀️ Router를 이용하여 각 멤버별로 페이지를 이동시키는 작업을 진행하였다. 내가 생각했을 때, mainpage에 모든 컴포넌트가 다 들어 있으니, home으로 가는 화면은 App.jsx로 이동하면 되겠다! 라고 생각을 했다. 근데 무슨,, 계속 오류가 났다. You cannot render a inside another . You should never have more than one in your app. 계속 가 중첩으로 된단다... 나는 Router 이름을 중복으로 쓴 적도 없고, 처음 Router 설정을 한 건데 말이다... 그래서 chatGPT 한테도..

오늘 공부한 내용 정리💁🏻‍♀️ 1. uncontrolled component input 태그에 useState를 사용하기 위해서는 value와 onChange를 사용하였다. ▶️ 이렇게 사용할 경우, input에 `값을 입력할 때마다` 하나하나 모든 input 값을 useState로 받는다. 하지만 placeholder랑 name을 넣어주면 uncontrolled component로 사용할 수 있다. ▶️ uncontrolled component인 경우에는, input 값이 제출 시기에 `한 번만` useState에서 판단하여 값을 받는다. 2. console.dir console.log 찍었는데 원하는 값이 안 보이면, console.dir을 찍어보자. console.log : html과 같은 형태의..

오늘 공부한 내용 정리💁🏻‍♀️ 1. Git commit message 작성 rules ✅ commit message 란? : commit 명령어는 git 변경점을 구분하기 위해 작성하는 메세지 git commit -m "작성할 메세지"그렇다면 커밋 메세지는 아무렇게나 작성하면 될까? 처음에는 그냥 그 날의 날짜를 적어서 올린다거나, 1차 커밋 이런식으로 메세지를 작성했다. 하지만 개인 프로젝트가 아닌 팀 프로젝트를 할 경우, 내가 작성한 메세지를 보고 어떤 부분이 변경 되었는지를 확인 할 수 있도록 좋은 커밋 메세지를 작성해야한다. 좋은 커밋 메세지를 작성하기 위해서는 몇 가지 명령어를 따르는 것이 중요하다. feat : 새로운 기능을 추가할 경우 fix : 어떤 오류/ 버그를 수정 및 해결 build..

이 문제를 보고 나는 바로 아 그냥 for문으로 i를 ++ 하면서 더하면 되겠구나 라고 생각을 했다. // 내가 처음 작성한 답 function solution(a, b) { let sum = 0 for(let i=0; i acc += curr * b[currIdx],0) return answer } reduce 함수에 대해서 조금 더 알아보도록 하자. 내가 원래 알고 있던 reduce() 메소드는 배열 내 숫자들의 합을 구하는 함수였다. 하지만 reduce () 에서 index도 넣어서 사용할 수 있다는 것을 알게 되었다. 1. reduce () 메서드로 배열의 합 구하기 (출처 어제 오늘 내일 ) let array = [1,2,3]; const result = array.reduce(function ..

오늘 공부한 내용 정리💁🏻‍♀️ 1. Basic 세션 2회차 수업 1) map 과 filter .find, .findIndex, .indexof : 순회하면서 처음 만난 값을 가지고 온다. 그 뒤로는 더이상 찾지 않는다. .reduce(acc + curr) : 배열 내 값들의 합 구하기/ 하나로 합치기 => 배열 내 값이 4개였는데, 1개로 나온다 ✅ map : 원본과 같은 길이의 새 배열을 생성할 때 사용. array.map((element) => {/* 변환 로직 */}); ✅ filter : 콜백 함수의 조건을 통과하는 요소로 원본과 같거나 짧은 길이의 새 배열을 생성 array.filter((element) => {/* 조건 */}); !!질문!! filter 메소드를 진행하는 코드에서, user..

🚨 컴포넌트로 분리하기 본격적으로 코드를 작성하기에 앞서 반복되는 컴포넌트를 먼저 분리하면 더 쉽게 코드를 작성할 수 있다. (아니 사실 과제 할 때는 마지막에 컴포넌트 분리했는데,,, 분리하다가 계속 오류가 나서 죽을 뻔 했다,,,) 개인과제 해설 보고 깔끔하게 코드를 작성하기 위해서 컴포넌트를 열심히 분리해서 다시 작성해보았다. 크게는 App 컴포넌트 > Header / TodoController > TodoForm / TodoList > TodoCards 이렇게 여러개의 컴포넌트로 구성하였다. 📌 component를 분리하면 꼭, import/ export를 사용하여 두 컴포넌트 사이를 연결 시켜줘야한다!! 1) App 각 구역 단위로 컴포넌트를 따로 분리하여 작성하니 App 컴포넌트의 코드가 아주..