남남이루의 고군분투 🌳

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

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

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

상황 )지인이 외주 받은 프로젝트를 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..

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

이 포스팅의 배경 :부끄럽지만, 화면 레이아웃을 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..

프로그래머스 lv.2 양궁 대회문제 바로가기문제 요약어피치가 양궁을 먼저 다 쐈다. 화살의 수와 어피치의 과녘 현황을 입력값으로 줬을 때, 라이언이 어떻게 과녘을 맞춰야 최대 점수차이로 이길 수 있는지 반환해라.주의할 점최대 점수 차이가 같을 경우, 낮은 점수에 많이 맞은 경우를 답으로 처리한다.배열에 해당하는 과녘은 10점 과녘부터 0점까지 순서대로 주어진다.문제 접근완전 탐색에 조기종료 조건이 가능하므로 DFS를 사용한 백트래킹과녘의 수가 고정되어 있기 때문에 점수 현황을 고정 길이의 배열로 만들어서 과녘의 선택/ 미선택 두개의 정보를 담을 수 있다.조기 종료 조건 (유망함수)남은 화살이 더이상 없을 때.과녘의 끝에 다다랐을 때.오답노트1. recursive overflow 에러 발생.- DFS 접근..

다익스트라가 사용되는 때알고리즘 접근법 중 다익스트라는 가중치가 있는 그래프에서 최소 비용 경로를 구할 때 주로 사용한다. 파이썬에서의 다익스트라는 큐에서 가장 최소값을 꺼내기 위해 내장 라이브러리인 heapq를 사용하면 됐었지만 기본 자바스크립트에서는 heap을 지원하지 않기 때문에 직접 구현해서 쓸 수 있다.다익스트라의 구현큐에서 가장 최소값을 꺼내기 위해 heap이 아닌 우선순위큐를 구현해서 할 수도 있지만, 두 방식은 시간 복잡도에 큰 차이가 있다.구체적인 구현 방식을 서술해보자면, 우선순위 큐(Priority Queue)는 요소의 추가(삽입, push) 혹은 제거(꺼내기, pop)때 마다 정렬을 새로 해줘야 한다. 자바스크립트의 내장 sort는 N*logN 의 비용이 들고, 제거할 때 조차 배열..

DebounceDebounce란, 입력이 연달아 들어올 때 여러 입력을 그룹으로 묶어서 처리하는 것이다. 예를 들어 1ms 단위로 10번 들어오고 10초 쉬었다가 1ms 단위로 100번 들어왔다면 각각을 단 두번의 입력으로 그룹지어서 처리한다.검색창 input 입력시 매 입력 이벤트마다 조회 요청을 하는 것이 아니라, input 단위를 시간(interval)을 기준으로 그룹지어서 조회 요청을 줄일 수 있다.핵심debounce의 핵심은 "마지막 호출로부터 일정 시간이 지난 후 실행" 구현 (PR)setTimeoutsetTimeout으로 함수 호출할 때 시간 지연을 걸어두고, 시간 지연이 진행중일 때는 함수 호출을 취소한다. (clearTimeout)시간지연이 끝난 요청에 대해서만 함수가 실행된다.this반..

Q. tailwindCss 에서 속성을 추가할 때 권장하는 순서가 있다는 것을 아셨나요? 문제 상황tailwindCss를 사용하다보면, 한 엘리먼트에 대한 css 속성을 클래스명에 나열하게 됩니다. 이 때 클래스명이 한없이 길어지곤 합니다.가독성이 떨어진다.이는 단순히 읽기 어려운 걸 넘어서 어떤 속성을 부여했는지 일일이 파악해야 한다는 단점이 생깁니다. 특히 새로운 컴포넌트를 만들 때보다 유지보수할 때 혹은 수정이 필요할 때 순서가 잡혀있지 않은 어떤 청크를 읽는다는 것은 인지적으로 꽤나 소모가 크게 느껴집니다.상충되는 속성을 찾기 어렵다.따라서 상반되는 CSS 속성이 부여된다거나, 이미 앞쪽에서 부여한 속성을 뒤에서 한번더 추가하게 되는 실수가 생기기 쉽습니다.클래스명 사이에 더블 스페이스가 있어도 ..