본문 바로가기

[ 프로젝트 ]/여기 여기 붙어라5

프론트엔드 성능 개선기 - 이미지 최적화 관련 피드백을 받지 못했던 걸 보면 나만 느낀 것일 수도 있는데, 우리 프로젝트를 이용하면서 처음 화면 렌더링 시간이 좀 느린 것 같다는 생각이 들었다. 그래서 간단하게 라이트하우스(Lighthouse; 웹페이지의 품질을 측정하기 위한 오픈소스 자동화 도구)를 돌려보게 되었다. 크롬 개발자 도구에 들어가 이렇게 설정을 하고(모바일 환경에서 이용되는 경우가 많아 기기는 모바일로 선택), 분석 버튼을 누르니 이런 결과 화면이 나왔다. 역시 좀 느린 게 맞았어..! 여기서 눈에 띄는 항목으로 최대 콘텐츠 렌더링 시간(Largest Contentful Paint)이라는 것이 있는데, LCP라고 불리는 이 지표는 최대 텍스트 또는 이미지가 표시되는 시간을 의미한다고 한다. 즉, 페이지 주요 내용의 렌더링 완료 시.. 2023. 9. 26.
우당탕탕 에러 해결 로그 ① 초대장 공유하기 기능을 만들 때였다. 링크 복사 버튼을 만들고, 페이스북이랑 트위터 공유는 react-share라는 라이브러리를 이용하였다. 그리고 카카오톡 공유는 카카오 메시지 api를 활용했는데, 여기서 카카오톡 버튼을 누르면, 이렇게 카카오톡 공유를 위한 새 창이 뜨게 되는 것이다. 그런데 이게 다른 때는 문제가 없는데, 새로고침을 하고 나면 이 창이 뜨질 않았다. https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.k.. 2023. 8. 21.
초대장 서비스 [ 여기 여기 붙어라 👍 ] 완성 후기 간단하게 시작했던 프로젝트가 생각보다 커져서 두 달 만에 드디어 버전 1 배포를 성공했다. 거의 카카오 api 활용 스터디였던 것 같다. 카카오 지도, 톡캘린더, 카카오톡 공유, (다음) 우편번호 서비스, 그리고 카카오 로그인까지 열심히 배우고 찾고 적용해 보면서 REST API 사용에 더 익숙해질 수 있었다. 정말 삽질도 많이 했는데, 이와 관련해서는 따로 정리해 둘 생각이다. ( → https://ddppp.tistory.com/160 ) >> 서비스 사용해 보기 www.here-here.co.kr 여기 여기 붙어라 www.here-here.co.kr >> 코드 보러 가기 https://github.com/dd-stack/here-here GitHub - dd-stack/here-here: 캐주얼 초.. 2023. 8. 20.
카카오 로그인 구현하기 [React] 카카오 api를 많이 사용하는 이번 프로젝트의 특성상 카카오 로그인을 먼저 구현하게 되었다. 카카오 로그인이 선행되어야 톡캘린더와 같은 기능을 이용할 수 있기 때문이다. 관련 로직을 이해하고 적용하는 데 거의 2주가 걸린 것 같은데, 물론 모든 시간을 프로젝트에 쏟은 건 아니지만 생각보다 꽤 오래 고생을 했다. 분명 프론트단은 어렵지 않다는 이야기를 들었었는데...! 우선, 카카오에서 제공하는 공식 문서를 찾아보았다. 상당히 꼼꼼하고 친절하게 사용 방법이 안내되어 있었다. https://developers.kakao.com/docs/latest/ko/kakaologin/common#intro-login-process Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요.. 2023. 7. 27.
초대장 서비스 [ 여기 여기 붙어라 👍 ] 기획 부트 캠프 수료 후 새로운 프로젝트를 시작했다. 이미 예전에 생각해 뒀던 게 있었는데, 여러 인원을 모아 프로젝트를 진행하기에는 좀 간단한 아이디어인 것 같아 백엔드를 공부하는 친구 한 명과 둘이서 만들어 보기로 했다. 이력서에 넣을만한 프로젝트가 될 수 있을지는 모르겠지만, 이번에는 꼭 그때그때 기록을 해 둘 생각이다. 최근 메인 프로젝트 관련 블로깅을 하고 있는데, 메모만 해 둔 내용이 상당히 많아 하나하나 기억해 내느라 고생하고 있다. 이번에 만들어볼 건 간단한 초대장 서비스이다. '친구들끼리 재미 삼아 공유하는 캐주얼한 초대장'이 컨셉이라고 할 수 있다. 좀 웃기긴 한데, 실제로 친한 친구들과 아래와 같은 초대권을 주고받으며 놀다가 나온 아이디어였다 ㅎㅎ 시중 초대장 관련 서비스들은 돌잔치, 청첩.. 2023. 6. 19.