📌 비동기를 처음 들어가는 날이다.. 비동기가 어려운 부분이라고 알고 있는 만큼 더욱 열심히 해야겠다!

📗 오늘 학습한 내용

JavaScript

• 동기
  • 일이 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다.
• 비동기
  • 데이터를 가져오는 데 까지 대기하는 시간을 없애기 위해서 사용한다.
  • setTimeout 
• callback
  • 함수에 매개변수로 전달된 함수이다.
• promise
  • 콜백과 하는 일은 같지만 콜백지옥을 해결하기 위해 코드를 조금 더 간결하게 작성하기 위해 나옴.
  • resolve: 결과 값 출력
  • reject: 에러 결과 출력
• promise 메서드 
  • then: 정상적으로 실행될 경우 값 출력
  • catch: 에러가 발생할 경우 출력
  • finally: 성공 유무에 상관없이 마지막 값 출력
• promise 상태
  • 대기(Pending): 실행하지도 거부하지도 않으 초기의 상태
  • 이행(Fulfilled): 연산이 성공적으로 완료됨
  • 거부(Rejected): 연산이 실패할 경우
• async/await
  
  • promise를 간결하고 간편하게 동기적으로 실행되는 것처럼 보이도록 해주는 것이다.

📘 추가로 공부할 내용

JavaScript

• setTimeout
• node.js
  • fs(file system) 모듈
• fetch API

📝 오늘 느낀점 & 마음 가짐

• 비동기는 어렵지만 이해하기 시작하면 효율적으로 코드를 작성 할 수 있다는 것을 알았다.

📌 프로토타입의 구조에 대해서 조금 더 자세히 알게 되었고, 

📗 오늘 학습한 내용

JavaScript

• 프로토타입 체인
  
  • 부모 역할을 하는 프로토타입 객체에 접근 할 수 있다.
  • 객체의 값이 존재 하지 않는다면 부모의 프로토타입 객체를 차례로 검색한다.
  • 객체에 없는 값이나 메서드를 접근할 때 프로토타입 체인이 발생한다.
  • 모든 프로토타입 객체의 종점은 Object.prototype이다.
  • . prototype: 해당 객체의 프로토타입 객체에 접근할 수 있다.
  • __proto__: 해당 객체의 부모 객체를 순차적으로 검색 할 수 있다.

전 날 프로토타입에 대해선 학습했지만 체인이라는 말이 들어가니 이어준다는 뜻 같았다. 조금 학습한 내용이 맞다면 모든 객체의 최상위 프로토타입 객체는 Object이고, __proto__를 통해 해당 객체의 부모 객체를 순차적으로 검색할 수 있다는 것을 알게 되어 신기한 부분이었던 것 같다.

📘 추가로 공부할 내용

JavaScript

• 비동기
• fetch API
• Node.js

📝 오늘 느낀점 & 마음 가짐

• 프로토타입 체인에 공부하면서 상위 객체로 검색하는 방법에 알게 되어 좋았다.
• 페어분과 이런 저런 얘기를 많이 나누다 보니 재미있게 페어프로그래밍을 마칠 수 있었다.
• 클래스를 오랜만에 사용하다 보니 조금 이상했지만 쉽게 해결할 수 있었다.

📌 우리가 사용하고 있는 JavaScript는 객체지향 언어인데 이것의 뜻과 사용법에 대해 자세히 학습하는 시간이 되어 좋았다!!

📗 오늘 학습한 내용

JavaScript

• 객체지향
• 클래스와 인스턴스
  • 클래스: 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀
  • 인스턴스: 각각의 고유한 속성과 메서드를 갖는 것
• new키워드와 생성자 함수
• 객체지향 프로그래밍
  • 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴
  • 객체로 그룹화 시킨다.
  • 장점: 생산성 향상, 유지보수의 우수성, 재사용성
  • 단점: 개발, 실행 속도 저하, 코드 작성 난이도 상승
  • 4가지 주요 개념: 캡슐화, 추상화, 상속, 다형성
• 프로토타입
  • 모든 객체들이 메서드와 속성들을 상속 받기 위한 템플릿이며, 객체를 확장하고 객체지향적인 프로그래밍을 할수 있게 도와준다.

JavaScript의 기본적인 유래를 알아가고 조금 더 심화적인 프로토타입, 클래스, 상속 등에 대해 알게되는 날이었다. 주로 학습한 내용을 블로깅 하다보니 내가 이해하기 조금 쉬웠던 것 같다.

📘 추가로 공부할 내용

JavaScript

• 프로토타입 체인
• 클래스 사용방법
  • extends
  • super()

📝 오늘 느낀점 & 마음 가짐

• Java를 사용했을 때 상속을 많이 사용했던 기억이 있어서 조금은 이해하는데 쉬운 날이었다.

