내일배움캠프 210923 : TIL (Today I learned)

1. 프로젝트의 회의 및 작업 진행

오늘은 프로젝트가 시작되었다. 아이디어를 협의하고 생각보다 빠르게 내용 정리는 되었다.

그리고 일주일 후 완성이기 때문에, 구현 가능한 기능으로 방향을 잡았다. 그리고 작업을 하며 시간이 되면 기능을 더 늘리는 것으로 하였다. 업무분담은 어떻게 진행하는 게 좋을지는 몰라서 이 부분이 어렵게 느껴진다.

가장 효율적인 업무 분담은 어떻게 하는 게 좋을까?

튜터님의 얘기도 들어보고 이해는 되었지만, 제대로 알려면 프로젝트 진행을 하면서 알게 될 것 같다.

아이디어 회의 내용 [ [S.A] 위링(We're Traveling) ] <- ( 출처: https://heendoong.tistory.com/20 )

1)웹사이트 이용자가 여행 전, 여행 계획 및 예산안을 작성, 공유하고 이용자들의 의견을 얻을 수 있도록 정보 공유를 목적으로 하는 커뮤니티 기능을 가짐

2)웹사이트 이용자가 여행 후, 여행 날짜/여행 사진/제목/여행 주소/여행 내용(예산안, 이동 경로)를 작성하고 이를 열람함으로써 여행 일지를 공유

-> 웹사이트 이용자들 중 여행을 계획하고 있는 사람들에게 정보를 공유해줄 수 있는 커뮤니티 기능을 가짐

상세 기능

기능	METHOD	URL	REQUEST`	RESPONSE
게시글 작성	POST	api/insert	{title:title, location: location, date:date, file: file, content: content}	게시 완료 메시지
게시글 수정	POST	api/update	{title:title, location: location, date:date, file: file, content: content}	{title:title, location: location, date:date, file: file, content: content }, 수정 완료 메시지
게시글 삭제	DELETE	api/delete	query=index	삭제 완료 메시지
게시글 리스트 조회	GET	api/read		게시글 리스트
지도 API	추후 보강 예정

지난주에 git 실습을 하며 로컬 pc와 github 연동은 이해가 되었다.

그러나 협업을 하는 방법에 대해서는 알지 못했기에, 프로젝트를 시작하기 전 git을 다 같이 연동해보기로 하였다.

팀원들과 branch를 나눠보고 pull , push 도 해보고 클론 , 커밋 여러 방법 들을 해보았지만, 어떻게 작동이 되는 건지 아직도 모르겠다 ㅋㅋㅋㅋ git에 대한 지식을 공부해야겠다.

협업에 있어서 필수인데, 이번 기회에 제대로 배워야겠다.

html 화면 구성 작업하고 있는데, CSS는 정말 많은 용어들이 있다.

오늘도 구글링을 하며 용어들을 하나씩 배웠다.

max-width최대 너비를 설정, max-width는 width 속성의 사용값이 자신의 값보다 커지는 걸 방지
max-height 최소 높이를 설정. min-height 는 height 속성의 사용값이 자신의 값보다 작아지는 걸 방지
object-fit <img>나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정, 대체 콘텐츠의 가로세로 비를 유지하면서, 요소 콘텐츠 박스를 가득 채운다. 서로의 가로세로 비가 일치하지 않으면 객체 일부가 잘려나감
block은 한 영역을 차지하는 박스형태을 가지는 성질, 그렇기 때문에 기본적으로 block은 width값이 100%가 된다.
calc()는 괄호 안의 식을 계산한 결과를 속성 값으로 사용하게 해주는 함수
overflow: hidden; 요소의 박스에 내용이 더 길 때 어떻게 보일지 설정, hidden 내용이 넘치면 자른다. 자른 부분은 안보임
relative : 위치를 계산할 때 static의 원래 위치부터 계산
content 속성에서 지정한 문자열 또는 이미지를 넣을 때 사용, after와 꼭 함께 쓰이는 ‘content’는 ‘가짜’ 속성,
float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성. left 왼쪽으로 정렬한다.
CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정
transform:translate() - 지정 요소 X 또는 Y축으로 이동