남남이루의 고군분투 🌳

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

"수집 중인 내용을 올립니다." 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..

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

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

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

새로 레포를 만들어서 git init 할 때마다 default가 master로 되어 있다면로컬 Git 설정 변경하기방법 1. config 설정 cmd 명령어git config --global init.defaultBranch main방법 2. config 설정 파일 수정하기git config --global -e : 로컬 Git 설정 파일 열기.gitconfig 파일 내부에 아래 내용을 입력하기[init]defaultBranch = main이미 만든 프로젝트의 로컬 default 브랜치를 master에서 main으로 변경하려면로컬 브랜치를 main으로 변경하고, 원격 저장소에 반영하기 git branch -m master main // 로컬 브랜치 변경git push -u origin main // ..

Next.js 폴더 트리 == url path 그간의 React 프레임워크를 사용한 개발에서는 별도의 라우팅 처리를 하게 되면 폴더 구조와 url path에 차이가 나기 마련이었다. ex. URL : xx.com/board/detail/1 실제 폴더 구조 : board ㄴ [id].jsx 그러나 Next는 폴더 구조를 그대로 가져가서 라우팅을 해줄 수 있다. 위 예시의 폴더 구조라면 {baseUrl}/board/1 이런식으로 주소에 접근하면 board의 하위 페이지를 불러오게 되는 것이다. 이 주소는 애플리케이션 내부에서 href의 값에 쓰일 때도, router에 들어가는 url 주소값에서도 동일하게 사용된다. 파일 위치가 "app/page.tsx" 라고 할 때, app폴더의 가장 상단인 page.tsx..

global 환경 세팅 파일 : .gitconfig// gitconfig 파일 vscode로 열기git config --global -e[user] name = namnameeroo email = nami.skageec@gmail.com[core] editor = code autocrlf = true[alias] st = status ss = status -s hist = log --graph --all --pretty=format:'%C(yellow)[%ad]%C(reset) %C(green)[%h]%C(reset) | %C(white)%s %C(bold red){{%an}}%C(reset) %C(blue)%d%C(reset)' --date=short ba = branch -a..

Intro 풀스택 인턴으로 근무하며 Web Frontend 개발을 처음 했을 때, 도대체가 JavaScript 파일에서 DOM을 조작하는 코드가 HTML의 스크립트 태그 선언 위치에 따라 언제는 페이지에 반영이 되고, 언제는 안 되는 오류를 겪은 적이 있다. 당시 (본인 제외 유일한 개발자였던) 백엔드 사수는 "스크립트 태그 위치 바꾸면 되던데요?"라고 해주셔서 해결은 했으나, 당시에는 그 이유를 명확히 밝히지 못했었다. 웹 사이트의 디자인을 맡는 것이 CSS, 구조를 맡는 것이 HTML이라면, 살아 숨쉬는 Action을 담당하는 것이 JavaScript라고 비유하곤 한다. 이 때 JavaScript가 서버와 데이터를 왔다리 갔다리 하기 위해서는 JS파일의 비동기 처리를 확실하게 이해해야 한다. "Jav..