솔로 프로젝트로 투두 리스트를 만들었다. api 통신을 통해 완전한 CRUD를 구현해보는 경험을 했다. https://github.com/kihyeoon/mini-todolist 📍상세 내용 리랜더링 그전엔 더미 데이터 파일을 따로 만들어서 직접 이벤트에 따라서 데이터를 가공했는데, 이번엔 json-server를 통해 받아온 데이터를 각 컴포넌트에 뿌려주는데만 집중할 수 있어서 좋았다. 그런데 데이터 자체를 useState를 통해 상태로 저장하고 조작하면 리렌더링이 자연스럽게 됐었던 전과 달리 컴포넌트에 변경이 생기면 patch나 delete와 같은 메서드를 통해 요청을 보내기만 해서는 리랜더링이 일어나지 않아서 당황했었다. 데이터를 fetch 받아오는 getData 함수를 만들고 patch, delet..

📍목표 설정 💡 목표: 핀테크 기업 목표로 내년 상반기에 취업하기 부트캠프에서 꼭 얻고 싶은 것 탄탄한 프런트엔드 기초 배운 건 읽고 끝내지 말고 바로 코드로 쳐서 활용해보기 면접에서 자주 나오는 중요한 키워드들은 말로 설명해보고 녹화 피드백(두괄식 요약→설명) 알고리즘 스터디 진도 맞춰서 문제 풀기 즐겁게 공부하는 습관 익히기 잘 안될 결과를 두려워하지 말고 눈앞에 있는 과정을 즐기면서 공부하자 남과 비교하지 말고, 내 회고를 보면서 과거의 나와 비교하자 꾸준히 공부하는 습관 → 주 6회 이상 잔디심기 도전! 매끄럽게 협업할 수 있는 커뮤니케이션 능력 이해한 개념을 1차로 블로그에 글로 작성하고 2차로 말로 설명해보는 연습 나의 다짐 정규 수업 시간 이후 3시간 이상 추가 학습하기 추가 학습 시간이 길..

📍Proxy 를 쓰는 이유 리액트는 프론트엔드 개발 서버를 열어서 코드의 수정사항을 감지하고 바로바로 브라우저에 렌더링해준다. 이때 프론트엔드 개발 서버와 백엔드 서버의 출처(origin)이 다르기 때문에 CORS정책에 위배되어 데이터를 받아오지 못하게된다. CORS: 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 백엔드 개발자에게 프론트엔드 개발 서버의 도메인을 허용해달라고 요청하고 백엔드에서 CORS 설정을 해주어 응답헤더를 전달 받는 것이 정석적인 해결방법이지만 Proxy를 설정하면 CORS 정책을..

📍GitHub Action 이란? GitHub Actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 레포지토리에서 Pull Request 나 push 같은 이벤트를 트리거로 GitHub 작업 워크플로(Workflow)를 구성할 수 있다. 워크플로는 하나 이상의 작업이 실행되는 자동화 프로세스로, 각 작업은 자체 가상 머신 또는 컨테이너 내부에서 실행되며 테스트, 배포 등 기능에 따라 여러 개의 워크플로도 만들 수 있다. 생성된 워크플로는 .github/workflows 디렉터리에 yml (혹은. yaml ) 파일로 저장된다. 📍YAML 이란? Yet Another Markup Language의 약자로, 사람이 읽을 수 있는 데이터 ..

📍LightHouse란? LightHouse는 웹페이지의 성능을 측정해주고 개선책을 제공해주는 자동화 도구입니다. 개발자는 Lighthouse의 검사 결과를 기반으로 웹페이지의 품질을 개선 할 수 있습니다. Lighthouse는 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있습니다. 검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행합니다. 📍Lighthouse 사용 2020년 5월 19일 Lighthouse 버전 6.0 배포 이후 Chrome 개발자 도구에서 Lighthouse가 들어왔습니다. 검사하고 싶은 페이지에서 개발자 도구를 엽니다. Lighthouse 탭으로 들어옵니다. Analyze pag..