항해99) 1주차:: 미니프로젝트 회고(p.s. 끝나지 않는 CSS 집착.....)

1. 프로젝트 명

: 너만 오타쿠가 아니야! (otakuonly)

 

 

2. 소개

: 감상한 애니메이션에 대해 소개하고 장르 및 리뷰 별점을 다른 유저와 공유해보자!

 

 

3. 와이어 프레임

- 사이트 접속 페이지 - 

 

- 회원가입 페이지 -

 

- 메인 페이지 -

 

- 글 작성 페이지 -

- 게시글 보기 페이지 - 

 

 

4. 개발 해야 하는 기능들

기능	Method	URL	request
로그인	POST	/api/login	{'id' : id, 'pw' : pw}
회원가입	POST	/api/membership	{'id' : id, 'pw' : pw}
게시글 조회	GET	/api/posts
게시글 작성	POST	/api/posts	{'img' : img, 'title' : title, 'genre: genre, 'review' : review, 'star':star}
글 검색	GET	/api/posts	query={검색어}

 

 

5. public github repo 주소

: https://github.com/qkreo/otakuonly

 

 

6. 트러블슈팅

1.동일한 스타일.css를 사용했음에도 불구하고 메인 페이지와 새글 작성 페이지의 사이트 최상단 바의 사이즈가 동일하지않음

👉🏻스타일css파일로 스타일 통합 및 정리

2.몽고 DB에서 이미지 파일을 불러올수업음 (DB접속 방식변경이 필요해보임)

👉🏻/static/ 경로 미지정으로 인한 오류였음

3. 리뷰를 작성 할 때 게시글의 페이지 넘버를 콘솔 값으로 가져와야 하는데 방법을 모름

👉🏻진자2로 게시글에 html에 넘버를 붙여서 넘버가 붙는 버튼에 id를 주고, ajax에서 id가 붙은 버튼의 값을 $(' ').text()로 불러와서 콘솔창에 입력하니 넘버가 나왔음.

4. 이미지크기가 통합 되지 않음

👉🏻일단 큰박스를 만들고 작은박스에 이미지를 넣어 넓이를 100%로 설정함

5. 검색 기능 아이디어 잡기가 힘듦

👉🏻진자2로 db에 저장된 모든 title을 변수에 담아 메인에 보내주고, 그 모든 제목들을 반복문으로 리스트에 집어 넣어 둠. 검색 버튼에 함수를 붙인 후 사용자가 검색 버튼을 누르면 검색어 존재 여부, 리스트 존재 여부에 따라 다르게 결과 뜨도록 함. 

 let posts = {{ posts|tojson }};
        let post_list = [];
        for (let i = 0; i < posts.length; i++) {
            post_list.push(posts[i]["title"])
        }

        function find_title() {
        let title = $("#input-word").val().toLowerCase();
        if (title == "") {
            // 빈 문자열이면 얼럿
            alert("Plz input something first😌")
            return
        }
        if (post_list.includes(title)) {
            // 리스트에 있으면 하이라이트
            $(`#card${title}`).addClass('highlight').siblings().removeClass('highlight');
            $(`#card${title}`)[0].scrollIntoView();
        } else {
            // 리스트에 없으면 상세 페이지로
            alert("제목을 찾을 수 없어요😭")
            window.location.href = '/'
        }
    }

 

7. 결과물

내가 한 것:

1. CSS 전반(진짜로 다~~~~~ 만짐)

2. 로고 디지인 포함한 메인p 디자인... 하.....ㅋㅋㅋㅋ.....

2. 검색기능

3. <작성자>님 반가워요😎 띄우는 기능

 

 

8. 이슈

1. 사실 게시글 넘버링을 서버로 넘기는 방법을 잘 모르겠음(아직 시도를 안해봐서 그럴지도...?....) 그 파트는 우리조 캐리하시는 분들 따라서 그냥 무임승차함...

2. 1번과 이어지는 것 같은데, 게시물마다 댓글을 작성할 수 있고 그걸 잘 불러온다는게(!!와우!!) 진짜 놀라웠다. 대단하다... 코드 몇줄로 무에서 유가 창조되는 느낌. 이게 아니곸ㅋㅋㅋ 어떻게 하시는지 꼭 알고싶은데 엄두가 죡굼 안난다... 그래도 해내고싶고, 어떻게든 이해하고싶다!!!

3. 역시나 1, 2번과 이어지는 것 같다. 우리가 게시물 삭제 기능을 구현하지 않았는데, 서버에서 임의로 게시물을 하나 삭제하면 댓글이 겹치는 현상이 발생했다. 

4. CSS.......... 아니 이미지 사이즈가 왜 맘대로 조절이 안되지? 그냥 빈 화면에서 테스트하면 내 뜻대로 잘 되는데, 이미 꽉 채워진 우리 화면에서 조정하려니 도저히 내맘대로 안된다. 아래에 코드 첨부. 전은 내가 해서 안됐던 것, 후는 조원분이 하셔서 잘 된 것(아주 솔직하게는.. 이미지 크기를 강제로 짜부러뜨려서 결과가 마음에 들지는 않았지만, img 자체에 클래스를 준다는 아이디어를 생각을 못한게 분함.)(더욱 솔직하게는.. 아직 내꺼는 잘 안됐고 조원분꺼는 잘 된 이유를 모르겠음.... 백지에서 실험할때는 잘됐던 것 같은데...? 아닌가? 하~~)

<div class="postarea">
    <div class="img" >
        {% for review in reviews %}
            <img style="max-height: 500px;" src="/static/{{ review.file }}">
        {% endfor %}
    </div>
👆🏻전 👇🏻후
<div class="postarea">
    <div class="img" >
        {% for review in reviews %}
            <img class="img01" src="/static/{{ review.file }}">
        {% endfor %}
    </div>

.img {
    width: 70%;
    height: 600px;

    margin-left: 15%;

    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
👆🏻전 👇🏻후 
.img {
    width: 70%;
    height: 600px;

    margin-left: 15%;

    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.img01{width: 100%; height: 500px;}

 

 

9. 가능하면 구현하고싶은 것

1. 게시물 수정/삭제 기능

2. 작성자 프로필 사진 등록해서 댓글 작성시 옆에 조그마하게 띄우는 것

3. 댓글 수정/삭제 기능

4. 키워드 검색 기능

5. 검색하면 해당하는 결과만 새창에서 보여주는 기능

6. 게시물 쓰면 맨 처음에 들어오는 기능(아니 지금 해보니 되네?!?!? 왜 되지?!!?!!??!?!? 👉🏻 아니었음ㅋ 다시 해보니 걍 마구 들어가네....)

7. 게시물 깔끔하게 똑같이 구현된 직사각형 틀에 들어오게 하는 것 👉🏻어제는 되는 것 같았는데 단순히 형태가 비슷한 이미지들만 집어넣어서(wallpaper 모양) 그런거였음.......ㅋㅋ........ 안됨. 구현해야됨.

 

 

10. 소회

나는... 웹디가 하고싶은건가....? 프론트엔드.........?

미치겠네....... 완벽주의, 특히나 디자인과 미감에 있어서 집착하는게 여기서도 당연하단듯 이어지고있따......

난 백엔드 개발자가 되어야하는데...... 아니..... 계속 CSS 작업하는 날 보면서........ 그만두지 못하고 정말 몇시간이 가는 줄 모르고 집착하고 또 집착하는데 날 보면서.......... 자괴감이 들었따..........T T

지금도 사실 뜯어 고쳐버리고 싶은 부분이 너무 많은데 자괴감이 들어서 참고있다.............

해야 할 일에 집중하자T T