몽땅뚝딱 개발자

REST API의 HTTP methods는 GET, POST, DELETE, PUT 등 많은 종류가 있다. 예전 프로젝트에서는 이들의 차이점을 모른 채 GET, POST만 사용했었다. 잠시 잊고 있던 찰나, 오늘 유튜브 알고리즘에 유튜버 노마드 코더님의 영상이 추천됐다. 그리고 워스트 케이스에 내가 있어 충격을 받았고 다른 강의를 듣기 전에 미리 정리하고자 한다. 나는 지금까지 API를 구성하며, 이런식으로 이름 지었다. - getUserInfo: 유저의 정보를 가져오는 API - selectLessonInfo: 현재 레슨정보를 가져오는 API - setUserInfo: 유저의 정보를 수정하는 API - updateCoaching: 코칭 정보를 수정하는 API 그 당시엔 이런 네이밍이 직관적이라 생각했다..

◽ 경로 관련 cd $HOME ◽ txt 관련 :q 그만두기 :q! 저장하지 않고 종료 :wq 작성 후 종료 :wq! 강제 작성 후 종료 (읽기 권한만 있어도 작성가능) :x 쓰기 및 종료 :exit 쓰기 및 종료 :qa 모두 종료 :cq 저장하지 않고 종료 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

프로젝트를 GCP 서버에 배포하기 전에 로컬단위에서 돌아가는지 테스트해보았다. npm에서 제공하는 serve 패키지를 사용한다. ◽ serve 패키지 설치하기 npm install serve ◽ 실행하기 npm run build 명령어를 실행하면, 따로 output 폴더를 지정하지않는 이상 dist 폴더에 빌드결과물이 생성된다. 나의 경우 따로 빌드 경로를 지정했었기 때문에 다른 폴더였다. 아래 명령어를 실행하면 웹 서버에서 확인할 수 있다. serve -s 폴더이름 ex) serve -s dist 참고 및 출처 serve Static file serving and directory listing www.npmjs.com 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있..

◽ background-position - 첫번째 인자는 x축(가로), 두번째 인자는 y축(세로)이다. - 값의 형태는 %, px, cm 등 단위나 top, bottom, left, right의 방향으로도 설정할 수 있다. - 아무 값도 적지않으면 center가 기본값이다. background-position: 30% 50%; background-position: center 200px; 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 이미지의 사이즈가 커서 영역이 밀리는 것으로, 이미지 사이즈를 100%로 조정해줘야 한다. .mainimg_m > img { width: 100%; } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 반응형으로 만들 때 필요한 태그이다. 사이즈는 아래와 같이 맞추면 된다. /* PC */ @media (min-width: 1024px) { ... css 작성 } /* 태블릿/아이패드 */ @media (min-width: 768px) and {max-width: 1023px} { ... css 작성 } /* 모바일 */ @media (max-width: 767px) { ... css 작성 } /* 세로모니터 판별 */ @media (orientation: portrait) { } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 텍스트와 이미지가 같이 있는 경우엔 text-align: center;로 중간정렬을 할 수 있다. - 이미지만 있는 경우엔 text-align 속성이 적용되지 않는다. 그럴 땐 margin: 0 auto;를 사용하여 중간정렬을 하자. - 코드가 반복되는 경우에는 줄여서 쓸 수 있도록 한다. 예를 들어, #aabbcc일 경우 #abc로 줄여쓰는 것이 좋다. color: #fff; // 하얀색 color: #000; // 검정색 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 메뉴에서 구분선을 넣을때는 img 태그와 span 태그 모두 사용해도 되지만 좀 더 깔끔한 구현을 위해서는 :before를 사용한다. - 반대되는 개념인 :after도 있다. - display와 content는 꼭 넣어줘야하는 요소이다. - content 항목: 글자를 넣는다. (여기서는 선만 넣기때문에 영역만 지정해주는 용도로 공백이다.) .util > li:before { display: inline-block; content: ""; width: 1px; height: 10px; background-color: #e1e1e1; margin-right: 10px; } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- z-index이 같은 값일 경우 HTML상 아래인 것이 먼저 적용된다. 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 부모는 relative, 자식은 absolute로 설정한다. 박스위치 선정 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.