전체 글

프롤로그 React-router-dom의 Link 를 사용하면 페이지 이동이 가능하다. 페이지 이동과 더불어 state를 함꼐 전달하고 싶을 때가 있다면 useNavigate를 이용하자. 아래의 버튼 클릭시 1. 자세히 보기 버튼을 클릭시 /service 페이지로 이동하게 된다. 2. state를 전달한다. import { Link, useNavigate } from 'react-router-dom'; const Section1 = () => { const navigate = useNavigate(); return( navigate('/service', {state: {selector: '#service-section1.section1', tabIndex : 1},})}> 자세히 보기 ) } export..

원인 반응형으로 뷰포트의 너비가 줄어들때마다 원하는 뷰포트 구간에서 줄바꿈을 적용하고 싶었다. 처음에는 react-responsive 라이브러리를 이용해서 1200px 이상일때 , 768 ~ 1199px 일때 , 375 ~ 767px 일때의 코드를 모두 작성했고 특정 뷰포트에 도달 했을때 해당 코드를 보여주게 하였다. 하지만 줄바꿈 때문에 라이브러리를 사용하는게 맞을까 고민하게 되었다. 해결 미디어쿼리를 이용해서 특정 뷰포트에서 className에 따라 줄바꿈을 하도록 했다. ex) .show-on-desktop-and-mobile은 375 ~ 1199px 에서 display: block 이고 1200px ~ 부터는 display : none 이 적용된다. 따라서 원하는 구간에 따라 줄바꿈을 적용 시킬 ..

원인 React-router-dom을 이용시 페이지를 이동할 때 마다 이전에 방문했던 페이지이면 스크롤의 위치가 마지막 위치에서 머무르는 현상 발생 페이지 이동시 항상 맨위에 스크롤이 위치해있게 하고 싶었다. 해결 ScrollTop 컴포넌트 생성 후 아래와 같이 코드를 작성한다. 페이지가 다를때 마다 useEffect 내부 함수를 실행 import React, { useEffect } from 'react' import { useLocation } from 'react-router'; const ScrollTop = () => { const location = useLocation(); useEffect(() => { window.scrollTo(0, 0) }, [location]) return null..

원인 어떤 콘텐츠에 absolute를 사용하고 뷰 포트의 너비가 줄어들때 absolute를 사용한 콘텐츠가 비율대로 같이 줄어들기를 원했는데 레이아웃에서 벗어나는 문제 발생 해결 방법1 absolute 사용후 margin-left : - 해당 콘텐츠 가로의 1/2px, margin-top : - 해당 콘텐츠의 세로의 1/2px ex)콘텐츠의 가로가 96이므로 1/2인 -48px 적용 , 원하는 위치로 position 설정 - (top 50% left 50%)를 적용후 margin-top: -48px, margin-left: -48px를 적용했다. 방법2 transform: translate(-48px, -48px); margin 값은 음수로 적용해야 한다. 앞에 - 붙이는걸 잊지말자. 또한 margin ..

entry output loader plugin Entry entry는 웹팩이 어떤 파일을 기반으로 변환을 할 것인지에 대한 진입점을 나타내는 속성을 의미한다. //webpack.config.js module.exports={ entry: './src/index.js', output: {}, module: { rules:[] }, plugins: [], } Entry파일에 들어갈 내용 Entry파일에는 웹 어플리케이션의 전반적인 구조를 가지고 있어야 한다. 전반적인 구조가 있어야하는 이유는 이를 웹팩이 해당 구조에 따라 연동된 모듈들에 대해 파악할 수 있고 번들링 작업을 할 수 있기 때문이다. App.tsx 파일에는 라우트 경로에 따른 컴포넌트 경로를 포함하고 있다. 따라서 전반적인 구조를 가지고 있다...

웹팩이란? 웹팩은 React, Vue, angular와 같은 최신 프론트엔드 프레임워크나 라이브러리에서 대부분 쓰인다고 해도 무방하다. 이는 모듈 번들러로 개발자가 웹 어플리케이션을 만들때 html, css, javascript, image 등이 모두 모듈에 해당한다. 이런 분산된 모듈들을 하나로 묶어줘서 결과물을 반환해주는 역할을 한다. 모듈: 어떠한 기능을 수행하는 작은 코드 단위 모듈 번들링: 여러 개의 모듈(파일)들을 하나의 파일로 병합하여 결과물을 내주는 동작 웹팩이 필요한 이유 파일 단위의 자바스크립트 모듈 관리의 필요성 개발자를 위한 자동화 기능 더 빠른 속도와 성능 파일 단위의 자바스크립트 모듈 관리 자바스크립트는 입문자의 관점에서 꽤 편리하게 사용할 수 있다. const a = 5; co..