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

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

회고록

목록 보기
18/38
post-thumbnail

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

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

1. 요일별 공부 기록

❤️ 12월 30일 금요일

  • 프로그래머스
    • 신규 아이디 추천
      • 정규식... 정규식...!!!
      • 아직도 여전히 잘 이해는 되지 않는 것 같다... replace(/[^\w-\.]/g, '') 이라고 하면 63개 문자, -, . 으로 시작하는 전부를 빈 문자로 바꾸는 게... 아닌가? 왜 쟤들이 제외되고 아닌 문제들만 빈 문자로 바뀌는 건지 잘은 모르겠다.
  • 소플 리액트 강의
    • 9강 Conditional Rendering
      • 조건부 렌더링
      • inline에서 작성할 때 && 연산자 사용
        • true && 설명 = 설명
        • false && 설명 = false
      • null을 리턴하면 렌더링 되지 않음
    • 10강 List and Keys
      • key의 값은 같은 List에 있는 요소들 사이에서만 고유한 값이면 된다.
      • map() 함수 안에서 key 값 필수
    • 11강 Forms
      • controlled component
      • HTML vs Class Component vs Function Component
        • HTML = input / textarea / select
        • Class Component = state = {} / setState()
        • Function Component = useState()
    • 12강 Lifting State Up
  • 안재원 강사님 수업

다들 새해 복 많이 받으세요!

🧡 1월 1일 일요일

  • 강의 목록 정리하기
    • 노마드 코더
      • 트위터 클론 코딩
      • 영화 웹 서비스 만들기
      • 초보자를 위한 리덕스 101
    • 권장 강의
      • Redux 만들기
      • 미들웨어 만들기
  • 기존에 있던 프로젝트들 React로 리팩토링 해 보기
    • Todo App
    • 영화 검색 앱
    • 핀테크 팀 프로젝트 과제

💛 1월 2일 월요일

  • 프로그래머스
    • 기사단원의 무기
      • 약수 구할 때 1부터 n까지 돌았더니 시간 초과가 떴다. Math.sqrt(n)를 사용해야 되는 것은 알게 되었지만 어떤 조건일 때 1을 더해야 될지 잘 이해가 되지 않았다.
  • 소플 리액트 강의
    • 13강 Composition vs Inheritance
      • composition = component 합치는 것, 합성
      • specialization = 범용적인 개념을 구별이 되게 구체화
      • composition의 반대 inheritance
      • 리액트는 상속보단 composition의 개념
      • 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고 만든 컴포넌트를 조합해 새로운 컴포넌트로 만들자!
  • DEEP DIVE
    • 클래스
  • 4차 과제 함수 정리
  • 안재원 강사님 수업
    • firebase에서 애널리스틱 허용을 해 주면 사용자 페이지처럼 어디서 접근했는지 알 수 있다.

