프로젝트 일지(40)
-
(김유선) 개인프로젝트 SSR로 처음부터 끝까지 진행하기 - 기획 및 디자인(1)
이제 다시 기획부터 새롭게 혼자 개인프로젝트를 하려고 한다. 저번과 같이 node.js를 사용해서 개발할 거고, 저번과 달리 csr이 아니라 ssr로 개발할 것이다. 이번엔 저번 프로젝트에 느꼈던대로 기획을 오랜 시간 동안 하고, 사용자 입장에서 생각하며 개발해보겠다. 우선 이번엔 디자인툴로 캔바가 아니라 개발 디자인으로 많이 쓰는 피그마를 사용할 것이기 때문에 피그마 사용법 영상을 보고 간단하게 사용법을 익혔다.https://www.youtube.com/watch?v=ESxsgBYuMB8
2024.04.30 -
(김유선) 풀스텍 양성과정 팀프로젝트 프론트엔드 04.30
오늘도 퍼블리싱을 했다.카테고리를 선택했을 때 나오는 카테고리 상세 페이지이다.딱히 api를 만들지는 않았고 카카오맵에서 html 태그 복사해서 만들었다. html 태그 복사하는 방법은모자이크 안 되어있는 저 부분을 클릭하면이게 뜨는데 여기서 HTML 태그 복사를 클릭하면 된다(아주 쉬움).소스 생성하기 ㄱㄱ복사해서 갖다가 쓰면 된다. 끗. 그리고 로그인 팝업창도 퍼블리싱했다(이건 팀원이 디자인해줬는데 이뻐서 그대로 퍼블리싱함). 그리고 검색 결과 페이지를 어떻게 구현할지 고민해서 이렇게 하기로 했다(이건 디자인만 함). 그외에 딱히 한 것 없다... 끗
2024.04.30 -
(김유선) 풀스텍 양성과정 팀프로젝트 프론트엔드 04.29
4월 22일부터 프론트엔드인 팀장으로서 풀스텍 양성과정 팀프로젝트를 진행하게 되었다. 일정표지금까지 기획을 하면서 일정표도 위와 같이 만들어졌다.그래서 기획을 모두 끝마치고 오늘부터 퍼블리싱을 하게 되었다.일정표에서는 개발이라고 적고 나누었지만 퍼블리싱을 먼저 하고 기능을 넣기로 했다.(그게 더 편할 것 같음... 확실히) 퍼블리싱검색결과 페이지는 아직 못 완성했고 메인, 상세, 회원가입 페이지는 퍼블리싱 완료했다.메인 페이지회원가입 페이지(로그인은 팝업창으로 제작할 예정)상세페이지(상가마다 있는 페이지) 그럼 남은 건 로그인 팝업, 카테고리 페이지, 검색결과 페이지, 마이페이지 가 되겠당 오늘의 느낀 점 역시 트랜지션의 힘은 대단하다... 부자연스러웠다가 멋있어졌다 굿
2024.04.29 -
(김유선) 중고거래 사이트를 SPA로 만들기 11일차 - 웹소켓 기능
앞으로 남은 기능이 내 채팅, 내 상점 등이 있지만 그것들은 시간만 있다면 딱히 하기에 어려운 것은 아니고 당장 시간이 없기에 채팅 기능만 구현하고 마무리하려 한다. 채팅 기능을 만들어줘야 하는데, 양방향 통신이 필요하므로 html 통신이 아닌 웹 소켓 통신을 이용하겠다. 나는 socket.io 라이브러리를 사용해서 웹 소켓 통신이 가능하게 만들었다. 먼저 상품 상세 페이지를 클릭하면 이렇게 상품 상세창이 보이는데, 저기서 채팅하기를 누르면 판매자인 하이요 닉네임을 가진 사람과 요청.user의 대화방이 하나 만들어진다(물론 로그인을 안한 상태라면 채팅하기를 눌렀을 때 로그인 페이지로 이동한다). 이렇게. 그래서 로그인을 한 상태라면 이렇게 창을 하나 띄워주고, 유저가 보낼 값을 입력하고 보내기를 누르면 ..
2024.04.19 -
(김유선) 중고거래 사이트를 SPA로 만들기 10일차 - 다양한 기능
자 드디어 로그인 후 변화는 아래의 두 가지가 남았다. 로그인 후 변화해야 하는 것(3) 3. 채팅 기능이 동작할 것 => '채팅'에 필요한 데이터는 내 정보, 주고받은 채팅 내용 로그인 후 변화해야 하는 것(5) 5. 내 상점 버튼이 동작할 것 => '내상점'에 필요한 데이터는 내 정보, 내가 올린 물건들, 내가 찜한 물건들 리스트 그 외에 해야 할 것들 많이 남지는 않은 것 같다. 1. 누구나 상품 하나를 누르면 상품 상세페이지로 이동한다(물론 spa로 구현). 2. 상품 상세 페이지에서 판매자, 제목, 내용, 가격을 보고 채팅을 걸 수 있고, 찜을 할 수 있다(홈으로 돌아가는 버튼도). 3. 검색 기능을 통해 내가 원하는 상품을 찾을 수 있다. 4. (시간 남으면) 후기 기능 : 한 계정당 한 상대..
2024.04.18 -
(장준영)Vanilla JavaScript로 SPA 구현하기 [8일차] - 식당/카페 여석 확인 어플리케이션
사용자가 매장 입장 후의 화면을 다 만들었다, 이제 매장 나가기 버튼 처리를 좀 해주고 캐싱된 데이터로 렌더링을 할거다 나가기 버튼은 매장에서 나가는거기때문에, 나가면서 store_user 컬렉션의 요청.user 가 속해있는 도큐면트를 삭제하고 나가야한다, 추가적인 캐싱은 안 해줘도 된다, 어차피 다른 매장에 입장하면 로컬스토리지가 업데이트 된다 매장 나가기를 클릭하면 서버쪽으로 post 보내서 그냥 삭제만 해주면 된다 서버쪽도 코딩해주자 매장 나가기 기능도 잘 작동한다 이제 캐싱된 데이터 대로 렌더링만 해주면 끝! 지금 새벽 3시 반이다 나머지는 자고 일어나서 내일 해줘야겠다 !! 자고 일어났다, 다시 작업을 시작하자..! 작업 하다보니 디비 잘못 짠 부분이 또 있다, 캐싱해서 렌더링 해줄땐 필요한 데..
2024.04.18