프론트엔드 썸네일형 리스트형 safari inset, intersection observer 크로스 브라우징하기 프로젝트: loplat X mobile 키워드: 크로스 브라우징, inset, intersection observer 상황 1 Modal을 구현할 때, 회색 배경을 position: fixed; inset: 0; 으로 구현했다. 아이폰 8(12.0.1)과 맥북 사파리 13으로 접속해보니 Modal이 전혀 보이지 않는 현상이 발생했다. 해결과정 Modal 컴포넌트는 createPortal을 이용하여 'portal' div를 부모로 삼아 렌더링한다. return ReactDOM.createPortal( {children}, document.getElementById('portal') as HTMLElement ); 사파리 개발자도구를 통해 확인해보니, portal DOM 의 children 내용은 잘 채워져.. 더보기 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에 저장되어있던 사용자 정보가 사라져야한다. 보안을 위해 브라우저 창을 닫을 때에도 사용자 정보를 제.. 더보기 css animation steps로 Spinner 구현하기 프로젝트: loplat ui 키워드: css animation steps, sprite image, 용량 최적화 상황 로딩 상태일 때 화면에 표시할 Loading UI Component가 필요하다. loplat ui library에서 재사용 가능한 컴포넌트를 직접 구현하고자한다. 로딩 애니메이션을 위해 gif를 사용할 경우 용량과 성능 문제가 발생한다. sprite image와 css animation의 steps 속성을 이용하여 애니메이션 효과를 구현할 수 있다. 해결과정 먼저 디자이너로부터 30장 이상으로 이루어진 sprite image를 받고 img 태그의 src에 넣었다. React Component의 prop으로 duration(애니메이션 재생 시간), scale(컴포넌트 크기 조절), zInd.. 더보기 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 의 보안 기능을 최대.. 더보기 Next.js에서 SSG 와 revalidate 사용하기 프로젝트: 공우 홈페이지 키워드: Next.js, SSG, getStaticPaths, getStaticProps 상황 공지사항 또는 뉴스(이하 포스트로 통일) 페이지(https://www.gongwoo.snu.ac.kr/notice, https://www.gongwoo.snu.ac.kr/news)에서 포스트 목록을 보여준다. 포스트를 클릭하면 news/123 같은 상세 페이지로 이동한다. 동아리 홈페이지이므로 SEO 최적화를 해야 한다. 따라서, 포스트의 상세 페이지들도 static 하게 build 해야 한다. 포스트 내용이 정적이기 때문에, 매 요청마다 html을 만드는 SSR 대신 getStaticProps를 사용하여 SSG로 구현한다. 배포 후 새로운 포스트가 만들어질 경우에도 해당 포스트에 대한.. 더보기 useSetRecoilState로 렌더링 최적화하기 프로젝트: loplat X mobile 키워드: recoil, 렌더링 최적화 상황 loplat X mobile 은 CRA 에 기반하여 CSR 방식을 사용한다. 로그인이 필요한 '캠페인 목록 페이지'에서 로그아웃 버튼을 누르면, protected router HOC에 의해 자동으로 로그인 페이지로 이동한다. 로그아웃을 시키는 것 외에 side effects 가 발생하면 안되는 상황이지만, 로그인 페이지로 이동하기 전 캠페인 목록 페이지에서 '캠페인 목록 GET API'가 의도치않게 한 번 호출되는 버그가 있다며 팀원분이 도움을 요청하셨다. 해결과정 먼저 API를 어떤 코드에서 호출하는지 살펴보았다. const { ... data: ExampleData, ... } = useInfiniteQuery( ['c.. 더보기 Firebase storage 파일 재귀적으로 삭제하기 프로젝트: 공우 어드민 키워드: firebase storage, recursively delete 상황 하나의 뉴스는 위지윅(WYSIWYG)으로 작성된 텍스트 파일, 썸네일 이미지, 첨부파일을 포함한다. 위의 3가지 정보(텍스트파일, 이미지, 첨부파일)는 firebase storage에 저장한다. 뉴스 id가 123 일 경우, 'news/123/content/content.txt', 'news/123/content/contentEng.txt', 'news/123/picture/thumbnail.png', 'news/123/attachments/example_1'...과 같이 저장한다. 뉴스 목록에서 삭제 버튼을 누르면 DB에 저장된 뉴스 정보와 함께 firebase storage의 파일들도 모두 삭제해야.. 더보기 이전 1 ··· 5 6 7 8 다음
