Skip to content

Latest commit

 

History

History
305 lines (178 loc) · 7.31 KB

2주차.md

File metadata and controls

305 lines (178 loc) · 7.31 KB
Raw

11월 6일

오늘 한일

프론트엔드 데브코스

  • js 강의 수강
  • 이번 주 배운 것 복습
    • 컴포넌트 단위로 생각
    • localStorage
    • Module
    • 비동기 => Promise, async, await, fetch
    • todoList 및 상품 정보 프로젝트 복습

스포츠 용병 서비스 팀플

  • 비밀번호 수정 페이지 작업 중
    • 디자인 및 비밀번호 조건 check

배운 것

프론트엔드 데브코스


js 강의


To do App 만들기

  • e.target.closest(특정 태그) ⇒ 현재 target의 상위에서 가장 가까운 특정 태그 찾기
  • 이벤트 리스너가 계속 추가되는 것을 이벤트 버블링으로 해결
  • 낙관적 업데이트 ⇒ 내가 입력한 데이터가 서버에 정상적으로 추가될 것이라고 예상하고 클라이언트에 데이터를 미리 렌더링 해두고 서버에 요청(추가, 삭제, 수정) 하는 것
    • 데이터 등을 추가함에 있어서 서버에 추가하고 불러와서 클라이언트에서 렌더링 하는 것이 안전하지만 로딩 시간이 길어지고 끊기고 하면 사용에 불편함을 줄 수 있기 때문에 사용

어려웠던 점


한줄평

이번주도 수고했어!!! 계속 집중해서 하자. 이렇게 해야해.


11월 7일

오늘 한일

프론트엔드 데브코스

  • 데일리 스크럼 및 주간 발표 => 스코프 체인
  • js 강의 수강
  • 팀원 코드 리뷰

스포츠 용병 서비스 팀플

  • 비밀번호 수정 페이지 작업 완료

배운 것

프론트엔드 데브코스


js 강의


To do App 만들기

  • localStorage도 낙관적 업데이트
  • 구현 해야 하는 기능
    • 특정 유저의 todo list 불러오기
    • 추가 및 삭제하기
    • 클릭 시, 완료처리하거나 완료처리 취소하기
    • users api를 통해 사용자 목록을 그리고, 클릭하면 해당 사용자의 todo 목록을 가져오게 합니다.
    • 할 일을 추가하면 화면에 추가되고, API 호출을 통해 서버에도 추가 됩니다.
    • TODO를 추가하고 삭제하는 동안 낙관적 업데이트를 사용합니다
    • 서버와 통신하는 동안 서버와 통신중임을 알리는 UI적 처리를 합니다.

스포츠 용병 서비스 팀플


React-Hook-form

  • register ⇒ input 태그에 name을 추가해 해당 input의 state를 추적하고 관리
  • handleSubmit ⇒ 첫 번째 전달인자에는 유효한 값이 들어왔을 경우 호출 할 콜백 함수 설정, 두 번째 전달인자에는 유효한 값이 들어오지 못한 경우 호출 할 콜백 함수 설정
  • setError ⇒ 유효성 검사가 끝난 후 handleSubmit(물론 추가 유효성 검사 이외에도 성공 관련 작업도 함)을 통해 추가적으로 검사할 때 사용(다른 사람은 모르겠고 나는 이 방식을 사용)
    • error.message를 통해 error를 출력 및 error가 발생한 곳에 자동 focusing
  • formState
    • isSubmitting ⇒ onSubmit을 하고 있을 때 True, 그 외에는 false, 비밀번호 관련 데이터를 모두 입력하고 확인 버튼을 눌렀을 때 서버에 반영되는 시간이 10초라고 할 때 그 10초 동안 확인 버튼을 비활성화 시켜야 하므로 diabled props와 함께 사용하면 됨
    • isDirty ⇒ default 값은 false로 input을 선택하거나 입력하였을 경우 true로 수정됨
    • errors ⇒ register로 등록한 item들의 error 목록을 객체로 관리

어려웠던 점


한줄평

오늘도 수고했어.


11월 8일

오늘 한일

프론트엔드 데브코스

  • js 강의 수강
  • 팀원 코드 리뷰

배운 것

프론트엔드 데브코스


js 강의


자동 저장 편집기 만들기

  • 전체적인 작업 흐름

    1. 작은 컴포넌트 생성
    2. 작은 컴포넌트를 관리하는 페이지 컴포넌트 생성
    3. localStoage, REST API 작업
    4. APP에서 Route 작업 ⇒ 어떤 페이지를 Render 할 것인지?

  • 페이지

    • PostsPage ⇒ 기본 경로로 들어왔을 때 보여줄 컴포넌트, posts를 불러와서 렌더링하고, 클릭 시 해당 post를 수정하는 곳으로 이동, 맨 아래에는 post를 생성할 수 있는 페이지로 이동하는 링크가 있음
    • postEditPage ⇒ post를 생성하고 수정하는 페이지

  • 새로 배운 개념

    • 반복적으로 나오거나 추후에 값을 수정할 데이터는 상수로 관리하는 것이 좋음
    • const nextState = { ...this.state, [name]: target.value }; ⇒ 대괄호를 통해 state의 특정 item만 수정할 수 있음
    • debounce ⇒ 입력할 때마다 localStorage에 저장하는 것은 비효율적이니까 일정시간 뒤에 저장
      • setTimeout, clearTimeout 이용
      • setTimeout => 입력했을 때 1초뒤에 localStorage에 저장
      • clearTimeout => 입력했을때 기존의 1초뒤에 저장되는 이벤트 제거
      • 이전 입력 기준으로 1초가 지나기전에 다음 입력을 하게되면 저장을 못하고 이전 입력 기준으로 1초가 지나면 localStorage에 저장
      • 그러므로 입력할 때마다 이벤트가 저장되는 문제를 해결할 수 있음 => 입력할 때마다 서버에 POST 요청을 하게되면 큰 문제가 발생할 수 있음

어려웠던 점


한줄평

오늘도 수고했어.


11월 9일

오늘 한일

프론트엔드 데브코스

  • js 강의 수강

배운 것

프론트엔드 데브코스


js 강의


자동 저장 편집기 만들기

  • window.dispathEvent를 통해 Custom 이벤트를 생성할 수 있음
  • contentEditable ⇒ 태그의 속성으로 마크 다운 적용 가능

어려웠던 점


한줄평

오늘도 수고했어.


11월 10일

오늘 한일

프론트엔드 데브코스

  • 팀원 코드 리뷰
  • live server 404 Error 해결
  • 자동 저장 편집기 프로젝트 복습
  • 노션 클로닝 준비
    • 디자인 설계, 파일 디렉토리, 데이터 흐름 파악
    • 구현할 기능 정리
    • 필요한 API 정리

배운 것


어려웠던 점

프론트엔드 데브코스


js 강의


liver server에서 404 Error

  • vscode의 live server에서 history API를 통해 특정 url로 이동한 후 새로고침을 하면 404 Error가 발생
  • 새로고침을 하게되면 해당 url에서 index.html 파일을 찾게 되는데 없으므로 404 Error
  • 원래 404 Error가 발생하면 홈으로 리다이렉션을 하는 방법이 있는데 live serve에도 방법이 있었음
    • 설정(Ctrl + ,) ⇒ 확장(Live Server Config) ⇒ settings.json 편집에서 아래 명령문 추가
    • liveServer.settings.file": "study/프로그램 실습/자동 저장 편집기/index.html

한줄평

오늘도 수고했어.


11월 11일

오늘 한일

프론트엔드 데브코스

  • 노션 클로닝 프로젝트 진행 중

배운 것


어려웠던 점


한줄평

오늘도 수고했어.


11월 12일

오늘 한일

프론트엔드 데브코스

  • 노션 클로닝 프로젝트 진행 중

배운 것


어려웠던 점


한줄평

오늘도 수고했어.