반응형 개발이야기/Etc.37 프론트엔드 개발자 면접 준비 - 브라우저 동작 원리 이해 프론트엔드 개발자로서 브라우저의 동작 원리를 이해하면 직무에 대한 흥미와 역량을 높일 수 있습니다. 레이아웃(layout)과 페인팅(paint)과 같은 용어에 대한 기본적인 이해는 최근 면접에서 자주 물어보는 내용 중 하나입니다. 이 동작 원리를 알아두면 프론트엔드 개발자로 한층 더 성장도 하고 면접에서 꼬리질문에 더욱 자신감 있게 대답할 수 있을 것입니다. 1. 브라우저란? 브라우저는 웹 페이지를 해석하고 표시하는 클라이언트 소프트웨어입니다. 사용자가 웹 주소를 입력하면 브라우저는 해당 웹 페이지의 HTML, CSS, JavaScript 등을 읽어 해석하고 화면에 표시합니다. 브라우저는 다양한 기능을 수행하는데, 사용자 인터페이스 제공, 네트워크 요청 처리, 보안 기능 등이 포함됩니다. 2. 브라우저의.. 2024. 1. 9. 웹 사이트에서 파비콘 가져오기 1. 사이트 내 파비콘 위치를 이용하여 파비콘 가져오기 기본적으로 사이트 내 파비콘의 위치는 도메인/favicon.ico 형태로 되어 있다 2. 구글을 이용하여 파비콘 가져오기 https://www.google.com/s2/favicons?domain="도메인"&sz="사이즈" domain: 필수 사항, 파비콘을 가져오려는 도메인 sz: 선택 사항, 256와 같은 크기(올바른 크기를 찾을 수 없는 경우 기본 크기(보통 16x16)를 반환) 3. 개발자 도구를 이용하여 파비콘 가져오기 파비콘을 가져오고자 하는 웹 사이트에 접속한 뒤 F12를 눌러 개발자 도구를 열어준다 Ctrl + F 로 favicon을 검색한 후 href에 마우스 우클릭을 이용해 새탭으로 열어준다 새 탭에 열린 이미지를 마우스 우클릭 후.. 2022. 9. 8. NVM(Node Version Manager) 빠르게 설치하기 맥OS에서 Node 버전을 변경하기 위해 NVM 설치가 필요했다 먼저 설치한 후 설치가 잘 됐는지 확인해본다 $ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash $ nvm ls 확인했는데 아래와 같이 나왔다면 당황하지 말고~ -bash: nvm: command not found 다음과 같이 명령어를 입력하면 된다 vi 에디터로 bash_profile 확인한다 $ vi ~/.bash_profile vi 에디터로 아래 코드가 있는지 확인한다 export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads .. 2022. 8. 9. [NextJS] 새 탭에서 링크 열기 코드 테스트버튼 테스트버튼 더보기 참고 https://stackoverflow.com/questions/65632698/how-to-open-a-link-in-a-new-tab-in-nextjs https://stackoverflow.com/questions/67822028/link-to-target-blank-with-next-js 추가로 알면 좋을 것 같은 NextJS Link와 href의 관계 정리한 글 https://github.com/uu29/TIL/blob/main/%5BNextJS%5D%20Link%20%E1%84%90%E1%85%A2%E1%84%80%E1%85%B3%E1%84%8B%E1%85%AA%20href%E1%84%8B%E1%85%B4%20%E1%84%80%E1%85%AA%E1%86%AB%.. 2022. 8. 2. 웹 개발시 도움이 되는 꿀팁🍯 디자인 모드(Design Mode) 적용 웹 브라우저에서 임시로 화면을 수정하는 기능으로 개발자도구 콘솔창에 document.designMode="on" 을 입력하면 된다 디자인 모드를 끄고 싶다면 반대로 document.designMode="off" 를 입력하면 된다 브라우저 콘솔 활용 1. debugger 개발자 도구에서 원하는 객체의 값을 출력하는 용도로 쓰이는 console.log() 확인해야할 객체가 여러 개인 경우 console.log()를 하나하나 일일히 찍어야 하지만 debugger라는 명령어를 입력하면 간편하게 디버깅 작업을 할 수 있다 2. console.table() / console.dir() console.log()를 사용하는 일이 생길 때에는 console.tabel() 또는 c.. 2022. 7. 20. 맥(Mac)용 웹스톰(WebStorm) 단축키 정리 VSCode로 코드를 짰었는데 회사에서 웹스톰을 쓰게 되어 에디터를 변경했다 그런데 이게 무슨 일? VSCode 단축키랑 웹스톰 단축키랑 완전 달라달라!!! 그리하여 맥용 웹스톰 단축키를 서치해서 정리해보았다 ✔️ 맥용 웹스톰 단축키를 살펴보기 전에 맥심볼 기호부터 체크! ⌘ : Command / ⇧ : Shift / ⌃ : Control / ⌥ : Option / ↵ : Enter, Return / ⇥ : Tab 기능 설명 단축키 (Navigator에서) 새 파일 생성하기 Control + Return preference 열기 Command + , 전체 검색 Shift + Shift 정의로 이동 Command + B / Command + Click 코드 라인 상하로 옮기기 Shift + ⌥ + 위/아래.. 2022. 6. 23. 이전 1 2 3 4 5 ··· 7 다음 반응형
