이번주 정리

도메인: 내가 만든 사이트를 직접 접속해 볼 수 있게 외부의 서비스 공개할 수 있게하는 .com주소 또는 .shop주소==> 구매필요(마지막주)

포트: 컴퓨터가 서비스 송수신시 효율적으로 관리하기 위해 분리해 사
용하는 것
emotion,styled-component
리엑트에서 사용하는 변수:static
벡엔드 컴퓨터와 통신하기: HTTP라는 경로를 통해 REST-API또는 Graphql-API사용
등록이 끝날때까지 기다리기: async-await
클릭시 다른 페이지로 : static-routing,dynamic-routing
웹브라우저:http, css,js로 사용해 실행
다른분야:다른 프로그램 사용.
한번이라도 홈페이지 만들어 본 개발자들은 js 전부다 어느정도 알고있음.
따라서 이js를 바로 실행 할 수 있게 실행도구 만듬 ==> node.js라고함.
게임, 다른 프로그램 만들 수 있게됨
각각의 기능들 만들어놓은것 올려놓은 사이트가 생기고 다운받아 사용할 수 있게됨. js에서는 npmjs.com. ==>노드 패키지(=포장) 매니저
폴더에 설치해야할 기능들을 바로 여기서 받아옴. 그것을 다운로드 받게 해주는 도구가 npm.
node.js다운받으면 자동설치됨.

다만 페이스북에서 너무 느리다고 만든것이 yarn이라는 도구.

npm을 이용해 yarn 설치(좀 더 빠른 npm이라고 볼 수 있음)
npm istall -g yarn
==> 여기서 -g라는 것은 글로벌. 즉, 내컴퓨터 전체에 설치하겠다는 의미.

명령어연습==.CLI라고함.(커멘드 라인 인터페이스) ====>>##터미널이용방법!!!
인터페이스:마주보는 기능.
커멘드: 명령어

ls==> 현위치 목록.
ls -al==>숨긴파일까지 보여줌.
pwd ==> 현 위치(작업중인 폴더=디렉토리)가 어딘지 보여줌.
mkdir 만들폴더명 ==> 현위치에 폴더생성.(메이크 디렉토리)
rm -r 지울폴더명 또는 rm -rf 폴더명 ==> 폴더를 순환하면서 안의 파일까지 다 지워줘, 폴더를 순환하면서 안쪽까지강제로 지워줘.

cd .. 또는 cd ../ ==> 현폴더 밖으로 이동(체인지 디렉토리)
../는 한칸 위로 올라가라는 의미
cd 이동할 폴더명 ==> 이동할 폴더로 이동
cp -R 복사할폴더명 새폴더이름 ==> 폴더복사하기. 안에있는 폴더와 파일들을 몽땅 복사해야가능. 따라서 리커시브(-R)적어줌.

크롬브라우저로 node.js설치.
프로그램의 경우 최신은 버그가 있을 수 있으니 LTS사용.(안정적인버전으로 사용)
LTS? ==> 롱텀 서포트
설치 후 npm --version 또는 npm -v
npm install -g yarn
yarn -v 또는 yarn --version 설치 되었다면 버전확인가능

설치할 프로그램들을 다 설치하게되면 초기 폴더구조를 보일러플레이트라고함
폴더내에 이미 여러폴더가 만들어져있음. 이것저것 미리 다운받았기에 생겨남.

초기 폴더구조: 보일러 플레이트 ==> 이미 이미 만들어놓은 폴더구조에서 조금씩 수정하여사용.
보일러 프레이트는 회사마다 다를 수 있다.
pages폴더의 파일하나하나가 각각의 페이지들.각 페이지를 코딩하는 폴더.
public폴더는 사진, 아이콘, 폰트 넣는 폴더, 폴더 이름 기본적으로 못바꿈.과정이 매우 복잡하니 건드리지 말것.
readme.md ==> 페이지, 사이트 소개서

리엑트에서는 html, js 합쳐진형태로 js를 만듬. 심지어 실무 css도 js에 적는 것으로 변경됨.
리엑트는 js가 핵심.
js 불러오기.
import 방식으로 불러옴.
불러오고싶은것을 골라서. import하고 중괄호 안에 적어줌.
내보낼 것 앞에는 export.
css 파일도 import로 불러옴.
다만, 우리는 실무의 방법으로 js만 사용.css는 css-in-js방식.변수로 만들어사용. css가 첨가된 html태그가 됨.시간절약, css코드짧아짐.

