나만의 아고라 스테이츠 만들기
드디어 Section1 의 엔딩 솔로프로젝트
일명 1학년에서 2학년으로 올라가는 총정리 같은 프로젝트였다.
Bare Minimum
디스커션 나열 기능
- script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다.
➡️ 시작부터 안 풀렸다. 사실 과제에 HTML 이랑 자바스크립트에 렌더링 함수까지 적혀있었는데, 더미데이타에서 자료를 받아와서 HTML 페이지에 구현하는 방법을 스스로 그려내질 못했다.
결국 실마리는 다른 분들이 한 걸 토대로 뼈대를 만들어서 꾸역꾸역 나머지도 채워내는 방식으로 완성했다.
이 때 img 항목을 삽입할 때에 alt를 항상 함께 넣어줘야 한다.
alt: 이미지의 대체 텍스트 설명, 즉 이미지가 보이지 않는 상황일 때 설명이라도 띄우기 위함 (국룰로 이해하면 됨 )
CSS
- 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다.
- style.css를 수정하여 멋지고 아름답게 나만의 아고라 스테이츠를 꾸밉니다.
- colorhunt, dribbble에서 적절한 색 조합, 디자인을 참고합니다.
➡️ display: flex;, justify-content: space-between 등등 flexbox 개념 공부를 실제로 적용해볼 수 있는 순간이었다. CSS는 적용 족족 눈에 보이는 게 편하긴 했다.
디스커션 추가 기능
- script.js를 수정하여 디스커션 추가 기능을 구현합니다.
- section.form__container 요소에 새로운 아고라 스테이츠 질문을 추가할 수 있는 입력 폼을 제작합니다. 형식은 자유입니다.
- 아이디, 본문을 입력하고 버튼을 누르면 실제 화면에 디스커션이 추가되어야 합니다.
- agoraStatesDiscussions 배열에 추가한 데이터가 실제 쌓여야 합니다.
➡️ 이게 가장 시간이 오래걸린 작업이었다. EventListener에 대한 개념을 몰랐어서... 구글링해서 봤는데도 아직 개념이해가 부족하다.
이 때 주의할 점. event.preventDefault()
이벤트가 발생하면, 브라우저에서 기본 동작(예를 들면 새로고침)을 즉시 수행하게 되는 데 이를 막기위해 적용해야 한다.
Github Page 배포
- Github Page 배포 기능을 이용하여 누구나 볼 수 있게 배포합니다.
➡️ git push 를 했는데 자꾸 origin이 코드스테이츠 remote repository로 연결되어서 origin을 내 repository로 옮기는 걸 구글링해서 적용했다.
git remote remove origin로 지우고
git remote add origin https://github.com/계정/리포지토리로 다시 세팅
코드스테이츠 fe-sprint-my-agora-states 리포지토리로 Pull Request
- 나만의 아고라 스테이츠를 코드스테이츠 깃허브에 Pull request합니다.
- 주어진 Pull request 형식에 따라주세요.
😭오늘의 속마음
advanced도 구현하고 싶은데...
vscode를 너무 오래 들여다 봐서 그런지 지쳐서...
한 템포 쉬다가 다시 구현해봐야겠다.
그래도 첫 프로젝트니까, 그럴싸하게 만들어보고싶다.
아, 혼자 막상 할 때는 진짜 스스로 바보같고
막막해서 아무것도 못했는데
신기하게도 세션을 들으니 1시간만에 bare minimum을
이해가 쏙쏙되게 해주시니... 신기할 따름...
나, 돈 받으면서 일 할 수 있겠지...?
