프론트엔드
3월 4일 WID : Git Alias
Git alias 깃허브 명령어 커스터마이징이 가능하다는 것을 알고는 있었는데 오늘 생각이 나서 찾아보았다. 이것저것 등록하고 등록한 내역을 upNote에 정리해두었다. 익숙해질때까지는 이걸 보면서 하는 게 좋을 것이다. 기본적인 명령어 먼저 기본적인 명령어들을 커스텀했다. 자주 쓰는 것들이기도 하다. 비교적 간단한 명령어로 이루어져 있어 쉽게 설정할 수 있었다. git cm // commit -m git sw // switch git swc // switch -c git st // status git br // branch 조금 더 복잡한 명령어 아래 명령어들은 다른 사이트를 참고하여 커스텀한 명령어들이다. 복잡한 터미널 명령어를 처음 접해서 GPT에게 물어봐가면서 명령어를 파악하고 입력했다. git ..
2월 27일 WID : 레거시 코드에서 자유로워지기, 문서 작업의 범위
레거시 코드에서 자유로워지기 레거시 코드를 잘 파악해야 하지만, 레거시 코드에게 얽매일 필요는 없다. 어제 기존에 선언되어 있던 조건을 가져다 썼다가 오늘 수정했다. 기존에는 A && B 의 and 조건이었는데 생각해보니까 내가 쓴 로직에는 A || B 의 or조건이 더 알맞다고 생각했다. 문서 작업의 범위 문서 작업이라는 것은 닭이 먼저냐 달걀이 먼저냐 같은 논제와도 같다. 디테일하게 하는 만큼 업데이트해야 하는 영역이 많아지고, 큰 덩어리로 묶으면 정보의 전달이 불명확해질 수 있다. 매뉴얼 작업을 하면서 느끼는 거지만 얼마나 디테일하게 해야 할지, 어디까지 정보를 제공해야 할지 계속 고민이 된다. 내가 보기엔 필요해 보이는 정보가 누군가에게는 쓸모없는 정보일 수도 있고, 내가 간과한 부분이 매뉴얼을 ..
2월 26일 WID : PR 메시지 포맷, button 규칙 지키기
PR 메시지 포맷PR 메시지 포맷에 대해 생각했다. 커밋과 PR의 단위에 대해서도 좀 생각해볼만 할 것 같다. 요구사항이 큰 덩어리인 경우에는 PR과 커밋메시지가 확실하게 다른 계층으로 분리될 수 있을 거 같은데 작은 덩어리인 경우엔 PR과 커밋 메시지의 레벨이 동일할 수도 있겠다는 생각이 들었다. 이런 경우라면 차이점은 PR에는 상세한 내역을 기록하고, 커밋 메시지는 일종의 요약본으로 생각할 수도 있지 않을까? 커밋 메시지에 딸린 PR내역을 추적하긴 쉬우니까.. 오늘은 아래와 같은 포맷으로 작성했다. PR 제목 문제상황 어떠어떠한 상태인 경우, 이러저러한 문제가 발생한다. 해결방법 어떤 로직을 추가하여 해결하였다. 참고사항 같은 문제가 이전에 OO에서도 발생한 바 있으며, 당시 원인은 정확히 파악하지 ..
[완독] 프론트엔드 성능 최적화 가이드 - 유동균
프론트엔드 성능 최적화 가이드 수강생 2천 명이 선택한 인프런 인기 강의 다년간의 컨설팅과 강의 노하우를 담았다! 4가지 실전 서비스로 배우는 웹 성능 최적화 기법 '웹 성능 최적화'는 프론트엔드 개발자라면 반드시 고민해야 하는 이슈다. 서비스 환경과 상황에 따라 필요한 최적화 포인트가 다르고, 기법도 매우 다양하기에 개발 중인 서비스 특성에 맞게 커스터마이징하는 능력이 중요하다. 저자는 수많은 기업의 웹 서비스 성능을 컨설팅하고, 삼성 SSAFY, 프로그래머스, 인프런, 스터디파이 등 강의 플랫폼에서 최적화 및 개발 강의를 진행한 경험을 책에 고스란히 녹여 냈다. '성능 최적화' 주제를 효과적으로 배우는 데 이론보다는 실습이 중요함을 강조하며 현장감 있게 구성했다. 이 책은 실생활에서 흔히 개발하는 4..
[프론트엔드 성능 최적화 가이드] 1장 블로그 서비스 최적화
개발서적 스터디를 시작했는데 1장 발표자가 되었다. 한 번 날려먹어서 두 번 정리한 블로그 서비스 최적화 내용. 거의 복사 붙여넣기 수준으로 적었지만 타이핑을 하다보니 나름대로 좀 더 이해가 잘 되었다. 분석 툴 소개 크롬 개발자 도구의 Network 패널: 현재 웹 페이지에서 발생하는 모든 네트워크 트래픽을 상세하게 알려줌 크롬 개발자 도구의 Performance 패널: 웹 페이지가 로드될 때 실행되는 모든 작업을 보여줌. 이 패널을 통해 어떤 자바스크립트 코드가 느린지 확인할 수 있음 크롬 개발자 도구의 LightHouse 패널: 웹사이트의 성능 점수를 측정, 개선 가이드 확인 가능 webpack-bundle-analyzer: npm을 통해 설치. 완성된 번들 파일 중 불필요한 코드가 어떤 코드인지,..
시군구 단계별 주소 조회 api
https://sgis.kostat.go.kr/developer/html/newOpenApi/api/dataApi/addressBoundary.html 개발지원센터 단계별 주소 조회 즐겨찾기 등록 즐겨찾기 행정구역 및 도로명주소 단계별 조회 API 요청주소 https://sgisapi.kostat.go.kr/OpenAPI3/addr/stage.json 요청정보(Body) 요청변수 값 Optional 설명 accessToken String 필수 sgis.kostat.go.kr 주소를 입력할 때 많이 사용하는 시군구 조회 기능에 유용하게 사용 가능한 api다. 설명이 잘 되어 있어서 순서대로 따라하면 된다.....
3. 클로저의 원리와 사용하는 이유
클로저가 너무 어렵따....... 포인터의 개념을 주소라는 개념으로 받아들이기 시작하면 아주 쉽게 이해하듯이 closure 또한 scope chain에서 하나의 scope를 생성해준다는 개념으로 이해한다면 아주 쉽게 이해가 가능할 것이다. 클로저를 이용해 구현하게 되면 컨텍스트에 접근할 때 스코프를 이용해 접근하기 때문에 this라는 키워드를 쓸 필요도 없다. 이렇게 만들어진 카운터는 어느 객체에 붙여서 사용해도 동일한 컨텍스트의 결과를 내주고 이벤트 리스너로 사용해도 동일한 컨텍스트를 유지한 상태로 사용할 수 있다. var counter = (function() { var _count = 0; return function() { return _count += 1; }; })(); console.log(..
Global Styles
My Global Styles • Treasure Trove The Treasure Trove is a curated set of my favourite resources, with detailed guides showing how I get the most out of them. courses.joshwcomeau.com
The CSS Cascade
Or, How browsers resolve competing CSS styles Amelia Wattenberger wattenberger.com
Front-end 지식 목록
홈페이지가 사용자에게 보이는 순서에 대해 설명해주세요. 주소창에 www.google.com 을 입력하면 어떤 일이 일어나나요? 호이스팅에 대해 설명해 보세요. 클로저의 원리와 사용하는 이유 margin과 padding에 대해 설명해주세요. position을 어떻게 사용하는지 알려주세요. Restful API에 대해 아는대로 설명해 주세요(GET, PUT, POST, PATCH, OPTION, DELETE) this의 용법을 아는대로 설명해주세요 브라우저 저장소의 차이점 (LocalStorage, SessionStorage, Cookie) 자바스크립트는 어떤 언어인가요? -> 싱글 스레드 언어 하지만 실제 사용시에는 멀티 스레드처럼 사용하는데 어떻게 사용하나요? 비동기적으로 실행이 되는 것을 동기적으로 코..