📌 오늘은 고차함수에 대해서 학습하는 날이었다. 고차함수에서 자주 쓰이는 메서드인 filter, reduce, map에 대해서 직접 사용해서 문제를 풀어보는 것을 했는데 아직 메서드를 사용하는데 익숙하지 않았던 것 같다. 조금 더 익숙해져보자!

📗 오늘 학습한 내용

JavaScript

• 고차함수
  • 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수
• 일급객체
  • 변수에 할당 할 수 있다.
  • 다른 함수의 전달인자로 전달될 수 있다.
  • 다른 함수의 결과로서 리턴 될 수 있다. 
• 콜백함수
  • 함수의 전달인자로 전달되는 함수
• 메서드
  • filter
  • map
  • reduce
  • flat
  • flatmap
  • concat

고차함수가 어렵다는 것은 익히들어 알고 있었다. 하지만 메서드를 조금만 잘 쓰거나 문제를 해결할 때 한문장씩 끊어서 풀다보니 코드는 길어졌지만 해결은 했다. 완성된 코드를 가지고 리펙토링하여 효율적인 코드로 변화하는 것을 해보아야 겠다.

📘 추가로 공부할 내용

JavaScript

• 객체 지향
• 클래스와 인스턴스
• 프로토타입

React

• SPA

리액트를 나가기전에 잠시 쉬어가는 주가 되는 것 같았으나, 그게 아닌 멀리가기위한 발판을 밟고 있다는 것을 느끼게 해주는 학습 내용들이다.

📝 오늘 느낀점 & 마음 가짐

• 아직 메서드를 완벽하게 사용하지 못하는 것 같다 조금 더 파보자!

Section1 회고

프로트엔드 개발자로서 진로를 다잡고 코드스테이츠를 처음 들어와 진행했던 세션이었던 만큼 초반에 나와 약속했던 꾸준히하기, 늦지않기, 페어와 소통하기 등을 잘 지켰던 것 같아서 조금은 뿌듯하다.

✅ 목표

• 연봉 3600만원 이상의 개발자 되기
• 네이버 코딩테스트 및 면접 통과하기
• 나만의 웹 페이지를 기획, 구성, 구현 해서 히트치기

😃 페어프로그램

처음 페어분과 만났을 때는 긴장도 하고 어떻게 대화를 이어가야 하는지에 대해 걱정이 많았는데 처음부터 좋은 분을 만나게 되어 후에 페어분들과도 원활하게 소통을 해왔던 것 같다. 페우분들과 진행 할 때 내가 놓치는 부분을 잡아주는 것이 좋았으며, 내가 알고있는 지식을 전달할 수 있는 능력을 기르게 된 것이 가장 큰 수확이다. 이것은 면접에서 약한 나의 단점을 보완할 수 있는 계기가 되었다.

📌 기본

html, css, js에 대해 기초를 코드스테이츠에 신청서를 넣기 전부터 준비하고 있었던 터라 그나마 무난하게 흘러갔다. 하지만, 중간중간 flexbox를 사용해서 크기를 맞추면 좋았을 것을 하드코딩 하거나, 쉽게 풀어갈 수 있는 것을 알고리즘 형식으로 풀어나가 조금 복잡하게 코드를 작성하는 부분은 라이브세션을 통해 보완할 수 있었다.

📝 솔로프로젝트

나만의 아고라 스테이츠를 만드는 것이 첫 솔로 프로젝트였다. github에 있는 discussion의 화면을 비슷하게 구현하여 화면에 출력시키는 것이다. 기본적인 데이터만 가지고 화면에 출력시키는 방식과 input에 작성된 내용을 추가하여 화면에 출력시키는 방법, Local Storage를 사용하여 브라우저를 닫거나 새로고침을 해도 추가된 내용이 화면에 남아있게 하는 방법, 한 화면에 10개씩 목록을 나타내어 하단에 번호로 이전, 다음 페이지를 이동 할 수 있는 페이지네이션과 같은 다양한 기술을 접하였다. 내가 모르는 부분이 아직 많다는 것에 흥미를 느껴 찾아보고 작성하면서 머리가 조금 아프기는 했지만 다양한 기술을 접하면서 실력이 늘어가는 것을 느끼는 프로젝트였다.

KPT 회고?

• Keep: 만족스러운 부분, 계속 이어가면 좋은 부분
• Problem: 목표를 이루는데 장애물 이었던 것, 개선이 필요한 점
• Try: Keep, problem을 참고하여 반드시 유지하고 싶거나, 더 잘하고 싶은 것

✅ Keep

• 매일 7시 기상 후 학습 준비
  • 원래 기상시간인 8시에 일어났다면 준비하면 바로 학습을 해야진행 해야 했지만 조금 여유롭게 시작할 수 있었다.
• 오후 7시에 진행되는 모각코 매일 참여
  • 솔직히 오후7시에 반드시 모각코에 참여해야 한다는 생각이 많이 들어 의무적으로 들어갔지만 이제는 편안하게 동기들과 만나게 되어 학습하다가 지루해지더라도 견디고 해낼 수 있게되었다.
