CODE_PLAN

검색  -> 복사 -> 붙여넣기

필요한것을 빠르게 찾아서 효율적으로 적용해 나가는자 -> 뛰어난 개발자

1. 정확한 솔루션을 검색하기 

2. 찾은 솔루션을 이해하기 

3. 원하는대로 수정해서 적용

1. 키워드 선별

-> how can i find 이런식으로 찾고싶은것이 있을때 이렇게 쓰지말고 단어위주로 작성하면 좀 더 찾기 수월합니다.

ex) implement drag and drop html javascript (how~ 이런거 제외하고 사용)

2. exact match 

-> 에러결과나 원하는내용이 전부들은것은   "  " 붙여서 이용하면 좀 더 찾기 수월합니다.

3. exclude 

-> ex) 문장 -php 를하면 php를 제외하고 나온 검색결과를 보여줍니다. 

4. site:url 

-> 원하는 사이트에서만 검색하고 싶다면 site: (원하는사이트주소) 쓰면 됩니다.

    ex) site:https://stackoverflow.com/ (원하는내용)   / 이런식으로 사용하면 stackoverflow 관련된 내용만 나오게됩니다.

5. 기간설정

->  (내용) after:2020 / before:2018  / 그리고 구글내에서도 기간설정해서 검색 가능합니다.

마지막으로 구글문서에서 좀 더 찾아보면 좋을것 같을것 같아서 해당관련주소입니다. 

https://support.google.com/websearch/answer/134479?hl=en 

참고> 드림코딩 구글링 영상

absolute : 절대적인 

relative : 상대적인 -> 부모를 위치로해서 정해짐 

css의 각각의 엘리먼트들은 position의 기본값을 가지고 있씁니다.(static) 

static은 정적으로 left top button right 와 같은 offset 값을 무시하고 딱 원래 위치해야하는 그곳에 정적으로(static) 위치합니다. 

우선 position : absolute 에대해서 알아보겠습니다.

예를들어 position : absolute 만 되있고 left , right 등이 설정이 안되어 있으면 원래있어야 

left, right 등이 설정되면 브라우저 위치상으로 위치가 설정됩니다.

하지만, 부모에 static 값이 아닌 다른값(relative 등)이 지정되면 여러 부모가있어도 static 값들은 무시하고 static 아닌값이 나오면 그 부모의 위치를 기준으로 offset 값이 설정됩니다.

또한 부모와의 관계성도 끊기기 때문에 자신의 크기는 자신의 컨텐츠 크기만해집니다. 

부모도 자식을 없는샘칩니다.

--

간단히 말하면, absolute는 해당위치가 담겨있는 태그의 맨위 태그에서 위치시작

relative는 현재위치에서 위치시작 

background-color 는 색깔만 지정할 수 있는 반면에,

background는 color 이외의 다른 background 옵션들까지 지정해 줄 수있습니다.

예를들면,  background는 다른 color / image / repeat / attachment / position과 background 옵션들을 추가적으로 부여할 수 있습니다.

Git 은 버전을 편리하게 관리할수있도록 도와주는 도구

타임머신 처럼 작업하고있는 파일들을 원하는 순간으로 다시 돌아갈수있게 도와주는것 

또한 git 은 VCS(Version Control System)중 하나로 VSC 같은것들이 없을때는 일일히 폴더에 이름을 v1.0.0 / v1.01 이렇게 이름을 일일히 수동적으로 붙이는경우가 허다했었습니다.

맨처음 git 설치와 git bash 단계 (환경설정 해줘야하는 부분)

1. git 을 설치합니다.

2. git bash 를 킵니다. 

3. git bash 에서 user.name하고 user.email을 설정해줍니다.

4. git config --list 를 입력해서 user.name, user.email 이 잘 등록되어있는지만 확인하면된다고 합니다.

(여기서 user.email 은 github 가입시 email 을 입력해주면 된다고 합니다.)

vscode 내에서 입력단계

이제 vscode 를 켜서 프로젝트내에서 입력해보겠습니다. 

1. 터미널 master에서 프로젝트를 처음 등록할때에 git init 을 입력해줍니다.(초기화 해주겠다는뜻)

2. git add . 를 입력해서 전체파일을 가져온다고 입력해줍니다.

3. cf) 하나만 올리고싶으면 -> ex) git add index.html 식으로 입력해주면 됩니다.

4. git status 를 입력해줍니다. ( 상태를 알려주는 명령어 입니다. 필수는 아님)

5. git commit  -m "first commit" 을 입력해서 처음파일을 입력해준다는 뜻입니다.

-> git commit 이란 히스토리를 만들어주는것 입니다. -> 이 히스토리를 github로 보내야하는데 프로젝트랑 github의 연결고리를 만들어야합니다.

그래서

6. git remote add orgin (github주소) 를 입력해줍니다. (그다음 git remote -v 로 연결고리 확인 (선택사항))-> 등록된 github주소가 나옵니다.  //하기전에 레포지토리 생성후 해줘야 주소를 받아서 입력할수 있습니다.

7. git push orgin master 로 보내줍니다.

-> 위 사진을 알아보니 

보통 맥 / 리눅스를 쓰는 개발자와 윈도우 쓰는 개발자가 Git으로 협업할 때 발생하는 Whitespace 에러라고 합니다.

유닉스 시스템에서는 한 줄의 끝이 LF(Line Feed)로 이루어지는 반면,

윈도우에서는 줄 하나가 CR(Carriage Return)와 LF(Line Feed), 즉 CRLF로 이루어지는데

Git이 이 둘 중 어느 쪽을 선택할지 혼란이 온거라고 합니다.

해결방법

Git의 core.autocrlf 라는 기능을 켜서 이를 자동 변환 해주도록 하면 됩니다.

- git config --global core.autocrlf true // 시스템 전체에 적용
- git config core.autocrlf ture // 해당 프로젝트에만 적용

이렇게 하게되면 개발자가 git에 코드를 추가했을 때는 CRLF를 LF로 변환해주고,
git의 코드를 개발자가 조회할 때는 LF를 CRLF로 변환해준다고 합니다.

혹은, 이런 변환기능을 사용하지 않고 에러 메세지를 끄고 작업하고 싶다면

이렇게 하여 해당 경고 메세지 기능을 꺼주면 된다고 합니다.

-> git config --global core.safecrlf false

참고> https://git-scm.com/book/en/v2/Customizing-Git-Git-Configuration#Formatting-and-Whitespace

디버깅 : 에러의 원인을 파악하고 수정하는 과정

network 탭 보는법

> 여기서 http status 코드 정의 참조 해보면 좋은자료입니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

또한 payload 탭은 api 호출시 같이 보내는 쿼리값도 확인가능합니다.

Preview탭은 Response 탭을 좀더 쉽게 볼수있게 해주는곳입니다.

-브라우저 디버깅 

코드를 실행하다가 멈춤 

배열 맨앞에 무언가를 추가할때 

unshift 를 사용할수 있습니다.