반응형 개발이야기65 프론트엔드 개발자 면접 준비 - 브라우저 동작 원리 이해 프론트엔드 개발자로서 브라우저의 동작 원리를 이해하면 직무에 대한 흥미와 역량을 높일 수 있습니다. 레이아웃(layout)과 페인팅(paint)과 같은 용어에 대한 기본적인 이해는 최근 면접에서 자주 물어보는 내용 중 하나입니다. 이 동작 원리를 알아두면 프론트엔드 개발자로 한층 더 성장도 하고 면접에서 꼬리질문에 더욱 자신감 있게 대답할 수 있을 것입니다. 1. 브라우저란? 브라우저는 웹 페이지를 해석하고 표시하는 클라이언트 소프트웨어입니다. 사용자가 웹 주소를 입력하면 브라우저는 해당 웹 페이지의 HTML, CSS, JavaScript 등을 읽어 해석하고 화면에 표시합니다. 브라우저는 다양한 기능을 수행하는데, 사용자 인터페이스 제공, 네트워크 요청 처리, 보안 기능 등이 포함됩니다. 2. 브라우저의.. 2024. 1. 9. react-query로 SSR 구현하기(with Next.js) react-query는 React 애플리케이션에서 데이터를 가져오고 관리하기 위한 패키지이고 Next.js는 React 기반의 서버 사이드 렌더링 프레임워크로 클라이언트와 서버에서 모두 실행되는 React 애플리케이션을 구축하는데 사용된다 React Query와 Next.js를 같이 사용하면 서버 사이드에서 데이터를 가져와 초기 렌더링 시점에 미리 데이터를 로드하여 초기 로딩 속도를 향상시킬 수 있다 react-query와 Next.js를 같이 사용하는 방법 1. react-query 패키지 설치 npm install react-query 2. Next.js 프로젝트 설정 Next.js 프로젝트의 \_app.js 파일을 열고 QueryClientProvider를 impor한다 QueryClientProv.. 2023. 5. 18. [React] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. \*.tsx 파일은 \*.ts 로 변경하면서 생긴 에러... 또는 import 할 때 { \*\*\* } 때문일 수도 있으니 import 할 때도 주의깊게 확인할 것! [정리] 해당 에러는 componen.. 2022. 9. 30. 웹 사이트에서 파비콘 가져오기 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. 프로그래머스 - Javascript 핸드폰 번호 가리기 문제 풀기 문제 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 phone_number는 길이 4 이상, 20이하인 문자열입니다. 입출력 예 phone_number return "01033334444" "*******4444" "027778888" "*****8888" 풀이 function solution(n) { const a = n.length - 4 const b = n.slice(-4) return '*'.repeat(a) + b; } repeat()와 slice()를 이용.. 2022. 8. 18. 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. 이전 1 2 3 4 5 ··· 11 다음 반응형
