남남이루의 고군분투 🌳

이 글은 최근에 접한 새로운 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..