티스토리

Now or Never

검색하기

블로그 홈

Now or Never

norwayy.tistory.com/m

GrapeMilk 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

Leetcode 2910. Minimum Number of Groups to Create a Valid Assignment 문제 링크 - 그룹의 수를 최소화 해야하기 때문에 그룹안에 ball을 최대한 많이 넣어야 한다 (그리디) - 그룹핑을 할 때 나머지가 있으면 나머지로 그룹을 만들 수 있는지 확인해야 한다. function minGroupsForValidAssignment(balls: number[]): number { const map = new Map(); for (const n of balls) { map.set(n, (map.get(n) || 0) + 1); } let min = balls.length; for (const v of map.values()) { min = Math.min(min, v); } // size는 min 값부터 시작 (가장 큰 그룹을 만들 수 있는 크기, 그리디) .. 공감수 0 댓글수 0 2025. 2. 7.
전역 상태 라이브러리를 왜 사용할까? 간단한 전역 객체를 만들다가 들었던 생각을 공유해 봅니다.javascript에서 모듈안에 생성된 객체/배열은 다른 모듈에서 import할 때 새 인스턴스가 생기지 않는다.예를들어 module.js라는 공유되는 모듈이 있고module.jsexport const arr = []; A.js 모듈에서 arr를 import한 뒤 숫자 1을 push 하는 코드가 있다.import { arr } from "./module"; arr.push(1); B.js 모듈에서 arr를 콘솔에 찍어보면 push된 값이 반영된 걸 확인할 수 있다.// B.jsimport { arr } from "./module";console.log("B.js에서 arr:", arr); // [1] (A.js에서 변경한 값이 반영됨) 참조의 공유.. 공감수 1 댓글수 0 2025. 2. 4.
useEffect vs useLayoutEffect useScrollRestoration Hook을 구현하면서 발생한 문제를 기록 해봤습니다.useScrollRestoration훅은 특정 페이지에서 스크롤 이벤트가 발생할 때마다 scrollY값을 sessionStorage에 저장한다.무한스크롤로 구현된 목록 페이지에서 상세페이지로 이동한뒤 다시 목록에 돌아왔을 때 scrollY값을 유지함으로써 좋은 탐색 UX를 위해 자주 사용되는 기능이다. 이 훅을 구현하면서 발생한 이슈가 있었는데 useEffect vs useLayoutEffect 관점에서 기록해보려고 한다. useScrollRestoration훅 초기 버전import { useEffect, useLayoutEffect } from 'react'import { useRouter } from 'next/.. 공감수 0 댓글수 0 2025. 1. 31.
javascript import overhead es-toolkit의 PR을 구경하다가 bench: remove import overhead 라는 제목의 PR을 보게 됐다. 해당 PR에는 아래와 같은 수정이 있는데 이게 import의 overhead를 어떻게 줄일 수 있는지 궁금해졌다.그리고 gpt에게 물어봤다.첫 번째 질문1번에서 2번으로 코드를 수정했는데 import overhead가 줄었어 어떤 차이야?1번import { after as afterToolkit } from 'es-toolkit';import { after as afterLodash } from 'lodash';2번import { after as afterToolkit_ } from 'es-toolkit';import { after as afterLodash_ } from 'lod.. 공감수 3 댓글수 0 2025. 1. 5.
for of vs for javaScript에서 for...of와 일반적인 for 루프의 성능 차이는 사용하는 용도에 따라 다르지만 보통 for의 성능이 좋다1. for동작 방식: for 루프는 인덱스를 기반으로 배열이나 반복 가능한 객체에 직접 접근한다.성능: 배열의 길이가 크고 단순히 인덱스를 사용해 값을 순회할 때, 최적화가 잘 되어 있기 때문에 성능 면에서 이점이 있다.const arr = [1, 2, 3, 4]; for (let i = 0; i 2. for...of동작 방식: for...of는 반복 가능한 객체(iterable)에서 값 자체를 순회한다. 배열 외에도 Map, Set 같은 다른 이터러블 객체에도 사용할 수 있다.성능: for...of는 내부적으로 이터레이터를 생성하고 그 값을 가져오기 때문에, 단순 배열 .. 공감수 0 댓글수 0 2024. 9. 9.
리액트에서 "렌더링(rendering)"이란? 프론트엔드에서 렌더링은 범용적인 용어이다, 브라우저에서도 리액트에서도 렌더링이 발생한다. 리액트에서 렌더링은 무엇일까? TL;DR 렌더링이란?브라우저 DOM을 직접적으로 수정하는 비용을 줄이기 위해 React에서 수행하는 작업이며 브라우저 DOM을 업데이트할 범위를 결정하고 반영하는 과정. Trigger, Render, Commit리엑트는 "렌더링과정"을 통해 브라우저 DOM을 업데이트할 범위를 결정하고 반영한다. 여기서 렌더링과정은 "Trigger", "Render", "Commit" 단계로 나뉜다. Trigger렌더링을 유발하는 단계로 두 가지 상황이 있다.1. 앱 시작 초기(initial render)initial render는 target DOM node(root)와 함께 createRoot를 .. 공감수 1 댓글수 1 2024. 8. 23.
HTTP 요청 생성 및 분석 nc example.com 80 nc (netcat) 명령어를 터미널에 입력하면 간단하게 TCP 연결을 생성할 수 있다. GET / HTTP/1.0Host: example.com 그 다음 GET 요청을 작성한 뒤 엔터를 누르면 response를 받을 수 있다. 터미널에서 명령어를 통해 간단하게 TCP 연결 및 HTTP 요청을 수행했다! HTTP 요청과 응답을 하나씩 뜯어보면 request header 분석GET / HTTP/1.0GET: HTTP method를 의미/: 요청 urlHTTP/1.0: HTTP 버전 Host: example.com: 요청 도메인 이름 response header 분석HTTP/1.0 200 OKHTTP/1.0: HTTP 버전200 OK: 응답 상태 코드 그 외 key:va.. 공감수 0 댓글수 0 2024. 8. 23.
(Graphql Apollo) dataIdFromObject와 keyFields deprecated된 dataIdFromObject를 keyFields로 변경하면서 생긴 이슈 기록 Apollo Graphql은 Object 타입을 캐시할 때 기본 식별자로 id 필드를 사용한다. Object에 id필드가 없거나 다른 필드를 식별자로 사용하고 싶은 경우 커스텀 할 수 있다. Configuring the Apollo Client cachekeyFields: ["title", "author", ["name"]],www.apollographql.com 그 때 사용하는 것이 dataIdFromObject 함수 또는 KeyField이다. 공식문서에서는 dataIdFromObject의 세 가지 결점을 이유로 KeyFields 사용을 권장한다. dataIdFromObject의 세 가지 결점 1) I.. 공감수 0 댓글수 0 2024. 8. 22.
What Is Presigned Url Presigned Url A Presigned URL is a URL that provides temporary, secure access to a specific resource in cloud storage (like Amazon S3) without needing the client to have full access credentials. It is commonly used in scenarios where a client needs to upload or download files directly to/from cloud storage, while the server still controls access. How Presigned URLs Work When a presigned URL is .. 공감수 0 댓글수 0 2024. 8. 18.
20240814 TIL React Graphql Masterclass32. Data Resolver - Overriding A Field GraphQL 서버는 graphql 요청시 scalar 타입이면 값을 그대로 response하고 object 타입이면 object 타입의 각 필드마다 관련된 매핑 함수가 있는지 확인한다. 예를 들어 아래와 같은 데이터 구조에서type Query { sayHello: String customers: [Customer]!}type Customer { id: ID name: String age: Int city: String}public class Customer { private Integer id; private String name; priv.. 공감수 0 댓글수 0 2024. 8. 14.
[프로그래머스] 점프와 순간이동 문제링크 ( https://school.programmers.co.kr/learn/courses/30/lessons/12980 ) 1. 풀이 힌트 - 순간이동을 최대한 많이 해야하므로 n에서 2를 나눈다. - 나누어 떨어지지 않는다면 점프를 해야하는 구간이므로 answer을 카운트 한다. - 몫이 0이 되면 카운트한 answer을 출력한다. 2. 코드 풀이 function solution(n) { let answer = 0; while(n > 0) { if(n % 2 === 0) { n /= 2; } else { n--; answer++; } } return answer; } 3. 회고 - 처음에는 0부터 세는 방식으로 접근했다. 각 step에서 점프와 순간이동을 호출하는 재귀 함수를 구현했다. 결과는 .. 공감수 0 댓글수 0 2023. 10. 3.
react-query에서 특정 상황에서만 데이터를 조회하고 싶을 때 https://careerly.co.kr/qnas/1273?fa=qna-list react-query useQuery vs... 안녕하세요. react-query에서 useQuery와 useMutation을 쓰는 도중 의문이 생겨서 질문드립니다. 보통 Read 작업은 useQuery를 쓰고... careerly.co.kr 커리어리에 올라온 질문에 답변을 하다가 react-query를 이용하여 데이터를 특정 상황에서만 조회하고 싶을 때 어떤 hook을 사용해야 하는지 고민해보았다. 2가지 방법으로 특정 상황에서만 데이터를 조회할 수 있을 것 같다. 1. useQuery 사용 - useQuery를 기본적으로 enable: false 상태로 두고, refetch 함수를 통해 특정 상황에서 데이터를 가져온다 2.. 공감수 0 댓글수 0 2022. 12. 10.
20220917 TIL 1) addEventListener의 options 중 { passive: ture}에 대하여. - 자바스크립트에서 addEventListener()를 통해 등록된 이벤트는 컴포지터 스레드가 받음. 이벤트가 들어오면 컴포지터 스레드는 메인 스레드에 이벤트를 넘기고 렌더링 파이프라인에 따라 layout, paint를 거쳐 Layout tree를 기다림. EventListenerOptions의 속성 중 passive 속성이 바로 이 파이프라인과 관계가 있음. { passive:true }는 이벤트를 받는 컴포지터 스레드에 해당 이벤트가 메인 스레드의 처리를 기다리지 않고 바로 Composite를 수행해도 된다는 힌트를 주는 것. 이 속성이 설정되면 컴포지터 스레드는 원래의 동작대로 이벤트를 메인 스레드에 넘.. 공감수 0 댓글수 0 2022. 9. 17.
20220831 TIL - CURL 이란? : cURL = Client URL, 클라이언트에서 커맨드 라인이나 소스코드로 손 쉽게 웹 브라우저 처럼 활동할 수 있도록 해주는 기술(커맨드라인 Tool 혹은 라이브러리) 공감수 0 댓글수 0 2022. 8. 31.
20220830 TIL - Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “…/”. 에러 해결 https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573 공감수 0 댓글수 0 2022. 8. 30.
20220726 TIL 1. 1px(픽셀)은 몇 바이트? - 흑백은 각 픽셀의 밝기 값을 0~255 사이 값으로 표현하며 1byte(8bit)를 차지함, 컬러의 경우 3byte를 차지함. 이때 각 바이트는 빛의 3원색인 빨강(red), 녹색(green), 파랑(blue)이며, 0~255 사이의 값으로 빨강의 정도, 녹색의 정도, 파랑의 정도를 각각 나타냄. 각각의 8bit의 기본 컬러 3개를 조합하여, 256x256x256=16,777,216개의 컬러를 만들어낼 수 있으며 8bit(red, green, blue) 3개를 조합하여 총 24bit를 이용하여 컬러를 표현했으며 이를 트루 컬러(True color)라고 부름. 공감수 0 댓글수 0 2022. 7. 26.
20220724 TIL 1. HTTP 통신에 사용되는 object는 왜 JSON.stringfy를 해야할까? - HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식. HTTP 메시지는 ASCII로 인코딩된 텍스트 정보이며 여러 줄로 되어 있음. - 문자열 인코딩은 2진법을 사용하는 컴퓨터가 인간의 언어를 2진수로 변환하는 방식. ex) 아스키 코드, EUC-KR, UTF-16, UTF-32다. - 서버에 request하는 값을 text (string) 형식으로 보내기 위해 JSON 형식으로 string화 하여 보낸다. 공감수 0 댓글수 0 2022. 7. 24.
20220708 TIL 1. inactive vs active (react-query) - 같은 키를 가진 캐싱된 query중에서 가장 최근에 fetching한 쿼리 값은 active 나머지는 inactive 상태임. 2. invalidation vs refetch (react-query) - query의 상태를 mutation으로 변경한 뒤 해당 쿼리를 다시 서버에 요청해야할 때 invalidation과 refetch를 사용할 수 있다. - invalidation은 해당 쿼리를 stale한 상태로 변경하는 것으로 새롭게 refetch를 하게 하고, refech는 같은 queryKey로 서버에 다시 데이터 요청을 한다. - 둘 다 새롭게 데이터를 요청하는 것은 같으나 동작이 미묘하게 다르고 usecase도 다르다. - 페이징 .. 공감수 0 댓글수 0 2022. 7. 9.
220530 TIL 커스텀 훅의 반환 객체를 useMemo로 감싸야 할까? - 커스텀 훅의 반환 객체를 그대로 사용 한다면 O, 구조 분해 할당을 통해 객체 안의 값을 사용한다면 X. 전자의 경우는 드물기 때문에 대부분의 경우에서 커스텀 훅을 useMemo로 감싸지 않아도 될 것 같다. 공감수 0 댓글수 0 2022. 5. 31.
220522 TIL 1. 제어 컴포넌트 vs 비제어 컴포넌트 - 제어 컴포넌트 : 컴포넌트가 개별 state를 가지고 있음. 컴포넌트의 state 업데이트와 동시에 렌더링 (useState) - 비제어 컴포넌트 : 컴포넌트의 데이터를 useRef로 관리. 데이터의 업데이트와 동시에 컴포넌트가 렌더링 되지 않고 특정 이벤트 트리거시 컴포넌트 랜더링 2. 리코일: selectorFamily - 순수 함수로 사용되는 selector와 달리 parameter를 통해 데이터를 한번 조작해서 가져올 수 있는 리코일의 유틸 함수. 3. 리액트쿼리: invaildateQueries vs Optimistic Update - 리액트쿼리의 mutate로 데이터를 변경한 후에 서버의 업데이트 데이터를 바로 가져오는 것 vs 클라이언트에서 낙관적.. 공감수 0 댓글수 0 2022. 5. 22.
같이 일하기 좋은 사람 대학생 때 방학기간동안 용돈 벌이를 위해 의자를 만드는 공장에서 일한 적이 있다. 조립된 의자를 나르거나, 완성품을 넣은 박스를 접고 나르는 일을 주로 했었다. 박스 조립과정은 일이 분할되어 있어 협업이 필요했다. 먼저 쌓아진 박스를 지게차가 가져온다. 1. 한 사람이 묶여진 박스를 풀고 옆 사람에 나눠준다. 2. 받은 사람은 박스를 네모 모양으로 접고 그 다음 사람에게 넘겨준다. 3. 마지막 사람은 받은 박스를 테이프로 포장한다. 2번에서 3번 과정으로 넘어가는 부분에서 조립된 박스를 어떤 방향으로 3번 작업에게 전달해주냐에 따라 3번 작업자가 수월하게 일을 할 수 있게 되고 작업 속도가 빨라진다. 네모 모양으로 접혀진 박스는 테이프로 마감되어야 할 부분이 명백하게 있어서 2번 작업자가 그 부분을 위로.. 공감수 3 댓글수 0 2022. 4. 30.
.gitignore가 무시될 때 무시하고 싶은 폴더나 파일을 .gitignore에 명시해도 적용되지 않을 때가 있다. 주의! : 현재 작업중인 변경사항은 커밋이나 stash를 한 뒤 명령어를 적용하자. 최상위 폴더에서 다음 명령어를 실행하면 잘 적용된다. git rm -r --cached . git add . git commit -m "fixed untracked files" Ref ( https://stackoverflow.com/questions/11451535/gitignore-is-ignored-by-git ) 공감수 0 댓글수 0 2022. 2. 5.
프로그래머스 - 배달 (Javascript) 문제링크 ( https://programmers.co.kr/learn/courses/30/lessons/12978 ) 아이디어 1) 1번 마을에서 각 마을로 갈 수 있는 최단 시간을 저장하기 위한 배열 dp 선언 2) 인접행렬(map)을 만들어 문제의 input으로 주어진 road를 통해 가중치 그래프 구현. 3) 구현한 인접행렬을 이용하여 K시간 이내에 1번 마을에서 갈 수 있는 최대 마을 수를 구함 (dfs) 3-1) dfs 함수는 인접행렬에서 탐색하려하는 행의 인덱스 (idx, 즉 마을)와 각 마을을 거쳐오면서 소요된 시간의 합 (sum)을 인자로 받음. 3-2) idx번째의 행 (특정 마을)을 탐색하면서 마을이 연결되어 있으면서 (time > 0) 현재 마을이동 시간과 소요된 시간의 합이 K 보다.. 공감수 0 댓글수 0 2022. 1. 26.
git status 명령어시 한글 파일 이름이 깨짐. git config --global core.quotepath false 명령어로 해결 * Ref - ( https://jyami.tistory.com/89 ) 공감수 0 댓글수 0 2022. 1. 22.
노력하는자는 즐기는자를 이길 수 없다. 오랜만에 일본어 스터디에 나갔다. 만료된 일본어능력시험(JLPT) 1급을 갱신하기 위해 작년 초에 들어간 일본어 스터디였다. 나는 작년 7월 시험을 끝으로 스터디에서 나왔는데, 우연히 스터디 맴버 중 한분이 연초 인사를 건내왔고, 기존 4명의 맴버중에서 두 분이 꾸준히 스터디를 하고 계신다는 소식을 들었다. 당시에는 공부만 같이했던 사이임에도 오랜만에 봬니 다들 정겹고 반가웠다. 그분들은 이제 시험준비는 안하고, 일본 문학이나 뉴스를 선정해서 독해 공부를 하고 계셨다. 오늘 준비한 자료를 나한테도 전달해 주셨고, 나쇼몬이라는 일본의 고전 단편 문학을 한줄한줄 읽으면서 공부했다. 처음 원서를 접하고 충격이었던 게 기본적인 한자단어도 읽는 방법이 기억나지 않았다. 내 차례 때 겨우 두분의 도움을 받아서 더듬.. 공감수 0 댓글수 0 2022. 1. 17.
프로그래머스 - 프렌즈4블록 (Javascript) 문제 링크 ( https://programmers.co.kr/learn/courses/30/lessons/17679# ) 아이디어 1. board를 2차원 배열로 변환(boardArr) 2. 변환된 배열을 0,0 -> m - 1, n - 1까지 순회하면서 4블록을 만들 수 있는 경우를 체크 3. 체크된 범위를 객체화하여 지워질 배열(deletedArr)에 저장 4. deletedArr를 순회하면서 boardArr의 공간을 비움 5. 비워진 공간에 따라 프렌즈들을 빈 공간으로 내림 (DropBlockToEmptySpace) 6. 1 ~ 5의 시행을 더이상 지울 4블록이 없을 때 까지 시행 (deletedArr가 empty일 때) 7. 최종적으로 만들어진 boardArr를 순회하면서 지워진 부분 (빈스트링인.. 공감수 0 댓글수 0 2021. 11. 23.
for in vs for of (자바스크립트) 자바스크립트에서 for in과 for of의 차이점. 자바스크립트에서 for in과 for of는 둘 다 데이터 구조를 루핑하는데 쓰이는 문법이다. 1) for in : 객체(object)가 갖고 있는 property의 key들을 순환한다. 2) for of : array, string, nodeList와 같은 반복가능한 객체(iterable object)의 value를 순환한다. for of와 in의 사용 예제 let list = [4, 5, 6]; for (let i in list) { console.log(i); // "0", "1", "2", } for (let i of list) { console.log(i); // "4", "5", "6" } 즉, 자바스크립트에서 for of와 in의 구분은 .. 공감수 0 댓글수 0 2021. 11. 15.
[프로그래머스] 타겟넘버 (Javascript) 문제링크 ( https://programmers.co.kr/learn/courses/30/lessons/43165 ) 내 풀이 - 재귀를 돌면서 operation 배열안에 +또는 -를 numbers만큼 채운다. (countWaysToMakeTarget) - numbers만큼 채운 뒤에는 채워진 opertaion으로 숫자를 계산한다 (getCalculatedNumber) - 계산한 숫자가 target과 같으면 answer을 증가시킨다. function mySolution(numbers, target) { var answer = 0; const getCalculatedNumber = (operatorArr) => numbers.reduce((pre, cur, idx) => operatorArr[idx] ==.. 공감수 0 댓글수 0 2021. 11. 5.
네트워크 인캡슐레이션과 디캡슐레이션 Goal - 네트워크 전송과정에서의 인캡슐레이션과 디캡슐레이션에 대해 알아본다. 인캡슐레이션과 디캡슐레이션 상위 계층 -> 하위 계층 (인캡슐레이션) 그 반대는 디캡슐레이션 패킷 기반 네트워크 : 데이터를 패킷으로 쪼갬. 하나의 통신이 회선 전체를 점유하지 않고 동시에 여러 단말이 통신하도록 해줌. 데이터를 패킷으로 쪼개고 네트워크를 이용해 목적지로 보내고 받는 쪽에서는 패킷을 다시 큰 데이터 형태로 결합해 사용. 애플리케이션에서 하위 계층(1~4계층)으로 내려보내면서 패킷에 데이터를 넣을 수 있도록 분할함. (인캡슐레이션) 네트워크 상황을 고려해 적절한 크기로 데이터를 쪼개고 4계층 부터 네트워크 전송을 위한 정보를 헤더에 붙여 넣음. 헤더에 추가되는 정보는 비트 단위로 사용. 4계층에서 필요한 헤더 .. 공감수 0 댓글수 0 2021. 10. 23.
OSI 7계층과 TCP/IP Goal - OSI 7계층과 TCP/IP에 대해 알아본다. - OSI 7계층 별로 개념을 알아본다. 1. OSI 7계층과 TCP/IP 네트워크 이해의 핵심 = OSI 7계층과 TCP/IP 스택. 두 개념은 복잡한 네트워크를 단계별로 나누어 이해하기 쉽도록 도와줌. 1-1 OSI 7계층 1~4 계층을 데이터 플로 계층 또는 하위 계층이라고 부르고, 5~7 계층을 애플리케이션 계층 또는 상위 계층이라고 부름. 계층 분류는 계층의 역할과 목표에 따른 것. 데이터 플로 계층 : 데이터를 상대방에게 잘 전달하는 역할. 주로 네트워크 엔지니어가 개발 애플리케이션 계층 : 데이터를 표현하는데 초점을 맞춤. 주로 애플리케이션 개발자들이 고려하는 영역. 개발자는 하향식으로 네트워크를 바라보고, 네트워크 엔지니어는 상향식.. 공감수 0 댓글수 0 2021. 10. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.