부트캠프 11Week

- 220613 ~ 220614

리액트에서 스타일링하는 방법에 대해 학습했다. 단순하게 css 파일을 적용하는 방식만 생각했었는 데, styled component를 사용해보니 더욱 독립적이고 재사용하기 좋은 컴포넌트를 만들 수 있어서 컴포넌트라는 개념에 훨씬 가까워진 기분이었다.
그리고 프로젝트를 만들 때 매번 파일마다 같은 css 코드를 새로 작성해야하는 점이 매우 번거로웠는 데, 그런 불편함도 해소할 수 있어 좋아보였다. 특히 GlobalStyle은 환상적이었다👍

• 컴포넌트에 컨텐츠를 넣으면 props에 childern으로 전달된다.

function MyReactButton(props) {
  console.log(props); // {children : My React Button!}
}
<MyReactButton>My React Button!</MyReactButton>

• props는 컴포넌트의 사용자를 위한 인터페이스다.
• state는 컴포넌트의 생산자를 위한 인터페이스다.
• 리액트의 state는 비동기적으로 처리된다.
  
  
• 리액트의 스타일링 3가지 방법
  ① CSS(Sass, SCSS)
  ② CSS Module
  ③ styled-components
• 리액트에서는 인라인으로 스타일을 넣는 방법이 권장된다. 각각의 컴포넌트를 만들어서 재사용하기 편하기 때문
• styled-components 사용하기 -> 리액트에서 css 문법 그대로 사용 가능
  npm install styled-components
• styled.htmlTag로 html 태그를 지정하고 (백틱) 안에 해당 요소에 대한 스타일을 지정한다. 작성한 스타일은 변수에 담는다.
  ex) const Box = styled.div` display: flex; `
• 생성한 스타일을 적용할 때는 컴포넌트 사용하듯이 <스타일명 />으로 사용한다.
• 중복되는 스타일은 styled(스타일명)으로 상속하여 코드를 재사용할 수 있다.
• 모든 컴포넌트에 동일한 스타일을 적용하고 싶을 때는 createGlobalStyle() 함수를 활용하여 스타일을 전역적으로 사용할 수 있다.
  
  

import styled from 'styled-components';
// ``(백틱) 안에 css 작성
const MyFirstStyledButton = styled.button`
	color: blue;
	font-size: 20px;
`;
// css 상속 받기
const ChildButton = styled.(MyFirstStyledButton)`
	background-color:green;
`;
// primary 값 유무에 따라 색상이 white나 black이 들어감
const PropsButton = styled(ChildButton)`
	color:${(props) => (props.primary ? 'white' : 'black')};
`;
function App() {
  return (
    <div>
      <ChildButton>Child Button</ChildButton>
      {/* ChildButton을 a 링크로서 사용 */}
      <ChildButton as="a" href="#">Child Button</ChildButton>
      {/* primary 값이 있기 때문에 color : white */}
      <PropsButton primary></propsButton>
    </div>
  );
}

- 220615 ~ 220616

코치님께서 수업시간에 Refactor 기능을 알려주셨는 데 신세계였다! 매번 일일이 직접 분리했는 데 자동으로 분리해주는 기능이 있는지 몰랐다. 역시 아는 만큼 고생을 덜 한다는 것을 다시 한 번 느꼈다..

이전 프로젝트까지는 MPA 방식으로 프로젝트를 구현을 했었는데 이번엔 SPA 방식을 배워보았다. MPA로 구현하면서 매번 페이지가 리로드 되는 것이 되게 신경쓰이고 유저 입장에서 불편할 것 같다는 생각이 들었는 데, SPA 방식으로 구현하니 화면 전환이 훨씬 부드럽고 자연스러웠다! 물론 SPA와 MPA 모두 장단점이 따르지만, 개인적으로는 SPA 웹페이지가 첫인상이 더 좋은 거 같다.
react-router-dom은 v5랑 v6의 문법 차이가 큰 것 같았다. 실습에서 v5랑 v6문법을 왔다갔다 하면서 작성하니 헷갈리기도 했다. 나중에 혼돈하지 않도록 제대로 공부해둬야할 것 같았다.

