[패스트 캠퍼스] MegaByte School 프론트엔드 3기 회고 - 18주차

당근 먹는 쿼카·2023년 1월 13일
MegabyteSchool개발자취업부트캠프국비지원교육내일배움카드메가바이트스쿨패스트캠퍼스
1

회고록

목록 보기
19/38
post-thumbnail

안녕하세요, 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 3기 수료 중인 김당퀔입니다! 이번 3기 수료 기간은 9월 13일부터 4월 14일까지 총 7개월 과정입니다. 7개월 동안 매주 주말 회고록을 작성해 보려고 합니다.

블로그 제출 기한으로 인해서 지난 금요일부터 해당 주 목요일까지의 사이클로 작성됩니다.

1. 요일별 공부 기록

❤️ 1월 6일 금요일

  • 멘토 님께 질문 보내기

    • 질문 1
      4차 과제를 진행하였을 때 관리자 페이지에서 페이지 전환을 할 때 css로 display: block 혹은 display: none을 주어서 전환 효과를 주었습니다. html에는 모든 구조들이 작성된 상태이구요. 이런 상황일 때 요소의 언마운트 시기가 언제인지 알고 싶습니다. 이때 언제 removeEventLitstener을 사용해 줘야 하는지 알고 싶습니다.

      display 속성을 통해 컴포넌트를 보이지 않게하는것은 요소가 언마운트되지 않습니다.
      이는 단순히 화면에 렌더링 시키지 않도록 하는 css 속성입니다.
      따라서 만약 해당 속성이 리액트로 선언한 컴포넌트라면 내부적인 동작은 전부 진행됩니다.
      만약 언마운트되야한다면 if문등을 사용하여 조건부 렌더링을 진행해주어야합니다.
      해당 경우 조건문 내의 조건이 변경된다면 마운트와 언마운트가 새롭게 진행됩니다.
      따라서 useEffect등을 통해 마운트, 언마운트 관리를 진행할 수 있습니다.
      추가로 display: none는 조건부 렌더링에 비해 상태 변화에 적은 리소스를 소모합니다.
      대신 부모가 렌더링 될때 함께 렌더링이 진행되기에 초기 비용이 소요됩니다.
      이에 따라 자주 변경되는 경우에 사용됩니다.
      이와 반대로 조건부 렌더링의 경우 초기에 비용이 전혀 소요되지 않으나 상태가 변경될때마다
      큰 리소스를 소요합니다.
      따라서 자주 변경되면 display: none, 한번 혹은 가끔 변경된다면 조건부 렌더링을 사용하는것을 추천합니다.

      해당 답변은 우리 팀과는 조금 맞지 않은 답변이라고 생각하였다. 😥

    • 질문 2
      setAttribute(’class’, ‘’)과 classList.add(’’)의 차이점이 있을까요?

      두가지는 기본적으로 동일한 목적으로 사용되나
      setAttribute의 경우 class의 기존 값을 남기지 않은채 새로 추가한 값만 선언됩니다.
      classList.add의 경우 기존 값의 뒤에 한칸의 공백을 추가한 뒤 값을 추가하게됩니다.

  • 프로그래머스
    • 신고 결과 받기
      • 문제를 보고 진짜 에바라고 생각을 했는데 set 함수를 사용하여서 해결!
      • 신고한 회원들 목록과 신고당한 목록을 만들어서 k보다 큰 회원을 찾아냈다.
      • set을 사용했을 때는 includes나 contains가 아닌 has를 사용해야 한다.
  • 소플 리액트 강의
    • 15강 styling
      • styled-components
      • CSS = Cascading Style Sheets
      • Universal selector = *
      • Grouping selector = 쉼표 사용하여서 나열
      • 1em = 16px
      • oblique ≒ italice
        • oblique는 그냥 글자 자체를 기울인 것
      • tagged template literal
    • 16강 Mini Project
  • 안재원 강사님 수업

