💥 문제 상황 getSlideComponent라는 함수로 screenWitdh에 따라 적절한 캐러셀을 보여주려고 한다. screenWidth가 1200 이하면 MO 버전으로, 그 이상이면 PC 버전의 캐러셀을 보여주려고 한다. const getSlideComponent = () => { if (screenWidth 1200) { return slidesPC; } }; slidesMO, slidesPC는 모두 string[] 타입을 갖고 있다. const slidesPC = [ `${import.meta.env.VITE_PUBLIC_URL}/src/assets/img/carousel/딸기_PC.jpg`, `${import.meta.env.VITE_PUBLIC_URL}/src/assets/img/carous..
✏️ Describing the UI : Rendering Lists React에서 filter와 map을 이용해 데이터 배열을 필터링하고 컴포넌트 배열로 반환할 수 있다. Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 이런 콘텐츠 목록이 있을 때, 해당 데이터에 뭔가를 추가하게 되면 수동으로 코드를 고쳐줘야 한다. 이 때 해당 데이터를 구조화 하면 유지보수에도 용이하고 코드의 가독성도 좋아진다. const people..
들어가기 이번 프로젝트에서는 styled-components를 사용했다. 이전에도 사용해본 적 있는 스타일링 라이브러리지만, 실질적으로 어떻게 동작하는지는 모르고 있었다. 😅 (그저 CSS-in-JS라는 것과 ``으로 감싸 스타일링 하면 된다는 매우 단순한 기본 문법만 알고 있었다.) 이번 기회에 내가 왜 많은 스타일링 프레임워크 중 styled-components를 골랐는지, 이 기술의 장단점과 동작 원리에 대해 알아보았다. 왜 도입했는가? 먼저 이세계 MBTI를 만들기 전, 곰곰 다이어리를 만들 때에도 진행바를 구현한 적이 있었다. 진행바를 동적으로 스타일링 해야 했는데, CSS module을 사용하고 있어 인라인 태그로 스타일링을 구현할 수 밖에 없었다. 인라인 스타일을 지양해야 하는 이유는 가독성..
들어가기 개발자지만 아이러니하게도 이세계 MBTI를 만들면서 개발만큼 신경썼던 부분이 디자인이었다. 몇 번 개발을 하면서 '내가 힘들게 만든 내 새끼... 다른 사람들도 봐주면 좋을텐데' 라는 생각이 많이 들었다. MBTI 테스트를 2번이나 만든 이유도 MBTI 테스트 같은 스낵 컨텐츠는 비교적 유저 유입이 쉬울 것 같아서였다. 실제로 지인이 필요한 곰곰 다이어리(ㅠㅠ)는 참여율이 저조했으나 이세계 MBTI는 단시간 내 제법 높은 유입을 기록했다. 요는 사람들이 할만한 테스트를 만들고 싶었던 건데, box-shadow, text-shadow 등 몽환적인 톤앤매너를 가져가는 동시에 게임 사이트처럼 BGM을 넣고 싶었다. 우연히 어떤 게임 사이트를 들어갔는데 BGM이 잘 어울려서 이것저것 눌러봤던 개인적인 ..
들어가기 yarn + Vite + TS로 웹 개발 시 진행하는 절차를 기록하려고 한다. 최근까지 작업한 이세계 MBTI는 JS -> TS로 마이그레이션 한 거지, 처음부터 작업한 건 아니었다. 이번에 CSS 및 반응형 작업을 해보기 위해 갱규님과 작업을 새로 하게 되어 바로 TS로 진행하기로 했다. 대부분 TS 강의가 TS 문법 및 개념 설명에 그쳐서 실질적으로 웹 개발에 만날 여러 에러들이 기대된다 ^_^... 프로젝트 생성하기 Vite와 CRA에 대해서도 좀 더 스터디 해봐야겠지만, React 공식 문서에서 CRA가 빠진지 꽤 되었고 Vite가 훨씬 성능이 좋기 때문에 최근에는 Vite가 더 많이 사용되고 있다. 최근 개발 흐름이 Vite로 넘어가고 있어서 나도 공부해보고자 Vite를 써보고 있다. ..
이세계 직업 테스트 이세계에서 나의 직업은? 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..
Vite의 환경 변수 곰곰 다이어리와 이세계 MBTI에서는 Vite를 사용했다. 이번 글의 주제가 번들러는 아니기 때문에 간단하게 설명하면 Vite는 CRA와 같은 번들러다. CRA(create-react-app)으로 대부분의 프로젝트를 생성하는데, 프로젝트 크기가 크고 빌드 속도가 느리다는 단점이 있다. CRA의 대체제로 부상한 것이 Vite인데, 이 Vite는 CRA에서 환경 변수를 사용할 때와 방법이 조금 다르다. CRA에서는 1. .env 파일 생성 2. REACT_APP 으로 변수명이 시작되는 변수 생성 3. 따옴표로 감싸거나 띄어쓰기를 사용하지 않는다. 4. 사용 시 process.env.변수명 으로 호출한다. REACT_APP_TEST_DATA = hello process.env.REACT..
광고 붙이기 현재 80% 정도 완성된 이세계 MBTI 테스트에 광고를 붙여보려고 한다. 어차피 큰 수익은 기대하지 않고 있어서 붙여도 많아야 몇백원 벌겠지만 한 번 해보고 싶었던 작업이었다. 내가 만든 웹페이지에 광고라니! 남이 만든 플랫폼이 아니라 내가 만든 것에 싣는 광고 🥹 광고 만드는 일만 했지 붙이는 건 처음이네 크크크 0. 광고 플랫폼 비교하기 사실 부수입이 그렇게 중요한 건 아닌데다 덕지덕지 붙일 생각은 없어서 제일 간단한 광고 플랫폼을 고르기로 했다. 광고 플랫폼으로는 카카오 애드핏, 구글 애즈, 쿠팡 파트너스 3가지가 제일 흔한데 나는 카카오 애드핏을 선택했다. (광고비나 수익성이 아닌 매우 주관적인 기준) 애드핏 장점: 간단하다. 원하는 페이지에 붙일 수 있다. 단점: 바로 광고가 실..
설계 기법 중 하향식 설계 방법과 상향식 설계 방법에 대한 비교 설명으로 가장 옳지 않은 것(틀림) 1. 하향식 설계에서는 통합 검사 시 인터페이스가 이미 정의되어 있어 통합이 간단하다. (O) 2. 하향식 설계에서 레벨이 낮은 데이터 구조의 세부 사항은 설계초기 단계에서 필요하다. (O) 3. 상향식 설계는 최하위 수준에서 각각의 모듈들을 설계하고 이러한 모듈이 완성되면 이들을 결합하여 검사한다. (X) 4. 상향식 설계에서는 인터페이스가 이미 성립되어 있지 않더라도 기능 추가가 쉽다. (O) => 인터페이스가 성립되어야 기능 추가를 할 수 있다. UI설계 도구(틀림) - 디자인, 사용 방법 설명, 평가 등을 위해 실제 화면과 유사하게 만든 정적인 형태의 모형 - 시각적으로만 구성 요소를 배치하는 것으..
