프로젝트 (34) 썸네일형 리스트형 [ 항해99 실전프로젝트 ] 중간발표까지 기술적 의사결정 기술적 의사결정을 작성하는 것이 이렇게 고된 일인 줄 몰랐다. 중간발표때 들어올 피드백에 대비해 여러가지로 준비해봐야겠다. 일단 하나는 써봤는데, 썩 맘에들지않는다. 일단 중간발표전까지 이 게시글에다가 계속 업데이트 해놔야겠다. 기술적 의사결정(FE) 첫번째 트러블슈팅, 가까운모임찾기기능 도입 이유 버튼 클릭 시, 내 위치에서 가장 가까운 모임 찾기 문제 상황 컴포넌트의 state로는 map으로 돌린 하나하나의 데이터가 들어가지 않아서 해결 방안 Redux를 사용하여, 전역변수로 관리함 의견 조율 간단한 형태의 웹을 구성함에 있어서, React 만으로도 단방향 데이터 흐름을 충분히 사용할 수 있는 경우, Redux 라이브러리를 import 하는 것은 불필요한 라이브러리를 추가하여 애플케이션 번들 사이즈만.. [ 항해99 실전프로젝트 ] 드래그슬라이드를 만들어보자. 우리 프로젝트의 캐릭터샵페이지가 디자인 되었다. 이에 따라서, 각 아이템들을 드래그슬라이드형식으로 바꾸어 줘야한다. => 생각해보니, 모바일웹으로 만들고 있어서 자동으로 터치슬라이드가 되어서 굳이 안 만들어도는 된다. 일단 굉장히 친절하게 설명된 아래 블로그를 따라할 것이다. https://velog.io/@tunakim/%EB%A7%88%EC%9A%B0%EC%8A%A4-%EB%93%9C%EB%9E%98%EA%B7%B8%EB%A1%9C-%EC%A2%8C%EC%9A%B0-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84-ft.-React 마우스 드래그로 좌우 스크롤 구현 (ft. React) 아이템들을 행으로 나열하고 설정해놓은 width를 넘어갈 때 overflow-x:.. [ 항해99 실전프로젝트 ] 로고를 SVG로 다루어보자! ( 2 ) 그려지는 애니메이션 다음으로 네온사인효과를 내야한다. 아래와 같이 깜빡거리는 전광판 느낌의 네온사인효과를 만들어내야한다. 네온사인효과는 text-shadow를 사용하여 만드는 데, text-shadow는 아래와 같이 4개의 값을 넣을 수 있다. text-shadow: [x-offset] [y-offset] [blur-radius] [color]; 처음 2개는 각각 그림자의 가로 및 세로 위치를 나타내며, 세 번째는 흐림 반경의 크기를 나타내고 마지막은 그림자의 색상을 나타낸다. 하지만 위의 경우는 텍스트이고, 우리는 svg를 다루기 때문에 svg에 그림자효과를 넣는 방법을 따로 찾아야한다. svg태그에 효과를 주기위해서는 filter를 따로 만들어주어야 합니다. ( defs태그 안에 만들어줘야합니다! ).. [ 항해99 실전프로젝트 ] 로고를 SVG로 다루어보자! (1) 우리 프로젝트의 로고가 나왔다! 이제 이 파일을 svg파일로 받아낸 다음, 네온사인 효과를 주고싶다. 위의 이미지와 같은 느낌의 네온사인으로 만들어내야 한다. 그러기 위해서는 저 로고가 텍스트가 아니기 때문에, SVG를 다룰 줄 알아야한다.. svg에 대하여 좀 알아보니 생각보다 복잡한 것 같다. 자세한 내용은 아래 블로그를 참고해보자! https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-SVG-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%EC%A0%95%EB%A6%AC-%ED%81%AC%EA%B8%B0%EC%83%89%EC%83%81-%EB%B3%80%EA%B2%BD [CSS] 📚 SVG 다루기 정리 (크기/색상 변경) SVG (Scalabe Vector Gra.. [ 항해99 실전프로젝트 ] 디테일페이지를 모달창으로 바꾸기 디자인이 살짝 변경되어, 원래는 상세정보를 다른 페이지에서 보여주었는데 리스트와 같은 페이지에서 모달창으로 보여주는 것으로 바뀌었다. 현재는 그냥 다이나믹 라우팅을 통해, 리스트에서 각 카드를 누르면 다른페이지에서 상세정보를 보여주고 있다. 즉, localhost:3000/main ===> localghost:3000/posts/6377289545223 이렇게 페이지가 넘어가고 있다. 이제 바꾸어야할 점은, 페이지를 이동시키지않고 localhost:3000/main 에서 모든것을 보여주어야 한다. 기존 모달창을 이용하면 되니 복잡하지는 않을 것 같지만, 카드를 눌렀을 때 따라오는 postid를 모달창에 넘겨주는 작업이 필요하다. 지금 리스트부분은 아래와 같은 코드로 이루어져있는데 {items?.map((.. [ 항해99 실전프로젝트 ] 회원가입페이지 나누기 MVP발표까지는 일주일이 남았다. 매우 순조롭게 진행되고 있는 것 같고, 팀원들에게 항상 감사하다. 이번에는 우리의 프로젝트가 모바일웹으로 제작이 되기때문에, 모바일환경에 따른 회원가입페이지로 수정을 해야한다. 초기의 와이어프레임대로, 현재 회원가입페이지는 아래와 같다. 위와 같이, 구현이 되어 있으면 모바일에서 작동 시 키보드가 올라오기때문에 많은 화면이 가려지기때문에 사용자가 매우 불편하다는 생각이 들었다. 그래서 최대한 화면 넓이의 절반을 남겨두고 회원가입페이지를 구현하려고 한다. 구현하려는 페이지는 아래 이미지와 같다. (디자이너님이 짜주심) 한 화면에서 모든 것이 이루어졌던 기존의 회원가입과 달리, 3개의 화면으로 나누어져 있다. 생각보다 귀찮은 작업이 될 것 같다. 내가 예상한 실행순서는 아래.. [ 항해 99 실전프로젝트 ] 사용자의 아바타를 데이터로 만들자 ( 3 ) 이미지를 동적으로 입히는 기능은 생각보다 단순했다. 이제는 사용자가 선택한 아이템들이 서버단에 저장이 되어, 새로고침 시나 로그아웃 후에 다시 로그인하여도 선택했던 아바타의 이미지가 나와야 한다. 우리가 정한 카테고리는 총 4가지로 좁혀봤다. 눈 (Eye) 입 (Mouth) 머리 (Hair) 배경 (Back) 해야할 순서 사용자가 여러 아이템들을 선택할 수 있는 슬라이드를 만들어준다. 슬라이드에 이미지들을 뿌려주기 위해, map함수를 사용해야하니 이미지파일규칙이 정해져야 한다. 슬라이드에서 선택한 아이템이 위 캐릭터에 반영이 되어야한다. (변수값이 공유되야함) 각종 카테고리별로 변수를 만들어, 선택된 아이템의 변수 값을 db로 쏴주어야한다. 여러 아이템들중, 하나만 선택했을 경우에도 정상작동해야한다. (.. [ 항해 99 실전프로젝트 ] 이미지 입히기 테스트 ( 2 ) 오늘은 대충 배경이랑 악세사리 같이 2개의 다른 위치에 이미지를 계속해서 바꿔 입히는 코드를 먼저 짜보려한다. 해야할 순서 아무 이미지나 카테고리별로 2개 정도를 같은 크기의 이미지로 public 폴더에 저장 public 폴더에서 각 이미지를 불러왔을 때, 정해진 위치에 들어가도록 코드를 짜야지. 아바타만들기 틀을 빠르게 짜보았다. 먼저, 이미지는 public폴더에 넣어놓고 절대경로로 불러오도록 설정하였다. 위의 이미지와 같은 형식으로, 각 이미지 카테고리 (ex/ 눈, 코, 입, 모자, 등등) 별로 div영역을 고정시켜 그 안에 사진을 집어넣는 방식으로 짰다. 그렇다면 사용자가 입모양을 바꾸고싶으면, 빨간색 영역의 div에 있는 이미지가 바뀌고 눈을 바꾸고 싶으면 파란색 영역이 바뀌는 로직이다. 그러기.. 이전 1 2 3 4 5 다음
