Node.js
-
브라우저 밖에서 javascript를 쓰기 위해 필요한 프로그램
-
프로그래밍 언어가 아님 (실행하는 프로그램)
-
게임 실행처럼, javascript를 웹브라우저 밖, 즉 로컬에서도 실행할 수 있도록 해줌
-
Node.js 를 설치하면 npm은 자동으로 설치됨
npm
-
Node Package Manager
-
Node.js를 활용해 만든 기능들을 다운하고 업로드할 수 있는 공간
-
npm의 낮은 속도로 인해 대체용으로 yarn을 많이 사용함
yarn
- npm보다 빠른 속도로 페이스북에서 제작한 패키지 관리 프로그램
기본 리눅스 명령어
-
특정 파일을 폴더로 복사하고, 휴지통에 넣어서 지우고 하는 방식은 시각적으로 눈에 띄는 GUI(Graphic User Interface)방식임
-
GUI 대신 CLI(Command Line Interface)라는 터미널 명령어를 사용해서 같은 동작을 할 수 있음
기본 리눅스 명령어 (CLI)
ls => 목록, 리스트
ls -al => 숨은 목록 보기
mkdir aaa => aaa란 이름의 폴더 생성
cd aaa = aaa => 폴더 디렉토리로 현작업 위치 바꿈
cd ../ => 한 칸위로 이동 (상위로)
pwd => 현 디렉토리 위치 확인
cp -R aaa aaa2 => aaa폴더를 aaa2라는 이름의 폴더로 새로 복사
rm -R aaa2 = aaa2 => 폴더 삭제
rm -Rf aaa2 = aaa2 => 폴더 강제 삭제 (특정문제로 삭제 안될시 사용)
sudo ~ => 관리자 권한으로 실행
react
-
Javascript를 쉽고 효율적으로 사용할 수 있도록 해주는 도구
-
next.js => react.js의 업그레이드 version (next는 react 기반 프레임워크임)
-
react 에서는 Js와 HTML이 구별되지 않음 (같은 문서에 작성)
-
.gitignore=> git에 저장되지 않는 리스트 목록 -
node modules=> 해당 폴더는 삭제되어도package.json의 설치 히스토리를 바탕으로 재설치 가능 (굳이 git에 저장할 필요가 없음으로 .gitignore 에 들어감)
-node modules에는 package.json의 모듈뿐만 아니라 그 모듈들이 의존하는 다른 모듈들도 전부 포함되어 있음
보일러 플레이트
-
react 초기 세팅이 완료된 이후의 폴더 세팅 (초기 폴더구조)
-
보일러 플레이트는 각 회사에 따라 다를 수 있음
-
pages= 프론트엔드의 각 페이지 화면들을 모아놓은 폴더 -
next.js 는 프로젝트 생성 시 기본적으로 pages 폴더 안에 api 폴더도 함께 생성됨
*서버에서 api 기능이 사용가능하게 해주는 것으로, url을 이용해 접근 시 바로 호스트 루트가 api 폴더로 매칭되는 기능 (해당 기능 필요로 하지 않는 다면 폴더 삭제 가능)
Package.json
핵심파일, 제품의 설명서와 같은 역할
Import, Export
- React로 다른 폴더의 파일을 내보내고, 불러오기 위해 사용
emotion 적용 예시
[CSS-IN-JS 방식]
- style 폴더 내에 css용 js파일을 만들고
@emotion/styled를 통해 emotion에서 styled를 가져옴- 가져온 style을 특정 태그로 지정하고, 이를 새로 만든 상수에 담음
- 지정한 태그 뒤에는 (``) 백 틱으로 그 안에 적용할 css 속성값 입력
- 변수를 export로 내보냄 (다른 파일에서 가져올 수 있도록)
+a) CSS-IN-JS 방식은 태그에 의미부여 가능해서, 태그만 봐도 결과예상가능
+a) Class Name을 입력하지 않아도 되기에 코드길이 짧아짐
- 본문 js 파일에 각각 지정한 변수들을 import로 꺼내옴
- 꺼내온 변수들은
div,span같은 태그명 대신 그 변수 자체가 html의 각 태그 요소로 사용됨 [주의! 첫 글자는 대문자로 작성]
react 에서의 js파일 기본구조 [JSX]
function( ) { }으로 함수를 만들고, 그 함수 내에 js와 JSX(Html) 구조를 작성한다- 함수 내의
return( )문을 기준으로 위쪽은 javascript, 안 쪽은 JSX 작성 공간- 모든 작성 이후 페이지가 화면에 표출될 수 있도록 함수를
export default해 준다
실제로는 웹브라우저가 html, css, js 만 읽어들일 수 있기 때문에, 최종 코드 실행 시에는 JSX가 HTML로 자동 변환되어 실행 됨
서버프로그램, 포트
-
yarn dev를 실행하면 localhost:3000 으로 서버가 실행 됨 -
이 때 localhost는 내 컴퓨터, 3000은 포트 번호
-
포트 번호는 0~65535번까지 있고, 이 번호는 중복될 수 없음
-따라서, 기존에 3000번으로 서버에 실행되고 있는 프로그램이 있다면 (error - already in use 3000) 해당 에러가 발생*[이 때에는 yarn dev -p 3001(다른포트번호) 로 실행하면 됨]
