'그냥' 대기업 사원

소제목에서 알 수 있듯이, 나는 진부할 수도 있는 스토리를 가지고 있는 사람이다. 대기업을 다니다가, 이런저런 회의감을 느끼고 그만둔 MZ세대, 중 한 명이라는 뜻이다. 그렇다, 마냥 대기업을 목표로 삼고 취업 준비를 했었고, 실제로 555일 동안 대기업인 회사를 다녔다. 그래서 555일 동안 뭐했냐고? 요약하자면 오로지 '돈'을 벌기 위해 회사를 다녔다고 할 수 있겠다. 퇴사의 이유에는 여러 가지가 있었지만, 무엇보다 회사에서 흘러가는 나의 시간을 '돈'이 아닌 다른 목적을 가진, '일'에 쓰고 싶었다.

코딩부트캠프 항해99를 선택한 이유

퇴사하고 디자인과 코딩을 공부하다가 프론트엔드 개발자가 적성에 맞을 것 같아서 코딩부트캠프를 알아봤다.

지인 추천

나와 비슷한 인생의 길을 미리 걸었던 선배에게 (3년차 개발자) 조언을 구했다. 사실 그 형이 한 말 중에 가장 중요했던 말은 '야, 어딜 가나 똑같아. 너 하기 나름이지.' 였다. 하지만 나는 어쨌든 하나의 부트캠프를 선택해야만 하는 상황이었고 그 형의 지인 중 스타트업 신입 개발자 면접을 보러 다니시는 분이 항해99 수료생들을 칭찬했다고 하여, 항해99를 알아보기 시작했다.

비용

일단 항해99의 금액은 타 부트캠프와 비교하면 절대적으로 저렴했다. 개발자를 준비하는 시간도 비교적 짧기도 했다.

자기주도적 / 협업 중심 커리큘럼

또한 여러 프로젝트들을 과제로 주고, 필요할 때만 매니저들의 케어로 자기주도적 성장을 유도하는 것이 마음에 들었다. 이를 통해 신입 개발자들의 필수 역량이라고 알고 있는 협업과 소통 능력을 향상 시킬 수 있을 거라고 생각했다.

항해99 아쉬울 수 있는 점

'자기주도적 성장'이 가질 수밖에 없는 양날의 칼

항해99를 하며 느낀 거지만, 앞서 말한 자기주도적 성장은 개인마다 다르게 적용했다. 같은 과제를 해도, 같은 팀으로서 같은 목표를 가지고 협업을 해도, 개개인이 가지는 마음가짐은 다르기 때문이다. 누군가의 리드 하에 자기가 맡은 일만 하면 된다는 마음가짐이 있을 수 있고, 자기가 맡은 일은 당연히 잘하면서 보다 좋은 성과를 내기 위해 절대적인 시간을 투자해 노력하려는 마음가짐이 있을 수 있다. 나는 개인적으로 후자를 가지고 항해99를 수료했고, 따라서 당연하게도 항해99에 굉장히 만족했다. *나처럼 오로지 좋은 경험만 하고 수료하신 분들도 있는 반면, 항해99를 하면서 여러가지 이유 중 항해99의 시스템이 마음에 들지 않아서 중도에 하차하신 분들도 있다. * 내가 생각했을 때 이분들이 공통적으로 불만을 느낀 근본적인 원인은, 항해99는 수강생들이 스스로 성장할 수 있는 커리큘럼을 가지고 있다는 것이다. 물론 반마다 매니저가 있고 많은 리소스를 들여 케어를 하고 있다. 하지만 '자기주도적 성장'을 지향하는 이 부트캠프는 무료가 아니다. 상대적으로 타 부트캠프들 보다 저렴한 가격을 유지하고 있지만 400만 원이 땅 파서 나오는 돈은 아니기 때문이다. 이러한 '돈'에서 시작되는 문제에 나의 생각은 조금 다르다는 것을 간단하게 설명해보겠다.

삶 = 시간 시간 = 돈 따라서 삶 = 돈. 어떠한 삶이 건강한 삶인가? 모두가 동의하겠지만 자기주도적인 삶이다. 주어진 삶 혹은 시간을 살아가고 있는 우리는, 매 순간마다 돈을 쓰고 있다고 생각하면 된다. 즉, 자기주도적인 삶을 살고 있지 않거나 살려고 하지 않는다는 것은, 남들 혹은 자신의 환경 탓만 하며 시간(=돈)을 소비하고 있다는 것이다. 어느 삶을 살든 고민은 있고, 어느 일을 하든 힘든 점은 있다. 모든 것은 자신에게 달려있다.

따라서 자기가 최소한의 지도하에라도 자신의 도전을 진실하게 평가하고 싶다면, 항해99를 추천한다.

항해99 수료 후의 삶

'돈' 만이 이유가 아닌 회사

나는 현재 IT 스타트업을 다니고 있다. 일이 많아서 야근도 많이 하고 보수도 전 회사에 비해서 현저히 적다. 하지만 '돈'을 위해서가 아닌 내가 진정으로 하고 싶은 일을 재미있게 하면서 다니고 있다.

'일'

일이 하고 싶었고, 그 일을 잘하고 있다. 항해99 덕분에.

Chapter 6. 실전 프로젝트 (220225~)

• 1주일 동안 프로젝트 기획만 했다. 기획 아이디어만 열 개 정도 나왔던 것 같다. 그중에 하루를 꼬박 들여서 디벨롭 했다가 엎어진 것들도 있다. 모든 팀원들이 하나의 아이디어에 만족하는 것도 어려웠지만, 무엇보다 기획하는 과정 자체가 힘들었던 것 같다. 저번 주 금요일부터 이번 주 목요일까지 정말 쉬지 않고 미팅만 했던 것 같다. 그래도 기획이 끝나고 코딩을 시작하니까 힘이 좀 났다. 나는 fabric.js라는 라이브러리를 집중적으로 맡게 되었는데, 처음 접하는 라이브러리고 워낙 React에서의 구현 참고 자료들이 많이 없어서 걱정이다. 하지만 하나씩 해결해나가고 있고, 기대 이상의 퍼포먼스를 만들기 위해 노력할 것이다. 사실 기획이 끝나고 코딩을 시작한 지 얼마 되지 않아서 다들 이제 막 코딩할 틀을 잡고 중요 기능들의 구현을 테스트하고 있는 단계지만, 정말 기대가 된다. 내일부터 또 달려야지

1. Chapter 5. (주특기) 클론 코딩

• 기간: 2022년 2월 18일 (금) @ 09:00 ~ 2022년 2월 24일 (목) @ 19:00
• 서비스: 마켓 컬리
• Github: https://github.com/hyejin4169/react_marketkurly_clone

  1. This week's keyword: ?

• useEffect로 axios (get) 요청을 하기 전에 redux에서 state값을 불러오는 것에 있어서 어려움이 있었다. 처음에는 useEffect는 해당 component의 렌더링이 끝나고 실행되기 때문에, component가 렌더링 되는 시점에 useEffect로 불러오는 data가 필요한 경우에는 사전에 그 data가 필요할 거라고 판단했다. (에러가 계속 떴기 때문에) 하지만 알고보니 useEffect로 data를 불러오기 전에 비어있던 list (배열) 에 reduce를 실행했기 때문이었다. "배열이 비어있는데 initialValue도 제공하지 않으면 TypeError가 발생합니다." (MDN) 즉 초기값을 0으로 설정하지 않아서 component가 렌더링 될 때 에러가 계속 떴던 것이다.
• 다른 아이템에서 get reducer 를 사용할 때, 전 아이템에서 get reducer로 불러왔던 data들이 뷰에 뜨는 에러가 발생했는데 이는 state 값에서 중복처리를 안해줘서 발생한 에러였다.

2. Chapter 6. 실전 프로젝트