🧡 1월 7일 토요일

  • 프로그래머스
    • 개인정보 수집 유효 기간
      • 제대로 못 풀었다. 날짜 계산하는 거에서 계속 뻑 나는 듯...
    • 최댓값 최솟값
      • 가장 작은 수와 가장 큰 수를 곱해서 더해 주기
  • 리액트 퀵스타트

    • 타입스크립트
      tsconfig.json

      • compilerOptions
        • outDir: 최종 결과물이 저장되는 경로 지정
        • allowJS: 트랜스파일 할 대상에 .js, .jsx와 같은 파일도 포함
        • esModuleInterop: true 값을 주게 되면 commonJS로 작성한 모듈을 ES6에서 임포트할 때 문제 해결.
        • resolveJsonModule: true 값을 주게 되면 .json 텍스트 파일을 자바스크립트 객체로 임포트할 수 있음.
        • sourceMap: 트랜스파일한 코드와 함께 디버깅을 위한 .js.map과 같은 소스 맵 파일을 생성.
        • noImplicitAny: true 값을 주게 되면 암시적인 타입 지정을 사용할 수 없음.
        • target: 최종 결과물의 형태를 지정. ES6로 지정하게 되면 모두 ES6 문법으로 저장.
        • jsx: 속성을 "react"로 지정하면 jsx가 사용된 부분을 React.createElement() 함수의 호출 형태로 트랜스 파일.
      • compiler.module: 컴파일된 결과물이 사용하게 될 모듈 시스템 방식을 지정. target 속성이 ES5면 commonJS를 주로 지정, ES6 혹은 그 이상의 버전을 사용하면 ES6, ES2015, ESNext 등을 지정.
      • include: 파일 패턴을 지정해서 트랜스파일할 대상 파일을 지정.
      • exclude: 트랜스할 때 배제 대상을 지정.

    • tsConfig Reference

    • TypeScript 한글 문서

    • TS Playground

    • 지정 가능 타입 종류

      • number
      • string
      • boolean
      • any
      • array
      let a: number[] = [1, 2, 3]
      • null
      • undefined
      • void: 결과 값을 리턴하지 않는 함수의 타입을 지정할 때
      • union
      let a: number | string = "hello"
      • type alias(타입 별칭)
      • 열거형
      enum Media {
  Newspaper,
  Broadcasting,
  SNS,
  Magazine,
  Youtube
}
let media: Media = Media.Youtube // 4

enum Media2 {
  Newspaper = "신문",
  Broadcasting = "방송",
  SNS = "SNS",
  Magazine = "잡지",
  Youtube = "유튜브"
}
let media2: Media2 = Media2.Newspaper // 신문

enum Media3 {
  Newspaper,
  Broadcasting = 10,
  SNS,
  Magazine,
  Youtube
}
let media3: Media3 = Media3.Magazine // 12

      let 키워드로 선언한 변수는 string과 같은 원시 타입으로 추론하지만 const로 선언한 타입은 리터럴 값으로 타입을 추론한다. 또한 let 키워드로 선언한 변수라도 as const로 타입을 단정하면 const 상수와 동일하게 리터럴값으로 타입을 추론.

💛 1월 8일 일요일

  • 리액트 스터디
  • TEAM-NXLL 코드 리팩토링
    • 이벤트 리스너 정리

      이벤트 리스너 탭을 보면 click 이벤트가 있다고 했는데 찾을 수가 없었다. 나중에 알게 된 사실은 이벤트가 등록된 요소를 클릭 해야 나온다고 한다. ㅎㅎ ^^...
      인라인으로 onclick을 사용해 보려고 했는데 함수를 못 읽기도 했고, 이벤트 타켓에 있는 data 값을 가지고 오는 게 잘 안 되었다.
    • querySelector, getElementBy__에 대한 고민
      • NodeList
        • forEach 사용 가능
        • live 객체가 아니라서 실시간 반영이 안 됨.
        • 조금이지만 getElementBy__ 보다 느림.
      • HTMLCollection
        • Array.from()으로 배열로 바꾸게 되면 forEach를 사용 가능.
        • live 객체이기 때문에 실시간 반영.

