[FE_Bootcamp] 18일차_Solo Project(1)

목, 금 이틀동안 '나만의 아고라 스테이츠 만들기'라는 솔로 프로젝트를 진행하였다. 

목요일 오후부터 금요일 오후까지, 약 27시간 정도가 주어졌고, 몇몇 목표를 정해 해당 목표들을 차근차근 완료해 나가는 식으로 페이지를 완성시켜 나갔다.

'아고라 스테이츠'는 내가 듣는 코드스테이츠의 질문 게시판으로, 질문을 올리면 강사분들이나 학생들이 함께 답을 찾아 나가는 곳인데, 현재는 디스코드 채널로 운영되고 있다.

이 아고라 스테이츠를 웹 페이지로 만들어 보는 것이 첫번째 솔로 프로젝트였다.

 

나는 이미 페이지를 완성한 뒤 블로그를 작성하는 것이기 때문에, 목금 이틀동안 프로젝트를 진행하고, 진행 과정에서 어려웠거나 남들이 알고 갔으면 좋을듯 한 부분을 위주로 작성할 듯 하다. 

이틀을 꼬박 투자한 프로젝트여서 내용도 많고, 쓸 말도 많아서 아마 주말 내내 적어야 하지 않을까 하하,..,.,

 

코드스테이츠의 프로젝트 코드는 아마 수강생들에게만 공개되어 있어서,..,.,

 

1. HTML 요소를 웹 페이지에 붙이기

아고라 스테이츠는 '질문 게시판'답게 여러 정보가 필요하다.

우선 질문자의 이름(아이디), 질문 내용, 질문 링크, 작성 시각, 응답 여부 등등,.,..,

완벽한 웹 페이지 제작을 위해서는 실제 데이터들을 크롤링 해와야겠지만,.,.아직 우리는 그럴 수준이 되지 못하기에 부트캠프 측에서 위 정보들이 담긴 객체들의 배열을 제공해 주었다. 

 

실제 데이터 객체들이 들어있는 배열

 

우리는 이 객체들에 담긴 정보를 이용하여, 질문들을 페이지에 이어붙이려 한다. 

하지만 웹 페이지는 생각보다 복잡한 구조를 가지고 있기에, 흙바닥에 포스트잇 붙이듯 쉽게 붙지 않는다.

'붙이는 것이라면, 지난번에 배운 append' 쓰면 되는거 아닌가? 라고 생각 할 수도 있겠지만,..,,.

반은 맞고 반은 틀린 말이다. append를 사용하는 것은 맞으나 그 append를 언제, 어떻게, 어디다 사용해야 하는지를 알기가 쉽지 않다. 

마치 풀은 가지고 있지만, 종이를 어디에 붙여야 되는지 모르는 상황.

 

먼저 append의 작동 원리부터 알아보자.

append는 한 요소를 다른 요소의 끝부분에 삽입하는 메서드이다. 

위 한 문장으로 append의 사용법이 전부 나왔다. 어라??

"한 요소를" "다른 요소의" "끝부분에" "삽입"

그렇다면 준비물은 '삽입할 요소'와 '요소를 삽입할 다른 요소', 그리고 append 메서드 뿐이다.

 

append의 기본 과정

 

요소를 준비해보자.

우리는 며칠 전에 querySelector라는 것을 배웠다.(편하게 쿼리셀렉터라고 하겠다)

쿼리셀렉터란는 태그명, id, 클래스명 등으로 요소를 가져올 수 있게 하는 메서드였다.

이걸 알면 식은 죽 먹기. 쿼리셀렉터로 필요한 요소들을 가져온다.

 

하지만 만약 가져올 요소가 현재는 존재하지 않고, 그때그때 만들어야 하는 상황이라면,..,,.?

 

그때그때 만든다. 만든다. 요소를 만드는 메서드,..,.,CRUD의,..,,.

그렇다. 바로 Create. 

요소는 createElement로 새롭게 생성할 수 있었다. 

createElement로 새로운 요소를 생성한 뒤, 이 요소를 기존 요소에 append 해주면 된다. 

 

createElement 이후 append

 

지금까지의 과정을 코드로 한번 알아보자

 

See the Pen Untitled by KingGyeongHoo (@KingGyeongHoo) on CodePen.

 

기존 div인 container를 가져왔고, 새로운 div인 box를 만들어 append 했으니, 원래 있던 하나의 box 옆에 새로운 box가 붙어야 하는데,.,..,,.!

어째서인지 box는 하나만 존재하고 있다!!! 

잃어버린 박스의 행방을 찾습니다!!!

 

box를 잃어버리진 않았다!!!

 

불행인지 다행인지, HTML에는 만든 박스가 제대로 append 되어 있다. 

그렇다면, 대체 왜 화면에는 박스가 안뜨는 것인가!

 

여기서 우리는 CSS에 주목해 볼 필요가 있다.

 

.container{
    border:red solid 1px;
    display: flex;
    flex-direction: row;
    width:500px;
    height:150px;
    padding:20px;
    justify-content: center;
    align-items: center;
}

.box{
    border:blue solid 1px;
    width:100px;
    height:100px;
    margin: 10px;
}

 

container 클래스와, box 클래스의 스타일이다.

container는 빨간 테두리, box는 파란 테두리를 가지고 있음을 알 수 있다.

한마디로, 'box' 클래스를 가져야 테두리가 생긴다는 것!!

우리가 방금 만든 새로운 div에는 아무런 클래스도 적용되어 있지 않기 때문에, 테두리가 보이지 않았던 것이다.

 

그럼 얼른 새 div에 class를 넣어주자.

클래스는 classList.add로 넣어줄 수 있었다.

 

새로 만든 div는 box 변수에 저장되어 있으므로

 

box.classList.add('box')

 

라는 코드 한줄만 추가해 보자.

 

See the Pen Untitled by KingGyeongHoo (@KingGyeongHoo) on CodePen.

 

짠, 테두리가 생겼다.

새 div에 'box' 클래스를 부여해주니, 스타일이 적용 된 것이다.

 

이러한 방법을 이용한다면, 다양한 태그를 가진 요소들을 적재적소에 붙여 원하는 모양을 만들 수 있을 것이다.

 

 

오늘은 웹 페이지에 요소를 붙이는 법을 알아보았다.  의외로 복잡한 과정을 거쳤기에 어렵다고 생각될 수도 있겠지만, 과정을 제대로 이해한다면 정말 쉬운 작업이 될 것이다.

시간나는대로 다른 과정들도 함께 써보도록 하겠다.