snu festival 썸네일형 리스트형 스탬프 투어 미션 구현하기(feat. firestore, redux saga) 프로젝트: SNU FESTIVAL 키워드: firestore, redux saga 상황 축제 사이트를 구현할 때 미션 기능을 추가해달라는 요청이 들어왔다. 페이지 곳곳에 5개의 미션이 나누어져 있고 특정 미션을 클리어하면 미션 카드에 그림 스탬프가 채워지는 형식이었다. 웹사이트 전체에 걸쳐 미션 진행 상태를 다뤄야 해야하기 때문에 redux를 이용하여 브라우저 내 상태 관리를 하는 것이 좋다고 생각했다. firebase auth 로그인을 한 상태로 미션이 이루어지기 때문에 firestore에 uid(사용자 계정의 unique id)를 문서 이름(key)으로 하고, 미션 진행 상태를 value로 저장하는 방식으로 미션 데이터를 관리하기로 했다.(GET/SET을 할 때 대상 문서를 쉽게 찾을 수 있다.) 해.. 더보기 노래맞히기 게임 구현하기(feat. holwer.js, classList) 프로젝트: SNU FESTIVAL 키워드: trigger css animation, classList, svg, holwer.js, Web Audio API 상황: 페스월드 축제의 미니게임인 '노래 맞히기'는 노래의 아주 짧은 부분만 듣고 제목을 맞히는 게임이다. 키보드 조작이나 화면 터치를 통해 음악이 재생되도록 하고, 시각적인 재미를 줄 수 있도록 애니메이션도 곁들이고자 한다. 해결 과정 페이지 단에서 addEventListener로 키보드 조작을 감지하고, A를 눌렀다면 'KeyA'에 해당하는 음악과 애니메이션을 재생하면 된다. function reducer(state, action) { if (action.type === 'toggle') { const { key } = action; return.. 더보기 absolute와 fixed로 다양한 스마트폰 너비 대응하기 프로젝터: SNU FESTIVAL 키워드: absolute, responsive web 상황 보통 화면 레이아웃은 flex, grid 등의 css 속성을 이용하지만 축제 메인화면이라는 특수한 상황에 맞도록 디자이너와 함께 레이아웃을 고민했다. 결과적으로 아래와 같은 디자인이 확정되었다. 통계상 80%의 유저가 모바일로 접속하기 때문에, 모든 기기에서 레이아웃이 깨지지 않도록 신경을 써야한다. 배경 이미지(island)를 화면에 꽉 차도록하고, 하위 요소(굿즈, 공연, 행사, 미니게임, 방명록 등)의 위치를 상대적으로 잡아야한다. 해결방법 먼저 모든 기기에 대해 화면에 딱 맞게 배경이 그려져야한다. 보통은 '100%' 를 이용하여 표현하지만 이 경우엔 배경 이미지의 비율이 바뀌지 않고 항상 일정(늘어짐없이.. 더보기 Firebase auth 정보를 redux로 관리하기 프로젝트: SNU FESTIVAL 키워드: firebase auth, oauth, redux, redux persist, session storage 상황 로그인 기능은 firebase auth 에서 제공하는 google login을 사용한다.(학교 메일과 Gmail이 연동돼있어 사용하기 쉽다.) 웹사이트 안에서 로그인 정보(email, name, firebase uid)를 이곳저곳에서 사용해야하므로 redux에 저장한다. 로그인을 할 때, 사용자 정보는 firebase auth instance와 redux에 동일하게 저장되어야한다. 로그아웃을 할 때, firebase auth instance와 redux에 저장되어있던 사용자 정보가 사라져야한다. 보안을 위해 브라우저 창을 닫을 때에도 사용자 정보를 제.. 더보기 env 파일의 보안 취약점과 api key 유출에 대비하기 프로젝트: SNU FESTIVAL 키워드: .env, react environment variables, security, chrome devtools sources, firebase auth, firestore 상황 프로젝트에서 로그인 기능은 firebase auth 의 google login 을 사용하고 있고, 데이터 CRUD는 firestore 를 사용하고 있다. CRA 환경에서 firebase api key 값을 .env 파일에 분리하여 저장하고있다. .env 파일이 보안을 위해 사용한다고 알려져있지만, 개발자 도구 source를 통해 충분히 노출될 가능성이 있다. 이를 막기 위해선 백엔드의 도움이 필요하지만, SNU FESTIVAL 프로젝트는 1인 개발이므로 firebase 의 보안 기능을 최대.. 더보기 이전 1 다음
