전체 글 183

[UI/UX] 요즘 UI/UX 좋다고 생각하는 앱

본인은 직관적이고, 가벼운 앱, 핵심기능에 충실하고, UI가 못생기지 않은 앱을 선호한다. (IOS 기준)작업 효율(생산성)에 도움되는 앱을 탐색하는 편이다.꾸준템shottr 캡처앱#직관적 #편의성캡처에서 편집모드로의 전환이 직관적이고 빠름GIF 캡처 빼고 기대하는 모든 기능을 지원버벅임 없고, 무료 기능에서도 충분히 잘 사용할 수 있음 *(평생 구입 의향 O)구체적으로, 전체 화면 캡처, 부분 캡처를 별개 단축키로 지원하고, 편집모드에서 esc만 누르면 바로 클립보드 복사가 되어 별도로 파일을 찾아다니거나 복사 행위를 하지 않아도 되는 것에서 엄청난 편의성을 느꼈다.특히 Raycast와의 조합이 좋은데, "window 단위 캡처", "scroll capture", "clipboard image 편집기로..

Archive 2026.04.30

배포 환경에서만 날짜 파싱이 달라지는 이슈 원인 파악기

관련 프로젝트사내 블로그작성일2025-04-03 문제 요약배포 환경에서만 날짜 파싱 결과가 의도와 다르게 출력됨.숫자만 나와야 할 데이터가 "8월"처럼 로케일 포맷이 적용된 문자열로 출력되는 현상 발생.같은 코드를 배포 환경에서 실행했을 때 (좌) 와 로컬에서 실행했을 때 (우) 상황 설명날짜는 Intl.DateTimeFormat(...).formatToParts(dateObj) 를 사용해 파싱로컬 환경에서는 숫자 형태(8)로 출력됨배포 환경에서는 "8월"처럼 문자열이 포함된 형태로 출력됨해당 로직은 서버 컴포넌트에서 동작문제 분석 과정1. 서버 컴포넌트 실행 시 차이로컬에서 서버 컴포넌트로 실행했을 때는 정상 작동배포 환경에서만 문제 발생 → 환경 의존성 의심2. 클라이언트 컴포넌트로 강제 전환동일 로..

[trial] Node.js Intl.DateTimeFormat 오픈소스 기여 시도 (inprogress)