• 기간: 2022년 2월 25일 (금) @ 09:00 ~
• 기획 단계에서 차질이 자꾸 생긴다..잘할 수 있겠지..?

• 최초의 웹 페이지
• Hypertext 활용
  • 다른 대상에 대한 링크가 들어있는 텍스트
  • HTML의 부등호 (<>)
    • 마크업 엘리먼트를 시작
    • 시작 + 끝
      • 끝 필요없는 tag 존재!
    • tag는 브라우저가 마크업 엘리먼트를 어떻게 해석할지 결정
      • <b>와 <big> 은 "Cool!" 의 굵기 (bold) 와 큰 글꼴 (big) 으로 표시
    • 부등호의 기능을 빼았기 위해서 -> 엔티티 참조 사용: <
    • tag의 attribute 요소 포함 가능!
      • class를 제외하면 모든 attribute은 똑같이 (문자열) 취급!
      • class는 공백으로 서로 분리된 값의 리스트로 취급!

4. DOM: 문서 객체 모델

• 웹 브라우저는 문서를 문서 객체 모델 (DOM, Document Object Model)에 따라 처리
• DOM: 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결 (MDN)

1. 트리 관련 용어

• 트리의 노드는 순서가 정해져 있다.
  • html 첫 번째 자식: head
  • html 두 번째 as 마지막 자식: body

2. DOM 처리

• 브라우저가 문서 트리로 하는 일: 깊이 우선 순회
• 루트 -> 첫 번째 자식 -> 첫 번째 자식's 첫 번째 자식 -> ... -> 종단 노드 -> 종단 노드's 부모 -> 다음 자식 -> ... -> 부모 -> 방문한 적 없는 자식 -> ...
• 방문 순서 = HTML 작성 순서

1. Chapter 4. (주특기) 미니 프로젝트

• 기간: 2022년 2월 11일 (금) @ 09:00 ~ 2022년 2월 17일 (목) @ 21:00
• 시연 영상: https://www.youtube.com/watch?v=5lFRF9gHwYg
• 정말 열심히 만들었다.

2. Chapter 5. (주특기) 클론 코딩

• 기간 2022년 2월 18일 (금) @ 09:00 ~
• 서비스: 마켓 컬리

3. This week's Keyword

• 첫 협업을 하며 느낀 점 (스스로 아쉬웠던 점/ 보완하고 싶은 점)
  • 처음으로 3명의 백엔드 분들과 같이 일을 했다. 서로가 구현할 수 있는 기능들이 달랐으며, 강의로 배워왔던 내용들도 달랐다. 로그인 기능 구현하는 것부터가 쉽지 않았다. 일단 내가 스프링에 대한 지식이 하나도 없으니, 백 쪽에서 문제가 생겼을 때 할 수 있는 게 없다는 것이 답답했다. 아마 프론트 쪽에서 문제가 생겼을 때는 백엔드 분들이 답답했을 것이다. 왜 풀스택을 하는지 알 것 같기도 했다. 하지만 axios를 사용하여 백 서버와 연결해 CRUD를 구현했다는 것은 신기하고 뿌듯했다. 연결만 잘되면, 그 후로는 서버리스로 작업했을 때랑 그렇게 차이가 없다는 것을 알았다. 이번 프로젝트 때에는 뷰에 조금 더 많이 신경 썼는데, 앞으로는 새로운 기능도, 기능의 완성도도 신경써서 임해야겠다.

• 정의: 여러 문자로 이뤄진 시퀀스
• 문자열을 연산할 때도 길이를 알아야 함
• 길이가 변할 수 있는 가변 문자열 데이터에 작용하는 프로그램이 많기 때문
• 접근 방법
  • 문자열 안에 길이를 저장
    • 첫번째 바이트에 길이를 넣는다 -> 문자열 길이가 255자로 제한되는 단점
    • 더 긴 문자열을 지원하다보면 길이를 저장하기 위한 바이트 수가 문자열 길이를 넘어설 수 있다
    • 문자열은 바이트라서 메모리 정렬이 그때그때 다를 수도
  • C 언어
    • 문자 배열에 들어 있는 문자열 데이터 끝에 바이트를 하나 추가하고, 문자열의 끝을 표시하는 문자로 NUL을 넣는다
    • 저장이 쉽다는 장점
    • 부가 비용이 들지 않음
    • 문자열 길이를 알아내려면 문자열을 스캔하면서 문자 수를 세야 한다는 단점

5. 복합 데이터 타입

• 구조체: 원하는 대로 데이터 타입 (=스위트) 을 만들 수 있는 방법
• 멤버: 구조체 스위트 안에 있는 여러 방
• 월, 일, 시, 분, 초는 1 바이트인 unsigned char로
• 2바이트인 unsigned short를 사용한 C의 일시 표현 구조체:

6. 단일 연결 리스트

• 데이터 양이 정해져 있지 않는 경우에는 배열이 적합 X

• 연결 리스트: 목록에 들엉갈 원소 개수를 모르는 경우, 배열보다 BETTER!!

  • next: 리스트의 다음 원소 주소를 저장하는 포인터

  • 헤드: 리스트 맨 앞

  • 테일: 리스트 마지막

  • 원소 위치: 메모리의 아무 위치! 배열의 원소는 메모리에서 연속적으로 위치)

    

  • 새 원소 헤드 앞에 쉽게 추가 가능!

    

  • "삭제할 리스트 원소의 바로 앞 원소의 next 포인터가 삭제할 원소의 next 포인터가 가리키는 원소를 가리키게 해야 한다"

    

  • 포인터를 한 쌍으로 유지하여 단일 연결 리스트의 원소 삭제 가능

  • 리스트의 각 원소 방문 -> previous 포인터를 통해 current.next 포인터 조정 -> 원소 삭제

    

  • 이중 간접 주소 지정을 통해 보다 효율적인 단인 연결 리스트 원소 삭제 가능

    1. current0 을 head 주소 설정 -> current1 은 head를 가리킨다 -> head는 리스트 원소 A의 노드를 가리킨다 2. 삭제할 원소가 D가 아니기 때문에 다음으로 진행 3. 점선 화살표가 나타내는 것처럼 방금 전 current (=A)의 next값을 나타낸다 -> current2는 A.next 가리킨다 -> 삭제할 원소가 아니라서 다음 진행 4. 삭제할 원소를 찾을 때까지 반복하고 D를 찾았을 때, C.next를 D.next값으로 덮어쓴다 -> D.next인 E로 진행

• 두 가지 단일 연결 리스트 원소 삭제 방법을 C코드로 비교하면

  • 두 포인터 사용 코드
  • 이중 간접 주소 지정 사용 코드

1. Chapter 3-3. 주특기 심화 주차

• 기간: 2022년 2월 4일 (금) @ 09:00 ~ 2022년 2월 10일 (목) @ 21:00
• 도메인: https://magazine-site-ab9c1.web.app/
• Github 주소: https://github.com/nevergettingold/React_magazine_site
• 항해 전 기수 선배님's Comment:
  • redux에서 좋아요기능 구현시에 like와 dislike가 2가지로 분리되어 있는데 같은 파라미터를 받고있는데 좋아요 기능 자체를 1개의 미들웨어 함수로 만들어보면 어떨까요? 그렇다면 컴포넌트에서 like와 dislike 함수를 따로 만들지않고 1개의 함수를 통해서 사용할 수 있겠죠? -> 사실 처음 like/dislike 로직을 짤 때, 하나의 미들웨어 함수로 실행했었다가 구현 도중에 에러가 조금 생기면서 그냥 두 개로 나눠 진행했었다. 에러를 해결하고 나서 그대로 두었었는데, 다시 합칠 수 있었다는 것을 인지하고 있기 때문에 선배님의 피드백을 단 번에 수긍할 수 있었다.
  • 그리고 좋아요일떄와 아닐경우를 component에서 esls if 조건부 렌더링으로 2가지 경우를 작성하셨는데 이 부분도 하나로 통합하고 예시로 color 속성에 삼향연산자같은걸 이용해서 구현해본다면 코드중복을 줄일수있는 방법이 될 수도 있을것 같네요 🙂

  • 이 부분도 처음에 삼항연산자를 사용하여 좋아요의 버튼 색을 조절하는 코드를 작성했었다가, 첫 번째 코멘트의 코드를 짜면서 로직들을 나누는 과정에서 나누고 그대로 두었었다.

  • 코드를 구현하실때 같은 기능을 구현 하더라도 여러가지 방식으로 구현할 수 있습니다. 그래서 한 가지의 방식만 생각해보는게 아니고 여러가지 경우를 생각해보시고 생각해낸 여러가지 방식중에서 본인이 생각했을때 효율적인 방식으로 구현해나가신다면 좋을것 같습니다 😎

  • 당연한 말이지만 가장 중요한 코멘트여서 항상 마음에 새기고 코딩해야겠다.

