01) 코드캠프

이희주·2022년 5월 10일

오늘의 요약!

오늘은 리액트 입문에 대해서 배웠습니다.
OS는 Operating System, 운영체제입니다. 쉽게 말하면 window, mac, linux 같은 것들입니다.

우리가 프로젝트를 시작하기 위해 Node.js를 OS에 설치하라고 했었는데요.
Node.js는 브라우저에서만 작동하는 자바스크립트를 브라우저 외 다른 환경에서도 사용할 수 있도록 해주는 실행도구입니다.

이러한 Node.js에서 자주 쓰이고 재사용되는 자바스크립트 코드들을 패키지로 만들어 모아놓은 하나의 저장소가 npm이고,
yarn도 페이스북에서 만든 속도가 조금 더 빠른 package manager입니다.

리액트는 자바스크립트를 쉽고 효율적으로 사용할 수 있도록 페이스북에서 만든 도구라고 했었죠?
쉽고 편리하게 리액트보다 더 추가된 기능을 사용하기 위해 Next.js라는 프레임워크를 설치했었습니다.

프로젝트 설치 후 초기 세팅이 완료된 폴더구조를 보일러 플레이트라고 하는데요.
이렇게 우리가 만들어준 폴더 각각(class, freeboard_frontend, …)에서 yarn dev를 해주시면 우리가 만든 프로젝트를 local환경에서 웹브라우저를 열어볼 수 있습니다.

더 자세하게 폴더 구조를 확인해보시면 저희가 프리캠프 때 사용했던 html,css는 없고 js파일로 변경하여 사용하게됩니다.
실무에서는 jsx 방식을 사용하고 emotion을 사용하여 나만의 태그를 만들어 CSS-IN-JS 방식을 사용해준다고 했습니다.

또한 각각의 폴더에서 다른 파일을 불러오기 위해 export로 내보내고, import로 가져와서 사용해주었습니다.
프로젝트 구현 시에 margin보다는 padding을 사용하시고 모든 컨텐츠를 감싸주는 최상위 height는 fix하지 않는다는 점도 잊지마세요!

React

react란?

javascript를 쉽고 효율적으로 사용할 수 있도록 facebook에서 만든 도구
이런 도구 (라이브러리, 프레임워크)가 무엇인지 잘 이해해야 함
VSCODE : ms에서 개발한 에디터, 프레임워크를 통해 사용할 수 있음
Node.js : javascript를 서버에서도 사용할 수 있도록 만든 프로그램
Yarn : 수많은 모듈을 모아서 사용할 수 있도록 하는 패키지 매니저
emotion : css-in-js 로 javascript안에서 스타일을 작성할 수 있게 해줌
Apollo-Client : graphQl과 클라이언트를 연결해주는 패키지, 여러가지 데이터를 graphql을 사용해 db에서 가져올 수 있도록 해준다
Graphql : api를 위한 쿼리 언어
Nextjs : 리액트 라이브러리 프레임워크
React의 기본 폴더구조

이렇게 초기 셋팅이 완료 된 폴더를 보일러 플레이트 라고 한다
각 폴더의 한 줄 요약

pages폴더는 각 프론트엔드 페이지의 화면들을 모아둔 폴더이다

package.json 파일은 제품 설명서 같은 역할을 한다
Next를 설치했기 때문에 react, react-dom도 함께 설치됨(Next는 리액트 기반 프레임워크)

다른 폴더의 파일 불러오기(import / export)
하나의 파일에 모두 작성하지 않고, 여러 파일에 종류별로 나눠서 작성하면 효율적으로 관리할 수 있따!

JSX

: react의 HTML
JSX는 리액트에서 사용하는 리액트 전용 HTML이다.
react에서는 html 대신 JXS 사용

(웹브라우저는 html, css, javascript만 읽을 수 있기 때문에
react의 html인 jsx를 코딩하지만 최종적으로 실행 될 떄는 jsx가 html로 변환되어 실행됨)

emotion

: react의 CSS(css-in-js)
CSS-IN-JS 는 CSS를 JS상수에 저장해서 사용하는 방법

같은 css를 title 상수에 저장하고 html 태그처럼 사용하기

태그에 의미를 부여할 수 있어서 태그가 읽기 쉬워지고, clsaaName을 입력 안 해도 되기 때문에 코드 길이가 짧아진다는 장점이 있다

Git 과 Github

: React 코드 저장 및 협업
Git은 소스코드 저장을 도와주는 프로그램
Github는 깃으로 저장한 파일들이 실제로 저장되는 장소
파일을 깃을 사용하여 깃허브에 저장하는 것

깃허브 용어 설명