리엑트는 package.json을 확인해 17.0.2버전을 사용하기.
next는 12.1.0,
react-dom은 17.0.2
여기는 단지 설치했던 목록에 불과, 실제 설치 폴더는 노드모듈즈에 들어가있음.
따라서 package.json 수정했으면 노드모듈즈를 지우고 package.json가 있는 곳에서 yarn install
그러면 package.json의 내역을 검사하여 없는것 설치하면서 노드모듈즈 다시생성됨.
페이지에서의 function ==> 한페이지를 만드는 기능이라고 여기서는 ㅇ그렇게 이해
페이지 하나하나 만들 때 마다 js로 만들기.
function의 이름 ==> 그 페이지의 이름정도..
실행하여 눈으로보기: package.json에 스크립트부분에 사용설명서 있음. 그 앞에 각각yarn이라는 명령어 붙이면 되고, yarn dev하여 실행시키면 라이브서버처럼 열림.

retrun 안쪽이 html. 조금 다른 html 리엑트 전용 html로 JSX라고 함.
각각페이지 만들기.
index.js로 만들어야 로컬주소(로컬호스트)로 바로 이동가능. 따라서 다른페이지를 만들려면 폴더를 만들고 그 안에 index.js를 넣음. 각각 그렇게만들기.그 폴더안의 페이지를 열기를 원하는 경우, 로컬호스트 주소 뒤에 /폴더명이라고 적어 접속.

css-in-js 도구: styled-components, emotion도구 둘중하나 사용. 믄 차이 없음.
수업중에는 emotion사용.
간결한코드 사용가능, 태그에 이름을 붙여 알아보기 편함, 코드의 재사용성 증가.
따라서 시간을 아껴줄 수 있기에 실무에서는 이 방식을 많이 사용.
import 경로 입력시 .js는 생략가능

리엑트로 만든 이유:npm-trands
큰 서비스를 만들때 잘게쪼개 하나씩 만든것을 조립하기위해. ===> 훨씬 편함.
Component: 부품들.
리엑트에서 쓰는 변수 :state

리엑트 배워야하는 이유: 각각의 부품들을 만들어 담아놓고 필요한 것들을 가져와 붙여넣을 수 있다(컴포넌트 방식). 따라서 시간절약된다. 뷰, 리엑트, 앵귤러 중 다운로드수 많고, 따라서 질문하기 쉽고, 많이들 사용하니 취업에 유리하다.
리엑트 기능 등을 이용해 모바일 서비스(크로스 플랩폼: 안드로이드와 ios마켓에도 둘다 올릴 수 있음.) 만들 수 있고, pc앱만들 수도 있음.

컴포넌트!(Component): 이미 만들어 놓은 재사용가능한 부품들.
버튼, 검색기능 등 쪼개서 사용가능.
한가지가지고 여러군데 사용하는 것이니 원본만 수정하면 편리하게 바꿀 수 있음.===> ui 만 재사용.
하나의 버튼 등을 컴포넌트로 만들어 사용할 수도 있고, 페이지 하나를 하나의 컴포넌트로 만들 수 있음.
+넌트 만들때는 function 사용
function은 기능을 위한 함수, 컴포넌트를 위함 함수. 이 두가지로 사용됨
첨엔 class형 컴포넌트만 있었음.

함수형 컴포넌트는 화살표함수로 표현가능.

함수안에 class에서 사용하는 기능들을 사용할 수 있음. 리엑트에서 제공.
hooks라고함.(use로시작하는 애들) .
import로 가져와서 사용.(리엑트에서만 사용가능)
그래서 함수도 컴포넌트로도 사용가능하게 되었다.
이전에 사용했던 것은 class형으로 만들어져 있을 가능성이있기에 둘다 배워둬야함!

Hook中useState
State만들어주는 도구.
==> 컴포넌트(부품)전용 변수.여기서 사용하는 변수가 바로 state.
let은 재할당가능,const는 재할당 불가.

const [state, setState] = useState(초기값)
변수명을 state에, setState를 사용해 변수를 바꾼다는 말(재할당)
setState(변경할 값)

state사용으로
document.getElementById()사용 안해도됨.
document는 문서 라는 뜻. 문서에서 Id의 태그를 가져와줘.
export default ==> 우리가 화면서 볼수있게 함.
handle~ 클릭이나, 체인지 등에넣을 함수 이름 지을 때 사용하면 좋음.
또는 onClick~ ,onChange~

입력한 값을 포장해 백앤드로 ==> 포장? state로 포장함.그래서 버튼을 누르면 state에 저장된 값을 API로 보냄.
API==?각각의 요소들을 검증하고 저장하는 용도의 함수라고 이해하면됨.

