목차Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 - 현재 글Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Using Shared Components앞에서 Next.js에서 페이지를 만드는 방법에 대해 알게 되었습니다. 우리는 react 컴포넌트를 pages 폴더에 넣어서 페이지를 만들 수 있었습니다. pages폴더의 파일 이름은 url로 접근 할 수 있습니다. pages는 자바스크립트 모듈임으로 다른 자바스크립트 컴포넌트를 넣을 수도 있습니..
목차Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 - 현재 글Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Navigate Between Pages간단한 Next.js를 실행 시켜 보았습니다. 이전 편에서 index.js를 추가했던 것처럼 원하는 만큼 여러가지의 페이지를 추가할 수 있습니다.이번에는 about 페이지를 만들어 봅시다. pages/about.js를 생성하고 아래의 내용을 추가해 주세요 export default function ..
처음으로 next js를 사용하여 자사 홈페이지를 리뉴얼 하는 프로젝트를 진행했습니다.어떻게 학습하며 프로젝트를 진행했는지 정리하려 합니다. 가장 우선적으로 한 일은 next js docs에서 제공하는 튜토리얼을 학습했습니다.그에 따라 next js docs를 기반으로 작성하겠습니다목차Next js 튜토리얼 1편: 시작하기 - 현재 글Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포 NEXT.js의 기능 - 기본적으로 서버사이드 렌더링 지..
자사 홈페이지를 nextjs로 제작을 했다. 프로토 타입이 나온 후에 테스트를 하던 중 ie에서 작동이 안되는 이슈가 있었다. (개발자의 적 ie..) ie의 개발자 도구를 열어서 확인을 해본 결과 ie에서 지원하지 않는 자바스크립트 함수 때문인걸로 추론됐다. 그에 대한 해결책을 찾던 중 polyfill이라는 것을 알게 되었다. Polyfill 이란위키피디아에서는 아래와 같이 설명하고 있다. 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다. 기능을 지원하지 않는 웹 브라우저에서 원하는 기능을 구현할 수 있으나, 폴리필 플러그인 로드 때문에 시간과 트래픽이 늘어나고, 브라우저별 기능을 추가하는 것 때문에 코드가 매우 길어지고, 성능이 많이 저하된다는 단점이 있다. - 위키..
react는 직접적으로 dom을 조작하는 것을 지양한다. 태생 자체가 virtual dom을 사용하여 효율적인 렌더링을 하기 위해 만들어 졌기 때문이다. 하지만 dom을 조작해야하는 상황이 있다. 브라우저의 width나 height를 가져오기 위해서는 dom을 조작할 수 밖에 없다. 개인적으로 hooks가 더 편하기 때문에 hooks 코드를 사용했다. const size = useWindowSize(); function useWindowSize() { const isClient = typeof window === 'object'; function getSize() { return { width: isClient ? window.innerWidth : undefined, height: isClient ? ..
import Router from 'next/router'; const goToRecruit = () => { Router.push('/with/recruit').then(() => window.scrollTo(0, 0)); }; nextjs의 경우 한번 방문한 사이트는 csr로 처리가 된다. 그에 따라서 방문했던 페이지일 때 스크롤이 내려가 있다면 그 상태로 페이지가 변경이 된다.이를 해결하기 위해 window.scrillTo 메소드를 사용해서 다른 페이지로 넘어갈 때 스크롤 위치를 지정해 줄 수 있다.
html에 onClick으로 이벤트를 걸었을 때 e.target을 쓰면 하위 태그까지 모든 이벤트가 걸린다. 그에 따라 클릭 이벤트를 건 태그에만 이벤트를 적용하고 싶을 때에는 currentTarget 함수를 사용한다. 예시const event = (e) =>{console.log(e.target)} ... abc e.target을 사용할 경우 a, b, c 를 클릭할 때 a, b, c 태그가 콘솔에 찍히게 된다 예시const event = (e) =>{console.log(e.currentTarget)} ... abc e.currentTarget을 사용할 경우 a, b, c 를 클릭해도 이벤트를 건 태크만 반환이 된다.
next js 프레임 워크는 서버사이드와 클라이언트 사이드 렌더링이 이루어져 기존의 react에서 처럼 css를 import하는 방법으로는 css를 적용 시킬 수 없다. 그에 따라 styled-component와 bootstrap을 적용 시키기 위해 여러 삽질(?)을 했고 적용이 완료 되어 정리하려고 한다. styled-component 적용nextjs에서 제공하는 보일러 플레이트https://github.com/zeit/next.js/tree/master/examples/with-styled-components 우선 styled-component를 적용 시키기 위해서는 babel 설정과 _document.js 설정을 해주어야 한다. node-module 설치 npm install styled-compo..
vscode에서 사용하는 개인 설정 파일입니다.vscode는 ctrl + , 를 통해 설정을 바꾸거나 json파을을 통해 설정을 변경 할 수 있습니다.통일된 개발 환경을 위해 json파일을 사용하는 것을 선호합니다. json파일을 적용하기 위해서는 아래와 같이 파일을 만들어야 합니다 .vscode/setting.json 사용중인 기본 세팅{ "editor.tabSize": 2, "editor.formatOnSave": true, "prettier.jsxSingleQuote": true, "prettier.printWidth": 100, "prettier.singleQuote": true} tabSize : tab시에 공백을 몇칸으로 줄지 설정formatOnSave : 저장시에 코드 포멧터를 자동 적용 (..