💚 1월 9일 월요일

  • 프로그래머스
    • Jaden Case 문자열 만들기
      • 제대로 못 풀었음....
  • TEAM-NXLL
  • 안재원 강사님 수업

기록이 하나도 안 되어 있어서... 내가 뭘 했던 건지 잘 기억이 안 난다. 기록에 조금 더 힘을 쓰자.

💙 1월 10일 화요일

  • TEAM-NXLL
    • HTML DOM 요소 찾는 util 함수 만들기
      • 근데... 이걸 이렇게 만들어야 되나? 하는 고찰.
  • 그룹 스터디 발표 자료
  • 리액트 스터디
    • JSX 주의 사항
      • 카멜 표기법을 준수해야 한다.
      • 보간법을 사용할 때는 표현식을 사용.
      • {} 내에 보간된 HTML 문자열은 인코딩된다.
        • <span dangerouslySetInnerHTML={{ __html: msg }} />
        • let msg = (<i>World</i>)
      • JSX는 단일 루트 요소만 렌더링 할 수 있다.
    • 컴포넌트 세분화의 장점
      • 컴포넌트의 기능이 단순해지기 때문에 에러가 발생할 가능성이 줄어들며 디버깅과 테스트가 쉬워짐.
      • 컴포넌트의 재사용성이 높아짐.
      • 렌더링 성능을 최적화하기 더 용이.
    • 예제
  • 노마드 코더 리액트 강의
  • 기초부터 완성까지 프론트엔드

💜 1월 11일 수요일

  • 프로그래머스
    • 최솟값 만들기
  • 백엔드 협업 회의
    • 페이지 설계
    • 프론트엔드 협의 내용
      • 레이아웃 공유 프로그램 선정
      • 백엔드에게 요구할 API 내용 정리
      • 리액트 사용할 시 vite 사용하자고 건의
  • 리액트 퀵스타트 스터디
  • 안재원 강사님 수업
    • useDispatch() = dispatch 함수를 리턴
    • useSelector(Context Object)
    • redux tool kit
    • 보일럿 플레이트
      • redux는 보일럿 플레이트가 많아서 어렵게 느껴질 수 있다.
      • 참고 사이트
    • redux thunk 비동기 통신할 때 사용

