들어가기 이번 프로젝트에서는 styled-components를 사용했다. 이전에도 사용해본 적 있는 스타일링 라이브러리지만, 실질적으로 어떻게 동작하는지는 모르고 있었다. 😅 (그저 CSS-in-JS라는 것과 ``으로 감싸 스타일링 하면 된다는 매우 단순한 기본 문법만 알고 있었다.) 이번 기회에 내가 왜 많은 스타일링 프레임워크 중 styled-components를 골랐는지, 이 기술의 장단점과 동작 원리에 대해 알아보았다. 왜 도입했는가? 먼저 이세계 MBTI를 만들기 전, 곰곰 다이어리를 만들 때에도 진행바를 구현한 적이 있었다. 진행바를 동적으로 스타일링 해야 했는데, CSS module을 사용하고 있어 인라인 태그로 스타일링을 구현할 수 밖에 없었다. 인라인 스타일을 지양해야 하는 이유는 가독성..
들어가기 개발자지만 아이러니하게도 이세계 MBTI를 만들면서 개발만큼 신경썼던 부분이 디자인이었다. 몇 번 개발을 하면서 '내가 힘들게 만든 내 새끼... 다른 사람들도 봐주면 좋을텐데' 라는 생각이 많이 들었다. MBTI 테스트를 2번이나 만든 이유도 MBTI 테스트 같은 스낵 컨텐츠는 비교적 유저 유입이 쉬울 것 같아서였다. 실제로 지인이 필요한 곰곰 다이어리(ㅠㅠ)는 참여율이 저조했으나 이세계 MBTI는 단시간 내 제법 높은 유입을 기록했다. 요는 사람들이 할만한 테스트를 만들고 싶었던 건데, box-shadow, text-shadow 등 몽환적인 톤앤매너를 가져가는 동시에 게임 사이트처럼 BGM을 넣고 싶었다. 우연히 어떤 게임 사이트를 들어갔는데 BGM이 잘 어울려서 이것저것 눌러봤던 개인적인 ..
이세계 직업 테스트 이세계에서 나의 직업은? another-world-test.vercel.app ~ 먼저 한 번 구경해보세요 💜🌙 ~ 구성 이전에 바닐라 JS로 MBTI 테스트를 만들어봤기에 이번에는 SPA로 MBTI 테스트를 또 만들어보기로 했다. 전자의 경우 시작 - 문제 - 결과(총 16개)라서 많은 html 파일이 필요했는데, React는 single page라서 하나로 해결한다. 즉 위 경우를 모두 컴포넌트로 보여줘야 하기 때문에 라우팅을 /, /questions, /result/${resultData}, /results, /error로 나눴다. /error는 유저가 주소창에 뭔가 잘못 입력한 경우를 고려해서 보여주는 에러 페이지로 곰곰 이후로 이걸 꼭 챙기고 있다. 💜 메인 페이지 메인 페이..
lighthouse란 기능 구현은 누구나 어떻게든 해낼 수는 있기에 좋은 코드를 짜거나 성능을 최적화 하는 것이 중요하다는 말을 많이 들었다. 성능을 최적화 한다는 게 상당히 추상적으로 느껴졌는데, 최근 읽었던 '프론트엔드 성능 최적화 가이드'에서 lighthouse에 대해 알게 되어 이를 통해 내가 만든 이세계 MBTI 테스트 웹페이지를 개선해보고자 한다. lighthouse는 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구다. 개발자 도구 탭에서 Lighthouse를 클릭하면 해당 페이지의 성능을 측정할 수 있다. 측정 기기로는 모바일과 데스크탑이 있는데, 데스크탑이 모바일보다 성능이 좋기 때문에 모바일 환경에서의 지표가 더 엄격하다. 카테고리로는 5개의 항목이 있다. Perform..
광고 붙이기 현재 80% 정도 완성된 이세계 MBTI 테스트에 광고를 붙여보려고 한다. 어차피 큰 수익은 기대하지 않고 있어서 붙여도 많아야 몇백원 벌겠지만 한 번 해보고 싶었던 작업이었다. 내가 만든 웹페이지에 광고라니! 남이 만든 플랫폼이 아니라 내가 만든 것에 싣는 광고 🥹 광고 만드는 일만 했지 붙이는 건 처음이네 크크크 0. 광고 플랫폼 비교하기 사실 부수입이 그렇게 중요한 건 아닌데다 덕지덕지 붙일 생각은 없어서 제일 간단한 광고 플랫폼을 고르기로 했다. 광고 플랫폼으로는 카카오 애드핏, 구글 애즈, 쿠팡 파트너스 3가지가 제일 흔한데 나는 카카오 애드핏을 선택했다. (광고비나 수익성이 아닌 매우 주관적인 기준) 애드핏 장점: 간단하다. 원하는 페이지에 붙일 수 있다. 단점: 바로 광고가 실..
들어가기 MBTI 테스트 구현 중, 모든 문항에 대한 답을 고르고 나면 결과 페이지로 이동하게 로직을 구성했다. 그런데 답을 하자마자 바로 딱! 하고 결과 페이지로 가니 뭔가 딱딱한 느낌이 들었다. 그래서 정적 페이지지만 setTimeout을 걸어서 로딩중 화면을 띄우고 몇 초 후 라우팅 되도록 로직을 수정했다. 이 때 로딩중 화면을 어떻게 띄울지 고민했는데, /loading 이라는 페이지로 라우팅하는 것보다 그냥 모든 문항에 대한 답을 고르면 어떤 값을 true로 설정해주고 이에 따라 삼항 연산자로 로딩중 화면을 띄우기로 했다. 이 로딩중 화면은 그 원래 서버로부터 어떤 답을 가져오기 전, 유저가 응답을 기다리는 동안 지루하지 않게, 에러가 난 건지 결과를 기다리는 건지 알려주기 위해, 이탈을 방지하기..