2. Chapter 4. (주특기) 미니 프로젝트

• 기간: 2022년 2월 11일 (금) @ 09:00 ~
• 프로젝트 "지금 뭐해?" Wireframe, API 설계 및 역할 분담 완료
• 메인페이지, 상세페이지, 마이페이지 View 완료
• Github JSON mock server에 Post get 요청 완료

3. This week's Keyword

1. Axios

• 정의

  • 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

• 특징

  • Promise 기반의 API
  • HTTP 요청과 응답을 JSON 형태로 자동 변경
  • fetch와 다르게 별도 설치 필요
  • data 속성을 사용하며 object를 포함

• 문법 구성

  axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
  foo: 'diary'
  }
  });

  • 파라미터 문법

    axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
    headers: {'X-Requested-With': 'XMLHttpRequest'} // 요청 헤더 설정
    params: { api_key: "1234", langualge: "en" }, // ?파라미터를 전달
    responseType: 'json', // default
    

  maxContentLength: 2000, // http 응답 내용의 max 사이즈 validateStatus: function (status) { return status >= 200 && status < 300; // default }, // HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정 proxy: { host: '127.0.0.1', port: 9000, auth: {

  username: 'mikeymike',
  password: 'rapunz3l'

  } }, // proxy서버의 hostname과 port를 정의 maxRedirects: 5, // node.js에서 사용되는 리다이렉트 최대치를 지정 httpsAgent: new https.Agent({ keepAlive: true }), // node.js에서 https를 요청을 할때 사용자 정의 agent를 정의 }) .then(function (response) { // response Action });

  - 응답(res) 스키마
  ```js
  {
  data: {}, // 서버가 제공한 응답(데이터)
  
  status: 200, // `status`는 서버 응답의 HTTP 상태 코드
  
  statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지
  
  headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공
  
  config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)
  
  request: {}
  // `request`는 응답을 생성한 요청
  // 브라우저: XMLHttpRequest 인스턴스
  // Node.js: ClientRequest 인스턴스(리디렉션)
  }

  • GET: axios.get(url[, config])

    axios.get('/user?ID=12345')
    .then(function (response) {
    // 성공했을 때
    console.log(response);
    })
    .catch(function (error) {
    // 에러가 났을 때
    console.log(error);
    })
    .finally(function () {
    // 항상 실행되는 함수
    });

  • POST: axios.post(url, data[, config])

    axios.post("url", {
      firstName: 'Fred',
      lastName: 'Flintstone'
    })
    .then(function (response) {
      // response  
    }).catch(function (error) {
      // 오류발생시 실행
    })

  • DELETE: axios.delete(url[, config])

    axios.delete('/user?ID=12345')
    .then(function (response) {
    // handle success
    console.log(response);
    })
    .catch(function (error) {
    // handle error
    console.log(error);
    })

  • PUT: axios.put(url, data[, config]), 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적

    axios.put("url", {
      username: "",
      password: ""
    })
    .then(function (response) {
       // response  
    }).catch(function (error) {
      // 오류발생시 실행
    })

    출처: https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9, https://publizm.github.io/posts/javascript/Axios

    2. How I felt

    skip

7. 쿼드러처

• 쿼드러처 인코딩 (Quadrature Encoding)
  • 2비트 그레이 코드 패턴의 반복
  • 대상의 절대적 위치 정보 X & 대상의 위치 변경 여부 + 변경된 방향을 알 필요가 있는 경우에 적용 가능 => 네 가지 상태의 변형 존재 (ex. 자동차 대시보드의 볼륨 놉)
  • 2개의 센서
  • 쿼드러처 인코더를 90도로 엇갈려 놓고 가운데에 고무공을 넣은 것 -> 마우스

0132 순서로 코드가 발생하며, 4비트 숫자를 만들어 낼 수 있다

쿼드러처 회전 감지

8. 병렬 통신

• LED를 켜는 회로를 확장한 것
• 병렬: 선/모든 LED component -> 동시에 모든 컴포넌트 제어 가능

ASCII 코드를 전송하기 위해 포트B에 8개의 데이터 선이 있다
스트로브(신호): 데이터 선에 올바른 데이터가 들어있는 순간을 알려주는 신호

• 병렬 인터페이스의 단점
  • 한 선에서 전달될 수 있는 신호의 속도 한계!
  • I/O핀, 커넥터 핀, 선 多多多 必 => 가격 $$$!

9. 직렬 통신

• 최소한의 선으로 통신하는 방법이 경제적

1. 시프트 레지스터를 통한 직렬 통신

• 시프터 레지스터: 클록에 따라 내용을 1비트씩 시프트
• 송신자: 클록이 시프트 시키고, 밀려나가는 비트를 선을 통해 송신
• 수신자: 클록이 시프트 시키고, 새로 생긴 빈 자리에 선을 통해 비트 수신
• 송신자 & 수신자 동기화 必!
• 클록을 한 번만 놓쳐도 모든 것이 섞인다 -> 세 번째 선 추가 가능 -> 직렬 통신에서의 선을 최소화하는 목표 위반

2. 직렬 프로토콜

   마크-스페이스 신호

• early 1900's 텔레타이프 (한 곳에서 타이핑한 내용을 멀리 있는 프린터에 출력하는 기계) 에서 사용되기 시작
• 마크: 1; 아무 일도 일어나지 않을 때 = 하이 상태
• 스페이스: 로우 상태
• 로우 상태로 내려가는 부분 = 시작 비트
• 문자의 끝 부분/하이 상태 = 정지 비트 (2개)
• 시간 분할 멀티플렉싱
  1. 동기화 오류 발생
  2. 송신자 문자 시간 (character time) 동안 대기
  3. 수신자 재 동기화
  4. 3 & 4 시간을 나눈 슬롯을 만들고 슬롯마다 다른 비트 할당 & 데이터를 한 선에 멀티플렉싱
• 보 레이트: 초당 비트 수
• 반이중 연결
  • 송신자 & 수신자 같은 선 공유
  • 한 순간에 한 쪽만 말할 수 있다 -> 둘이 동시에 말하면 의미 X 메시지 -> 무선 통신 기자들이 메시지를 송신하고 나면 "오버" 라고 말한다
  • 충돌: 둘 이상의 송신자가 송신 시도할 때 데이터의 혼신 발생
• 전이중 통신
  • 선 2개 => 다른 방향으로 동시에 통신 가능
• 범용 비동기 수신기-송신기 (UART)
  • 전이중 통신을 가능케한 하나의 IC로 만들어진 회로
  • 소프트웨어로도 구현 가능 => 비트 뱅잉

(토요일에도 18시간 정도 했는데 update되지 않은 시간이다.)

1. Chapter 3-2. 주특기 숙련 주차

• 기간: 2022년 1월 28일 (금) @ 09:00 ~ 2022년 2월 3일 (목) @ 21:00
• 개인 과제 및 팀 과제 완료
• 개인 과제 도메인: https://nevergettingold.shop/
• 개인 과제 Github: https://github.com/nevergettingold/React_my_dictionary
• 팀 과제: https://www.notion.so/React-5-48f248607aa04d7d8f41d8c27645d1de

2. Chapter 3-3. 주특기 심화 주차

• 기간: 2022년 2월 4일 (금) @ 09:00 ~
• 리액트 심화반 강의 수강 완료, (추가 기능 제외) 게시글 작성 시 레이아웃 선택 추가 필요

  3. This week's Keywords

  1. 라이프사이클

  • 컴포넌트의 수명 주기가 존재하는데, 이는 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
  • Mount: DOM이 생성되고 웹 브라우저 상에서 나타나는 것
    • Mount 될 때 생하는 생명주기들
      • constructor
      • getDerivedStateFromProps
      • render
      • componentDidMount
  • Update: 컴포넌트의 첫 번째 렌더링이 마치고 나면 호출되는 메서드
    • 발생 시점
      • props가 바뀔 때
      • state가 바뀔 때
      • 부모 컴포넌트가 리렌더링 될 때
      • this.forceUpdate로 강제로 렌더링을 트리거할 때
    • getDerivedStateFromProps
    • shouldComponentUpdate
    • render
    • getSnapshotBeforeUpdate
    • componentDidUpdate
      • Unmount: 컴포넌트가 화면에서 사라지는 것
    • componentWillUnmount
  • 함수형 컴포넌트는 react hook 중 하나인 useEffect를 통해 라이프사이클을 관리할 수 있다.

(출처: https://react.vlpt.us/basic/25-lifecycle.html, https://kyun2da.dev/react/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4%EC%9D%98-%EC%9D%B4%ED%95%B4/, https://guiyomi.tistory.com/21)

2. React hooks

• Hooks 는 리액트 v16.8 에 새로 도입된 기능이며, 함수형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라고 부른다.

• 사용 규칙

  • 최상위(at the top level)에서만 Hook 호출!
  • 반복문, 조건문, 중첩된 함수 내에서 Hook 실행 X
  • React 함수 컴포넌트 내에서만 Hook 호출!
  • 일반 JavaScript 함수에서는 Hook을 호출 X
  • 직접 작성한 custom Hook 내는 호출 가능!

• State Hook (useState)

  • 함수 컴포넌트 state를 추가하여, 다시 렌더링 되어도 그대로 유지

  • useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공

  • 이벤트 핸들러나 다른 곳에서 호출 가능; class의 this.setState와 거의 유사하지만, 이전 state과 새로운 state를 합치지 않는다는 차이점이 있다.

    import React, { useState } from 'react';
    
    function Example() {
    // "count"라는 새 상태 변수를 선언합니다
    const [count, setCount] = useState(0);
    
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
    }

useState는 인자로 초기 state 값을 하나 받는데, count는 0부터 시작하기 때문에 위 예시에서는 초기값으로 0 설정. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용

• Effect Hook (useEffect)
  • 함수 컴포넌트 내에서 side effects (컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업, 등)를 수행할 수 있게 해준다.
  • React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것

    import React, { useState, useEffect } from 'react';
    

function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null);

function handleStatusChange(status) { setIsOnline(status.isOnline); }

useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { //해제하는 함수 반환 ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; });

if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }

<p align=center>React는 DOM을 바꾼 뒤에 “effect” 함수를 실행하고, Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있다. 기본적으로 첫 번째 렌더링도 포함하여 매 렌더링 이후에 effects가 실행된다.</p>

<p align=center>Effect를 “해제”할 필요가 있다면, 해제하는 함수를 반환해준다.(이는 optional)</p>

(출처: https://devbirdfeet.tistory.com/52, https://ko.reactjs.org/docs/hooks-overview.html)

# 2. How I felt
`skip`

1. 명세서

• ECMA-262 명세서 (specification): JavaScript와 관련된 정보를 담는 공식 문서
• ECMA-262 명세서는 매년 Renewal

2. 매뉴얼

• MDN JavaScript Reference
  • 'MDN [원하는 정보]' 로 검색엔진에 검색
• Microsoft의 MSDN

3. 호환성 표

• 특정 브라우저나 엔진의 JS의 기능 호환성 check
  • http://caniuse.com
    • 브라우저의 호환성을 표 형태로 확인 가능
  • https://kangax.github.io/compat-table
    • 자바스크립트 기능 + 해당 기능의 브라우저 지원 유무

1.3 코드 에디터

1. 통합 개발 환경

• IDE (Integrated Development Environment)
• 프로젝트 전체를 관장하는 다양한 기능 + 개발 환경을 쾌적하게 해주는 통합 환경 제공
• Visual Studio Code, WebStorm, ...

  2. 경량 에디터

• Lightweight Editor
• 기능 제공 less than IDE, but fast and simple!
• 파일을 열고 바로 수정할 때 사용 -> 파일 하나만 수정하고 싶을 때 IDE 보다 better choice
• 플러그인 사용으로 IDE와의 엄격한 구분이 사라져가는 중
  • Atom
  • Visual Studio Code
  • Sublime Text
  • ..

1.4 개발자 콘솔

• 브라우저에 내장된 개발자 도구를 사용하여 코드 에러 확인/명렁어 실행/변수 분석 가능
• 개발자 도구 내 Console에서 명령어 실행 가능 -> Multi-line input은 Shift + Enter로 가능
• 디버깅: 에러를 확인하고 고치는 방법

1. 정의

• '웹페이지에 생동감을 불어넣는' 프로그래밍 언어
• 프로그램 written by JS: 'script' -> 웹페이지 로딩 때 자동 실행
• Java와는 아무런 상관 없는 언어!
  • JavaScript가 처음 만들어졌을 때 이름이 LiveScript였는데 당시 Java의 인기가 아주 높은 상황이어서, Java의 '동생' 격인 언어로 홍보하다가 이름이 JavaScript로 바뀌었다.
• JavaScript engine이라는 프로그램이 있는 모든 디바이스에서 동작 (브라우저엔 '자바스크립트 가상 머신' 엔진 내장)
  • Chrome & Opera: V8
  • Firefox: SpiderMonkey
  • IE: Trident or Chakra
  • Edge: ChakraCore
  • Safari: SquirrelFish
• JS engine Procedure
  • 파싱 (스크립트 읽기)
  • 컴파일 (기계어로 전환)
  • 코드 실행 (기계어 실행)

2. 브라우저에서 할 수 있는 일

• 모던 자바스크립트 -> '안전한' 프로그래밍 언어 (메모리, CPU 조작 허용 X)
• 웹페이지 조작, 클라이언트와 서버의 상호작용 관한 모든 일 가능
  • 새로운 HTML 추가 or HTML, CSS 수정
  • 사용자 행동 (ex.마우스 클릭, 포인터 움직임, 키보드 키 눌림, etc.) 에 반응
  • 원격 서버에 요청, 파일 다운로드, 업로드 (w/AJAX or COMET)
  • 쿠키 가져오거나 설정, 사용자에게 질문/메시지 보여주기
  • 클라이언트 측에 데이터 저장 (로컬 스토리지)

3. 브라우저에서 할 수 없는 일

• 디스크에 저장된 임의의 파일 읽기/쓰기/복사/실행 제약
• 모던 브라우저도 접근은 제한
• 타 사이트 or 도메인에서 데이터 받기 불가

4. 자바스크립트만의 강점

• HTML/CSS와 완전히 통합 가능
• 간단한 일 -> 간단하게 처리
• 모든 주요 브라우저에 지원, 기본 언어로 사용

5. 자바스크립트 '너머의' 언어들

• CoffeeScript: JS를 위한 'syntactic sugar', 짧은 문법 + 이해하기 쉬운 코드!
• TypeScript: 자료형의 명시화 (strict data typing) 에 집중해서 만든 언어 made by Microsoft
• Flow: 자료형 강제 (TypeScript와는 다른 방식) made by Facebook
• Dart: 브라우저가 아닌 환경 (ex. 모바일 앱) 에서 동작하는 고유 엔진을 가진 독자적 언어 made by Google

6. 요약

• JavaScript는 브라우저 외에도 다양한 환경에서 쓰이고 있다.
• JavaScript는 HTML/CSS 와의 완전한 통합 가능!
• JavaScript는 transpile 할 수 있는 언어가 많다! (각 언어마다 고유 기능 제공)

• 프로그래머들이 피하고 싶은 것: 똑같은 코드를 두 번 이상 작성하는 것 => 이를 해결해줄 수 있는 함수 (or 프로시저 or 서브루틴; 프로그래밍 안에서 동일한 의미) 는 코드를 재사용하는 주요 수단!!
• JavaScript 함수/함수 호출하기

  /함수
  function cube (x) { //x라는 parameter 값을 받는 cube 라는 함수 
  return (x*x*x) //x 값의 세제곱을 반환
  }
  

/호출하기 y = cube (3)

```

