오늘도 맑음

개요필요한 파일을 백엔드에 요청했더니, presigned url을 요청하는 API를 주었다.서버 개발자는 필요한 에셋을 저장할 공간으로 S3를 선택하였고, 프론트엔드가 에셋이 필요할 경우 바로 S3 주소로 접근해서 가져오면 된다.하지만 S3의 주소는 노출되서는 안되기 때문에, 접근하기 위한 임시 주소 'Presigned URL'를 통해 접근한다. (ex. 안심번호와 비슷함. 안심번호는 개인의 실제 전화번호 노출을 막기 위해 만들어진 050으로 시작하는 임시 가상번호)Presigned URL을 통해 안전하게 에셋에 접근해서 가져올 수 있다. 개발 Flow1. 프론트엔드가 백엔드로 Presigned URL을 요청하는 쿼리를 보냄2. 백엔드는 Presigned URL을 프론트엔드로 전송3. 해당 Presign..

공부 중 생긴 궁금증Promise를 사용하다가 이런 코드 구조를 마주쳤다.new Promise((resolve, reject) => { // 여기서 비동기 로직을 수행한다 if (/* 실패 상황 */) { reject("에러 발생"); return; } resolve("성공");});처음에는 아무렇지 않게 썼지만, 곰곰이 생각해보니 이 구조가 매우 독특하게 느껴졌다.resolve, reject는 내가 만든 함수가 아닌데, 어디서 온 걸까?왜 핵심 로직(예: 타이머, API 호출 등)은 Promise 외부에서 정의할까?어떤 디자인 패턴인가?그래서 Promise를 직접 클래스 형태로 구현해보며 구조를 뜯어봤다.직접 구현한 Promise class MyPromise { constructor..

배경기본 달력 모양내 프로젝트 ✨ 수많은 달력 라이브러리 중 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 열었을 때 - 랭킹 정보