HTTP 통신하는 과정에서 오류를 만나다.
작업 중 예상치 못한 서버 502, 504 오류가 발생하였다. 시간이 지연되었다. 검색 후 서버의 문제가 발생하였다. 근데 CORS 해결하고 오류가 나왔다. 이를 해결하기 위해 로직을 변경 후 시도하였다. 예상치 못한 상황이 발생하면 대처해야 한다는 것을 깨달았다.
많은 유형의 코드를 보다.
개발하다보면 로직이 안 되는 날도 있었고 잘 되는 날도 있었다. "2차 회고에서 이 짤이 기억나네" 답은 하나 같다. 많은 경험을 쌓아야 한다는 것이었다. 다른 사람들의 코드도 보면서 읽어봐야 하겠다.
Vercel 배포 진행하였지만 webpack, babel 기본 설정해 봤다.
기존에는 Vercel의 기반으로 리액트를 설치하였다. "마침 내가 자체적으로 하나 하나 설치하는 방법이 궁금해서 검색했다." 유튜브를 보고 따라하면서 시도한 결과 이 프로젝트는 Vercel의 기반으로 설치하였지만 다음에 webpack, babel 개발 환경 셋팅하고 싶었다.
확장 고민하다.
어떤 기능들이 들어가면 좋을까? 고민하는 시간을 가졌다.
Keep
프로젝트에서 잘한 점
- 테일윈드 이해 및 숙련도 향상
- 반응형 웹 구현
- 실무와 유사하게 깃허브 협업 프로세스로 진행
Problem
개요
일상생활에서 단어가 궁금하면 검색 및 단어 저장하는 서비스
상황
- CORS 오류 해결 후 서버 502, 504 오류가 발생
- 반응형 웹 구현 시 지연
문제 해결
- CORS 오류 해결 후 서버 502, 504 오류가 발생하였다. 검색, ChatGPT, 친구, 지인 및 온라인 강의 커뮤니티 등 해결하려고 노력하였지만 답을 얻지 못 하였다. "어떻게 하면 다른 방법으로 해결할까?" 고민하였다. 오류 발생 시 예외 처리를 하기로 하였다.
아쉬운 점
- 오류 해결하느라 마감하는 날짜가 다가와서 컴포넌트 개발을 못 하였다.
해결 후 문제 점
배운 점
- 서버를 알아야 한다는 것을 깨달았다.
- 현재 프론트엔드 중심으로 공부하고 있지만 CORS 오류 해결 및 서버 502, 504 오류를 만나면서 서버를 알아야 한다는 것을 깨달았다.
- 테일윈드 CSS
- 공통 요소를 어떻게 사용할까? 공식 문서 및 검색을 통해 사용하는 방법을 많이 알고 배울 수 있었다.
Try
계획
- 서버 502, 504 해결
- 예외 처리말고 다른 방법으로 고민 후 해결 시도
- Node.js 해결 시도
- 컴포넌트 개발
- 작은 단위로 컴포넌트 개발하고 공통으로 사용할 수 있는 텍스트, 버튼, 레이아웃 등 개발 진행
- 폴더 구조
- 우선 반응형 웹 구현 시 영역별로 컴포넌트 생성
- 반응형 웹 구현 후 규모 확장 가능한 폴더 구조 아키텍처
- CSS 애니메이션 효과
- transition, transform, animation 이용한 효과 개발
- 사이드 프로젝트
- 검색을 통해 리드미 꾸미는 방법 찾아보면서 꾸미기
공부 (7월 29일 ~ 8월 2일 후 3차 작업 진행 시작)
- 자바스크립트
- 프로그래머스에서 코딩 테스트 문제 풀기
- 리액트
- 기초적인 부분을 충실하고자 꾸준히 공부 중 useState, useEffect, useRef 등 Hook 동작 원리를 알아보기