오늘도 맑음

배경기본 달력 모양내 프로젝트 ✨ 수많은 달력 라이브러리 중 react-day-calender를 선택하는 것은 세가지 이유였다.1. 쉽고 빠른 구현을 위한 라이브러리의 필요2. 쉬운 CSS 커스텀3. tailwind 지원 이전 프로젝트에서는 달력 컴포넌트를 만들기 위해 MUI를 사용했었는데, CSS 커스텀이 쉽지 않았었다.마침 react-day-calendar는 CSS 커스텀이 쉽고,tailwind CSS 기반의 진행하는 프로젝트에 딱이였다.+ 친절한 공식문서 맨 처음 CSS 커스텀 방식 : tailwind공식문서에 따르면, classNames ={{}} 에 추가하면 된다고 했다.import { DayPicker, getDefaultClassNames } from "react-day-picker";exp..

결론 부터 얘기하자면, 백엔드 최대 이미지 설정의 이유였습니다.이 글은 이러한 이슈를 해결하기 위해 프론트엔드 개발자로써 어떤 부분을 테스트했는 지 공유하고자 올리는 글입니다. 배경모바일 웹에서 이미지 여러장 보내는 기능을 구현했다. (최대 6장까지 가능)하지만 PC 웹 환경에서와는 다르게 이슈가 있었다. 이미지 제한 조건프론트엔드 : 5MB 이하백엔드 : 5MB 이하 물론 프론트엔드에서 더 적은 파일 용량으로 이미지 압축을 진행할 수는 있었지만, 그래도 이 문제를 해결한 후 진행하기로 하고!이유에 대해 찾아보았다. 프론트엔드 테스트 진행우선 프론트엔드에서 이미지 사이즈를 어떻게 보내는지 알아야하는데..모바일 환경에서 테스트하기 위해 개발자 모드를 키고 (크롬에서 모바일 디바이스 디버깅 하는 방법 - 모..

배경동네사람들끼리 쓰레기를 줍는 프로젝트를 개발하고 있다.1차 개발 마감 후 테스트를 하기 위해 모바일 웹 환경에서 기능을 사용해보는데, PC 웹에서 테스트했을 땐 문제없던 곳에서 문제가 발생했다. 모바일에서는 PC 처럼 개발자도구[F12]로 테스트하기 어려웠고, 크롬에서 모바일 디바이스를 디버깅 할 수 있는 방법을 알아냈다.바로 "안드로이드 개발자 모드"들어만 봤지 직접 써보게 되다니 😊 크롬에서 모바일 디바이스 디버깅하는 방법1. USB로 Android 기기를 PC에 연결- 휴대폰과 컴퓨터를 USB 케이블로 연결 2. 휴대폰에서 개발자 옵션 활성화 -> USB 디버깅 허용1. 개발자 모드 활성화- 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 번호를 7번 연속 터치- 결과 : "개발자 모드 활..

문제 설명아래 그림과 같이 사이클을 찾는 문제이다.그림 1, 2 모두 사이클이 있는 경우로 "Yes" 를 출력하고, 만약 존재하지 않다면 "No"를 출력한다. 문제 풀이기본적으로는 dfs 코드를 차용했다. 하지만 방문했던 곳을 어떻게 또 방문을 할까?에 대해 생각했고, 내가 얻은 답은 다음과 같다. ✨ visited 배열 -> 시작 노드부터 현재 노드까지의 거리를 저장한 배열 첫번째 그림사이클을 찾고자 한다면, 4 -> 1로 돌아가야한다.현재 노드가 (r, c) 이고, 다음 노드가 (nr, nc) 일 때visited[r][c] - visited[nr][nc] >= 3 일 때, 사이클이 발생한다. --- (1) 두번째 그림시작노드를 포함해서는 사이클이 없지만, 이동하다보면 뒤에 사이클이 발견되는 경우이다...

svg 아이콘을 포함한 컴포넌트의 스토리북을 만들때 반드시 오류가 난다.Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 👉 "엘리먼트 타입이 유효하지 않습니다: (기본 내장 컴포넌트의 경우) 문자열이거나 (합성 컴포넌트의 경우) 클래스나 함수여야 하는데, 객체를 받았습니다." Icon을 컴포넌트처럼 사용하고 있는데, 에서 Icon이 클래스나 함수여야 하지만, 객체라서 컴포넌트로 만들수 없다. 즉 엘리먼트 타입이 유효하지 않다는 오류가 나온것이다. webpack은 .svg 파일을 보면 기본적으로 파일 경로를 문자열로..

보통 next에서는 svg 파일을 사용하기 위해서는 @svgr/webpack 을 설치한다.import Component from './star.svg' -> svg를 컴포넌트로 import하기import url from './star.svg?url' -> svg를 url로 import하기 1. svg를 컴포넌트로 import 하기webpack.config.js 혹은 next.config.js 에 @svgr/webpack 을 사용한다고 명시한다./**next.config.ts*/module.exports = { module: { rules: [ { test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ['@svgr/webpac..

const fs = require("fs");const input = fs.readFileSync("/dev/stdin", "utf8").trim().split("\n");const grid = input.slice().map((line) => line.split(" ").map(Number));let blanks = [];grid.forEach((line, i) => line.forEach((v, j) => (v === 0 ? blanks.push([i, j]) : null))); // 빈칸들의 위치를 [r, c] 로 저장let find = false;const rows = Array.from({ length: 9 }, () => new Set());const cols = Array.from({ len..

일반 회원가입 소셜 로그인 마이 페이지 소켓 - 참여한 방 Drawer 열었을 때 - 방 정보 Drawer 열었을 때 - 랭킹 정보

제가 직접 담당한 페이지만 넣었습니다.홈 화면홈 화면스크롤 내렸을 때 코치 리스트 화면코치 리스트 화면(필터) 정렬, 종목 설정(필터) 성별 설정 코치 상세 화면자기소개지도 뷰리뷰리뷰 등록 알림 화면알림 기록 화면기록 화면 전체날짜 클릭 시신체 정보 입력

문제 설명홀수인 자연수 N이 주어지면, NxN 그리드에 달팽이(=나선형) 모양으로 값을 채우는 문제이다.단 N 문제 풀이1. 시작 지점을 구해야 한다. 👉 sr, sc (startR, startC)- N = 3일 경우, (1,1)- N = 5일 경우, (2,2)- N = 7일 경우, (3,3)sr = Math.floor(N / 2)sc = Math.floor(N / 2) 2. 나선형으로 돌려야한다.아래 그림을 보면 맨처음은 위로 1번 이동하고 오른쪽으로 1번 이동하는 것을 알 수 있다.그 다음에는 아래로 2번 이동 왼쪽으로 2번 이동했다.그 다음에는 위로 3번 이동 오른쪽으로 3번 이동했다. 같은 방향으로 가야하는 칸의 수를 step이라고 하고, step = 1로 초기화한다.- step = 1 로 ..