• 페어 선정 시 먼저 DM 보내기
  • 내향적인 성격이라 먼저 말을 꺼내는 것이 조금 힘들었지만 이것도 개발자로서 커뮤케이션 역량을 키울 수 있다고 생각하니 성격보단 의욕이 앞서게 되어서 항상 페어분들과 잘 진행하였다.
• 시간을 지키면서 정해진 학습 내용과 심화적인 내용을 추가적으로 학습한 것
  • 정해진 학습 자료만 가지고는 부족하다는 것을 조금 느끼게 되어 추가적으로 학습을 진행하여 블로그에 작성을 진행했더니 강의 자료에 있는 내용을 이해하는데 충분했다.
• 알고리즘 1일 1문제 풀이
  • 코딩테스트를 봤던 곳 들을 보아 후에 있는 데일리코딩과 알고리즘 학습으로는 내가 따라가기 벅찰 수도 있다고 생각해 하루에 한문제씩 문제가 쉽더라도 풀어보고 있다.

🚫 Problem

• 점심시간에 밥을 먹고난 뒤 식곤증이 몰려온다.
• 집에서 컴퓨터만 보고 있으니 체력이 많이 떨어진 것을 느끼고 있다.
• 전문적인 언어를 잘 사용하지 못함 (할당을 넣는다 라고 말하는 경우가 다수 있음)

❇️ Try

• 매일 7시 기상 및 모각코 참여는 더욱 꾸준히 진행하고, 들어가서 아무말도 하지 않고 가만히 있지말고 질문과 답변도 할 수 있도록 해보자!!
• 점심시간에 밥을 먹게되면 식곤증이 몰려와 오후 시간에 영향이 가는 경우를 1주차에 알게되었다. 밥을 조금 먹거나 잠을 청하는 방법을 사용하고 있지만 나의 수면시간이 3~4시간인 것이 가장 큰 문제인 듯 하다 잠을 1시간 더 늘릴수 있게 새벽 3시 전에는 잠을 청하자!!
• 체력 증진을 위해 하루 1시간이라도 산책을 가보자!! 아침에 기상, 식사 후 30분 산책, 저녁 식사 후 30분 산책을 통해 체력을 기를 수 있을 것이다. (진짜로 집에서 잘 안나가서 하루에 걷는 시간이 너무 적었습니다..)
• 페어와 대화를 이어갈때 전문적인 언어를 사용하지 않는 경우가 많이 있었다. 이는 전문적인 단어를 모아 모음집을 만들어 내 삶에 익숙해지도록 하는 것이 좋을 것 같다.

📌 우선순위

1. 매일 7시 기상 후 학습 준비
2. 모각코 참여
3. 알고리즘 풀이
4. 전문단어 모음집 제작
5. 오전, 오후 30분씩 1시간 산책
6. 수면시간 1시간 연장

Local Storage란?

• 브라우저 내 데이터를 가지고 있는 저장소
• sessionStorage와 같지만 sessionStorage는 브라우저를 닫을 경우 데이터가 삭제된다.
• Local Storage는 브라우저를 새로고침, 닫기를 실행해도 데이터가 보존된다.
• 하지만, 시크릿 모드를 사용하여 Local Storage에 담긴 데이터는 시크릿 모드로 열린 브라우저를 닫으면 데이터가 삭제된다.

Local Storage 사용법

• 로컬 스토리지 내 데이터 저장
  • 객체 형태로 저장 된다.

//                     key     value
localStorage.setItem('minwoo', 'cho');

• 로컬 스토리지 내용 가져오기

const name = localStorage.getItem('minwoo');

• 로컬 스토리지 내용 삭제

localStorage.removeItem('minwoo');

• 로컬 스토리지 초기화

localStorage.clear();

값이 많을 경우

• 값이 많을 경우 value에 문자열로 할당된다.
• 이러한 경우를 방지하기 위해 JSON.stringify, JSON.parse를 사용한다.
• JSON.stringify를 사용하여 원하는 형태로 값을 할당
• JSON.parse를 사용하여 원래의 형태로 값을 받아옴.

const name = ['kim', 'lee', 'cho'];
localStorage.setItem('name', name);

const str = localStorage.getItem('name')
console.log(str);    // 'kim,lee,cho' 값이 문자열로 리턴


/*=================================================*/
localStorage.setItem('name', JSON.stringify(name));
const str2 = localStorage.getItem('name');
console.log(JSON.parse(str2));    // ['kim', 'lee', 'cho'] 배열 리턴

Local Storage 내용 보기(크롬기준)

1. F12를 눌러 개발자도구를 연다.

2. 개발자 도구 내 Apllication 탭에 들어간다.

3. 사이드 탭에 Storage -> Local Storage를 확인한다.

참고자료

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage