스터디 토이프로젝트를 마무리 하며..

 

 

 

11/16일 스터디에서 진행한 토이프로젝트가 데드라인 23일까지 단 하루가 남았다.

 

 

 

11/16 회의를 통해 첫 토이 프로젝트의 주제를 '스터디소개' 정했다.

 

 

 

 

 

zep에서 각자 가져온 레퍼런스들을 발표하고,

pigma의 pigjam을 통해 다 함께 회의를 하며 각 페이지에 들어갈 콘텐츠와

컨셉 등을 정했다. 메인팀 / 멤버소개팀 / 프로젝트소개 팀 으로 나누었고, 나는 프로젝트소개 팀을 맡았다.

 

 

 

 

 

 

회의내용을 토대로 pigma 디자인 툴을 이용해 와이어프레임을 만들었다.

 

 

 

 

와이어 프레임을 토대로 html과 css를 하드코딩하여 틀을 만들었다.

하드코딩을 하며 가장신경 쓴 부분은 class name 이었다.

다른 팀들과 페이지를 나눠서 하기때문에 merge 했을 때, 충돌이 나지 않게 하기 위해 클래스 명 앞에 pageProject를 붙히기로 결정했고, 너무 길어지지 않기 위해 계속 고민하며 작성했다.

 

 

 

하드코딩된 틀로 들어가야 할 기능들을 js 파일에 주석으로 정리했고,

그 주석을 바탕으로 javascript 를 구현했다.

DOM을 이용하여 하드코딩된 HTML들을 수정했고, 이벤트리스터 함수를 이용해 다양한 기능들을 만들었다.

 

 

 

 

데이터를 json파일이 아닌 js파일로 작성해야한다는 것을 깨달았고, 데이터 js 에있는 데이터와

기능구현 js파일을 연결시켜 원하는 데이터를 불러오는 것을 제대로 복습할 수 있었다.

 

 

프로젝트 데드라인 하루 전, 아직도 계획했던 기능들을 전부 구현하진 못했다.

하지만 구현하는 과정에서 정말 많은 고민들과 검색을 통해 배웠던 것들을 복습할 수 있어서 좋았다.

 

스터디원 8명이 모두 함께 있을 땐, 심한 꼬리 질문을 하면 다른 팀원분들께 민폐가 될 수 있어 궁금한 것을 제대로 물어보지 않고 그냥 넘어가는 경우가 더러 있었는데, 3명의 소수로 프로젝트를 진행하며 꼼꼼하게 제대로 알고 배우고 넘어갈 수 있어 정말 좋은 시간이 되었다. 

 

리액트로 리팩토링도 꼭 해보고싶다. 

 

---

 

 

노션 스터디 페이지에 작성했던 스터디 리뷰

 

11 / 16	토이프로젝트 회의 정말 재밋었습니다. 각자 구상해온 아이디어 듣는 것도 재미있었구요. 피그마 협업툴을 통해 구상하는 것도 좋았습니다.
11 / 17	토이프로젝트 각 페이지 구상 회의와 기능에 따라 팀을 나누는 회의를 진행했습니다. UX 관점에서 페이지를 구성하고 어떤 기능들을 실을지 함께 의견을 나누고 조율하는 부분이 재밋었고 의미 있었던 시간이라 생각됩니다. 맡게된 프로젝트 페이지 멋지게 완성해 보고 싶습니다.
12 / 6	2주만에 남기는 리뷰네요. 토이프로젝트를 시작하고 아팠던 승미님이 다시 합류하게 되면서 빠르게 진도를 나간 하루 였습니다. 깃헙을 이용해서 브런치를 생성하고 VScode Live Share 를 통해 프로젝트 페이지 멤버들과 함께 소통하고 수정하며 css 의 기반을 좀 더 다질 수 있어서 좋았습니다! 다른 멤버들도 각자 맡은 영역에서 열심히 하는 것 같아 뿌듯했습니다. 완성작이 기대되는 하루입니다
12 / 7	오늘은 html css 하드 코딩으로 프로젝트 페이지를 꾸며 보았습니다. 이미지 호버 기능을 찾느라 시간을 많이 뺏겼는데 결국 div 로 넣어서 해결했습니다 ! 고민하는 과정이 재미있었고 뜻깊었습니다. 다들 고민한 흔적이 보이는 결과들 이었습니다.
12 / 13	드디어 메인팀 멤버팀 프로젝트팀의 세 페이지가 머지되는 역사적인 날이다. 충돌을 예상해 미리 변수명앞에 각 팀이름을 넣자고 얘기를 한 터라 html 에서 말고는 큰 수정이 없어서 다행이었다. 머지가 끝난 후 하드코딩 되어있던 html 을 javascript 로 리팩토링 하기 위한 To Do List 를 먼저 작성했습니다. 프로젝트 카드를 컴포넌트로 만들어 데이터의 갯수만큼 보여준다. 모달 open close 등 리스트를 작성하고 마무리했습니다.
12 / 14	1. 본격적으로 javascript 로 리팩토링을 시작하였고, 첫번째 난관인 변수명 짓기에 봉착했습니다. 어떻게 하면 직관적인 변수명을 지을 수 있을까 하며 변수명만 수십번 수정했던 것 같습니다. 2. 두번째는 입력된 데이터들을 처음엔 json 파일에 담아 reqire 로 연결 시켜주었지만 실패했습니다. reqire 은 node.js 에서 파일을 불러올때 쓰는 매서드 여서입니다. improt 로 불러오려했지만 이것또한 실패했습니다. json 파일형식은 불러올 수가 없더군요 최종적으로 js 파일로 데이터를 만들어 내부에 데이터를 담는 변수를 선언해주고 html 에서 호출 해주었습니다. 3. 모달창 . 클릭 이벤트로 open 까진 성공했지만 영역 지정과 close 기능을 구현하지 못했습니다.
12/ 15	15일 1. 모달창 open / close 를 구현했다. 처음엔 토글 메서드를 통해 만들었지만 조금 더 직관적으로 표현하기 위해 add와 remove 로 hidden 을 넣었다 뺐다 해주었다. 2. 프로젝트 카드 위에 hover되는 기능을 js로 구현해주었다.
12 / 20	데이터js파일에서 데이터를 하나씩 불러와 프로젝트 카드에 하나씩 랜더 해준 것 처럼 프카드 내부의 모달창에도 각각의 데이터의 내용이 들어가도록 구현했다. 15일에 우분투가 대규모 업데이트를 하는 바람에 15일 분량을 git에 푸시하지 않고 오늘 머지를 해서 너무 많은 부분의 충돌이 생겼다. 20일 진행했던 머지를 리셋시켜야 했다. 다른 팀 분들은 이미 많이 진행됐을 때라 새로 작성한 파일을 복사해두고 리셋 후 다시 적게 하는 불편함을 겪었다. 제 때 git push 를 못한게 큰 화근이었다.
12 / 21	1.제일 어렵게 느껴졌던 프로젝트카드 무한 슬라이드 구현을 했다. 처음엔 구현이 어려울 것 같아 라이브러리를 써보기로 하고 가이드대로 작성 해 보았지만, 라이브러리의 css button과 직접 작성한 button 이 충돌나며 html 엉망이 됐고 손을 쓸 수 없어 다시 검색을 하며 결국 직접 영상을 보며 구현해보았다. 무한이 슬라이드가 되는 것 처럼 보이기 위해 원래의 카드 길이 앞뒤로 원래의 길이만큼 복사하여 이어 붙혀주었다. 그리고 원래의 슬라이드가 끝점에 도달했을 때, 다시 처음의 위치로 돌아가도록 했다. 이 때, 처음으로 돌아가는 애니매이션을 보여주지 않도록 애니매이션 관련 클래스를 제거했고, 위치 초기화가 완료되면 애니매이션이 다시 활성화 하도록 함수에 실행시간값을 주어 차례로 실행되도록 했다. 도움되었던 영상링크https://homzzang.com/b/mv-806 2.모달의 복사버튼을 위한, 모달 창 주소 할당. 모달의 복사버튼을 활성화 하기 위해선 각 페이지의 모달이 떳을 때 URL 을 수정해주어야 한다. 각 데이터의 고유한 id 값을 url 뒤에 pushState매서드를 이용해 붙혀주었다. 하지만 모달창이 닫히며 url 에 붙힌 id 값을 삭제 해주어야 하는데 이는 이벤트로 작성되어야 해서 방법을 잘 모르겠다. 메서드가 따로 없었다. 복사버튼은 잠시 미뤄두고 다른 부분을 먼저 완성하기로 했다.
12 / 22	1. 미뤄둔 복사 버튼 만든날. 복사버튼을 클릭하면 id값이 부여된URL 을 복사한 뒤 토스트 메세지로 ‘복사되었습니다’라는 메세지가 떳다 사라지게 구현했습니다. 2. 깃헙 버튼을 누르면 새 창이 열리며 깃헙 링크로 이동하도록 만들었습니다. 3. 모달을 닫으면 모달을 열면서 추가 되었던 id 를 삭제하며 원래 URL 로 돌아오게 제작했습니다.