Skip to content

Latest commit

 

History

History
308 lines (190 loc) · 9.99 KB

4주차.md

File metadata and controls

308 lines (190 loc) · 9.99 KB
Raw

12월 18일

오늘 한일

코드 리뷰

  • VUE 코드 리뷰

개발자로서 고민

  • 어디 기업으로 갈지 선택

배운 것


어려웠던 점


한줄평

오늘도 수고했어.


12월 19일

오늘 한일

프론트엔드 데브코스

  • core time 참석
  • 데일리 스크럼
  • React 강의 수강

코드 리뷰

  • VUE 코드 리뷰 완료

내일 공부 하는 것들에 있어 이유

  • 강의를 듣는 이유 => React에 어떤 도구가 있는지 배우고 그 도구를 나의 목적에 맞게 사용하기 위해서
    => 도구의 사용법을 잘 알고 있어야 내가 원하는 것을 개발을 할 수 있고 버그가 발생했을 때 빠르게 대처할 수 있음
    => 나의 개발자 목적을 고려하지 않고 그저 도구를 사용하는 것에 초점이 맞춰져있으면 구현은 되어도 목적은 없음 => 기능을 구현하는 것은 누구나 할 수 있기 때문에 경쟁력 없음
  • 기업을 찾는 이유 => 기업이 원하는 기술과 협업 방식들을 준비할 수 있기 때문에
  • 블로그를 작성하는 이유 => 고민을 해봐야 할 것 같음

배운 것


어려웠던 점

storybook 주석 및 props 정보 표시 문제

  • 블로그에 나오는 대로 주석을 기입해도 화면에 나오지 않아 여러군데를 찾아봤지만 해결 하지 못했음
  • 그러다 다른 컴포넌트에 주석을 기입해봤는데 화면에 표시가 되어 뭐가 문제인지 파악하기 시작
  • 주석이 및 props의 정보가 화면에 나오지 않는 경우
    1. styled-component로 선언한 컴포넌트 위쪽에 기입 => storybook이 styled-component에 대한 정적 분석을 제공하지 않음
    2. component 선언하는 곳에 React.memo를 사용 => 이 또한 정적분석을 제공하지 않음
  • 해결 방법은 추후에...

한줄평

오늘도 수고했어.


12월 20일

오늘 한일

프론트엔드 데브코스

  • core time 참석
  • 데일리 스크럼
  • React 강의 수강

개발자로서 고민

  • 어디 기업으로 갈지 선택

내일 공부 하는 것들에 있어 이유

  • 강의를 듣는 이유 => React에 어떤 도구가 있는지 배우고 그 도구를 나의 목적에 맞게 사용하기 위해서
    => 도구의 사용법을 잘 알고 있어야 내가 원하는 것을 개발을 할 수 있고 버그가 발생했을 때 빠르게 대처할 수 있음
    => 나의 개발 목적을 고려하지 않고 그저 도구를 사용하는 것에 초점이 맞춰져있으면 구현은 되어도 목적은 없음 => 기능을 구현하는 것은 누구나 할 수 있기 때문에 경쟁력 없음
  • 기업을 찾는 이유 => 기업이 원하는 기술과 협업 방식들을 준비할 수 있기 때문에
  • 블로그를 작성하는 이유 => 고민을 해봐야 할 것 같음

배운 것


어려웠던 점


한줄평

오늘도 수고했어.


12월 21일

오늘 한일

프론트엔드 데브코스

  • core time 참석
  • 데일리 스크럼
  • 커피챗
  • React 강의 수강

내일 공부 하는 것들에 있어 이유

  • 강의를 듣는 이유 =>
    => React 라이브러리를 잘 사용해야 UI 및 사용성이 좋은 웹 사이트를 제작할 수 있음
    => React의 Hook, component를 강사님이 무엇을 만들고, 어떻게 만들고, 왜 만드는지를 숙지함으로 내가 제작하고 싶은 웹사이트의 사용성 및 UI를 향상 시킬 수 있고 제작 전 고민의 깊이가 더 깊어질 수 있음
  • 기업을 찾는 이유 => 기업이 원하는 사람은 말 그대로 기업이 원하는 기술, 협업 방식, 지식 등을 갖추고 있는 사람 => 기업을 조사해야 그런 사람이 될 수 있음 => 그런 사람이 되지 못하면 취업을 할 수 없음
  • 블로그를 작성하는 이유 => 꾸준함, 개발과 관련한 열정을 기록하기 위해

배운 것


어려웠던 점


한줄평

오늘도 수고했어.


12월 22일

오늘 한일

프론트엔드 데브코스(Day49)

  • core time 참석
  • 데일리 스크럼
  • React 강의 수강

개발자로서 고민

  • 기업 탐색 및 테스트 종류 파악

배운 것

강의

  • 여러 종류의 컴포넌트 및 사용자 정의 Hook을 어떻게 만드는 지 배웠음
  • 컴포넌트 => Input, Flux, Breadcrumb
  • 사용자 정의 Hooks => useHover, useScroll

passive 속성

  • 브라우저는 preventDefault 메소드를 check 하게 되는데 passive를 true로 설정하게 되면 check를 하지 않음
  • scroll event가 발생될 때 passive를 true로 설정하는 것이 성능 향상의 방법 중 하나임
  • passive를 true로 설정하게 되면 이벤트 발생 시 호출되는 메소드는 preventDefulat를 사용할 수 없음
element.addEventListener("scroll", handleScroll, { passive: true });

