Homile

📌 리액트를 코드스테이츠 기간 중 처음 사용하는 날이다. 미리 학습을 해왔던 것이 도움이 되었다.

📗 오늘 학습한 내용

React

• 선언형
• 컴포넌트 기반
• Component
  • 하나의 기능 구현을 위한 여러 종류의 코드 묶음
  • UI를 구성하는 필수요소
  • 트리구조
• 라이브러리로 범용성이 좋다
• 특징 3가지
  
  • JSX문법을 사용한다.
    • JSX: JavaScript를 확장한 문법이며, 코드를 이해하기 편하게 한다.
  • Babel을 사용한다.
    • Babel: JSX를 브라우저가 이해할 수 있는 JS로 컴파일한다.
  • CSS, JS만 가지고 개발이 가능하다.

JSX의 규칙

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함된다.
• CSS의 class를 지정하려면 className으로 표기해야 한다.
• JS 표현식 사용 시 중괄호를 사용한다.
• 사용자 정의 컴포넌트는 대문자로 시작한다.
• 조건문은 IF가 아닌 삼항연산자를 사용한다.
• 여러 개의 HTML 엘리먼트를 표시할 때, map()함수를 사용한다.
  (데이터가 바뀔 때 마다 렌더링 되도록 하기 위해 사용)

📘 추가로 공부할 내용

React

• 노마드 코더 React 영화 웹 클론
• State
• Props
• SPA

📝 오늘 느낀 점 & 마음 가짐

• 리액트를 처음 시작하는 마인드로 하고 있으니까 재미있다.
• 코드를 고민하며 작성할 때 즐기는 마음을 끝까지 가지고 가도록 하자.

📌 오늘은 어제에 이어 fetch API를 작성하는 방법에 대해 알아보았다.

📗 오늘 학습한 내용

JavaScript

• Fetch API
  • URL로 요청하는 것을 가능하게 하는 것
  • 서버의 데이터를 가져올 수 있음
  • 사용법: fetch(url).then((response) => response.json())

📘 추가로 공부할 내용

React

• 노마드 코더 React 영화 웹 클론
  • states
  • props
• component
• SPA

📝 오늘 느낀점 & 마음 가짐

• 조금이라도 게으르게 살지 말자!
• 힘차게 나아가자!

📌 타이머API, fs모듈이라고 해서 조금 재밌을 것 같다고 생각하고 즐거운 마음으로 시작했다.!!

📗 오늘 학습한 내용

JavaScript

• 비동기
• callback
• promise
  • Promise.all([promise1, promise2, ...]: 여러개의 promise들을 한개로 그룹화한다.
• async/await
• fs모듈
  • fs.readFile("파일 경로.파일이름", 옵션, function): 파일을 읽어오는 모듈
• JSON.parse(): 문자열을 객체로 반환한다.

React

• 사용하는 이유: 한국의 웹 사이트의 44%가 리액트로 이루어져 있고 장기간 버텨온 라이브러리기 때문에 앞으로도 사용할 수 있다고 생각이 들어 학습하게 되었다.

📘 추가로 공부할 내용

React

• 노마드 코더 React 영화 웹 클론
• component

Github

• Github 블로그 개설 방법 정리

📝 오늘 느낀점 & 마음 가짐

• 리액트 좋아!!!
• T스토리도 좋은 느낌이지만 잔디를 꾸준히 심기 위해서는 github 블로그도 생각해보자!

📌 JavaScript의 심화 부분인 만큼 어려운 부분을 배웠던 한주였고 마음이 맞는 페어도 만난것 같아서 좋았던 일주일 이었다.

📗 일주일간 학습한 내용

• 기술면접 준비
• 고차함수
• 콜백함수
• 객체지향
  • 클래스와 인스턴스
  • 프로토타입
  • 프로토타입 체인
• 동기
• 비동기
  • promise
  • resolve, reject
  • then
  • catch
  • finally
  • 상태: 대기, 이행, 거부

📘 다음주간 공부할 내용

JavaScript

• 비동기
• node.js
  • fs모듈
• fetch API

React

• component
• SPA
• props
• state

📝 일주일 간 느낀 점 & 마음 가짐

• 일주일간 힘들었지만 재미있기에 여기까지 오게되었다고 생각한다.
• 앞으로도 의지를 잃지 않고 해보도록 하자!

📌 맥북을 구매하고 내일 배송이 오는 날이라 두근두근 했다!! 페어분께서 애플 스토어에 가셔서 보내주신 사진과 팁을 주셔서 너무너무 좋았다!! 맥북프로 2015 13인치 백라이트가 마지막으로 나오는 버전을 사용했는데 리액트를 돌리기 시작하니까 버벅거리기 시작해서 너무 불편해서 고민하면서 찾아보다가 결국 맥북에어 m1 16기가를 구매를 했다 내일 오는데 세팅은 언제하지?....라는 생각이 들었다.

📗 오늘 학습한 내용

JavaScript

• 동기
• 비동기
• callback
• promise
• async/await
• github
  • sshkey
• 코드스테이츠 강의 전 세팅 다시해보기

React

• props
  • 컴포넌트의 속성
  • 읽기 전용 데이터
• stats
  • 사용자가 알아서는 안되는 컴포넌트를 내부적으로 사용하는 것(은닉)
• SPA(single Page Application)
  • 새로운 페이지를 불러오지 않고 필요한 데이터만 받아 그 데이터를 기준으로 현재의 페이지를 업데이트한다.

리액튼는 생활코딩을 통해 기초적은 부분을 배웠고 노마드 코더의 영화 웹 클론을 보면서 재미있게 진행하고 있다. 다소 어려운 부분이 있긴하지만 사람은 적응의 동물이라는 것을 생각하며 적응해 나가고 있다고 생각이 든다.

📘 추가로 공부할 내용

JavaScript

• fetch API
• Node.js
  • fs모듈
• 노마드 코더 React 영화 웹 클론

📝 오늘 느낀점 & 마음 가짐

• 리액트는 사용자에게 편의성을 가져다 주려는 의도가 상당하지만 코드 자체는 조금 어렵게 꼬여있는 느낌이었다.
• 하지만, 재미있으니 그걸로 만족하면서 공부하게 된다.
• 요즘은 게임보다 코드를 작성하는 것이 재미있다.

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

📗 오늘 학습한 내용

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

📝 오늘 느낀점 & 마음 가짐

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