2023-10-06 본 캠프 3일차 / 21일차 TIL

2023-10-06 본 캠프 3일차 / 21일차 TIL

팀 프로젝트 : 팀소개 페이지 제작

진행사항

- Vercel 웹 배포 완료

Document

* Vercel 웹 배포시 Api 호출이 되지 않는 문제 발생

로컬에서 실행 할 때는 문제가 없지만, 웹 배포시 https 로 배포가 되지만 미세먼지 Api의 url은 http이기 때문에 보안상 문제 발생.

(사전캠프 때 학습한 스파르타코딩클럽 웹 종합 강의의 API 사용)

secure로 배포된 url이 없기 때문에 meta tag를 이용하여 secure를 동기화 시켜도 호출 불가능.

해당 문제는 백엔드 서버 쪽에서 secure를 적용한 url을 배포하는 방법으로 해결가능. 당장은 불가능.

https 웹 내부에서 secure가 적용되지 않은 api를 불러오는 것은 불가능하다는 것을 배웠다.

 

- 세부 UI 개선 적용 (margin, padding 등)

- 시연 영상 제작 완료

 

예정사항

- 반응형 웹 구현

- ReadMe 작성

- 발표 준비

---

내일배움캠프 최원장 튜터님 깃 브랜치 특강

 

- git remote -v : 원격저장소 연결상태 확인

- "흔히 사용하는 origin은 원격저장소 path를 담고 있는 변수"

- git remote add origin_test "repository path" : path 변수 생성
- git remote remove origin_test : path 변수 제거

- 브랜치 이동
* git checkout 브랜치명 : 브랜치 이동
* git checkout -b 새로운브랜치명 : 현재 브랜치를 기준으로 새로운 브랜치를 생성하고 이동

 

---

유데미 강의 : CSS 완벽 가이드 (Flex, Grid & Sass 포함)

- 2개이상의 클래스는 공백으로 구분하며, 태그 내 순서가 아닌 css 파일 내 선언 순서에 따라서 명시도가 달라진다.

 

- id vs class 
* class는 css파일과 강력하게 연결되어있으며, 적극 권장하는 방식이다. 
* id는 css에서도 사용이 가능하지만, js나 html 내부에서도 사용되는 점이 많기 때문에 권장하는 방법이 아니다.

 

- !important : 명시도를 강제로 최상위에 위치시킬 때 사용한다. 사용하게되면 코드가 복잡해지며, 이해도가 떨어진다. 따라서 일반적인 상황에서는 사용을 지양한다.

 

- :not(): not 의사클래스는 () 내부에 입력한 요소를 제외한 모든 요소에 클래스를 지정할 때 사용된다. 다만 대체가 가능하다면 코드의 이해도와 복잡도를 고려하여 사용을 지양하는 것이 좋다.

 

- 브라우저 지원 확인 : 각각의 css 속성과 의사코드가 모든 브라우저에서 동일하게 작동을 하지 않기 때문에 브라우저에서 동작이 가능한지 여부를 확인해야한다.

* Can I Use : http://caniuse.com/, MDN : https://www.developer.mozilla.org/ko/ (각 속성 정보의 마지막 부분)

 

- ouline : 박스 모델에 속하지 않으며, 마진과 border 사이에 위치한다. 테두리의 기능을한다.