스크롤 성능 향상

  • 브라우저는 스크롤 시에 re-flow를 하는데 이 부분에 있어 requestAnimationFrame 함수를 사용하게 되면 성능을 향상 시킬 수 있음

어려웠던 점

오타를 조심

  • Flux component 강의를 듣고 있는데 story book에 컴포넌트가 생성이 되지 않는 문제 발생
  • compnent는 정상적으로 생성되었지만 Col component의 자식 component인 Box component가 rendering 되지 않는 문제 발생
  • 코드를 자세히 읽어보니 Row component의 styled-component로 지정한 태그가 div가 아닌 row가 되어있어서 component 생성이 되지 않았음
  • Box component가 rendering 되지 않는 문제는 style props의 배경색 속성명에 오타 문제

내일 공부 하는 것들에 있어 이유

  • 강의를 듣는 이유 =>
    => React 라이브러리를 잘 사용해야 UI 및 사용성이 좋은 웹 사이트를 제작할 수 있음
    => React의 Hook, component에 있어 강사님이 무엇을 만들고, 어떻게 만들고, 왜 만드는지를 숙지함으로 내가 제작하고 싶은 웹사이트의 사용성 및 UI를 향상 시킬 수 있고 제작 전 고민의 깊이가 더 깊어질 수 있음
  • 주간 발표를 하는 이유 => 평소에 어떻게 사용하는지만 알고 있는 개념을 왜 사용하고 조금 더 디테일하게 알아야 내가 제작할 웹 사이트에 적용 시킬 수 있기 때문 => 그저 가져다 쓰기만 한다면 사용자가 원하는 좋은 웹사이트를 제작함에 있어 한계가 있음
  • 기업을 찾는 이유 => 기업이 원하는 사람은 말 그대로 기업이 원하는 기술, 협업 방식, 지식 등을 갖추고 있는 사람 => 기업을 조사해야 그런 사람이 될 수 있음 => 그런 사람이 되지 못하면 취업을 할 수 없음

한줄평

오늘도 수고했어.

12월 23일

오늘 한일

프론트엔드 데브코스

  • core time 참석
  • 데일리 스크럼
  • React 강의 수강
  • 주간 발표

배운 것


어려웠던 점


한줄평

오늘도 수고했어.


12월 24일

오늘 한일

프론트엔드 데브코스(10주차 주말)

  • React 강의 수강

개발자로서 고민

  • 기업 탐색 및 테스트 종류 파악

배운 것

강의

  • 여러 종류의 사용자 정의 Hook을 어떻게 만드는 지 배웠음
  • 사용자 정의 Hooks => useForm, useTimeout, useInterval, useDebounce, useAsync, useHotKey
  • useForm => Form 관련 작업을 위해 만들어진 Hook으로서 submit 후 동작 및 error check
  • useTimeout => 일정 시간 뒤에 처리할 작업이 있을 경우 사용되는 Hook으로서 일정 시간 뒤 수행되는 동작 제어 가능(수행 및 정지)
  • useInterval => useTimeout과 비슷한 Hook으로 차이점은 useInterval은 설정한 시간을 주기로 동작 수행 반복
  • useDebounce => 사용자가 input 태그에 입력할 때 많이 사용되는 Hook으로 일정 시간이 지나면 사용자가 입력한 데이터가 서버나 필요한 곳으로 전달되고 일정 시간이 지나지 않았을 때 사용자가 다시 입력하면 기존의 이벤트를 제거 및 다시 실행 시킴
  • useAsync => 비동기 로직을 처리하기 위해 사용되는 Hook
  • useHotKey => 복잡한 단축키를 지원하기 위해 만들어진 Hook

어려웠던 점


내일 공부 하는 것들에 있어 이유

  • 강의를 듣는 이유
    => React 라이브러리를 잘 사용해야 UI 및 사용성이 좋은 웹 사이트를 제작할 수 있음
    => React의 Hook, component에 있어 강사님이 무엇을 만들고, 어떻게 만들고, 왜 만드는지를 숙지함으로 내가 제작하고 싶은 웹사이트의 사용성 및 UI를 향상 시킬 수 있고 제작 전 고민의 깊이가 더 깊어질 수 있음
  • 기업을 찾는 이유 => 기업이 원하는 사람은 말 그대로 기업이 원하는 기술, 협업 방식, 지식 등을 갖추고 있는 사람 => 기업을 조사해야 그런 사람이 될 수 있음 => 그런 사람이 되지 못하면 취업을 할 수 없음
  • 목표 세우기
    => 구체적인 목표를 세워야 더 집중할 수 있고 내가 어떤 공부를 해야하는지 눈에 보이므로 필요한 곳에 시간을 사용할 수 있음
    => 목표를 세우지 않으면 여러 공부를 함에 있어서 우선순위를 알지 못하고 무엇을 해야 할지 갈피를 잡지 못해 공부를 한다고 하더라도 시간만 허비할 가능성 높음
    => 개인적으로 나는 목표가 있으면 좀 더 집중을 하고 큰 동기부여를 가짐
  • React 복습 => 강의를 보는 것도 중요하지만 그 보다 더 중요한 것은 강의에 나오는 소스 코드를 이해하고 위에서 말했듯이 무엇을 위해 사용하고, 왜 사용 하는지도 이해를 해야 내가 제작할 웹 사이트에서도 사용할지 안할지 결정을 할 수 있음

한줄평

오늘도 수고했어.