Note22 [목적지향적 개발] 23-06-01 (목) 목적지향적 개발 1. 미개발되어있는 부분 체크 피그마와 대조해서 문제점 체크하고 나열하기 회원가입 테스트 해보기 로그인 테스트 해보기 2. 일반적으로 프론트엔드 개발시 단계별로 체크리스트가 어떻게 되는가? 요구사항 분석 및 설계 단계: 기능 및 요구사항을 이해하고 문서화했는지 확인 UI/UX 디자인 및 웹페이지 구조를 설계했는지 확인 프로젝트 설정 단계: 적절한 개발 환경을 설정하였는지 확인 (IDE, 패키지 관리자 등) 필요한 라이브러리와 프레임워크를 선택하고 설치했는지 확인 마크업 및 스타일링 단계: HTML 구조를 작성하고 시맨틱한 마크업을 준수했는지 확인 CSS 스타일을 적용하고 레이아웃 및 디자인 요소를 구현했는지 확인 반응형 디자인을 위한 미디어 쿼리 등을 적용했는지 확인 자바스크립트 개발 단.. 2023. 6. 1. [목적지향적 개발] 23-05-31 (수) 오늘의 목표 아래에 나열한 목표들을 잘 달성하고 마무리하기. 개발 인증사이트 요구사항 확인 다시하기 해야할 일을 정리하고 개발 하기 내가 만약 프론트엔드 팀을 꾸린다면 어떻게 팀빌딩을 할 것인가? 환경세팅 어떻게 할 것인지 프론트엔드 개발환경 설정 https://blog.shiren.dev/2023-03-20/ 개발 전략 배포 전략 등 면접 https://blog.shiren.dev/2020-11-23/ 프론트엔드 개발환경은 백엔드 개발환경과 약간 관심사가 다를 수는 있지만, 그래도 큰 궤에 대해서는 프론트엔드 개발자도 잘 알아야한다고 생각한다. 기본적인 네트워크, 브라우저, 컴퓨터구조 원리에 대해 잘 알고 있어야한다. 2023. 5. 31. [목적지향적 개발] 23-05-26 (금) 오늘의 목표 아래에 나열한 목표들을 잘 달성하고 마무리하기. 개발 어드민 페이지 Post, Put API 등록 및 테스트 등록/수정 폼 기능 정의하고 정리하기 승인과 같이 상태변경만 필요한 수정 전체적으로 내용수정을 진행하여, 폼페이지가 별도로 필요한 수정 오고가는 데이터의 타입정의를 명확하게 하면 전체적인 구조파악에 도움이된다. 데이터의 예외적인 처리 밸리데이션 미리보기 모달창으로 보기 등등등 2023. 5. 26. [목적지향적 개발] 23-05-25 (목) 오늘의 목표 아래에 나열한 목표들을 잘 달성하고 마무리하기. 개발 메인페이지 영상 재생 백그라운드 관련기술: video, requestAnimationFrame 어드민페이지 어드민 페이지 현재 개발된 백엔드 API 기준으로 개발하기 기존 서비스 백엔드 코드 다시 파악하기 기존 서비스 백엔드 환경 정리하기 Nest.js 공식문서 정리하기 2023. 5. 26. [목적지향적 개발] 23-05-19 (금) 오늘의 목표 아래에 나열한 목표들을 잘 달성하고 마무리하기. 개발 next.js app 배포 AWS 통해 배포하는 방법 알기 Frontend app Dockerizing 하기 앱 전체적으로 스타일 정리하기 PC 대응 Mobile 대응 msw로 콘텐츠 정보 불러오는 api 만들기 entity 정보에 맞는 CRUD mockup 빌드시 제외하기 Next.js 번들 패키지 최적화 @next/bundle-analyzer 느낀 점 MSW 디렉토리 분리를 잘하고, 환경변수 설정으로 API call을 on/off해야겠다. Next.js Doc에서 Docker 예시 확인을 잘하자 2023. 5. 19. [목적지향적 개발] 23-05-18 (목) 오늘의 목표 아래에 나열한 목표들을 잘 달성하고 마무리하기. 개발 페이지 빈 부분 개발 프로젝트 상세 페이지 빠진 요소 체크 FAQ 누락된 내용 소셜 공유기능 메뉴 드롭다운으로 변경 SEO 최적화에 관한 사항 찾기 NextSeo 사용법 알고 반영하기 기본적인 내용들 + open graph sitemap.xml과 robots.txt 파일 generate 하는 방법 찾기 이미지 리소스 최적화하기 (https://compresspng.com/) 리치 검색결과 템플릿 정해서 설정하고 배포하여 반영된 결과가 나오는지 확인 페이지별로 다른 구조화된 데이터 사용 msw로 콘텐츠 정보 불러오는 api 만들기 entity 정보에 맞는 CRUD mockup Next.js 번들 패키지 최적화 @next/bundle-anal.. 2023. 5. 18. 이전 1 2 3 4 다음