• 함수를 호출하여 함수를 실행하고 다시 원래 자리로 돌아올 방법이 필요 => 돌아오기 위해서 함수로 들어간 위치 = '프로그램 카운터의 값' 기억 필요

  

• 함수 호출 흐름

  

1. 100 번지: 프로그램 시작
2. 101 번지: 함수에서 돌아올 주소 (105번지) 설정
3. 102 번지: 101번지에서 설정한 주소 값을 200번지에 저장
4. 103 번지: 함수 파라미터 값 전달
5. 104 번지: function cube 호출 (분기)
6. 200 번지: 함수 산출값을 저장되어 있던 주소로 반환 (간접 분기)
7. 105 번지: 함수 산출값 받기
8. 300~ 번지: 함수 명렁어

3. 스택

• 재귀: 자기 자신을 호출하는 함수
  • 핸드폰의 JPEG 압축을 통한 사진 크기 감소
  • 재귀적 분할로 압축하기 (그림 5-3을 4등분으로 나누고 검사하는 과정을 1픽셀 단위 조각까지 반복)

    

우리말이나 영어 등의 언어로 간결하게 적은 코드인 '의사 코드'로 작성된 분할 함수 subdivide는
정사각형의 왼쪽 아래 꼭지점의 x, y 좌표와 size를 파라미터로 취한다.

