디프만 15기지원 이유때는 바야흐로 작년 9월 우리 홍삼팀 백엔드 노루스름 님과 너디너리의 데모데이에 참석했을 때였다.비전공 + 개발 입문 = 말도 못하는 감자인데다 아무 것도 모르는 그 행사장을 돌아 다니면서 아쉬움이 많이 들었다. 생각없이 복전하지 말고 개발 할걸... 그리고 거기서 자신들이 만든 서비스를 홍보하는 사람들이 너무 반짝이고 뜨거워보여서 부러운 마음이 들었다.나도 하고 싶다는 생각이 들었지만 난 늙었고 ㅋㅋ 내 실력으론 불가능... 까진 아니어도 한참 걸리겠지 싶었다.그래도 그렇게 사람들과 서비스를 기획하고 런칭하고 홍보하는 순간이 있으면 재밌겠다고 생각했다. 노루스름 님이 다른 개발자 커뮤니티도 몇 개 알려주어서 이런 게 하나 뿐이 아니구나! 세상에 하고 여러 군데를 둘러봤는데...다 ..
들어가기 이번 프로젝트에서는 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는 유저가 주소창에 뭔가 잘못 입력한 경우를 고려해서 보여주는 에러 페이지로 곰곰 이후로 이걸 꼭 챙기고 있다. 💜 메인 페이지 메인 페이..
들어가기 곰곰 다이어리는 자신과 관련한 질문을 담은 다이어리를 만들어 공유하면 다른 사람들이 이에 대해 답장하는 문답 공유 웹 사이트다. 곰곰 다이어리에서는 로그인 기능을 별도로 구현하지 않고, 쿠키로 유저를 인식하고자 한다. 로그인을 해야만 이용할 수 있는 신생 웹 페이지에 유저들이 순순히 회원가입과 로그인을 해줄까? 우리의 생각은 아니다였다. OAuth도 로그인은 해야 하니 같은 맥락에서 제외했다. 또 단순 다이어리 생성/답장 하는 기능에서만 사용되니, 당장은 로그인 없이 유저를 인식해도 되겠다고 백엔드와 논의를 했다. 다만 이때는 몰랐다. 우리가 곰곰 다이어리에 더 많은 기능을 붙이게 될 줄은... 현재는 로그인의 필요성을 매우 느끼고 있다. 그래서 먼저 쿠키에 대해 좀 더 자세히 알아보았다. (내..
lighthouse란 기능 구현은 누구나 어떻게든 해낼 수는 있기에 좋은 코드를 짜거나 성능을 최적화 하는 것이 중요하다는 말을 많이 들었다. 성능을 최적화 한다는 게 상당히 추상적으로 느껴졌는데, 최근 읽었던 '프론트엔드 성능 최적화 가이드'에서 lighthouse에 대해 알게 되어 이를 통해 내가 만든 이세계 MBTI 테스트 웹페이지를 개선해보고자 한다. lighthouse는 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구다. 개발자 도구 탭에서 Lighthouse를 클릭하면 해당 페이지의 성능을 측정할 수 있다. 측정 기기로는 모바일과 데스크탑이 있는데, 데스크탑이 모바일보다 성능이 좋기 때문에 모바일 환경에서의 지표가 더 엄격하다. 카테고리로는 5개의 항목이 있다. Perform..
광고 붙이기 현재 80% 정도 완성된 이세계 MBTI 테스트에 광고를 붙여보려고 한다. 어차피 큰 수익은 기대하지 않고 있어서 붙여도 많아야 몇백원 벌겠지만 한 번 해보고 싶었던 작업이었다. 내가 만든 웹페이지에 광고라니! 남이 만든 플랫폼이 아니라 내가 만든 것에 싣는 광고 🥹 광고 만드는 일만 했지 붙이는 건 처음이네 크크크 0. 광고 플랫폼 비교하기 사실 부수입이 그렇게 중요한 건 아닌데다 덕지덕지 붙일 생각은 없어서 제일 간단한 광고 플랫폼을 고르기로 했다. 광고 플랫폼으로는 카카오 애드핏, 구글 애즈, 쿠팡 파트너스 3가지가 제일 흔한데 나는 카카오 애드핏을 선택했다. (광고비나 수익성이 아닌 매우 주관적인 기준) 애드핏 장점: 간단하다. 원하는 페이지에 붙일 수 있다. 단점: 바로 광고가 실..
들어가기 MBTI 테스트 구현 중, 모든 문항에 대한 답을 고르고 나면 결과 페이지로 이동하게 로직을 구성했다. 그런데 답을 하자마자 바로 딱! 하고 결과 페이지로 가니 뭔가 딱딱한 느낌이 들었다. 그래서 정적 페이지지만 setTimeout을 걸어서 로딩중 화면을 띄우고 몇 초 후 라우팅 되도록 로직을 수정했다. 이 때 로딩중 화면을 어떻게 띄울지 고민했는데, /loading 이라는 페이지로 라우팅하는 것보다 그냥 모든 문항에 대한 답을 고르면 어떤 값을 true로 설정해주고 이에 따라 삼항 연산자로 로딩중 화면을 띄우기로 했다. 이 로딩중 화면은 그 원래 서버로부터 어떤 답을 가져오기 전, 유저가 응답을 기다리는 동안 지루하지 않게, 에러가 난 건지 결과를 기다리는 건지 알려주기 위해, 이탈을 방지하기..
홍플릭스가 단순 과제 개념이라 선택사항이었다면 그 다음 프로젝트인 Web IDE는 필수였다. 그러니까 원래 팀끼리 하는 과제 1번이 SNS 클론, 2번이 넷플릭스 클론, 3번이 쇼핑몰, 4번이 Web IDE 였던 것 같은데, 커리큘럼이 바뀌면서 다음 코스였던 쇼핑몰은 빠지게 되고 (경쟁력 없는 포폴이라고 생각하신듯?) 4번이 필수 과제가 되었다. 우리 팀은 Web IDE에는 그다지 니즈가 없었어서... 내키지 않는 프로젝트라고 생각했다. 그런데 반드시 붙여야 하는 과제가 명확해서 나름대로 성과가 있었다. (비밀번호 재설정이나 채팅 기능이 필수였는데 이전에 프로필 수정 부분을 구현하고 싶었어서 잘됐다 싶었다.) 채팅이나 Web IDE 자체는 어떻게 구현해야 할지; 도무지 감이 잡히지 않아 난관이긴 했다. ..
콘텐츠 모달 지금 바로 보러 가기 클릭 시 로그인 & 구독 여부를 확인해 회차 정보 화면으로 이동 작품 DB에 등록된 작품 중 회차 정보도 등록된 작품이라면 에피소드 별 썸네일 노출, 클릭 시 영상 재생 작품 DB에 등록된 작품 중 회차 정보가 등록되지 않은 작품이라면 얼럿과 함께 뒤로 가기 작품 DB에 등록된 작품 중 회차 정보도 등록된 작품이라면 에피소드 별 썸네일 노출, 클릭 시 영상 재생 콘텐츠 모달은 어떤 콘텐츠를 눌러도 나와야 한다. 이걸 util로 빼거나 전역으로 관리했어야 했는데 그렇게 못 했다. 아무튼 모달에는 백 단과 미리 이야기해서 만들어 놓은 영화id, 썸네일 이미지, 타이틀, 장르, 생성일, 줄거리가 들어간다. 이 정보들은 어드민 페이지에서 미리 등록을 해놓은 것으로 외부 API를..
