2021.07.07

shong1332·2021년 7월 7일
0

codecamp

목록 보기
2/9

1.git pull 의 순서

1)git branch

2) git pull origin master

아무리 git pull origin master 를 실행해도 git pull이 안되는 경우가 있는데 이 경우엔 소스코드를 수정하여 change에 변경된 파일이 있을때 git pull이 실행되지 않는다고 하셨다.

이러한 경우엔 change에 변동사항 건수를 0건을 만들어 주면 된다.
1. 수동적으로 수정된부분 확인후 삭제 하는 방법과
2. 아예 모조리 commit 시켜서 changes에 저장된 변경사항을 넘기는 방법이다.
3. 그리고 git stash(임시공간)을 활용하는 방법인데 이경우 임시저장 시켜놓고 수동으로 삭제 시킨다음 git desh pop 명령어를 통해 다시 불러올 수도 있다.

2. yarn dev가 실행되지 않는경우

1) npm install

힘들게 받아온 깃 파일에 정작 npm이 없을경우 실행되지 않을 가능성이 있다.
이경우 npm install 명령어를 통해 npm을 설치해주면 빠르게 해결이 가능하다.

2) yarn dev -p 3001

아니면 이미 포트넘버가 실행중인 경우에도 에러메시지가 뜰 수 있는데 이 경우 포트 넘버를 바꿔줌으로서 실행하는 방법도 있다.
이경우 두개의 포트를 사용하고 싶을 경우에도 활용이 가능하다.
앞뒤가 바뀌었나?
두개의 포트를 사용하고 싶을때 사용하는 명령어이지만 지금당장 급하게 yarn dev 실행하여야 하는경우 사용 할 수도 있다.

3. 오늘 배울 내용

1) 네트워크 통신에 관련


어제까진 변경된 어떤 데이터를 state에 담아 놓는 방법을 배웠지만 오늘은 api를 통해 데이터베이스에 저장하는 방법을 배웠다.
데이터는 파일, 간단한 메일, 텍스트의 형태로 주고 받을 수 있는데 오늘 우리는 http를 통해 텍스트를 주고 받고자 한다.
http를 api를통해 데이터 베이스로 보내는 방식엔 Rset 방식과 graphql 방식이 있다.

(1) Rest-API 과 Graphql-API 의 차이

첫째, rset는 요청한 데이터를 주는데로 받아야 하지만 graphql 의 경우 필요한 데이터만 선택적으로 가지고 올 수가 있다.

rest는 선택적으로 필요한 부분만 가져 올 수 없고 불필요한 데이터 까지 받아와야 하는것이다.
이 차이점 때문에 페이스북과 같이 트래픽이 심한 경우 graphql 를 사용하게 된다.
수십억의 사람들이 주고 받는 데이터는 가벼울 수록 좋기 마련이다.

둘째, 함수 이름의 차이

홈페이지 주소처럼 생긴 rest와 달리 graphql의 경우 일반적인 함수처럼 생겼다.

(2) Rest 를 배워야 하는 이유

최근들어 graphql을 사용하는 회사가 늘어나는 추세이고 외국에선 이미 상용화 되어있다고 하는데 아직 우리나라에선 도입되는 과정중에 있다고 한다.
하여 아직 rest 방식을 사용하는 회사나 팀을 만날 수도 있고, 카카오나 네이버같은 대형 플래폼의 api는 범용성이 좋은 rest 방식으로 주기 때문에 카카오로 로그인하기 기능을 사용하고 싶다면 rest 기능을 필이 알아 놔야 겠다.

(3) API 어떤 형태로 받아오게 되는가

객체를 문자열 형태로 보내주는데 이때 배열에 싸여서 오는경우도 있다.
우리는 이 형태를 json, 즉 자바스크립트 객체 표기법이라고 하는데 한마디로 api 를 json형태로 받아오게 된다.

(4) 실습

rest의 경우 포스트맨I(postman)을 설치함으로서 연습해 볼 수 있고 스웨거(swagger)와 같은 api 설명서를 참고 하여 실습 하였다.
graphql는 플레이그라운드(playground)를 통해 실슴 해보았는데 graphql의 경우 홈페이지를 통해 설명과 연습을 통합적으로 운영 한다고 한다.

배열과 객체를 잘 다뤄야 겠다..

2) CRUD

생성, 수정, 삭제, 조회를 줄여 crud라고 하는데 각각 옵션명이 있다.

rest는 이 옵션명을 4가지로 구분하여 사용중이고 grapgql같은 경우 2가지로 구분하여 사용한다.
생성,수정,삭제가 mutation으로 묶이는 이유는 조회의 경우 데이터 베이스 내의 데이터의 변경을 가하지만 get/quert의 경우 데이터의 내용을 변경하지 않기 때문이다.

4. 마구 정리하는 어제의 복습

1) react 컴포넌트

  1. 함수형 컴포넌트는 일반 함수처럼 생겼지만 return해서 html을 쓰는 순간 함수 컴포넌트가 된다.


2. return에 적히는 html은 jsx로서 html처럼 생겼지만 사실은 자바스크립트의 확장판이다.
하여 우리는 .js 파일에 html을 활용 할 수 있다.

  1. 리엑트에서는 div사이에 바로 변수를 삽입 가능하다.

  2. 화면 부분과 데이터 관리 부분이 나누어져있다.
    1) 즉 데이터는 변경되었지만 화면에는 표시되지 않는다.
    2) 이를 보여주기 위해 div에 id를 지정해주고

document.getElementById('aaa').innerText

상기와 같은 코드를 사용하여 id를 찾고 그 안에 innertext를 변경하는 방식으로 화면의 데이터를 바꿔 주었다.

  1. state의 장점
    1) 변수가 변한이후 컴포넌트를 다시 그려줌
    2) id지정과 dom작업이 필요 없어짐
  2. count를 직접 바꿀 수는 없지만 setCount를 통해 바뀜
    1) setCount
    -왼쪽 변수를 바꾼다
    -rerender
    -array로서 순서가 중요하지 이름이 중요하지 않다.
    -이름은 막 지정해도 좋으나 업계의 룰을 따르자.

2. 이미지 넣는방법

1.img태그 사용
	1) 이미지를 퍼블릭 파일에 저장
	2) 이미지 src에 파일 경로 입력
    	2-1)퍼블릭이라는 단어는 쓰지 않아도 자동적으로 찾아주기 때문에 적지 않음
2. div태그 사용
	1)이미지는 자체적으로 100px 씩 줄여 칸에 맞추지만 
    	2) 백그라운드 이미지는 100px만큼 픽셀이 맞춤
    	3) background-size: 100%; 을 입력하면 딱 들어 맞음
    


3. 활용법
1) 배경이 있고 그 위에 글을 쓸땐 백그라운드를 사용
2) 그냥 이미지가 주인공이면 이미지 사용
3) 백그라운드 이미지는 인쇄시 출력 되지 않음.

  1. 이미지 겹치기
    1) 아래 배경을 relative 상단 그림을 absolute로 지정
    2) 마진을 통해 상단 그림의 위치를 조정 해준다.

마치며..

블로그를 쓰다 보니 이게 참 가독성이 떨어진다는 생각이다.
내가 나를 돌아보기엔 충분히 정성이 가득이지만 남들이 볼때 도움이 되지 않을것 같아 걱정이다.

특히 tap되는 부분이 어떤 메커니즘으로 들어갔다 나오는지 당최 알 수가 없다....

쓰다보면 형식도 갖춰지고 가독성도 올라가는 좋은 블로그가 되겠지...
오늘도 참 열심히였다.

profile
prototype

0개의 댓글