그림 5-3를 subdivide 함수로 그리는 방법
회색: 검사 영역이 분할이 필요한 경우, 흰색/검은색: 모든 색이 흰색/검은색으로 같을 경우

• 그림 5-4

  • 트리라고 부르며, 수학에서는 유향 비순환 그래프 (Directed Acyclic Graph) 라고 불리는 구조
  • 각 노드에서 4개의 가지가 뻗어나감 => 쿼드트리: 공간 데이터 구조에 속함
  • 화살표 방향으로 읽기 때문에, 순환이 없다
  • 루트: 맨 윗부분
  • 노드: 화살표가 뻗어나가는 (사각형) 부분
  • 잎 노드 (leaf node): 화살표가 뻗어나가지 않는 부분 => 나뭇가지의 끝에 달린 나뭇잎처럼 트리의 맨 마지막에 달려있다
  • 흰색/검은색 사각형 => 40개 <<< 64 Pixel => 저장 Data 少 => 압축!

• 재귀적 함수의 한계

  • 반환값 저장 위치 1곳 -> 이미 들어 있던 반환값을 덮어써서 되돌아갈 위치를 잃어버리기 때문에 자기 자신을 호출 불가
  • 해결책
    • 스택
      • 함수 호출 시: 반환 주소를 접시에 넣어서 접시 더미 맨 위에 Push! (=쌓아올린다)
      • 함수 호출에서 반환 시: 접시 더미 맨 위의 접시를 보고 반환 주소를 결정하고 접시 제거! (Pop)
      • 여러 반환 주소 저장을 가능케 한다
      • 함수에서 호출 지점으로 다시 돌아갈 때, 어떤 주소를 사용할지 결정 가능케 한다
      • aka LIFO 구조 (late in, first out)
      • Forth나 PostScript와 옛날 HP 계산기 몇 가지는 스택 기반 언어
      • 한국어/일본어도 스택 기반 언어
      • 스택 오버플로: Push할 공간 X
      • 스택 언더플로: 빈 스택에서 Pop
      • 한계 레지스터: 소프트웨어가 항상 스택 오버플로를 검사하지 않아도 되도록 돕는다
    • 스택 프레임: 함수가 호출될 때마다 스택에 저장되는 데이터 모음

각 함수 호출이 반환 주소와 지역 변수를 포함하는 새로운 스택 프레임을법 만들고 있다.

1. Chapter 3-1. 주특기 입문 주차

• 기간: 2022년 1월 21일 (금) @ 09:00 ~ 2022년 1월 27일 (목) 21:00
• 개인 과제 및 팀 과제 완료
• 개인 과제 도메인: http://ilikewinter.shop/
• 개인 과제 Github: https://github.com/nevergettingold/React-Personal-Assignment-1

  

• 팀 과제: https://www.notion.so/4c3f1acb761b4986966fb882d6f29652

2. Chapter 3-2. 주특기 숙련 주차

• 기간: 2022년 1월 28일 (금) @ 09:00 ~

• 개인 과제 완료 (추가 기능인 무한 스크롤 진행 예정)

• This week's Keywords

  • DOM (Document Object Model)

    • MDN
      • DOM (문서 객체 모델) 을 HTML, XML 문서의 프로그래밍 interface 이다.
      • 페이지 콘텐츠는 DOM에 저장되고 JS를 통해 접근하거나 조작할 수 있다 => API (web or XML page) = DOM + JS (scripting language)
    • 즉 DOM은 HTML 파일에 쓰여진 것이나 페이지의 'View Source' 를 통해 보여지는 것이 아니라, 개발자 도구 (Inspect) 를 통해 볼 수 있는 것들을 뜻한다.
    • DOM vs HTML
      • 자동 교정: 잘못된 HTML 코드를 DOM에서 바로잡아 준다.
    • DOM vs JS
      • JS는 브라우저가 읽고 어떤 작업을 할 수 있는 언어이며,
      • DOM은 그 작업이 이루어지는 장소이다.
      • 따라서, JS로 하는 것 = DOM의 API

  • 서버리스 (serverless)

    • 개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델
    • 서버가 존재하긴 하지만, 애플리케이션 개발에서와 달리 추상화되어 있고, 클라우드 제공업체가 서버 인프라에 대한 프로비저닝, 유지 관리, 스케일링 등의 일상적인 작업을 처리
    • 개발자는 배포를 위해 코드를 컨테이너에 패키징하기만 하면 됨
    • BaaS (Backend-as-a-Service)
      • 개발자에게 제 3사 서비스와 애플리케이션 엑세스 제공
      • 일반적으로 API 를 통해 호출
    • FaaS (Function-as-a-Service)
      • 개발자가 서버리스를 언급하는 경우 통상적으로 지칭되는 모델
      • BaaS와 달리 사전 작성된 서비스 라이브러리에 의존하지 않고 사용자 정의 애플리케이션을 생성하는 개발자에게 더 많은 제어 권한을 제공
      • 코드는 클라우드 제공업체가 관리하는 컨테이너에 배포
      • AWS의 AWS Lambda, Google Cloud의 여러 오퍼링, ...