함수를 영결하는 것: 바인딩.
on으로 시작되는 것에 연결된 함수들에은 함수명(event)가 들어옴.
===> 이벤트핸들러함수 라고 함.
소괄호 안에 event써도 되고 안써도 됨.

거짓을 나타내는 값:NaN, undifined, 0, "",false,......

통신.
데이터 전송방법 중 http 사용.http로 주고받을 관련 프로그램 설치해 사용.
tp: 트렌스퍼(전송) 프로토콜(데이터주고받는 길 정도로 해석)
초기검증 후 벡엔드로 가서 철저한 검증 후 데이터 베이스로.
혹시나 정전등의 일이 일어날 경우를 대비해 여러군데에 같은 정보들 저장함.(얼마전 카카오나 네이버의 문제가 해결된 이유도 이런식으로 데이터가 저장되어있었기 때문)

프론트에서 데이터들을 state로 포장해 보냄 ===> 등록해달라는 등의 요청을 벡엔드로 보냄 ===> 벡엔드에서 응답이 옴. 모든 메세지를 컴퓨터가 알아볼 수 있게 상태코드로... ==> 2..로 시작하면 성공, 4..로 시작하면 프론트엔드 실수(오류), 5..로 시작하면 벡엔드 실수(오류).

에러발생시 콘솔창의 network확인하기.
variables(=$)안에는 createBoard등, 위에서 만들어준 변수를 적음.
동적으로 바꾸려면 state에담음.(state사용)
객체에서 키와 값이 같으면 키만적음(shorthand-property)

라우팅: 페이지 이동.

기존 ==>iframe이용해 안에 알맹이를 바꿈
라우터: 페이지 이동시켜주는 도구. useRouter사용.(use로 시작하니 hooks중 하나)
const router =useRouter;
라우터는 "next/router"에서 import
next는 리엑트의 업그래이드 버전, 그리고 반드시 리엑트 안에서 사용할것.
router.하면 많은 사용가능한것들 나옴. 그 중에

1) 페이지 이동, 2) 현재주소 알 수있음
3)즉 주소 관련 기능들을 다 가지고 있다고 보면됨.

router.push("이동할 페이지")
useMutation ==>데이터 등록, ===>useMutation, useState는 대괄호사용.

const [함수명] = useState()
const [state,setState] = useState()

useQuery ==>데이터 가져오기 ===>이때는 중괄호 사용

const {data} = useQuery (가져오는 변수명,골라서 가져올 variables)==>import는 apollo/client에서

fetchBoard undifined ==>
실행되면 한줄한줄실행됨. 아무리빨라도 어느정도 시간걸림. 기다리지 않고 내려가 데이터 안나옴.
따라서!
동적으로 작동하게 해야하나 await하면 기다리면서 아무것도 안나오니 사용하지 않고,

조건부연산자 사용.비동기 식으로 작동됨.

처음에는 undifined, 그리고 data나오면 화면에 보여줌.

{data && data.fetchBoard.writer} ==>data가 있으면 오른쪽꺼, 없으면 앞에꺼. 즉, 데이터가 있을때 해줘. 라고 바꿈.
&&대신 삼항연산자를 사용하기도 하고 {data ? data.fetchBoard.writer: " loadig..."} ==> data가 true면 앞쪽을 false면 뒤에를 보여줘.
{data?.fetchBoard.writer} ==>주로 사용하는 방식. 옵셔널 체이닝 이라고 불림. &&연산자 사용이랑 같은 식.

직접 폴더를 따로따로 만드는것: 정적 라운팅 ==> 비효율적
폴더를 대괄호로 만들어 그 안의 값이 주소가 될 수 있게(그 폴더의 index.js가 로 이동) 따라서 주소가 동적으로 변화하게:동적 라운팅.
[변수명] ==> 변수 꺼내기.router이용.
import {useRouter} = from 'next/router'
const router = useRouter()

주소에 있는 값을 (주소로할 값을)가지고 오는 기능도 함.
localhost:3000/boards/[aaa]
router.query = {aaa:1}
console.log(router)를치면 router의 query부분이 변수에 들어간 것이 담긴것을 볼 수 있음.
따라서 localhost:3000/boards/1 일경우 router.query.aaa를 콘솔로 찍으면 1이 나올것. 주소이기에 문자 형태. 따라서 만약 숫자형태에서는 Number로 감싸기.
대괄호 안에 임의의 폴더나 주소가 들어가게됨. 변수로 작용하므로==> 하나의 파일 안에서 화면을 동적으로 바꿔보여줌.

문자열과 변수 하나로 합치기. ==>템프릿 리터럴

벡틱으로 쓰고 그 안에 문자열 그냥넣고 변수는 ${}이 안쪽에.

