퍼블리싱 (3) 썸네일형 리스트형 [전공자들 7] 6일차 - 댓글 숨기기, 답글 닉네임 @태그 붙이기 화면작업은 거의 막바지에 접어들었다. 이제 로그인/회원가입 등등만 하면 끝나는데 오늘은 드디어 야심차게 기획했지만 미뤄뒀던 피드 페이지를 만들 차례.. 프론트적으로 가장 중요한 작업은 두가지정도 있었다. 댓글 숨기기 리스트 형식의 게시판은 어차피 글제목 클릭을 통해 세부화면으로 넘어가기 때문에 댓글 숨기기 기능이 필요하진 않았지만 피드형식의 게시판엔 댓글을 모두 노출시키기엔 너무 스크롤이 많이 생겨서 불편할 것 같았다. 그래서 이렇게 처음엔 댓글이 숨겨져 있다가 댓글버튼을 클릭하면 이런식으로 아래에 댓글창과 댓글작성칸을 띄우기로 했다. 늘 그렇듯이 useState를 사용해 onCilck()이벤트가 발생할 때마다 토글을 만들면 되지 않을까 했지만 곧 한가지 문제점을 떠올렸다. 게시글은 각각 독립적이어야 하.. [전공자들 5] 개발 3일차 - 검색결과에서 검색단어를 파란색으로 표시해보자 풀스택 웹개발 프로젝트를 할 때 나는 처음에 퍼블리싱 - 백엔드 - 프론트 순서로 작업을 하곤 했다. (화면을 이쁘게 만들어 놔야 보기가 좋아서.. ?) 한 번 해보고 나서 비효율적인 부분을 발견했는데 게시판 목록같은 기능이 그랬다. 예를 들어서, 화면을 이렇게 설계했다면 처음에 똑같은 디자인을 만들기 위해 각 게시글들을 모두 하드코딩해서 박았었다. (줄간격 설정이나 크기 설정 등,,) 그러니까 나중에 백엔드 기능을 완성하고 그걸 프론트로 받아와서 보여주는 작업을 할 때 다시 수정을 했어야 했다 그래서 이번 프로젝트땐 백엔드부터 완성하고 여유롭게 프론트를 해볼까 싶었는데 아무래도 db도 처음써보고 다른 어려운 기능도 새롭게 도전하는게 많아서 엄두가 안났다.. ㅋㅋ,, 그래서 만만한 퍼블부터 시작하되 더미.. [전공자들 4] 개발 1일차 - 프론트 컴포넌트 구조 설계 내 화면설계는 크게 5가지 부분으로 나뉜다. 헤더, 푸터, 그리고 메인이 될 부분과 프로필 부분, 마지막으로 스크롤에 상관없이 고정적으로 오른쪽 아래 띄워질 채팅. 헤더푸터는 간단했는데 중간에 위치하는 세개를 구현하는 부분에서 시간이 좀 걸렸던 것 같다. 특히 오픈채팅부분이 원래는 안보이는 상태에서 버튼을 누르면 보여야 하기 때문에 저 화면 만들기가 제일 어려웠다. 결과적으로 성공하긴 했지만 App.js가 좀 지저분해진 것 같다. 일단 프로젝트를 모두 완성해서 배포 후 클린코드로 리팩토링을 해야겠다. 일단 오늘까지 한 것(프론트) 대충 큰 틀만 잡아놓고, 각각 메뉴를 클릭 했을 때의 연결정도만 시켜놨다. 오늘은 프레임을 짜는 작업이었고, 내일모레까지는 계속 퍼블리싱만 할 것 같다. 빡세게 하면 내일 끝날.. 이전 1 다음