• ⭐ vscode에서 Refactor 기능을 사용해서 코드를 파일로 분리하거나 함수를 분리하거나 가능
• npx json-server --watch -p 3333 db.json json server 설치
  package.json > scripts에 해당 내용 추가하면
  "server": "npx json-server --watch -p 3333 db.json"
  npm run server 할 때 마다 json server도 같이 실행돼서 더 편리하게 사용 가능
• npm install react-router-dom@6 react-router-dom 버전6 설치
  
  
• 최상위는 <BrowserRouter>로 감싼다.
• 라우트를 설정하는 <Route>는 <Routes>로 감싼다.
• <Route>는 path와 element를 필수 props로 가진다. path는 주소, element는 렝더링할 요소로 해당 path로 들어오면 일치하는 element(컴포넌트)를 렌더링한다.
• URL Params를 읽을 때는 useParams를 사용한다.
• <Link>는 특정 주소로 이동해주는 태그로 a 태그와 비슷하다. 주소 연결은 to로 한다.
  
  
• useNavigate는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 해주며, navigate('/')로 이동시킨다.
• useParams는 URL 파라미터의 값을 가져온다.
• useLocation의 location객체의 search값을 참조하여 queryString을 가져올 수 있다.
• URLSearchParams에 location.search를 인자로 넘기면, 해당 객체의 get메소드를 사용하여 queryString의 key, value 쌍을 얻을 수 있다.
  
  

import { BrowserRouter, Link, Routes, Route, useParams, useNavigate } from 'react-router-dom';
// 
const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
      <Routes>
          <Route path='/' element={<Home />} />
          <Route path="/create" element={<Create onCreate={onCreateHandler()}></Create>}></Route>
          <Route path="/read/:topic_id" element={<Read topics={topics}></Read>}></Route>
      </Routes>
  <Link to='/'></Link>
  </BrowserRouter>
);

- 220617

리액트의 비동기 처리에 대해 학습했다. 바닐라 자바스크립트 수업때 비동기에 대해서 배웠기 때문에 어느정도 아는 상태에서 복습하는 내용이긴 했지만 여전히 비동기는 높은 장벽이 느껴진다.

• 비동기는 동기와 다르게 코드가 순서대로 실행되지 않는다. 먼저 실행된 작업이 끝날 때까지 기다리지 않고 한 번에 여러 작업을 처리한다.
• 비동기 처리 코드는 태스크 큐로 보내지며, main thread가 동기 코드를 실행한 후에 제어권이 돌아왔을 때 이벤트 루프가 태스크 큐에 있는 비동기 코드를 실행한다.
• 자바스크립트는 기본적으로 싱글스레드(하나의 메인스레드) 언어이다.
  
  
• 자바스크립트의 비동기 처리 방식 3가지
  ① Callback Function
  ② Promise
  ③ async/await
• 콜백 함수는 자칫하면 '콜백 지옥 (callback hell)'이 발생할 수 있다. 콜백 지옥을 해결하기 위해 나온 것이 Promise이다.
  
  
• Promise는 대기(pending), 이행(Fulfilled), 거부(Rejected) 3가지 상태를 갖는다.
• Promise는 .then, .catch, .finally 메소드를 체이닝 하여 데이터 처리, 에러 처리, 클린업을 할 수 있다.
• then, catch는 비동기(Promise), 동기 실행 중 어떤 것이라도 리턴할 수 있다.
• Promise.all() : 모든 프로미스가 fulfilled
• Promise.allSettled() : 모든 프로미스가 settled
• Promise.race() : 하나라도 settled
• Promise.any() : 하나라도 fulfilled
• propmise에 .then()을 연쇄적으로 체이닝하다보면 가독성이 나빠져서 콜백지옥마냥 혼란에 빠질 수 있다. 이를 해결하기 위해 나온 것이 async/await이다.
  
  
• async/await를 사용하면 Promise보다 간결하고 직관적으로 코드를 작성할 수 있다.
• await는 반드시 async 함수 안에서 실행되며, async는 항상 Promise 객체를 반환한다.
  -> await를 사용하기 위해 async를 명시해야하는 것과 다름 없음
• async/await는 try~catch문으로 에러 핸들링이 가능하다.
  
  
• CORS(Cross Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.