밤은 짧아, 걸어 아가씨야

※ 글또에서 무료로 지원받은 유데미 강의입니다. 클린코드 리액트(React) 📚 강의를 선택한 이유 📖 강의 내용 💡 수강 후 느낀점 👋 마치며 강의를 선택한 이유 이전에 원티드 프리온보딩 챌린지 강의를 재미있게 들어서, 해당 강의를 진행하신 장현석님의 유데미 강좌도 들어보고 싶었다. 리액트로 개발을 하고 있지만 무의식 중에 잘못된 코드를 작성하고 있는건 아닌지 고민이 생길 때, 올바른 방법으로 사용하고는 있는데 왜 그렇게 써야 하는지는 모를 때 클린 코드 강의를 들었던 기억이 도움됐기 때문이다. [원티드 프리온보딩 챌린지 11월] 클린 코드 개념 정리&강의 후기 원티드 프리온보딩 프론트엔드 챌린지 11월 클린 코드 개념 정리&강의 후기 클린 코드 프론트엔드 | 프리온보딩 FE 챌린지 11월 | 원티드 ..

푸드코트 키오스크 만들기 간단한 프로젝트 설명과 트러블 슈팅 과정 🧾 프로젝트 설명 식당 이름을 검색하거나, 음식 종류 카테고리를 골라 필터링이 가능한 키오스크를 구현했다. ✅ 메뉴 목록을 조회할 수 있고(GET), 주문을 생성하는(POST) API를 제공하는 express 서버를 구축했다. ✅ 메뉴를 선택하면 점심 바구니에 담긴다. ✅ 합계 금액이 적힌 주문 버튼을 누르면 영수증이 출력된다. 📌 express 서버 구축 애초에 서버를 전혀 모르기 때문에 나에겐 쉽지 않은 도전이었다. express 강의를 듣고 정리해둔 노트를 참고했다. post로 주문 생성하기 app.post('/orders', (req, res) => { const { menu, totalPrice } = req.body; cons..

Context API 이번주에는 원티드 프리온보딩 강의에서 배운 context api를 학습했다. [원티드 프리온보딩 프론트엔드 인턴십] Week 3-1. React Hook의 심층 활용 - 강의 후기 [원티드 프리온보딩 프론트엔드 인턴십] Week 3-1. React Hook의 심층 활용 - 강의 후기 Week 3-1. React Hook의 심층 활용 의존성 배열 / useEffect / React.memo / useCallback / useMemo / Context API 2주차 강의는 원티드 커리어 챌린지 로 대체되었다. 커리어 챌린지는 2주 동안 진행된 전 직군 대상 강의 shinjungoh.tistory.com context api를 학습해야겠다고 생각한 이유는 첫째로, 프로젝트가 조금만 복잡해..

🎯 CRA 투두리스트 구현하기 todos type Props 배열임을 표시 API문서, body 공식문서에 적힌 대로 data에 todo를 적어 요청한다. ⚠️ todo가 아닌 text를 적어서 400 오류가 발생 useState 상태 값 관리 불변성 유지를 위해 스프레드 연산자를 사용한다. 각 키값에 해당하는 value를 할당한다. setState는 비동기 처리 객체이다. 🔗 react useState 상태 값 업데이트 회원가입 유효성 검사 정규표현식으로 값을 검사할 때는 state 값 대신 e.target에서 받아온 value 값을 넣어줘야 한다. ⚠️ 그렇지 않으면 다음과 같은 이슈가 발생한다. [x] 값 올바르게 입력했다가 지웠는데 에러처리 안 되는 이슈 [x] 비밀번호 검사에 비밀번호와 다르게 ..

에러 메시지 Uncaught Error: useRoutes() may be used only in the context of a component. useRoutes는 로 감싸야 한다. 해결 방법 react router를 추가하는 과정에서 오류가 발생했다. 에러메시지를 구글링해서 찾아보니 로 감싸주면 되었다. 이에 맞춰서 라우터 파일에서 라우터가 잘 동작하는 코드를 작성했는데 또 오류가 발생했다. 라우터 파일의 이름을 Router.tsx로 만들어 놓았는데, 컴포넌트 이름 Router가 { BrowserRouter as Router }의 Router와 겹쳤기 때문에 발생한 오류였다. import { BrowserRouter as Router } from 'react-router-dom'을 Router.ts..