아무리 코드를 잘자도 실패할 수 있으니 try안에 실행문들을 넣고
실패시 catch로 잡고catch(error)로 벡엔드에서 에러 메세지 보내는데, try의 하나라도 실패하면 바로 아랫줄 모두무시하고 error.message가 나옴. 경고창이나 console.log()로 확인할 수 있게 함.

JSON:자바스크립트의 객체 표기법
주고받는 데이터는 객체다.
객체 표기법? http는 텍스트 또는 html을 주고받음. 따라서 객체 주고받을 수 없음. 텍스트로 주고받아야하는데 따라서 객체 자체를 주고받을 수 없음. 문자열 안에 객체를 담음. 그래서 객체는 아닌 객체를 표기한 방법이라고 해서 객체표기법 이라고 함 객체를 보낼때는 json형태로, html을 보낼때는 html 형태가됨.

VSCode 단축키:

각 태그에 커멘드 클릭(맥), 컨트롤 클릭(우분투) ==>
1.그 태그의 스타일 적용 부분이 바로 보여짐,
2.바로 그 보여진곳에서 수정하고 커멘드+s 또는 컨트롤 + s 로 저장가능,
3.그리고 그 열린창의 제목부분(파일위치들로 적힌) 클릭하면 그 파일로 이동가능,
4. 들어오기전 커서있던 부분으로 나가기 맥의경우 컨트롤 하고 '-', 우분투는 컨트롤 + Alt+ '-'
5. 나갔다가 다시들어오기 : 둘다 동일하게 컨트롤 + shift + '-'
6.켜서 여러개 동시에 움직이게: 클릭 + 옵션+클릭(맥), 우분투는 클릭+ alt+ 클릭.
7.커멘드 +방향키, 컨트롤 방향키(맥, 우분투)커서가 끝에서 끝으로 이동
(맥)커멘드 + shift, (우분투)컨트롤 +shift하면 커서있는 전체선택가능.
8.커멘드+b(맥) 또는 컨트롤+b(우분투) ==> 메뉴닫기

작업중 파일 편집전 상태로 돌리기: 편집전에 파일 복사해두기.
협업시 동시에 같은 부분 수정, 삭제하면 충돌, 삭제 일어날 수 있음. 따라서 git을 이용해 협업.
git 연결된 레파지토리 주소보기 :git remote -v

다른 사람의 파일 클론하기

git clone 다른사람깃허브주소(복사해올) ==> 엔터
폴더안의 파일이 있는것들만 깃에 저장되어있음.
상세내영에있는 (package.json)것들은 설치가 안된채로 다운받아짐(node_modules라는 실재 다운받은것들 있는 파일이 없음. .gitignore에 깃허브 자장시 무시되는 파일이 적히는데 노드모듈즈도 적혀있음. 따라서 별도로 다시 yarn install로 설치해야함.)

이후 받아놓은 코드의 업데이트(수정)본 다운받는 법 ==> git pull

로컬 저장소: 내컴퓨터
원격 저장소: 깃허브

git log:깃에 커밋한 커밋기록 볼 수 있음.
git brench ==>현재 폴더명 master가 뜸.
.git폴더가 있는 위치에서 git pull origin master하면 master라는 폴더에 추가본 다운받기 가능.
만약 clone받은 파일을 수정한 경우 pull 오류.
둘의 충돌로 vs에서 할수없다고 에러.
1. 임시저장공간에 맡기기: stash라고 불리는 임시저장공간.
git stash 엔터.
그럼 수정한것들 사라짐. stash라는 공간에 임시저장된것.
그다음 pull하면 추가업뎃 가능.
숨겨놓은 파일 목록보기
git stash list엔ㅌ터.
각각 stach@(번호)가 있음.
꺼내오려면 git stash pop stash@(번호).

2. 또는 다른 폴더를 만들어 이동
   git chekout -b 만들폴더명 --> 체크아웃은 이동한다는 의미 , -b는 브랜치, 즉, 브랜치를 만들어(새폴더를 하나 만들어) 이동한다.
   git brench하면 현재폴더 나옴.
   git status하면 현재 저장할 수 있는 파일들 나옴.
   git switch 바꿀 브렌치명 하면 만들어져있는 브렌치 중에서 원하는 브랜치로 바꿀 수 있음.
   git add .하면 모든 파일을 임시 저장공간으로 이동.(staging 상태라고 함)
   (stash와는 다름)
   git commit -m "커밋메세지" ==> 저장확정

저장한 후마스터(메인)브렌치로 이동 ==>git checkout master

commit은 시간 순서대로 기록됨.