세션 소개 여러분들과 생산성을 높이고 개발자로서 기분 좋은 환경을 조성하는 몇 가지 꿀팁과 도구를 소개하고자 합니다. 쉽게 적용 가능하면서도 효과적인 내용들을 함께 공유하겠습니다. 발표자 소개 "놀라움을 주고싶은 주니어 프론트엔드 개발자 VR/AR 회사에서 리액트와 Three.js의 조합에 고군분투하고 있습니다. 사람과 자연과 함께하길 좋아하며 운동과 채소를 좋아합니다."

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
→ 트위터에서는제근황을보실수있으며, 발표및본글에대한추가질문, 포트폴리오피
드백, 커피챗, 인재추천요청은트위터로받고있습니다!
다시한번엑셀콘에서제세션을들어주셔서감사합니다. 즐거운시간이되셨길바라며, 앞
으로의성장을응원하겠습니다!❣