[코드캠프]프론트엔드 1일차

윤성해·2023년 3월 13일

프론트엔드_TIL

목록 보기

1/27

수업 목차

React
수업을 위한 도구 설치
React 폴더구조
다른 폴더의 파일 불러오기
react의 html(jsx)
reat의 css (css-in-js) - emotion
Node.js란?
CLI란?

오늘의 TIL

1. React

React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구입니다.

대표적인 서비스로는 페이스북, 인스타그램, 에어비앤비 등이 있습니다.

<기본 리눅스 명령어>
pwd
print working directory. 현재 작업 중인 폴더 정보를 출력합니다
cd
change directory(폴더). 경로를 이동합니다. 절대 경로, 상대 경로로 이동이 가능합니다.
ls
list. 현재 폴더 안에 있는 목록을 확인합니다.
cp
copy. 파일 혹은 폴더를 복사합니다. 폴더를 복사할 경우에는 -r 옵션을 함께 사용해주어야 폴더 안에 있는 목록도 함께 복사할 수 있습니다.
mv
move. 파일 혹은 폴더를 이동합니다. 실제로 원하는 위치로 이동할 때도 사용하지만, 이름을 변경할 때도 사용합니다.
mkdir
make directory. 폴더를 생성합니다. -p 옵션을 주면 하위 폴더까지 한 번에 생성 가능합니다.
rm
remove. 파일이나 폴더를 삭제합니다. 폴더를 삭제할 때는 -r 옵션을 주어야하며, -f 옵션을 주면 사용자에게 삭제 여부를 묻지 않고 강제로 삭제하게 됩니다. 폴더를 삭제할 때에는 하위 폴더까지 모두 삭제되므로 유의합니다.
touch
파일이나 폴더의 최근 업데이트 일자를 현재 시간으로 변경합니다. 파일이나 폴더가 존재하지 않으면 빈 파일 혹은 폴더를 생성합니다
cat
concatenate. 파일의 내용을 출력할 수도 있고, 파일 여러 개를 합쳐서 하나의 파일로 만들 수도 있습니다. 또는 기존 한 파일의 내용을 다른 파일에 덧붙일 수도 있습니다. 새로운 파일을 만들 때에도 사용됩니다.
head
파일의 앞 부분을 보고싶은 줄 수만큼 보여줍니다. 옵션을 지정하지않으면 상위 10줄을 보여줍니다.
tail
파일의 뒷 부분을 보고싶은 줄 수만큼 보여줍니다. 옵션을 지정하지않으면 하위 10줄을 보여줍니다. -f 옵션과 함께 실행하면 파일 내용을 화면에 계속 띄워주고 파일이 변하게되면 업데이트 된 내용을 갱신해줍니다. 주로 실시간으로 내용이 추가되는 로그 파일을 모니터링할 때 사용합니다.
find
특정 파일이나 폴더를 검색합니다. 파일명 혹은 폴더명, 확장자명으로 찾을 수 있습니다.
sudo
mac에서 설치가 안 되는 경우 보통 권한이 없어서 에러가 나는 경우가 많으므로 설치 명령어 앞에 sudo를 붙여 관리자 권한을 부여합니다.
./
‘현재 폴더 안에 있는’ 이라는 뜻을 가지고 있으며, 생략할 수 있습니다.
../
현 위치 바로 상위 폴더를 가르킵니다.

2. 수업을 위한 도구 설치

3. React 폴더구조

1) 보일러 플레이트

초기 셋팅이 완료된 폴더를 보일러플레이트라고 합니다.
보일러플레이트는 회사마다 다를 수 있습니다.

각 폴더의 한 줄 요약입니다.

프론트엔드의 각 페이지 화면들(pages)
pages 폴더는 프론트엔드의 페이지 화면들을 모아놓은 폴더입니다.
api 폴더는 사용하지 않으므로 삭제합니다.

제품 설명서(package.json)
package.json파일은 핵심이 되는 파일로, 제품 설명서와 같은 역할을 합니다.

Next는 React 기반 프레임워크입니다.
우리는 Next를 설치하였기 때문에 react, react-dom도 자동으로 함께 설치되었습니다.

💡 Next.js의 API Routes
next.js에서는 서버에서 API 기능을 제공할 수 있게 해주는 솔루션이 있습니다.
pages/api 안에 넣어두면 url로 접근할 때는 바로 호스트 루트가 api 폴더로 매칭됩니다.
우리는 이 기능을 사용하지 않기 때문에 폴더를 삭제해주는 것입니다.
자세한 사항은 Next.js Docs를 참고해보세요.

