![]()
구글 검색창에 '신입 프론트엔드 개발자 면접 질문'이라고 검색하여 나온 상위 10개의 블로그에서2번 이상 언급된 질문 리스트입니다. 브라우저의 렌더링 원리: 브라우저가 html, css, javascript 등의 자원을 화면에 렌더링 하는 과정SPA(single page application)와 SSG(server side rendering)의 차이점: 각 렌더링 방식의 장단점과 사용이유CSR(client side rendering)과 SSG(server side rendering)의 차이점: 각 렌더링 방식의 장단점과 사용이유리액트의 라이프사이클: 리액트 컴포넌트의 생명주기와 각 단계(mount, update, unmount)에서 수행되는 작업var, let, const의 차이점: 자바스크립트에서 변수..
![]()
🌵 모달이란모달이란 현재 열려있는 페이지에 포함된 창으로, 페이지 위에 일종의 '레이어(층)'을 까는 것을 말합니다.현재 페이지를 '부모', 현재 페이지에서 열린 모달을 '자식'으로 생각할 수 있습니다.- 출처 블로그모달에 대한 더 자세한 내용과 모달과 팝업의 차이는 다음 블로그를 참고해주세요. 이번 글에서는 웹 서비스에서 많이 사용되는 모달 구현에 필요한 코드를 정리해보겠습니다. 🌵 전체 코드아래의 코드는 'Modal.tsx'라는 이름의 컴포넌트 파일로,사진에서 초록색 선으로 둘러싸인 부분과 같이 내용을 제외한 모달의 기본 틀을 제공합니다.import { ComponentPropsWithoutRef } from 'react';import closeIcon from '@icons/close_icon...
![]()
개발을 하다 보면 일반적인 세로 방향 스크롤이 아닌 아래의 그림처럼 가로 방향으로 넘어가는 스크롤이 필요한 경우가 있습니다.따라서 이번 글에서 가로 스크롤에 필요한 코드를 정리해보겠습니다. 🐝 전체 코드아래의 코드는 'useHorizontalScroll.ts'라는 이름의 커스텀 훅으로, 원하는 요소에 가로 스크롤을 적용합니다.import { useRef, useEffect, useCallback } from 'react';export const useHorizontalScroll = () => { const listWrapperRef = useRef(null); const handleWheel = useCallback((e: WheelEvent) => { const container = lis..
![]()
🍎 설치하기1) 터미널에서 아래의 명령어를 입력하여 'tailwind-scrollbar-hide'라는 이름의 플러그인을 설치합니다.# npm 사용 시npm install tailwind-scrollbar-hide# yarn 사용 시yarn add tailwind-scrollbar-hide 2) 설치한 플러그인의 이름을 'tailwind.config.js' 파일의 플러그인 목록에 추가해줍니다.// tailwind.config.jsmodule.exports = { content: [], theme: { extend: {}, }, plugins: [ require('tailwind-scrollbar-hide') // 🍎 사용하기'scrollbar-hide' 클래스명은 테일윈드가 기본으로..