(출처: https://www.redhat.com/ko/topics/cloud-native-apps/what-is-serverless)

2. How I felt

1. Chapter 3-1. 주특기 입문 주차

• 처음에는 정말 어렵다고만 느꼈었다. 저번 주 금요일과 토요일에 개인 과제를 하기 위한 강의를 모두 듣고 리액트를 조금 만져보고 월요일에 시작했는데, 오전에는 정말 뭐가 뭔지 몰랐다. 심지어 강의 내용을 시작으로 시작한 게 아니라, 과제 추가 기능 중 하나였던 '오늘 날짜부터 시작하기' 로 시작을 해서 나는 엄청난 구글링부터 시작을 했다. 그래서 결과적으로 정말 긴~ 코드를 작성했지만 구현은 잘 됐다. 월요일~일요일까지의 별점을 줄 수 있는 7개의 component와 메인페이지에서 한 주의 날짜, 별점, 삼각형을 보여주는 1개의 component, 잘못된 경로로 들어왔을 때 보여주는 1개의 component, 총 9개의 component를 만들었다. 월요일 밤에 기능 구현을 다 끝내고 화요일에 css를 만졌던 것으로 기억이 난다. 팀원들과 코드 리뷰를 하며 내 코드가 확실히 길다는 것을 느꼈지만, 그것은 내가 강의 내용으로 시작을 안해서이기 때문에 납득이 가능했다. 하지만 강의 내용 중 React Hook 의 사용은 중요하기 때문에 내 코드를 다시 수정해볼 생각이지만 아직 실천하지는 못했다. 실천하고 나서 정리해야지. (제발)

2. Chapter 3-2. 주특기 숙련 주차

• 금요일에 과제를 받고 새벽에 삘이 와서 3시 반 넘어서까지 하고 다 끝냈다. 개인 과제에서 요구하는 기능들 말고 다른 기능들까지 구현시켰고 CSS도 좀 만져놨고 무한 스크롤 기능만 내일 추가해볼 생각인데 쉽지 않을 것 같다. 이번에는 Redux 라는 상태 관리 라이브러리를 사용했다. 아니 사용해야만 했다. 강의 내용을 들으며 이해하는데 생각보다 이해가 잘되서 다행히 첫 주 과제를 시작했던 그 느낌으로 시작하지는 않았다. 이제는 첫 주보다는 속도도 붙어서 조금 더 빨리 구현시키는 것이 가능한 것 같다. 이 과제는 다음 주에 제대로 정리해볼 생각이다. (제발)

1. 전기는 수도 배관과 유사하다

• 전기 from 에너지 근원 like 배터리 ~ 물 from 물탱크
• 2-10.
  • 한 밸브 출력 ~ 다른 밸브의 입력 => 직렬 연결
• 2-11.
  • 두 밸브 입력을 한 관에 연결 ~ 두 밸브 출력을 다른 한 관에 연결 => 병렬 연결
• 전파 지연
  • 전기가 컴퓨터 칩 내부에서 전파되는 시간
• 전기의 이동은 사실 전자의 흐름 X => 전자기 에너지 반응이 전파되는 현상을 뜻하는 '전기'라는 단어가 정착
  • 스위치로 전기의 흐름을 제어
• 전기 선
  • 도체: 내부 금속 (유동성이 있는 전자가 가득)
  • 부도체: 금속 외부
• Ohm's Law (I = V/R)
  • 전압: 물에서의 수압과 같이 작용 [Voltage = V]
  • 전류: 전기의 흐름 (I) [Ampere = A]
  • 저항: 도체를 통한 전기의 흐름에 방해 요소 (R) [Ohm]

2. 전기 스위치

• 스위치를 누르면 붙거나 떨어지는 두 조각의 금속으로 구성

• 스키매틱: 전기 시스템인 회로를 문서화 해놓은 것

• 단극단투 스위치 스키매틱 기호

  - 극 (pole) = 한꺼번에 연결되어 이동하는 스위치의 수 - 단투 (single throw) = 접점이 하나 -> 하나는 끄고 반대쪽은 키고 X

• 단극쌍투 스위치 스키매틱 기호

  

• 쌍극쌍투 스위치 스키매틱 기호

  - 점선은 두 극이 서로 연계됐다는 표시 => 두 스위치는 함께 움직인다

• 전기 회로

  • 에너지 근원 -> 회로 구성 요소 (전구, 저항 요소, etc.)

1. Chapter 2. 알고리즘 기초 (걷기반)

• 기간: 2022년 1월 14일 (금) @ 09:00 ~ 2022년 1월 20일 (목) @ 19:00
• 프로그래머스 코딩 테스트 연습 (JavaScript 시리즈)
  13. 서울에서 김서방 찾기
  • .indexOf(searchValue[, fromIndex])
  14. 내적
  • 중복
  15. 나누어 떨어지는 숫자 배열
  • .sort([compareFunction])
  • .filter(callback(element[, index[, array]])[, thisArg])
  16. 문자열 내 p와 y의 개수
  • .match(regexp)
  • .split([separator[, limit]])
  • .toUppercase()
  17. 문자열 다루기 기본
  • isNaN()
  • .forEach(callback(currentvalue[, index[, array]])[, thisArg])
  • RegExp
    • ^: 입력의 시작 부분에 대응, ('뒤에 있는 것 제외하고 찾아라' 라는 뜻도 있음)
    • $: 입력의 끝 부분과 대응
    • |
    • regexp.test()
  18. 2016년
  • new Date()
  • getDay()
  19. 정수 내림차순으로 배치하기
  • .join()
  • .reverse()
  20. 이상한 문자 만들기
  • regexp
    • \w
  21. 콜라츠 추측
  • 중복
  22. 최소 직사각형
  • Math.max()
  23. 로또의 최고 순위와 최저 순위
  • switch
  24. 문자열 내림차순으로 배치하기
  • 중복
• 알고리즘 모의고사 테스트 (220118)
• 알고리즘 테스트 합격!! (220120)

2. Chapter 3. 주특기 입문 주차

• 기간: 2022년 1월 21일 (금) @ 09:00 ~

• SpartaCoding Club 리액트 기초반 1-1 ~ 3-6강 완료

• React 환경설정 완료 (nvm, node, yarn 설치 완료)

• 강사님과 react router dom 버전이 달라, 다운그레이드 하지 않고 구글링하여 해결. (React Router Dom V6 자료)

  • https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC
  • https://velog.io/@soryeongk/ReactRouterDomV6
  • https://gallery-k.tistory.com/256

• JavaScript의 ES (EcmaScript) 란?

  • JavaScript를 표준화하기 위해 Ecma International이 ECMA-262 기술 규격에 따라 만든 스크립트 프로그래밍 언어
    • Ecma International: 1961년 유럽에서 컴퓨터 시스템을 표준화하기 위해 세워졌고,현재는 정보와 통신 시스템을 위한 국제적 표준화 기구
  • 액션스크립트와 J스크립트 등 다른 구현체도 포함
  • 웹의 클라이언트 사이드 스크립트로 많이 사용 + Node.js를 사용한 서버 응용 프로그램 및 서비스에도 쓰이는 추세

• ES5 vs ES6

1. Template Literal
   • 백틱으로 문자열을 감싸 표현하는 기능
   • ${}를 사용

     <ES5>
     var name = "현진";
     var age = 25;
     console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");
     

      innerInfo = () => {
          console.log(this)
          return this.name + ":" + this.age
      }
      return innerInfo()
 }

5. 모듈
   - ES5
     - `require (./____.js)`를 통해 모듈화 
   - ES6
     - import/export를 통해 모듈 관리 가능
