Homile

📌 코드스테이츠에서 state와 props를 학습했다. 내가 학습한 내용과 비슷했지만 예제가 있어서 조금 더 이해를 할 수 있었고, 페어프로그래밍 중 페어분과 실습을 진행하며 많은 것을 배우게 되었다.!!

📗 오늘 학습한 내용

React

• State
  • 변할 수 있는 값
  • 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
  • useState
    • state를 다루를 방법이며 배열을 반환한다.
    • const [저장 변수, 갱신 함수] = useState(초기값);
• Props
  • 바꿀 수 없는 값. (속성)
  • 함부로 변경될 수 없는 읽기전용 데이터
  • 외부로 부터 전달 받은 값
  • 부모 컴포넌트로부터 전달받은 값
  • 화면에 어떻게 표시되는지를 기술하는 React Element를 반환
  • 최초 렌더링의 초기값 설정
  • 객체 타입 반환

📘 추가로 공부할 내용

React

• useEffect
• useMemo
• Hook

📝 오늘 느낀 점 & 마음 가짐

• 페어분과 활동하면서 내가 부족하다는 사실을 알았다. 자만하지 말고 꾸준히 성장 할 수 있도록 학습을 멈추지 말자!!

📌 리액트 state, props에 대해서 한번 더 학습을 해보았으며, Firebase의 DB와 리액트를 연동시켜 보았다.

📗 오늘 학습한 내용

React

• State
• Props

Firebase

• DB 생성
• 리액트 프로젝트 연동

📘 추가로 공부할 내용

React

• 노마드 코더 React 영화 웹 클론(진행중)
• AWS 연동

📝 오늘 느낀 점 & 마음 가짐

• 솔로 프로젝트 만드는 기간이 6월 21일로 잡혀있는데 백엔드 없이 혼자서 작업할 수 있는 방법에 대해서 생각해보았는데 대학교 학부생 시절 사용하였던 파이어베이스가 생각이 나서 사용해보기로 했다. 파이어베이스는 프론트엔드 개발자가 솔로 프로젝트를 할 때, 가장 많이 사용되는 서버이다.
• 하지만, 나중에 있을 AWS와도 연동하는 방법에 대해 생각하고 검색하여 공부해보자@!!@!@!

📌 React에서 핵심 기능이라고 생각되는 Single Page Appliacion을 학습하는 날이다. 중요하니까 꼭 기억하도록 하자!

📗 오늘 학습한 내용

React

• SPA(Single Page Application)
  • 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식
• SPA 장점
  • 사용자와의 상호작용이 빠르게 반응한다.
  • 필요한 데이터만 서버에서 전달받기 때문에 서버 과부화 문제가 해결된다.
  • 더 나은 유저의 사용환경을 제공한다.
• SPA 단점
  • JS 파일의 크기가 크다.
  • JS 파일을 기다리는 시간으로 처음 로딩하는 시간이 길다.
  • 검색 엔진 최적화(SEO)가 좋지 않다.

와이어 프레임

• 웹 페이지의 레이아웃과 UI 요소들에 대한 뼈대
• 순서:
  • 컴포넌트 구성 → 설계로직 → 컴포넌트의 내용 구성

React Routing

• 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하지 않는다.
• Routiong: 주소에 따라 다른 뷰를 보여주는 과정

React Rout 라이브러리

• BrowserRouter(Router)
  • 브라우저의 주소를 감지한다.
• Routes(Rout matchers)
  • 여러 Route를 감싸서 하나만 렌더링 한다.
• Route(Rout matchers)
  • 랜더링 할 컴포넌트의 이름 및 경로를 지정한다. 
  • path: 경로
  • element: 컴포넌트
• Link(ROute changers)
  • a태그와 기능은 비슷하나 새로고침을 하지 않고 URL만 변경한다.
• useNavigate
  • 특정 이벤트가 발생했을 때, URL을 조작할 수 있는 인터페이스를 제공한다.

React Rout 라이브러리 설치

• npm install react-router-dom@^6.3.0
• import {BrowserRouter, Routes, Route, Link} from "react-router-dom"

📘 추가로 공부할 내용

React

• 노마드 코더 React 영화 웹 클론(진행중)
• State
• Props

📝 오늘 느낀 점 & 마음 가짐

• 다음주는 State, Props를 공부하는데 어렵다고 흔들리지 말자!

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

📗 오늘 학습한 내용

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 블로그도 생각해보자!