💡 Shell 쉘 (bash, zsh, ...)
리눅스의 Shell은 명령어와 프로그램을 실행할 때 사용하는 인터페이스입니다. 컴퓨터와 사용자 간의 다리 역할을 해주는 것인데요. 사용자로부터 명령을 받아 해석하고 프로그램을 실행하는 역할을 합니다.

bash

리눅스의 표준 Shell입니다. 유닉스 Shell의 오리지날인 sh Shell을 기반으로 만들어졌습니다.

zsh(z-shell)

bash와 마찬가지로 sh의 확장된 버전이며, 철자 교정 및 대략적인 완성이 가능하며 플러그인 및 테마 지원이 됩니다.

Mac OS에서는 카탈리나 이후 기본 Shell이 zsh로 변경되었으며, Oh-My-Zsh라는 플러그인과 프레임워크가 가장 널리 사용됩니다.

다른 폴더의 파일 불러오기(import/export)

react에서 다른 폴더에 있는 파일을 불러올 수 있는데, 실무에서는 html, css, javascript파일을 각 각 따로 만들어서 필요에 따라 불러온다.

React의 HTML(JSX)

JSX는 React에서 사용하는 React 전용 HTML입니다.
React에서는 HTML 대신 JSX(React 전용 HTML)를 사용합니다.

속성값의 대소문자 정도 차이 등을 제외하곤 거의 비슷합니다.

React의 CSS(CSS-IN-JS) - emotion

CSS-IN-JS 는 CSS를 JS상수에 저장해서 사용하는 방법입니다.
오른쪽은 동일한 CSS를 Title이란 상수에 저장한 것입니다.

이렇게 저장한 상수는 마치 HTML 태그처럼 사용할 수 있습니다.

태그에 의미부여 를 할 수 있어서, 태그만 봐도 결과물이 예상됩니다.
className 을 입력하지 않아도 되어서, 코드의 길이가 짧아집니다.(가독성 좋아짐)

7. Node.js란?

자바, 파이썬은 브라우저로 보이는것이 아닌 게임이나 엑셀을 개발할 때 쓰이는 언어입니다.
이러한 언어를 쓰던 사람들이 홈페이지를 만들어보고자 자바스크립트를 접해보다가 런타임이 웹브라우저에서만 한정되던 자바스크립트를 자바, 파이썬 처럼 클릭해서 실행할 수 있는 프로그램 처럼 만든것이 node.js 입니다. 즉 node.js는 언어가 아니고 내 컴퓨터에서 직접 실행하는 실행 프로그램 입니다.

자바 -> Maven, Gradle (에 자료 올리고 다운받으면서 도움주고받을 수 있음.)
파이썬 -> PYPI
node.js -> NPM

node.js 설치하면 npm이 자동 설치되는데, 불편한 사항들을 페이스북에서 개선하여 yarn을 만들었다!

❗️ npm, yarn 은 node.js의 패키지 관리자이다.

8. CLI란?

마우스로 폴더 만드는 것은 GUI라고 부르는데, (그래픽 유아이 인터페이스!)
터미널에서 명령어로 폴더를 만드는 것을 CLI 라고 합니다.

궁금한 것

알게된 것

node_modules는 .gitignore에 저장하는것이 좋다. 용량이 너무많고, 삭제되어도 언제든 다운할 수 있음
.gitignore는 깃에 저장 안하고싶을 때 쓰는곳
README.md는 상세설명서 아니고 소개서!
yarn lock은 버전 잠금 파일인데, 버전 업뎃되면서 잘 작동하던게 안될수도 있으니까 그런 부분 오류생기지 않게 도와주는 파일
원래방식 vs 리액트 차이점

images 폴더 -> public으로 바뀜. 폴더명은 가급적 바꾸지 않는것이 좋다. 리액트에 html가 없는 이유는, javascript로 html이 합쳐졌다.

리액트에서 사용하는 html은 다른점이 있다.
그때그때 다른점은 외우지말고, 익숙해지기!

리액트로 불러오는것이 효율적인 이유는, import하고 가지고오고싶은것만 적으면 된다. 원래방식은 모든걸 다 가져옴

가지고오려면 import !!
node modules 는 삭제하고 다시설치 할 때 yarn install 터미널에 입력해주기
yarn 붙히면 명령할 수 있다.
빌드, 스타트는 배포할 때, lint는 문법 검사할 때.
dev는 개발할 때 사용!(연습)