```js
<ES5>
//index.html
<script>
  src = "slider.js";
</script>
<script>
  src = "script.js";
</script>

//script.js
var slider = require(./slider.js)
// 혹은 require(./slider)

<ES6>
import 'import to loadname' from '파일 경로'

export default 'module'

(출처: https://doozi0316.tistory.com/entry/JavaScript-ECMAScript%EB%9E%80-ES5%EC%99%80-ES6%EC%9D%98-%EC%B0%A8%EC%9D%B4var-const-let-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-class)
# 2. How I felt
## 1. Chapter 2. 알고리즘 기초 (걷기반)
 - 난생 처음 공부해보는 자바스크립트의 문법과 알고리즘이었다. 팀원분들은 어느 정도 공부를 하셨던 분들이라 나보다 푸는 속도도 빠르셨고 자바스크립트에 대한 이해도도 깊으셨다. 처음에는 내가 맡은 두 문제를 푸는 것에도 급급했다. 하지만 날이 갈 수록 희한하게 알고리즘 문제 푸는 것이 재밌어졌고, 내 문제 + 팀원분들 문제를 다 풀고 정리하고 다른 해설들을 공부하며 조금씩 실력을 쌓아나간 것 같다. 새벽에는 다음 날 나의 두 문제를 풀어보기도 했고, 결국 풀리지 않으면 정말 찝찝한 마음에 잠에 들기도 했다. 예전에 수학을 좋아했었던 내가 많이 떠올랐다. 분명 답은 있는데, 내가 못해서 풀지 못하는 것을 받아들이지 못해서 풀 때까지 노력했던 나의 모습이. 한 주 동안 했던 알고리즘 및 자바스크립트 공부는 당연히 충분하지 못했다. 앞으로 꾸준히 계속 공부하며 발전해나가야겠다. 

## 2. Chapter 3. 주특기 입문 주차
- 드디어 진짜가 시작되었다. 내가 선택한 주특기 언어인, React를 처음으로 배워보는 시간이 시작되었다. 제대로 써보고 싶었던 VSC도 쓰게 되었고, 자바스크립트 문법을 제대로 활용해보며 React가 얼마나 어려운지 실감하고 있다..ㅋㅋ 뭔가 머리로는 '어 쉬운데?' 이러지만, 강의를 보지 않고 키보드를 치는 손가락은 없다. 다음 주까지 React로 개인 과제 한 개를 완성해야 한다. (+팀 과제) 개인 과제를 위한 강의는 다 봤으니 이제 부족한 것은 구글링해가며 과제를 제대로 시작하려고 한다. 그래도 나름 재밌는 언어라고 느껴지고 있으니, 나만 잘한다면 나중에 정말 재밌게 일할 수 있을 거라고 생각된다. 

문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.

제한 조건

• str은 길이 1 이상인 문자열입니다.

입출력 예

기본 solution 코드

function solution(s) {
    var answer = '';
    return answer;
}

문제 풀이

function solution(s) {
    let answer = '';
    let lowercase = (s.replace(/[A-Z]/g, '').split('')).sort().reverse().join('');
    let uppercase = (s.replace(/[a-z]/g, '').split('')).sort().reverse().join('');
    return answer = lowercase + uppercase;
}

풀이 설명

대/소문자들을 ''로 replace하고 배열로 바꾸고 sort로 오름차순 후 다시 reverse하고 join으로 배열의 모든 문자를 합쳤다. 알파벳은 내림차순 할 때 sort((a,b) => b-a) 가 적용되지 않았다. 여기를 참고하면 실제로 obj.sort().reverse()가 효율성 측면에서 같은 기능을 구현하는 하위 두가지 메소드 보다 좋다.

obj.sort((a, b) => (a > b ? -1 : 1)

obj.sort((a, b) => b.localeCompare(a) )

사용 함수

중복

다른 풀이

function solution(s) {
  return s.split("").sort().reverse().join("");
}

다른 풀이 설명

1. 사용된 함수 중복

2. 풀이

• 예시는 정렬이 이미 되어있어서 다른 예시로. s = "DajBziAlC"
• s.split('') -> ['D', 'a', 'j', 'B', 'z', 'i', 'A', 'l', 'C']
• s.split('').sort() -> ['A', 'B', 'C', 'D', 'a', 'i', 'j', 'l', 'z']
• s.split('').sort().reverse() -> ['z', 'l', 'j', 'i', 'a', 'D', 'C', 'B', 'A']
• s.split('').sort().reverse().join('') -> zljiaDCBA
• 알파벳은 sort()를 할 경우, 자동으로 대문자가 먼저 A부터 Z로 정렬되고, 소문자가 a->z 로 정렬된다는 것을 잘 이용했다.

3. 재밌네

로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다.

로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다. 알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다. 당첨 번호 6개가 31, 10, 45, 1, 6, 19라면, 당첨 가능한 최고 순위와 최저 순위의 한 예는 아래와 같습니다.

• 순서와 상관없이, 구매한 로또에 당첨 번호와 일치하는 번호가 있으면 맞힌 걸로 인정됩니다.
• 알아볼 수 없는 두 개의 번호를 각각 10, 6이라고 가정하면 3등에 당첨될 수 있습니다.
  • 3등을 만드는 다른 방법들도 존재합니다. 하지만, 2등 이상으로 만드는 것은 불가능합니다.
• 알아볼 수 없는 두 개의 번호를 각각 11, 7이라고 가정하면 5등에 당첨될 수 있습니다.
  • 5등을 만드는 다른 방법들도 존재합니다. 하지만, 6등(낙첨)으로 만드는 것은 불가능합니다.

민우가 구매한 로또 번호를 담은 배열 lottos, 당첨 번호를 담은 배열 win_nums가 매개변수로 주어집니다. 이때, 당첨 가능한 최고 순위와 최저 순위를 차례대로 배열에 담아서 return 하도록 solution 함수를 완성해주세요.

제한 사항

• lottos는 길이 6인 정수 배열입니다.
• lottos의 모든 원소는 0 이상 45 이하인 정수입니다.
  • 0은 알아볼 수 없는 숫자를 의미합니다.
  • 0을 제외한 다른 숫자들은 lottos에 2개 이상 담겨있지 않습니다.
  • lottos의 원소들은 정렬되어 있지 않을 수도 있습니다.
• win_nums은 길이 6인 정수 배열입니다.
• win_nums의 모든 원소는 1 이상 45 이하인 정수입니다.
  • win_nums에는 같은 숫자가 2개 이상 담겨있지 않습니다.
  • win_nums의 원소들은 정렬되어 있지 않을 수도 있습니다.

입출력 예

입출력 예 설명

입출력 예 #1

• 문제 예시와 같습니다.

입출력 예 #2

• 알아볼 수 없는 번호들이 아래와 같았다면, 1등과 6등에 당첨될 수 있습니다.

입출력 예 #3

• 민우가 구매한 로또의 번호와 당첨 번호가 모두 일치하므로, 최고 순위와 최저 순위는 모두 1등입니다.

기본 solution 코드

function solution(lottos, win_nums) {
    var answer = [];
    return answer;
}

문제 풀이

function solution(lottos, win_nums) {
    let match = [];
    let answer = [];
    for(let i=0 ; i<lottos.length ; ++i) {
        for(let j=0 ; j<win_nums.length ; ++j) {
      lottos[i] === win_nums[j] ? match.push(lottos[i]) : null;
      }
    }
        switch (match.length + lottos.filter(el => el === 0).length) {
        case 0: answer.push(6) 
            break;
        case 1: answer.push(6) 
            break;
        case 2: answer.push(5) 
            break;
        case 3: answer.push(4) 
            break;
        case 4: answer.push(3) 
            break;
        case 5: answer.push(2) 
            break;
        case 6: answer.push(1) 
            break;
    }
    switch (match.length) {
        case 0: answer.push(6) 
            break;
        case 1: answer.push(6) 
            break;
        case 2: answer.push(5) 
            break;
        case 3: answer.push(4) 
            break;
        case 4: answer.push(3) 
            break;
        case 5: answer.push(2) 
            break;
        case 6: answer.push(1) 
            break;
    }
    return answer;
}

풀이 설명

알고리즘 풀면서 가장 긴 코드를 작성했다. 일단 매치되는 번호를 따로 array로 빼두고, 그 array의 length를 가지고 switch를 통해 최저 순위 번호를 구했다. 그리고 그 array의 length와 lottos array 안에 있는 0의 개수를 더하고 switch를 통해 최고 순위 번호를 구했다.

사용 함수

• switch: 복수의 if 문

  switch (expression) { 
  case 'value1': // (if x === 'value1')
       ...
    break;
  
  case 'value2':  // (if x === 'value1')
        ...
    break;
    ...
  }   

• .filter(): 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

  • arr.filter(callback(element[, index[, array]])[, thisArg])

(출처: https://developer.mozilla.org/ko/)

다른 풀이

function solution(lottos, win_nums) {
    const rank = [6, 6, 5, 4, 3, 2, 1];

    let minCount = lottos.filter(v => win_nums.includes(v)).length;
    let zeroCount = lottos.filter(v => !v).length;

    const maxCount = minCount + zeroCount;

    return [rank[maxCount], rank[minCount]];
}

다른 풀이 설명

1. 사용 함수

• 중복

2. 풀이

• rank 를 array로 만들어버린 idea가 좋다. .includes 쓴 것도 깔끔하다.
• !0 = true 를 이용해서 0을 카운트한 것도 좋은 것 같다.

3. 참고로 나랑 똑같은 코드는 프로그래머스에서 '제발...ㅋㅋㅋ' 댓글을 받았다.. ㅋㅋㅋㅋㅋ

명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다.

제한 사항

• sizes의 길이는 1 이상 10,000 이하입니다.
  • sizes의 원소는 [w, h] 형식입니다.
  • w는 명함의 가로 길이를 나타냅니다.
  • h는 명함의 세로 길이를 나타냅니다.
  • w와 h는 1 이상 1,000 이하인 자연수입니다.

입출력 예

입출력 예 설명

입출력 예 #1

• 문제 예시와 같습니다.

입출력 예 #2

• 명함들을 적절히 회전시켜 겹쳤을 때, 3번째 명함(가로: 8, 세로: 15)이 다른 모든 명함보다 크기가 큽니다. 따라서 지갑의 크기는 3번째 명함의 크기와 같으며, 120(=8 x 15)을 return 합니다.

입출력 예 #3

• 명함들을 적절히 회전시켜 겹쳤을 때, 모든 명함을 포함하는 가장 작은 지갑의 크기는 133(=19 x 7)입니다.

기본 solution 코드

function solution(num) {
    var answer = 0;
    return answer;
}

문제 풀이

function solution(sizes) {
    var width = [], height = [];
    sizes.forEach(el => el.sort((a,b)=>b-a));
    for (let i = 0; i < sizes.length; i++) {
        width.push(sizes[i][0]);
        height.push(sizes[i][1]);
    }
    return Math.max(...width) * Math.max(...height);
}

풀이 설명

고민을 많이 했던 문제. 처음에 가장 큰 값은 빼낸 다음에 어찌어찌해서 풀려고 했지만 역시 되지 않았다. 가로 길이에서 가장 큰, 세로 길이에서 가장 큰 값 두 개를 사용하는 게 아니기 때문제 조금 복잡했다. 결국 명함을 뒤집어서 가로나 세로 중 큰 값으로 나열을 하고, array들의 같은 index값을 비교해서 가장 큰 두 값을 반환했다.

사용 함수

• Math.max(): 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환
  • arr.reduce(function(a, b) { return Math.max(a, b); });
    혹은 ... / spread operator를 사용해서 array의 최대값을 가져올 수 있다.

(출처: https://developer.mozilla.org/ko/)

다른 풀이

function solution(sizes) {
    let w = 0;
    let h = 0;
    sizes.forEach(s => {
        const [a, b] = s.sort((a,b) => a-b);
        if (a > h) h = a;
        if (b > w) w = b;
    });
    return w * h;
}

다른 풀이 설명

1. 사용 함수 중복

2. 풀이

   • 비슷한 맥락

1. 양의 정수 표현

• 인간
  • 10진수 (Decimal Number)
  • 손가락과 발가락이 열 개라서 사용
  • 10가지의 기호 (Digit)을 상자에 담을 수 있다
  • 밑이 10인 시스템 (base-10)
  • 5,028 in 10진수 -> 네 자리
• 비트
  • 2진법 -> 0, 1만 상자에 담을 수 있다
  • 5,028 in 2진수 -> 13 비트
  • LSB: least significant bit, 가장 작은 유효 비트
  • MSB: most signficant bit, 가장 큰 유효 비트

2. 2진수 덧셈

• 10진수의 덧셈과 같이 가장 오른쪽에서 왼쪽으로 각 자리의 숫자를 더하고, 결과가 2보다 크면 1을 다음 자리 (왼쪽)로 올린다.

  

  - A + B = A XOR B - A + B의 올림 = A AND B

  

• Overflow: 비트 덧셈의 결과가 비트의 개수로 표현 가능 범위 초과 (=MSB에서 올림 발생)
  • Condition code register (조건 코드 레지스터)에서 Overflow bit 확인 가능
• Underflow: MSB 위쪽에서 1을 빌려오는 경우

3. 음수 표현

1. 부호와 크기

• MSB를 부호에 사용한다.
• 2진수 부호 표현
  • 0: 양수
  • 1: 음수
  • 부호와 크기 표현
    • 한 비트를 부호에 사용 + 나머지 비트로 크기 표현
    • 0을 표현하는 방법 두 가지 (비용 낭비) & XOR과 AND릍 통한 덧셈 불가 => 널리 사용 X
  • 2진수 부호와 크기 표현법 (4 비트)

2. 1의 보수 (One's compliment)

• 양수의 모든 비트를 뒤집어서 표현
• NOT 연산을 통해 보수를 얻음
• 부호와 크기 표현법처럼 현대 컴퓨터에서 사용 X (추가 하드웨어 필요 -> 비용 낭비)
• 2진수 1의 보수 표현법 (4 비트)

3. 2의 보수 (Two's compliment)

• 부호가 있는 정수를 표현할 때 가장 보편적
• 비트의 NOT + 1 = 음수값
  • 비트: 0010 (+2) -> 1101 (NOT 비트) + 1 = 1111 (-2)
• 2진수 1의 보수 표현법 (4 비트)

  

• 같은 숫자로 이뤄진 수라도 문맥에 따라 값이 달라진다!
  • Quiz. 2진수 1111
    • 2의 보수:
    • 1의 보수:
    • 부호와 크기 표기:

문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요.

제한 사항

문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다. 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다.

입출력 예

입출력 예 설명

입출력 예 #1

• 문제의 설명과 같습니다.

입출력 예 #2

• 16 -> 8 -> 4 -> 2 -> 1 이되어 총 4번만에 1이 됩니다.

입출력 예 #3

• 626331은 500번을 시도해도 1이 되지 못하므로 -1을 리턴해야합니다.

기본 solution 코드

function solution(num) {
    var answer = 0;
    return answer;
}

문제 풀이

function solution(num) {
    var answer = 0;
    while (num !== 1) { //num이 1이 아니라면 계속 loop를 돌린다
        if (answer >= 500) { //500번이 넘어가면 
            return -1;
        }
        num %2 ? num = num * 3 + 1 : num = num / 2;
        answer++;
    }
    return answer;
}

풀이 설명

.while을 처음 써봤다. 조금 헷갈렸다. 조건 삼항 연산자 우측에 true와 false에 해당하는 action을 적을 때 앞단에 'num='을 안 써줘서 고생했었다.

사용 함수

중복

다른 풀이

내 풀이랑 비슷해서 skip