프론트엔드 개발자가 1년 동안 쌓아온 꿀팁 소문 내기 by 헬리아

여러분들과 생산성을 높이고 개발자로서 기분 좋은 환경을 조성하는 몇 가지 꿀팁과 도구를 소개하고자 합니다. 쉽게 적용 가능하면서도 효과적인 내용들을 함께 공유하겠습니다.

발표자 소개
"놀라움을 주고싶은 주니어 프론트엔드 개발자
VR/AR 회사에서 리액트와 Three.js의 조합에 고군분투하고 있습니다.
사람과 자연과 함께하길 좋아하며 운동과 채소를 좋아합니다."

Transcript

1. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 1 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 태그 날짜 엑셀콘 2 회 세션: 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 소문내기 의 내용과 시간상 추가하지 못한 내용을 담았습니다. 링크 공유 외 내용 복제는 자제 부탁드립니다! 세션 소개 및 주의사항 프론트엔드 개발에 있어서 생산성을 높이고 기분 좋은 환경을 조성하는 몇 가지 꿀팁과 도구를 소개하고자 합니다. 쉽게 적용 가능하면서도 효과적인 내용들을 함께 공유하겠습니다. 프론트엔드 개발자에게 있어서 유용한 팁이 주를 이룹니다. 앱은 애플 앱스토어 기준이며, 익스텐션은 발표에서 다룬 Visual Studio Code 의 익스텐션과 이 글에서 추가로 소개하는 크롬 익스텐션이 있습니다. @2023 년 6 월 2 일 오전 10:44 프론트엔드 개발자의 팁 1. 개발자도구 콘솔: document.designMode=“on” 2. 개발자도구 콘솔: console 을 다양하게 써보자 console.table() console.dir() 그 외 3. 개발자도구 콘솔: debugger 4. 개발자도구 네트워크 1. 메소드 추가하기, 프리플라이트 구분하기 2. 로그 보존 켜두기 3. 긴 네트워크 응답 예쁘게 보기 4. 느린 네트워크 환경 테스트 앱 및 익스텐션 [ 앱]Spectacle 2 [ 앱]Hidden Bar [ 앱] Clipy
2. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 2 프론트엔드 개발자의 팁 1. 개발자도구 콘솔: document.designMode=“on” 브라우저를 에디터처럼 수정할 수 있음 문구 수정 및 이미지 복사/ 붙여넣기가 가능 새로고침하면 변경 내용은 사라지며, 보안에 따라 이를 막아두는 사이트도 있다. 2. 개발자도구 콘솔: console 을 다양하게 써보자 console.table() [VSCode 익스텐션] GitLens [VSCode 익스텐션] Power Mode [VSCode 익스텐션] vscode-pets [ 앱] RunCat [OCR 툴] Google Keep 시간 상 담지못한 팁 [ 앱] Lifeline visual Pomodoro timer [Chrome 익스텐션] Show keys [Chrome 익스텐션] Social Share Preview [Chrome 익스텐션] Refined Github [Chrome 익스텐션] Chrome Capture- 스크린 샷 및 GIF 도구 [Chrome 익스텐션] YoutubeDigest [Chrome 익스텐션] Grammarly [Chrome 익스텐션] Volume Master [Steam 앱] Virtual Cottage 추가로 탐색을 추천하는 링크 연사자 Helia 가 궁금하다면
3. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 3 표 형태로 볼 수 있음 console.dir() document 를 console.log() 로 출력했을 경우 html 코드가 나오지만, console.dir() 로 출력 하는 경우 이 개체가 어떤 속성을 가지고 있는지를 볼 수 있어 필요한 속성을 탐색할 수 있 다. console.log() console.table() console.log() console.dir()
4. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 4 예를 들어 위에서 다룬 designMode 와, bgColor 라는 속성을 활용하여 배경색을 엑셀콘 색 상으로 변경하고 디자인 모드를 켠 뒤 엑셀콘 아이콘을 복붙해서 가져오거나 할 수 있다. 그 외 MDN: https://developer.mozilla.org/en-US/docs/Web/API/console 그 외에도 MDN 에서 다양한 메소드를 찾아볼 수 있다.
5. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 5 3. 개발자도구 콘솔: debugger
6. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 6 console.log 로 특정 객체를 지정하지 않더라도 해당 구문의 여러 객체를 한번에 확인할 수 있다. 4. 개발자도구 네트워크 1. 메소드 추가하기, 프리플라이트 구분하기 이름, 상태 등 항목에 오른쪽클릭으로 필요한 항목을 추가할 수 있으며, 특히 메서드를 추가 하면 프리플라이트도 구분해서 보여주기 때문에 편하다. 2. 로그 보존 켜두기
7. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 7 페이지가 금방 바뀌는 로직에서 콘솔을 찍어보고 싶거나 출력된 에러를 보고 싶을 때는 로그 보존 옵션이 유용하다. 콘솔 탭과 네트워크 탭 두군데 다 켜두면 좋다. 3. 긴 네트워크 응답 예쁘게 보기 긴 네트워크 응답을 볼 때는 하단의 {} 표시를 누르면 응답을 예쁘게 정리해서 보여준다. 콘솔 탭 로그 보존 네트워크 탭 로그 보존 기존 응답 옵션을 켜서 정리해서 봤을 때의 응답
8. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 8 4. 느린 네트워크 환경 테스트 화면 로드 시의 스켈레톤이나 API 요청 중일 때의 스피너를 확인하기 위해서 등 데이터가 느 린 환경에서 테스트해보고 싶을 때 네트워크 옵션에서 느린 3G 또는 빠른 3G 를 사용할 수 있다. 앱 및 익스텐션 [ 앱]Spectacle 2 https://www.spectacleapp.com/
9. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 9 맥북에서도 윈도우처럼 화면 분할이 가능 더 이상 유지보수되고 있지는 않지만 아직은 기능에 부족함을 느끼지 못해서 추천 [ 앱]Hidden Bar https://apps.apple.com/kr/app/hidden-bar/id1452453066?mt=12 macOS 의 작업 표시줄( 메뉴 막대) 에서 일부 아이콘을 숨기고 원하는 아이콘만 노출할 수 있 다. [ 앱] Clipy https://clipy-app.com/
10. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 10 클립보드 내역을 볼 수 있으며, 클립보드 저장 개수를 늘릴 수 있다. 스니펫 및 단축키 변경 지원 [VSCode 익스텐션] GitLens https://marketplace.visualstudio.com/items? itemName=eamodio.gitlens 일상적 Git Blame 가능 기존 기능의 버그픽스를 할 때 히스토리를 파악하고 궁금한 점을 어느 동료 개발자에게 물어봐야하는지 알아내기에 좋다. Visual Studio Code 의 Source Control 의 File History 와 함께 보면 좋다. [VSCode 익스텐션] Power Mode https://marketplace.visualstudio.com/items? itemName=hoovercj.vscode-power-mode 다양한 타이핑 효과로 개발자의 스트레스 해소를 돕거나 동료들의 관심을 끌 수 있다. Sparkle, Rift, Flames, Fireworks, Magic 등 다양한 효과가 있다
11. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 11 화면 흔들림(Shake: Intensity) 옵션의 수치는 낮추는 것을 추천한다. https://s3-us-west-2.amazonaws.com/secure.notion-static.com/609df907-574 6-430a-8148-710b3120b940/%E1%84%92%E1%85%AA%E1%84%86%E 1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%8 5%A9%E1%86%A8_2023-05-29_%E1%84%8B%E1%85%A9%E1%84%9 2%E1%85%AE_7.20.42.mov [VSCode 익스텐션] vscode-pets https://marketplace.visualstudio.com/items? itemName=tonybaloney.vscode-pets Visual Studio Code 에서 고양이를 키워보자 [ 앱] RunCat https://apps.apple.com/kr/app/runcat/id1429033973?mt=12 맥북의 작업표시줄( 메뉴막대) 에서 고양이를 키워보자
12. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 12 [OCR 툴] Google Keep https://keep.google.com 앱도, 익스텐션도 아니지만 “ 최선” 의 무료 OCR 툴 텍스트 이미지를 텍스트로 변환하는 OCR 프로그램을 찾다가 정착하게 된 툴 원래 Google 에서 만든 메모장이지만, 이미지에서 텍스트 가져오기 기능이 한국어, 영어 OCR 을 지원한다. 시간 상 담지못한 팁
13. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 13 여기부터는 발표 내용에 넣고 싶었으나 분량상, 시간상 제외된 내용들 입니다. [ 앱] Lifeline visual Pomodoro timer https://apps.apple.com/kr/app/lifeline-visual-pomodoro- timer/id1526186940?mt=12 맥북으로 공부나 일을 할때 시각적으로 보기 편한 뽀모도로 앱 본인이 작업한 만큼만 토마토를 주고, 쉬는시간도 워크타임에 비례해서 제공
14. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 14 뽀모도로를 켜놓고 움직임이 없으면 자동으로 중지하고 더 오래 가만히 두면 자동으로 쉬는시간이 소진된다. 일/ 주/ 달 단위로 생산성을 체크할 수 있다. 색상은 마음대로 변경할 수 있다. 안써본 기능이지만, 줌 등의 미팅은 자동으로 다른 색상으로 표시해준다고 한다. [Chrome 익스텐션] Show keys https://chrome.google.com/webstore/detail/show- keys/bkcpmidbgmfbbeanejhepkjakagfaaon 내가 어떤 키를 누르고 있는지 크롬 탭 화면 우측 상단에 보여줌 특정 키의 인터랙션이 있는 기능을 개발하고 그 결과를 녹화하거나 할 때 유용
15. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 15 [Chrome 익스텐션] Social Share Preview Chrome 익스텐션: https://chrome.google.com/webstore/detail/social-share- preview/ggnikicjfklimmffbkhknndafpdlabib Firefox 익스텐션: https://addons.mozilla.org/en- US/firefox/addon/social-share-preview/ 웹사이트: https://socialsharepreview.com/ 현재 사이트를 SNS 에 공유했을 때 어떤 정보가 보이게 될지 SMO(Social Media Optimization) 정보를 미리볼 수 있음 현재 페이지의 메타태그를 기준으로 하므로 각 SNS 서버가 실제로 정보를 가져갈 때 지 금과 동일한 메타태그가 설정되어있을지는 별도로 체크해야 함 [Chrome 익스텐션] Refined Github https://github.com/refined-github/refined-github
16. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 16 github 의 이곳저곳을 편의에 맞게 바꿀 수 있다 209 개의 기능이 있으므로 원하지 않던 기능이 활성화 될 수도 있으니 잘 보고 체크하자. 각 기능은 옵션에 들어가면 간단한 설명과 스크린샷을 제공한다 나에게 코드리뷰를 요청한 PR 만 모아보거나, 머지후 자동으로 브랜치 삭제 등이 유용했 다 머지 후 자동으로 브랜치를 삭제해주는 기능
17. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 17 [Chrome 익스텐션] Chrome Capture- 스크린 샷 및 GIF 도 구 https://chrome.google.com/webstore/detail/chrome-capture- screenshot/ggaabchcecdbomdcnbahdfddfikjmphe 맥OS 기본 화면 녹화는 mov 로 저장되므로 gif 로 변환이 필요한 경우, 매번 변환하기보 다 이 익스텐션을 이용해 바로 GIF 로 다운받을 수 있다. [Chrome 익스텐션] YoutubeDigest Chrome 익스텐션: https://chrome.google.com/webstore/detail/youtubedigest- summarize-u/agjkjablkiapmpbeglmdcmhnihlofija Firefox 익스텐션: https://addons.mozilla.org/en- US/firefox/addon/youtube-chatgpt-summarization/ 웹사이트: https://www.youtubedigest.app/ 유튜브 영상을 ChatGPT AI 를 이용해 요약해주는 서비스. 요약 내용을 다양한 양식 및 포맷으로 내려받을 수 있다. [Chrome 익스텐션] Grammarly 이미 유명하지만 영단어 쓸 일이 많은 개발자 특성상 스펠링이나 문법 실수를 방지하기 에 정말 좋다.
18. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 18 [Chrome 익스텐션] Volume Master 특정 크롬 탭의 볼륨만 키우거나 줄일 수 있다. 재택 근무 시 게더타운, ZEP 등 원격 오피스에 접속해있는 탭의 소리를 키워두면 안심 하고 재택 중에 음악을 틀어 둘 수 있다.
19. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 19 [Steam 앱] Virtual Cottage https://store.steampowered.com/app/1369320/Virtual_Cottage/ 게임 플랫폼인 steam 에서 다운로드 받을 수 있는 프로그램 시간대에 따라 또는 날씨에 따라 프로그램 속 공간의 분위기가 변한다 타이머를 설정할 수 있으며, 할일 목록을 작성할 수 있다 날씨에 따른 소리나 모닥불 소리를 설정할 수 있으며, 고양이나 강아지를 둘 수 있다.
20. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 20 추가로 탐색을 추천하는 링크 웹 개발 시간을 줄여주는 팁 4 가지 | 요즘IT 앞서 작성한 웹 개발 생산성을 높이기 위한 방법에 이어서 이번에는 웹 개발 시간을 줄여주는 몇 가지 팁을 살펴볼까 합니다. 항상 일정이 타 이트한 웹 개발 프로젝트에서 조금이라도 시간을 아낄 수 있는 부분이 https://yozm.wishket.com/magazine/detail/1585/ 발표에서 다룬 designMode 와 debugger, console 외에도 javascript 배열 조작, javascript 코드 성능 테스트, 웹 디버깅, console.log() 줄여서 사용하기 등의 팁을 공유하는 글이다. 생산성을 빠르게 높여주는, 프런트엔드 개발 툴 10 가지 | 요즘IT 이번 시간 위시켓은 프런트엔드 개발의 다양한 문제들을 해결할 수 있 고, 생산성을 높여줄 수 있는 온라인 도구 10 가지를 소개해드리겠습니 다. IT 업무를 빠르게 효율적으로 진행하고 싶으시다면 지금 바로 확인해 https://yozm.wishket.com/magazine/detail/158/ 다양한 프론트엔드 개발 툴을 소개하고 있다.
21. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 21 연사자 Helia 가 궁금하다면 헬리아 (@heliatalk) 놀라움을 주고싶은 주니어 프론트엔드 개발자 VR/AR 회사에서 리액트와 Three.js 의 조합에 고군분투하고 있습니다. Helia 의 처음이 궁금하다면? 팟캐스트 주니어탤런트쇼 2 회에 패널 토크로 참여해 온보딩 경험을 공유한 적이 있으 니, 링크를 확인해주세요! https://www.youtube.com/watch?v=ywVB70BbP_Q 포트폴리오 피드백 요청을 받고 있습니다. 활동에 있어서 부족한 점이나 기술적인 부분을 다루기보다는 강점을 살리고 포트폴 리오의 구성 방식을 개선해서 매력적인 지원자로 보이도록 돕는 피드백입니다. 경력직의 포트폴리오의 경우 제가 피드백을 드린 경험은 있지만, 저는 1 년차 프론 트엔드 주니어 개발자인 점을 고려 부탁드립니다! 기간은 최소 2 주에서 두 달 소요됩니다.
22. 엑셀콘 2 회 프론트엔드 개발자가 1 년 동안 쌓아온 꿀팁 모음 22 평균 공백제외 3000 자 정도의 피드백을 드리고 있습니다. 트위터 DM 으로 요청주세요! Helia 에게 더 궁금한게 있거나, 친해지고 싶다면 heliatalk https://twitter.com/heliatalk → 트위터에서는 제 근황을 보실 수 있으며, 발표 및 본 글에 대한 추가 질문, 포트폴리오 피 드백, 커피챗, 인재추천 요청은 트위터로 받고 있습니다! 다시 한번 엑셀콘에서 제 세션을 들어주셔서 감사합니다. 즐거운 시간이 되셨길 바라며, 앞 으로의 성장을 응원하겠습니다! ❣