이세계 직업 테스트 이세계에서 나의 직업은? 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..
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설계 도구(틀림) - 디자인, 사용 방법 설명, 평가 등을 위해 실제 화면과 유사하게 만든 정적인 형태의 모형 - 시각적으로만 구성 요소를 배치하는 것으..
UML 다이어그램 중 순차 다이어그램에 대한 설명으로 틀린 것 1. 객체 간의 동적 상호작용을 시간 개념을 중심으로 모델링 하는 것 2. 주로 시스템의 정적 측면을 모델링 하기 위해 사용 (X) => 동적 측면 3. 일반적으로 다이어그램의 수직 방향이 시간의 흐름을 나타냄 4. 회귀 메세지, 제어블록 등으로 구성됨 유스케이스의 구성 요소 간의 관계에 포함되지 않는 것 => 구체화 => 연관, 확장, 일반화는 포함된다. GoF 디자인 패턴을 생성, 구조, 행동 패턴으로 분류할 때 구조 패턴이 아닌 것 (틀림) => Builder 패턴 생성: 팩토리 메소드, 싱글레톤, 프로토타입, 빌더, 추상 팩토리 구조: 어댑터, 브릿지, 컴퍼짓, 데코레이터, 퍼사드, 플라이웨이트, 프록시 행동: 책임 연쇄, 반복자, 명..
66. 소프트웨어 개발 방법론 활용 1) 소프트웨어 개발 생명주기 모형 프로토타입 모형 폭포수 모형(waterfall) 나선형 모형(위험 관리, 반복) CPM(Critical Path Method) - 작업의 총 소요 시간 예측하는 방법(가장 긴 기간으로) 구조적 방법론 => 데이터 흐름 다이어그램, 설계 구조도 객체지향 방법론 => 객체, 클래스, 메세지로 구성됨 캡슐화, 정보 은닉, 추상화, 상속, 다형성 컴포넌트 기반 개발 방법론 => 컴포넌트로 조합해서 개발한다. 소프트웨어 재사용 합성 중심(모듈을 만들어 끼움)/생성 중심(추상화 형태로 쓰여진 명세를 구체화) 68. 비용 산정 모델 1) 비용 산정 모델 종류 전문가 감정 기법, 델파이 기법, LOC 기법, COCOMO 모델 등등등... 델파이: ..
react-hook-form 아래 글에서 Web IDE의 로그인/회원가입을 구현할 때 react-hook-form을 사용했다고 적었다. 수료 후 우리 팀은 꾸준히 Web IDE 리팩토링을 하고 있는데, 이제 슬슬 나도 코드를 뜯어보기 위해 에디터를 들여다 보다가 react-hook-form을 좀 더 잘 이해해 봐야겠다는 생각이 들었다. (왜냐하면 저 때는 데드라인 맞추는 게 중요해서 공식 문서를 제대로 안 봤기 때문) [HongsamIDE] Web IDE 만들기 : react-hook-form으로 로그인/회원가입 구현 홍플릭스가 단순 과제 개념이라 선택사항이었다면 그 다음 프로젝트인 Web IDE는 필수였다. 그러니까 원래 팀끼리 하는 과제 1번이 SNS 클론, 2번이 넷플릭스 클론, 3번이 쇼핑몰, 4..
