스위프
1.[보드픽] 프론트엔드 초기세팅
Redux 설치 :React Redux 설치 :
2.[보드픽]리액트 라우터 연결 + 로그인 상태에 따른 페이지 이동
로그인 상태에 따라 다른 페이지로 이동시키는 로직 "/onBoarding"페이지 방문 시 로그인 됐을 경우, (isLoggedIn = true) "/"홈으로 이동 로그인이 안됐을 경우, (isLoggedIn = false) "/onBoarding"페이지 렌더링 TabB
3.[보드픽] 토큰 기반 로그인 + POST api 연결
HTTP의 특성 - 한 번 요청-응답 사이클이 완료되면 연결을 종료(stateless 특성)따라서 한 번 로그인을 했더라도 로그인이 필요한 공간에서 다시 로그인을 해야함Token을 활용하면로그인을 완료하면 token 전달 받음 -> 로그인 필요한 페이지 접속할 때마다
4.[보드픽] pick했을 시 뜨는 Toast PopUp
픽하면 보드게임이 p!ck했어요 픽을 취소하면 보드게임 pick을 취소했어요라는 toast popup이 뜨는 것을 구현해야했다.토스트 popup은 2초간 지속되었다가 사라지도록 구현시켰다.그런데 그 2초간의 시간동안 고민이 생긴 것이그 2초동안 사용자가 다시 누른다면?
5.[보드픽] 캐러셀(Carousel) 슬라이드 - swiper 라이브러리 응용
보드픽에 보드게임 추천관련 기능에 보드게임들은 캐러셀 슬라이드로 구성되어 있다. 마우스 드래그 드롭 슬라이드라는 걸 사용자가 인식할 수 있게 375px 사이즈에서 2.5개 보일 수 있도록 swiper 라이블러리 - #slides-per-view 사용하여 구현 swip
6.[보드픽] 마이픽 - 내가 픽한 게임 선택
보드게임을 픽했을 때 새로고침을 해야지만 추가된 보드게임을 볼 수 있었다.그걸 해결하기 위해서 myPickData가 바뀔때마다 리렌더링이 될 수 있도록 수정하였었다그렇게 해결된 줄 알았더니....이렇게 되면 마이픽 데이터 중 픽된 보드게임을 선택하면 seletedDat
7.[보드픽] CSS 텍스트 여러줄 수 제한 (webkit-line-clamp)
보드게임 썸네일해당 이미지와 같이 보드게임 이름 아래 설명은 최대 2줄이 될 수 있도록 구현해야했다. 최대 2줄넘치는 내용은 말줄임표webkit-line-clamp는 말줄임표는 자동으로 설정된다!넘친 콘텐츠는 숨겨지지 않으므로 overflow:hidden를 꼭 설정 해
8.[보드픽] 웹 폰트 적용 문제
'프리텐다드' 폰트로 디자인이 넘어와서'눈누'사이트에서 웹폰트를 가져와서 개발을 진행했다.내 노트북과 폰에서는 폰트가 잘 적용되어서 그렇게 배포까지 했는데팀원분들 중 몇몇 분들은 폰트가 적용이 안된 곳이 있다하셨다.거의 항상 구글 폰트를 사용했어서 몰랐는데 눈누는 조금
9.[스위프] 스위프 4기 참여 후기(회고)
BoardPick URL 🙋🏻♀️ 참여 동기 그동안 개인프로젝트만 진행해보거나 제대로된 협업을 진행해보지 못해 프로젝트 경험이 많이 부족하다고 느껴 사이드 프로젝트를 찾아보다가 스위프를 발견하게 되었습니다. 스위프에서는 기획, 디자인, 백엔드 개발자들까지 함께
10.[보드픽] Carousel Slider 컴포넌트화 (중복코드 줄이기)
캐러셀 슬라이드의 구성 슬라이더 제목 슬라이더 보드게임 썸네일
11.[보드픽] API → Mock up Data로 변경 (1)
서버 이슈로 인해 보드게임 관련 데이터를 Mock up data로 변경해야했다.일단은 token이 사용되지 않는 요소들 먼저 변경하였다.사용자가 입력한 검색어가 이름에 포함된 보드게임 검색카테고리 필터를 통해 보드게임 조회특정 보드게임에 대한 정보들 모아보기✅ 고유한
12.[보드픽] API → Mock up Data로 변경 (2) - 토큰 관련
서버가 작동하던 홈페이지였을 때, 사용자의 토큰여부에 따라 작동하던 기능들이 였으나 서버가 작동하지 않아 토큰 여부와 상관없이 작동하도록 임시대체하였습니다. | api 이름 | url | 대체 여부 | | | --- | --- | --- | --- | | Pick