🤎 1월 12일 목요일

  • 프로그래머스
    • 올바른 괄호
      • 효율성 테스트 니는 죽고 나는 산다... 아좌작
  • 백엔드 협업 관련 프론트엔드 회의
    • 관리자 페이지 레이아웃 및 API 요구 사항 정리할 것
    • pr, merge 관리 담당!
    • 사용하고픈 라이브러리 정리
    • 백엔드 분들에게 관심 구장이 어떤 기능을 가진다고 생각하신 건지 다시 물어볼 것
  • TEAM-NXLL
    • 장바구니 기능 하나로 합치기
    • 카테고리에서 상품이 나열되었을 때 hash 값으로 페이지 전환하는 것으로 변경
    • github
  • 리액트 퀵스타트
    • 리액트 컴포넌트
      • 리액트에서의 스타일 지정
        • 전역 CSS 참조
        • 인라인 스타일 지정
        • 특정 컴포넌트에서만 이용 가능한 모듈 CSS 적용
      • 지정 가능한 유효성 검증 타입
        • PropTypes.array: 배열 타입
        • PropTypes.bool: true / false
        • PropTypes.func: 속성을 이용해 함수와 메서드를 전달하는 함수 타입
        • PropTypes.number: 숫자 타입
        • PropTypes.object: 객체 타입
        • PropTypes.string: 문자열 타입
        • PropTypes.instanceOf(Customer): Customer 클래스의 인스턴스인지를 검증
        • PropTypes.oneOf(["+", "*"]): []에 포함된 값 중 하나인지를 검증
        • PropTypes.oneOfType([PropTypes.number, PropTypes.stirng)]: []에 포함된 타입의 값인지를 검증
        • PropTypes.arrayOf(PropTypes.object): 객체의 배열인지를 검증
      • 이벤트 적용 방법
        • 이벤트 핸들러 함수를 정의하여 보간법을 이용해 외부 함수를 바인딩
        • 이벤트 핸들러 함수의 첫 번째 인자를 이용해 이벤트 아규먼트 값을 이용
      • 책에서 document.getElementById('root')!로 작성이 되어 있는데 !가 무슨 뜻인지 궁금하여 검색해 보았다. 이것은 해당 내용이 무조건 값이 할당되어 있으니 걱정 말고 사용하면 된다, 라는 뜻의 타입스크립트 문법이다.
  • 그룹 스터디 워크샵
    • 관리자 페이지에서 꼭 removeEvent를 넣고 싶다면 display: block 때 addEvent를, none으로 바뀔 때 remove를 넣어 주는 방식이 있다.
    • 서로의 코드에 대한 이해
      • 깃헙에서 merge 하기 전 모든 팀원들의 accept가 있어야 merge 할 수 있는 기능이 있다.
      • 서로의 코드를 문서화나 도식화 (다이어그램, yed 추천) 하는 바업ㅂ.
    • 중복된 코드들은 꼭 줄여 보기
    • 이 팀의 강점은 에러 핸들링이라고 생각한다. 다음 발표 때는 에러 핸들링에 대해 발표해 보기
    • repaint, reflow 공부하기
  • 노마드 코더 리액트 강의
    • 3.2 setState part Two
      • setCounter 의 인수에 counter + 1 은 잘 작동이 되는데 counter += 1은 작동이 안 되는 이유는 뭘까?
    • 3.4 State Functions
      • setCounter(counter + 1)보다 setCounter(current => current + 1)가 최근 값이 보장되기 때문에 더 안전하다.
    • 3.5 Inputs and State
      • for 라는 키워드는 자바스크립트의 키워드이기 때문에 JSX에서는 사용 불가. 대신 htmlFor 을 사용.
      • 유사한 경우로는 class가 className으로 사용되는 것.
    • github

2. 주간 회고

1월이 되고 나서 정말 시간이 순식간에 지나는 걸 너무나 느끼고 있다. 일주일 중에서 팀원들과 이야기하는 시간이 반 이상이고, 개인적인 공부를 할 시간이 많이 줄어들어서 더 그런 것 같기도 하고. 그래도 개인 공부를 좀 하겠답시고 학원 끝나고 집에 돌아가서도 공부를 했다. 이럴 거면... 주말에 조금 더 열심히 했어야 했는데 주말에 너무 놀아 버렸다. 정신 못 차리고 누워있기....
아직도 4차 과제 코드를 수정하는 것에 대해서 고민이 많다. 그룹 스터디 워크샵에서 멘토님께서 바닐라로 계속 코드를 수정하는 것보단 리액트로 새로 프로젝트를 만드는 것을 추천한다고 하셨기도 했고, 지금 현재로선 코드를 얼마나 더 고쳐야 되는 건지도 잘 감이 잡히지 않아서 어떻게 진행해야 될지는 팀원들과 더 이야기를 나눠 봐야 할 것 같다.
그리고 드디어 백엔드랑도 협업을 하게 되었다! 초반에 정리할 것도 많고 백엔드 분들께 요구 사항들을 잘 정리해야 될 것 같다. 싸우더라도 건강하게 싸우기. 아이캔두잇... 일을 벌인 만큼 열심히 해내기!!!

지금까지 18주차의 기록을 읽어 주신 여러분, 감사합니다! 김당퀔은 이만 공부하러. 🥕🥕

profile
당근 먹는 쿼카
웅냥냥
이전 포스트

[패스트 캠퍼스] MegaByte School 프론트엔드 3기 회고 - 17주차

다음 포스트

[패스트 캠퍼스] MegaByte School 프론트엔드 3기 회고 - 19주차

0개의 댓글