💚 1월 3일 화요일

  • 프로그래머스

    • 옹알이 (2)

      • 정규표현식 RegExp.prototype.exec(문자열) 주어진 문자열에서 일치 탐색을 수행한 결과를 배열 혹은 null로 반환.

        function solution(babbling) {
  // (그룹) + 그룹과 동일한 단어
  // 2개의 동일한 단어를 연속적으로 사용해야만 매치된다.
  // \1은 정규식의 그룹 중 첫 번째 그룹을 가리킨다.
  // 연속적인 발음을 할 수 없으니까 연속적으로 발음이 나타나는 것을 걸러 주게 된다.
  const r1 = /(aya|ye|woo|ma)\1/
  // 그룹으로 시작하고, 하나 이상 일치하며 그룹으로 끝나야 한다.
  const r2 = /^(aya|ye|woo|ma)+$/
  let answer = 0
  for (let x of babbling) {
    const m = r1.exec(x)
    if (m) continue

    const m2 = r2.exec(x)
    if (!m2) continue

    answer += 1
  }
  return answer
}
		```

  • 4차 과제 함수 정리

  • 4차 과제 회의

    • export, import 통일하기

    • fetch, try...catch, throw에 대해서 정리해 보기
      + 참고 사이트

      // createRequest
async function createRequest(url, type, masterKey = true, data, accessToken) {
const res = {
  method: type,
  headers: { ...store.headers },
};

if (masterKey) {
  res.headers.masterKey = true;
}

if (data) {
  res.body = JSON.stringify(data);
}

if (accessToken) {
  res.headers.Authorization = `Bearer ${accessToken}`;
}
try {
  const response = await fetch(store.url + url, {
    ...res
  })
  if (!response.ok) {
    throw new Error()
  }
  const json = response.json()
  return json
} catch (error) {
  console.log(error)
}
}
// 로그인 유지 데이터
export async function keepLogin(accessToken) {
createRequest('/auth/me', 'POST', false, null, accessToken)
}
+ 관리자 페이지 라우터
// router
window.addEventListener('hashchange', router())

function router() {
  const routePath = location.hash
  const allProducts = store.selector('.all-products')
  const addProducts = store.selector('.add-products')
  const allTransacs = store.selector('.all-transace')
  if (routePath === '#all-products') {
    allProducts.classList.add('active')
    addProducts.classList.remove('active')
    allTransacs.classList.remove('active')
  } else if (routePath === '#add-products') {
    addProducts.classList.add('active')
    allProducts.classList.remove('active')
    allTransacs.classList.remove('active')
  } else if (routePath === '#all-transacs') {
    allTransacs.classList.add('active')
    addProducts.classList.remove('active')
    allProducts.classList.remove('active')
  }
}

💙 1월 4일 수요일

  • 프로그래머스

    • 문자열 나누기
      • while문을 돌리려다가 반복문을 초기화해 주면 되지 않을까? 싶어서 해 봤는데 마지막에 남은 문자 처리가 어려웠다.
      • 결국 다른 사람의 풀이를 참고...
      • 첫 문자도 밖에 저장을 하면서 쉽게 해결!

  • 소플 리액트 강의

    • 14강 Context
      • React.createContext(기본값)
      • ____.Provider
      • componenet와 context가 연동되면 재사용성이 떨어진다.
      • Context API
        • 만약 상위 레벨에 매칭되는 Provider가 없다면 기본값이 사용된다.
        • Provider 없이 기본값을 테스트할 때 유용.
        • undefined를 기본값으로 넣게 되면 기본값이 사용되지 않는다.
        • Provider로 하위 컴포넌트를 감싸면 하위 컴포넌트들이 모두 접근할 수 있다.
        • consuming component = 하위 컴포넌트
        • provider는 중첩될 수 있으며 value 값이 변경될 때 재렌더링 된다.
      • provider value 주의 사항
        • provider component가 재렌더링 될 때 모든 하위 consumer component도 재렌더링 된다.
        • value를 직접 넣는 것이 아닌 state로 저장.
      • Class.contextType
        • class component를 많이 사용하지 않으니 있다는 것만 알아 두기.
        • context에 접근 가능한 class component가 된다.
        • this.context를 통해 가장 가까운 상위 context를 가지고 올 수 있다.
      • Context.consumer
        • 함수 컴포넌트에서 사용.
        • function as a child
      • Context.displayName
      • useContext()
        • context가 변경되면 useContext를 사용하는 컴포넌트가 재렌더링 된다.
        • 이때 컴포넌트가 무겁다면 최적화가 필요하다.
        • 파라미터로 context 객체를 넣어 주어야 한다.

  • 4차 과제 고민!

    • fetch()로 반환되는 Promise 객체는 HTTP error 상태를 reject 하지 않는다.

    • 참고 블로그 1

    • 참고 블로그 2

      // createRequest
async function createRequest({ url, type, masterKey, data, accessToken }) {
const content = {
 method: type,
 headers: { ...store.headers }
};

if (masterKey) {
 content.headers.masterKey = true;
}

if (data) {
 content.body = JSON.stringify(data);
}

if (accessToken) {
 content.headers.Authorization = `Bearer ${accessToken}`;
}

try {
 const response = await fetch(store.url + url, { ...content })
 if (!response.ok) throw new Error()
 const json = await response.json()
 return json
} catch (e) {
 return
}
}
// 요청 api
export async function keepLogin() {
return await createRequest({ url: '/auth/me', type: 'POST', masterKey: false, accessToken: store.token})
}

  • 안재원 강사님 강의

    • build 스크립트에 CI = false를 작성하면 warning을 무시한다.

💜 1월 5일 목요일

  • 프로그래머스
    • 성격 유형 검사하기
      • 노가다로 푼 게 없지 않아 있는 것 같은데... 이래도 되나? 다른 사람의 풀이를 봐야겠다.
  • DEEP DIVE
    • 클래스
      • 클래스 필드(멤버)에 함수를 할당할 수 있지만 권장하지 않는데 그 이유는 인스턴스 프로토타입 메서드만 사용할 수 있기 때문이다.
      • 수퍼 클래스와 서브 클래스는 인스턴스의 프로토타입 체인뿐 아니라 클래스 간의 프로토타입 체인도 생성한다.
      • 서브 클래스에서 constructor을 작성한다면 super() 키워드를 작성해야 한다.
      • 진즉... 팀원들과 퀴즈 내는 방식으로 할 것을 그랬다. 이제 DEEP DIVE 스터디 끝났는데.... ㅠㅠ 리액트에서 클래스 컴포넌트에서 계속 super() 키워드를 쓰는 이유가 명확하게 이해되었다!
  • 개발 블로그 작성
  • 4차 과제 회의
    • 관리자 페이지 라우터 정리하기
    • API 요청 함수 유틸로 만들기
    • 다음 회의까지 생각해야 될 것
      • removeEventListener
      • querySelector vs getElementBy__
  • 여담
    • 최근에 신비한 동물 사전 영화를 보다가 이것도 책으로 있다길래 나무위키를 검색해 보는데 책 표지에 property of: Harry Potter이라고 써 있는 것을 발견했다. 사실 코딩을 하면서 영어 뜻을 모르는 단어는 잘 없었기 때문에 그러려니 넘어갔었던 것 같은데 프로퍼티를 프로그래밍에서만 쓰는 단어인 줄 알았는데 실제로 사용하는 줄 몰랐던 것이다...! 그래서 찾아봤더니 property는 재산권의 의미를 가지고 있는 단어라고 한다.

2. 주간 회고

새해가 돌아왔고, 4차 과제의 2차 제출을 끝냈다! 사실 1차 제출 때와 크게 달라진 것은 없었지만 그래도 바뀌었다는 것을 보여 드리고 싶었는데 멘토님이... 따끔한 말들을 많이 해 주셨다. 서로 소통이 많이 부족했다는 것을 느끼고 있던 상태에서 멘토님도 그렇게 말씀을 하시니 얼마나 엉망이었는지 더 뼈저리게 느끼게 되었다. 팩폭으로 맞으니 꽤나 아프기도 했지만... 조금 더 성장할 수 있는 기회가 주어진 것 같아서 더 열심히 해야겠다는 생각이 들었다. 팀장으로서의 고민도 꽤나 많아졌다. 그 전에도 내가 이렇게 해도 되나? 하는 것들이 있었는데 지금은 그 고민들이 더 는 기분이다. 내가 하는 것처럼 조금 더 타이트한 일정을 잡아도 되는 건가? 팀원들과 의견은 조정할 거지만 내가 조금 더 의견을 내도 되는 걸까? 하는 생각들. 팀원들이랑 합을 잘 맞추는 게 더욱 중요할 것 같다. 그러기 위해선 자주 회의하고 자주 이야기 나누기! 제가 노력하는 만큼... 팀원들도 같이 이야기하려고 해 줬으면 좋겠다는 마음도 크다! 4차 과제를 여기서 끝내는 것이 아닌 조금 더 합을 맞추고 나은 결과물로 바꾸기 위해서 앞으로 학원 기간이 끝날 때까지 같이 갈 텐데 좋은 결과물이 나오면 좋겠다. 싸우더라도 잘 풀고, 서로의 의견을 존중할 줄 아는 사람들이면 좋겠다. 제가... 쓴소리를 해도... 미워하지 말아 주소서.... 아좌작.

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

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

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

다음 포스트

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

0개의 댓글