강신규

안녕하세요! 프론트엔드 개발자 강신규입니다. 마지막 주차에는 기본과제와 심화과제 2가지로 나눠져 있는데요. 회고 시작하겠습니다.기본과제 체크포인트배포링크https://front-5th-chapter4-2-basic-theta.vercel.app/과제 요구사항 만족 배포 후 url 제출 성능 개선 보고서 작성 Lighthouse 점수 이해 Core Web Vital 이해과제 셀프회고CORS 에러과제 최적화와 직접적인 관련은 없지만, 에러를 만났던 상황을 기록하기 위해 정리하였습니다.에러 상황index.html 파일을 브라우저에서 열었을 때 CORS 에러가 발생했습니다.에러 메시지는 익숙했지만 정확한 원인을 몰라 관련 내용을 조사하였습니다.CORS란?CORS(Cross-Origin Resource Shari..

안녕하세요! 프론트엔드 개발자 강신규입니다. 9주차 과제 회고 바로 시작하겠습니다.항해 플러스 프론트엔드 9주차 과제프론트엔드 배포 파이프라인개요Checkout 액션을 사용해 코드 내려받기npm ci 명령어로 프로젝트 의존성 설치npm run build 명령어로 Next.js 프로젝트 빌드AWS 자격 증명 구성빌드된 파일을 S3 버킷에 동기화CloudFront 캐시 무효화주요 링크S3 버킷 웹사이트 엔드포인트 : http://front-5th-chapter4-1-singyukang.s3-website.ap-northeast-2.amazonaws.com/CloudFrount 배포 도메인 이름 : https://donf7c57g46t3.cloudfront.net/배포 프로세스 구조주요 개념GitHub Act..

안녕하세요 프론트엔드 개발자 강신규입니다! 8주차 회고 바로 시작하겠습니다.8주차 과제 체크포인트기본 과제필수 반복 유형 선택일정 생성 또는 수정 시 반복 유형을 선택할 수 있다.반복 유형은 다음과 같다: 매일, 매주, 매월, 매년만약, 윤년 29일에 또는 31일에 매월 또는 매년 반복일정을 설정한다면 어떻게 처리할까요? 다른 서비스를 참고해보시고 자유롭게 작성해보세요. 반복 간격 설정각 반복 유형에 대해 간격을 설정할 수 있다.예: 2일마다, 3주마다, 2개월마다 등 반복 일정 표시캘린더 뷰에서 반복 일정을 시각적으로 구분하여 표시한다.아이콘을 넣든 태그를 넣든 자유롭게 해보세요! 반복 종료반복 종료 조건을 지정할 수 있다.옵션: 특정 날짜까지, 특정 횟수만큼, 또는 종료 없음 (예제 특성상, 2025..

안녕하세요! 프론트엔드 개발자 강신규입니다. 7주차 회고 바로 시작하겠습니다. 7주차 테스트 과제난이도 선택 가이드Easyhttps://github.com/hanghae-plus/front_5th_chapter3-1/tree/easy테스트를 처음 작성해보시는 분들을 위한 과제입니다. 가벼운 유틸함수, 훅 기반 단위 테스트를 작성해보면서 컴포넌트를 개선해보세요.모든 테스트케이스, 설정이 제공됩니다.작성을 해보고 피어 리뷰와 멘토들의 피드백을 받아보세요!하지만, 모두 통과를 하더라도 합격을 받을 수는 없습니다. 가능하면 이 난이도를 선택하지 마세요Mediumhttps://github.com/hanghae-plus/front_5th_chapter3-1/tree/mediumEasy에 비해 추가로 작성할 여러 통..

안녕하세요 프론트엔드 개발자 강신규입니다! 6주차 과제 회고 바로 진행해보겠습니다[6주차] 기본과제여러분은 게시판을 관리할 수 있는 Admin 코드를 인수인계 받았습니다. 다행히 못 알아볼 정도의 더티코드는 아니고 적당히 잘 만든 것 같지만 정리가 된 것 같지 않은 아주 현실감 있는 익숙한 느낌의 코드였습니다.우리는 지금까지 배웠던 내용을 토대로 해당 코드들을 클린하게 정돈하고 FSD 아키텍쳐를 활용해서 정리해보려고 합니다.여러분들은 해당 코드를 분석해보니 다음과 같은 문제점들을 발견할 수 있었습니다.컴포넌트가 너무 크고 복잡하다.Typescript를 사용하고 있지만 Type처리가 부실하다.상태관리의 개념없이 너무 많은 상태를 가지고 있다.useEffect 관리가 안되고 있다.비동기 처리 로직이 복잡하게..

안녕하세요! 프론트엔드 개발자 강신규입니다. 5주차 회고 바로 시작하겠습니다배포링크origin : https://singyukang.github.io/front_5th_chapter2-2/index.origin.htmlrefactoring : https://singyukang.github.io/front_5th_chapter2-2/index.refactoring.html과제의 핵심취지React의 hook 이해하기함수형 프로그래밍에 대한 이해액션과 순수함수의 분리과제에서 꼭 알아가길 바라는 점엔티티를 다루는 상태와 그렇지 않은 상태 - cart, isCartFull vs isShowPopup엔티티를 다루는 컴포넌트와 훅 - CartItemView, useCart(), useProduct()엔티티를 다루지 ..

안녕하세요! 프론트엔드 개발자 강신규입니다 항해 플러스 프론트엔드 5기 과정을 참여하면서 공부중에 있는데요 이번에는 4주차 공부했던 내용을 정리하고자 합니다Chapter 2-1. 클린코드와 리팩토링기본과제: 더티코드 개선이번 과제는 더티코드를 클린코드의 형태로 개선을 하는 과제입니다. 주어진 테스트를 통과하면서 원래 기능과 동일한 동작을 하는 코드를 만들어주세요. basic과제는 제공되는 더티코드를 클린코드와 리팩토링 원칙에 입각해서 더 나은 코드로 만들어보세요. 주어진 테스트를 참고삼아 좋은 이름, 좋은 모양, 좋은 구조를 가지는 코드로 만들어 보세요. [필수조건]Prettier와 ESLint를 설치해서 적용할 것테스트 코드 모두 통과할 것= 기존 기능과 동일하게 동작할 것= 어플리케이션 요구사항을 모..

안녕하세요 프론트엔드 개발자 강신규입니다! 이번주차 과제는 얕은비교, 깊은비교를 만들어보며 React의 hooks를 구현해보고, 구현한 훅을 가지고 불필요한 렌더링을 최적화 하는 과정을 진행하였습니다과제 체크포인트배포 링크https://singyukang.github.io/front_5th_chapter1-3/기본과제 shallowEquals 구현 완료 deepEquals 구현 완료 memo 구현 완료 deepMemo 구현 완료 useRef 구현 완료 useMemo 구현 완료 useDeepMemo 구현 완료 useCallback 구현 완료심화 과제 기본과제에서 작성한 hook을 이용하여 렌더링 최적화를 진행하였다. Context 코드를 개선하여 렌더링을 최소화하였다.과제 셀프회고 + 기술적 성장 + 문제..