🎀 주간 목표 달성 확인
✅ Virtual Dom(가상 돔)이란? 관련 블로그 포스팅
✅ 배열에 key 값이 필요한 이유 관련 블로그 포스팅
✅ 프론트엔드에서의 component 란? 관련 블로그 포스팅
✅ Netlify build 오류 해결법 관련 블로그 포스팅
✅ useEffect 파헤치기 관련 블로그 포스팅
✅ [React] 조건부 렌더링 종류 관련 블로그 포스팅
✅ [React] 비동기로 state 변경할 때 주의할 점 관련 블로그 포스팅
✅ react 웹 개발 시작하기 (6주차 강의) 수강 완료하기
✅ 딥다이브 스터디 0회차 진행 (딥다이브 깃헙 바로가기)
🎀 피드백
🧷 Git 오류가 나도 당황하지 마라!
과제하다가 403 오류를 만나게 되었다.
remote: Permission to 깃주소 denied to mingzzi.
fatal: unable to access '깃주소': The requested URL returned error: 403origin에서 나를 거부했다는 뜻인데, 처음에는 왜?? 왜 거부를 해??
이것 저것 구글링 해 봤는데, 자꾸 키체인을 바꾸라고 하는 내용만 나왔다.
어쩐지 내가 생각하는 해결법과는 점점 거리가 멀어지는 것 같았다.
그래서 멘토님에게 SOS를 치고 마는데,,, 🥲
내가 겪은 문제는 아래와 같다.
git fetch upstream main로 part2 과제를 시작했어야 했는데, 냅다 코드잇 깃을 origin으로 clone 해옴.- 이 상태에서 Push를 넣으니, 당연히 코드잇 깃에서는
"너가 뭔데 내 깃에다 코드를 올려?" 상태가 됨 (denied)
위 상황은 git remote -v 명령어(깃의 origin / upstream 주소를 알 수 있음)를 통해 알게되었다.
왜 거부당했는지 이유를 파악한 이후부터는 해결이 쉬웠다.
- 코드잇 깃이 아니라 해당 깃을 포크해 온 깃 주소로 클론을 진행한다.
- 이전에 커밋 완료한 파일들은 undo latest commit 으로 다 취소한다.
- 취소한 변경 파일들을 staged 상태에 올려두고 git stash를 진행한다.
git remote add origin 주소커맨드를 활용해서 원격 저장소의 주소를 변경해 준다.- 그러고
stash pop커맨드로 잠시 숨겨둔 커밋들을 적용시켜 준다. - 이렇게 하고 part2-권지민 브랜치에서 작업을 했는데, 포크해온 레포에는 해당 브랜치가 보이지 않았다.
git checkout part2-본인이름그리고git push origin part2-본인이름이렇게 진행해서 작업한 브랜치를 포크한 레포에 올려줌으로써 해결하였다.
앞으로 프로젝트 시작 전에, 항상 클론을 잘 해온게 맞는지 테스트를 꼭 해봐야겠다!
👉🏻 참고로 이 모든 것은 fork한 레포를 최신으로 업뎃해 준 뒤 실행해야한다. (참고 링크)
🧷 반복되는 코드 줄이기
<div className="Footer-sns">
<Link to="https://www.facebook.com/" target="_blank">
<img src="./assets/images/facebook.png" alt="facebook" />
</Link>
<Link to="https://twitter.com/" target="_blank">
<img src="./assets/images/twitter.png" alt="twitter" />
</Link>
<Link to="https://www.youtube.com/" target="_blank">
<img src="./assets/images/youtube.png" alt="youtube" />
</Link>
<Link to="https://www.instagram.com/" target="_blank">
<img src="./assets/images/instagram.png" alt="instagram" />
</Link>
</div>푸터에 sns 링크가 들어가야했는데 ,
위 코드와 같이 단순하게 반복적인 코드가 여러번 나열되고 있었다.
const footerSns = ["facebook", "twitter", "youtube", "instagram"];
<div className="Footer-sns">
{footerSns.map((item) => {
return (
<Link to={`https://www.${item}.com`} target="_blank" key={index}>
<img src={`./assets/images/${item}.png`} alt={item} />
</Link>
);
})}
</div>그래서 반복되는 단어들을 배열에 저장했다.
해당 배열을 map 함수로 돌려서 알맞게 출력해 주었다! (key 값은 필수당!)
🧷 useState도 객체로 관리해 보자
필수는 아니지만 관리할 State 들이 길어질땐, 객체로 그룹지어 관리하는 것이 좋다.
const [folderName, setFolderName] = useState("");
const [ownerItem, setOwnerItem] = useState([]);
const [linkItems, setLinkItems] = useState([]);수정 코드
const [folderInformation, setFolderInformation] = useState({
folderName: "",
ownerItem: [],
linkItems: [],
});🧷 복잡한 경로 관리는 alias path로 해결!
아래 명령어로 설치한다.
npm install @craco/craco --save여기서 --save를 한 이유는 package.json에 익스프레스 버전이 표기되기 때문.
const path = require("path");
module.exports = {
webpack: {
alias: {
"@": path.resolve(__dirname, "src/"),
"@components": path.resolve(__dirname, "src/components"),
"@pages": path.resolve(__dirname, "src/pages"),
"@api": path.resolve(__dirname, "src/api"),
"@hooks": path.resolve(__dirname, "src/hooks"),
},
},
};최상위 폴더에 craco.config.js 라는 파일 생성하고 위 코드를 붙여넣는다.
물론 각자 폴더 구조에 맞게 경로는 수정해서 넣어 주어야 한다~~
import ProfileImage from "@components/ProfileImage/ProfileImage";그럼 위와 같이 경로를 이쁘게 줄일 수 있따!
🎀 한주를 마무리하며!
☘️ 연말 연초 증후군(?)
연말 약속이 꽤 많았다. 특히 코드잇 연말 행사 겸 애정하는 우리 6팀 멤버들 만나기 위해 서울 당일치기 다녀온게 기억에 남는다. 좋은 사람들과 좋은 시간..^^ㅋㅋㅋ
6팀이랑 온라인으로 만나 공부하는 것도 도움이 많이 된다 느꼈는데,
확실히 대면하여 이야기 나누니 직접 만나서 공부했다면 더 큰 시너지 효과를 기대할 수 있었을텐데 하는 아쉬움이 남았다.
나는 지방사람이라 🥲 위워크에 매일 갈 수 없어서 많이 슬프다.
☘️ 운동도 좀 쉬어줘야 재밌다
요즘 점점 운동에 흥미를 잃고있다!그래도 계속 주 5일 가고는 있지만 ,, 근력이나 유산소나 대충 대충만하고 끝내고 있다 😂
나는 가끔 헬스에 흥미가 떨어질땐 일주일씩 쉬어 주기도 하는데 지금이 그 시기일수도..
그래도 아직은 가긴 가야겠다.
☘️ 오류 생길때 멘탈 관리 중요하다
요즘 들어 부쩍 오류가 생기는 일이 많아졌다. 그리고 이 오류를 해결하는데 시간을 굉장히 많이 쏟고 있다.
혼자서 끙끙 앓다가 해결되는 경우도 있긴 했지만 시간이 길게 걸린 편이었다.
그래서 팀원들에게 문제를 공유하고, 해결했고 이를 통해 느낀점이 있다.
1. 공식 사이트를 애용해라
2. 일단 오류가 생긴 이유를 정확하게 파악해라
이 두가지만 명심해도 오류를 해결하는 시간이 대폭 줄어든느 것 같다!
