어제보다 더 나은 오늘

반응형 디자인을 적용해 폰이나 태블릿 사이즈의 화면을 만들고 확인을 할 때 보통 크롬 개발자 도구의 device toolbar를 사용하곤 한다. 아이폰 SE, 아이폰 XR, 아이폰 12 Pro 등의 화면을 보고 만들어도 배포 후 실제 폰에서 화면을 띄워보면 UI가 다른 경우가 태반이다. 하단 주소창과 툴바 때문에 100vh 적용이 안 되는 건 기본이다. 이런 문제 때문에 이제까지 매번 배포 후에만 배포 링크로 접속해서 실제 모바일 뷰를 확인할 수 있었는데 모바일 브라우저에서도 localhost:3000 에 접속할 수 있는 방법이 있었다!  2024년 5월 13일 업데이트 :정확히는 모바일 브라우저에서 localhost:3000의 일종의 프리뷰 화면을 볼 수 있는 방법으로 엄밀히 말해서 localhost에..

지난주부터 몸풀기로 하루에 한 문제씩 코딩 테스트 연습 문제를 풀고 있다. 간단한 TIL을 매일 노션에 정리하고 있는데 블로그에 공유하고 싶은 내용이 있으면 간간히 포스팅을 해보려고 한다. usechatgpt init success 문제 설명은 다음의 링크로 갈음한다. 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 내 풀이function solution(k, m, score) { score.sort((a, b) => b - a); const repeat = parseInt(score.length / m); let sum = 0; for (let i = m -..

회원가입과 로그인 시, 이메일과 비밀번호 유효성 검사를 한 다음 유효하지 않은 문자열을 입력시 사용자에게 경고 메시지를 주고자 했다. 이메일은 @와 . 기호가 포함되어 있는지 여부를 기준으로 정규표현식을 사용하여 검사하는 함수를 작성했고, 비밀번호는 8~20자 사이의 영문자와 숫자를 최소 1개 이상 포함하는 경우 유효한 비밀번호라는 기준을 세웠다. // It checks for a sequence of characters that starts with one or more non-whitespace characters ([^\s@]+), // followed by an @ symbol, followed by one or more non-whitespace characters for the domain n..

프로젝트를 진행하면서 공통 UI 컴포넌트를 제작해서 사용했고, 그 중 대표적인 UI 컴포넌트가 버튼이었다. 먼저 프로젝트 진행 과정 중 버튼 컴포넌트의 변천사를 간단하게 정리한 다음, 프로젝트가 끝난 후 새로 알게 된 스타일 컴포넌트의 theming 기능을 적용해 보는 과정까지 기록하고자 한다. 1. styled-components로만 만든 버튼 프론트 팀원 중에서 한 분이 공통 ui 컴포넌트 제작을 맡아주셨다. 처음 만든 공통 ui 버튼 컴포넌트는 활성화/비활성화 느낌으로 두 종류의 다른 색상의 버튼을 컴포넌트명을 달리 해서 사용하는 방식이었다. 이후 다음의 두 가지 이유에서 해당 컴포넌트의 리팩토링 필요성을 느꼈다. 기본 파란색 버튼과 회색 버튼이 아닌 다른 색상의 버튼이 필요해졌다. (카카오톡 로그..

1. (TS 2345) Argument of type '...' is not assignable to parameter of type '...' 문제 상황: 광역시/도를 선택하면 해당 시/도에 대한 시/군/구를 select box에 보여줄 수 있게 하는 코드를 작성하려고 했다. 예를 들어 서울을 선택하면 서울의 코드 11000 중 앞의 두 자리 11을 divisionSelectValue라는 상태에 담고, 해당 상태를 useEffect의 종속성 배열에 넣어서 사용자가 시/도 단위의 지역을 선택해서 상태 변경이 일어날 때마다 districtList에 해당 시/도에 대한 시/군/구 데이터를 담으려는 게 목적이었다. // divisions.ts 파일 예시 export const DIVISIONS_DATA = [..

근 4주 간 생을 갈아넣었던 메인 프로젝트가 끝났다. 소모전 | 소모임 경기 전적 보기 소모임 경기 전적 보기, 소모전! 모임을 만들고, 경기 결과를 기록하고, 나와 모임원들의 승률을 확인해 보세요. somojeon.vercel.app 프로젝트를 처음 시작할 때는 분명 '기술 스택에 중점을 둔 프로젝트를 경험해 보고 싶다'는 마음으로 시작했는데, 프로젝트를 진행하다보니 기능 구현의 범위가 생각보다 넓었고 주어진 시간 내에 1차 기능 구현을 하기에도 시간이 급박했다. 결과적으로 새로운 기술 스택을 공부해서 프로젝트에 적용해보고자 했던 꿈은 물거품이 되었다... 새로운 기술 스택을 적용한다면 어떤 기술 스택을 사용할지에 대해 초반에 여러 이야기들이 오고갔는데 타입스크립트를 최우선으로 두기로 했다. 그나마 타..

사전 프로젝트에 이어 메인 프로젝트도 클라이언트 코드는 vercel의 배포 서비스를 이용하고 있다. 처음 깃헙 레포와 연동해주고 한두 가지 키워드 설정만 하면 자동 배포가 되고, PR을 올리면 충돌이 나는 곳은 없는지 배포가 가능한 상태인지 자동 검사를 해주니 너무 편리하다. 사전/메인 프로젝트 두 가지 프로젝트 모두 부트캠프에서 제안한 git flow 전략을 쓰고 있다. 사전 프로젝트에 이어 이번에도 코드 작성 이전에 미리 배포 세팅을 해두었는데, 지난 사전 프로젝트에서 교훈을 얻어 이번에는 한 발 더 나가 처음부터 dev 브랜치의 dev 배포 링크와 main 배포 링크를 분리했다. vercel은 production 모드와 preview 모드를 제공하기 때문에 이를 각각 두 브랜치에 연동하면 간단하게 ..

지난 목요일 2주 반 정도 시간을 쏟아부은 사전 프로젝트를 마감했다. 4개월의 학습 기간을 마치고 처음 해보는 프로젝트였다. 사전 프로젝트 목표는 Stack Overflow를 클론하는 거였다. 즉, 기본적인 질문, 답변 게시판 CRUD 및 회원가입/로그인이 주요 과제였다. 부트캠프에서 OT 때 안내하기로는 사전 프로젝트는 이 다음 메인 프로젝트를 위해 기능 구현에 힘을 쏟고, 자동 배포 등은 후순위로 두는 게 좋다고 얘기했지만, 나는 반대로 CRUD 기능 구현을 후순위에 두고 깃헙 등 여러 명이 함께 하는 프로젝트 툴 사용에 익숙해지는 것과 자동 배포, https 통신 프로토콜 같이 혼자서는 해볼 수 없는 것들을 프로젝트 때 경험해 보고 싶었다. 게시판 CRUD 기능은 혼자서도 얼마든지 구현해 볼 수 있..

1편과 2편에 이어 최종편으로 마무리해보려 한다. 프로젝트를 하면서 만난 에러 모음 및 회고는 언제 포스팅할 수 있으려나..🥲 1. 비밀번호 유효성 검사 필요한 유효성 검사: 최소 8자, 하나 이상의 문자와 하나의 숫자 // 8~20 글자 let regExp = /^[a-zA-Z0-9]{8,20}$/ // 8 글자만 검사 통과 let regExp = /^[a-zA-Z0-9]{8}$/ // 8 글자 이상 let regExp = /^[a-zA-Z0-9]{8,}$/ 🔽 최종적으로 작성한 checkPassword 함수 2. request header의 Authorization 인증 토큰을 서버에 보낼 때 요청 헤더의 authorization에 실어서 보냈다. 여러 곳에서 post 요청을 보내야 했기에 먼저 다음..

지난 1편에 이어 이틀 전 사전 프로젝트를 마무리한 시점에서 2편을 작성해 본다. 배운게 너무 많아서 어떻게 정리를 해야할지 모르겠지만 일단 하나씩 짧게라도 기록을 남겨본다. 최종편이 몇 편이 될 지는 나도 모름...😇 서버 쪽 배포 환경 유지가 아마 내일까지 밖에 안 될 거 같지만 그래도 남겨보는 배포 링크 https://seb42-pre-025-seb42-pre-025.vercel.app/questions 뉴진스의 Ditto요 seb42-pre-025-seb42-pre-025.vercel.app 클릭하자마자 시선을 강탈하는 빨간 화면이 떠서 깜짝 놀라실 텐데요. 이에 대한 원인은 현재까지 파악하기로는 클론을 너무 똑같이 해서... 구글이 사기성 사이트로 필터링을 하고 있는 것으로 짐작 중입니다. (아..