Node.js Intl.DateTimeFormat 오픈소스 기여를 위한 과정 기록버그 요약Intl.DateTimeFormat('ko', { dateStyle: 'long' }).formatToParts() 호출 시,month part의 value가 "8" 대신 "8월"로 반환됨.Node 18 (ICU 73.2): month: "8" + literal: "월 " ✅Node 22 (ICU 77.1): month: "8월" + literal: " " ⚠️근본 원인CLDR-18136 (https://unicode-org.atlassian.net/browse/CLDR-18136)PR: https://github.com/unicode-org/cldr/pull/4217ko locale의 long/full date s..

Programming 2026.04.08

최신 ECMAScript 문법으로 알아보는 객체 deep copy와 error handling 연산자 소개 (structuredClone, ?=)

이 글은 최근에 접한 새로운 JS 문법에 대한 아카이빙입니다. structuredCloneJavaScript의 객체는 별도 변수에 복사할 때 참조된 메모리 주소를 복사하기 때문에 객체 전이(Mutation)가 일어난다. 객체 전이는 쉽게 말하자면 복사해서 만든 객체의 값을 변경했을 때 원본 객체에도 영향을 주는 것을 말합니다.그러다보니 원본 객체에 영향을 주지 않는 복사(deep copy)를 위해서 JSON.parse, JSON.stringify를 활용하거나 lodash라이브러리를 사용하는 등의 방법이 있었습니다. 이번에 객체 복사를 위해 ECMA에 추가된 메서드가 있어서 소개합니다. - 기본 문법structuredClone(value)structuredClone(value, options) - 사용co..

[브라우저 개발자 도구] 잘 쓰기

"수집 중인 내용을 올립니다." 1. debugger;JS 코드에 입력하면 디버깅에 용이 2. 렌더링 탭콘솔 탭 옆에 렌더링 탭을 꺼낼 수 있습니다. "페인트 플래시"를 통해 리페인트 영역을 확인할 수 있고, "프레임 렌더링 통계" 옵션을 활성화하면 브라우저에 프레임 드랍에 대한 작은 창을 표시합니다. user interaction을 통해 프레임이 어디까지 떨어지고 있는지, GPU 성능은 얼마나 사용하고 있는지 확인할 수 있습니다.프론트엔드 성능 개선을 위해 렌더링 문제를 잡아내고, 해소하는 데 도움이 되는 기능입니다.

GPT로 커리어 상담받기 (w/ 고용24 직업선호도 검사)

고용24에서 제공하는 직업선호도를 검사하면 레포트를 PDF로 만들어주거든요. 이 레포트를 chatGPT에 첨부해서 커리어 전략이나, 성향에 맞는 업무를 물어보면 유용하더라구요. 본인에 대한 이해를 높이고 싶거나, 커리어 전략을 세우는 데 어려움이 있으신 분들에게 도움이 되실 것 같아 공유합니다. 사용했던 프롬프트"직업 선호도 검사 결과지야. 나에 대해 이해하고, 적절한 커리어 전략을 세우는 데 도움을 받고 싶어.""위 내용을 참고해서 올해 목표를 세워볼 수 있을까?""다시 직업선호도 검사로 돌아가서, 사회적 바람직성 지표를 고려했을 때 검사 결과를 다시 해석해줄래?""지금까지의 입력 내역에 대한 캐시나 memory를 반영하지 않고, 독립적으로 수행해줘.너는 전문적인 커리어 컨설턴트야. 이 첨부파일은 직업..

Programming/Tips 2025.02.14

[Git, 트러블 슈팅] 로컬 프로젝트의 원격 repository 업로드 실패 (버퍼 초과)

상황 )지인이 외주 받은 프로젝트를 zip으로 받은 소스폴더를 GitHub에 올려서 관리하고 싶어했지만, 로 연결해서 Push했을 때 에러가 발생해 아예 업로드가 안되는 문제가 있었다.(...생략)Delta compression using up to 8 threadsCompressing objects: 100% (2088/2088), done.error; RPC failed; HTTP 400 curl 22 The requested URL returned error: 490 send-pack: unexpected disconnect while reading sideband packet Writing objects: 100% (2192/2192), 42.10 MiB | 18.16 NiB/s, done.To..

Programming 2025.02.12

직업 선호도 검사와 GPT로 알아본 성향 탐색과 커리어 개발 전략 세우기~

이 글은 '나'에 대한 탐구를 목적으로 합니다. ChatGPT가 분석한 내용이 주를 이루며, 개인적 견해는 노란색 배경 글밥으로 적었습니다.분석해보고 싶으신 분이 있으시다면, 별도 포스팅으로 올려볼게요.  📌 남남이루님의 직업 선호도 검사 결과 분석 및 커리어 전략1. 핵심 흥미 코드: SE (사회형, 진취형)사회형(S): 타인의 문제를 듣고 공감하며, 도움을 주고 치료하는 것을 선호하는 성향.진취형(E): 목표를 설정하고 이를 달성하기 위해 타인을 설득하고 협상하는 데 능숙.2. 주요 성격 특성외향성 (강함): 사교적이며 활달한 성격으로, 사람들과 어울리는 것을 즐김.호감성 (강함): 타인을 신뢰하고 배려하는 성향이 뚜렷함.성실성 (강함): 체계적이며 목표 지향적이고, 자기 통제력이 높음.정서적 안정..

[CSS] 화면 레이아웃 잡기 (feat. grid-template-x)

이 포스팅의 배경 :부끄럽지만, 화면 레이아웃을 flex로만 때우곤 했다. 그러나 동일한 레이아웃의 화면간 이동을 할 때 레이아웃이 크게 흔들린 경험이 있었고, 완성도가 좋지 못하다는 생각을 했다. 물론 flex로도 이를 해결할 수 있지만, 레이아웃 잡으라고 만든 grid 속성을 이제는 제때 잘 사용해봐야겠다는 생각이 들어 grid 기본에 대해 정리해본다.요약 *(column은 row로도 가능)ESSENTIAL : grid, grid-template-columns(또는 rows)BASIC : grid-column-start, grid-column-end 또는 grid-columnLEVELUP : grid-area 상위 요소에 필요한 속성.container { display: grid; grid-tem..