본문 바로가기

장원익 기술블로그

📺 Front End71

[Next.js] _document.js로 레이아웃 템플릿을 사용해서 html 과 body 태그 커스터마이징 하기. Document 컴포넌트 Next.js에는 태그와 태그를 조작하기 위해서 컴포넌트를 제공한다. Build 시점에 _document.js파일을 pages 디렉토리 안에서 탐색하고 를 extends 한 컴포넌트를 이용해서 커스텀 설정을 받아들히는데, 이는 필수 파일은 아니며, 만약 우리가 커스텀하지 않으면 기본 Next의 모듈에 존재하는 _document.js 파일을 실행시킨다. 프로젝트가 커질 수록 HTML 태그를 조작해야할 일들이 많아지므로 우리는 _document.js의 컴포넌트를 다룰 수 있는 능력이 있어야 한다. 기본 구조 pages 디렉토리 아래에 _document.js파일을 생성한다. import Document, { Html, Head, Main, NextScript } from 'next/d.. 2021. 1. 3.

[Next.js] renderPage 함수로 styled-components 오류 방지하기. React 에서 스타일링을 위한 라이브러리에서는 개인적으로 단연 styled-components가 압도적으로 좋다고 생각한다. 하지만 Next에서는 styled-components가 제대로 동작하지 않을 수 있다. 오늘 그 오류들을 분석해보고 어떻게 하면 해결할 수 있는지 알아보자. 그냥 styled-components를 사용한다면 어떤 문제가 생가나요? Next.js 앱에서 styled-components를 사용하면 스타일이 적용되지 않고 일정 시간 이후에 스타일이 적용된다. 마치 CSS 파일이 로드되지 않다가 갑자기 로드되는 것 처럼 보이는데, 이는 UX에서 나쁜 평가로 각인될 수 있고 사용자에게 아주 불쾌한 경험을 선사할 수 있다. 왜 그런 문제가 생기나요? Next는 우선 모든 페이지가 Pre-R.. 2021. 1. 3.

[styled-components] ThemeProvider에서 MediaQuery를 적용하는 2가지 방법 이 글은 Styled-components의 ThemeProvider에 대한 기본적인 선행 지식이 필요합니다. 혹시 ThemeProvider에 대한 정보를 확인해보고 싶다면 ThemeProvider로 공통 스타일 속성 관리하기를 방문해서 가볍게 읽고 와보세요. 그럼 더 도움이 될거에요 :) 어떤 종류의 언어나 도구가 되었던 웹 프론트의 스타일링을 하는 과정에는 많은 노력과 힘이 들어간다. 그 중에서도 모바일과 웹의 스타일을 따로 나누는 미디어 쿼리 부분에서 굉장히 반복되는 작업을 많이 하게 되는데, 이 작업을 우리는 해결하는 방법을 알고 있다. 바로 ThemeProvider. 오늘은 이 ThemeProvider를 통해서 미디어 쿼리를 좀 더 쉽게 사용하는 방법에 대해서 알아볼 것이다. 그 전에 미디어 쿼리.. 2021. 1. 2.

[styled-components] ThemeProvider로 공통 스타일 속성 관리하기. 지난 사촌 누나에게 피아노 연습실 페이지 마련해주기 프로젝트를 수행하면서 가장 크게 느꼈던 점은 바로 css에서의 통일성이 없다 라는 것이었다. 약 15개의 컴포넌트와 12개의 섹션과 3개의 페이지로 이루어진 리액트 앱을 만들면서 각각의 컴포넌트에 맞는 style.js 파일을 작성했다. 하지만 그 당시에는 CSS를 공통으로 관리할 생각보다는 빠르게 프로젝트를 끝내고싶은 마음이었어서 공통 스타일에 관한 생각의 여유가 없었다. 그래도 마음 한켠에 불안이 있었는데, 그 불안이 가져올 문제점은 다음과 같다. 매 컴포넌트가 증가함에 따라 스타일 코드의 일관성이 떨어진다. => 유지보수 비용의 증가 스타일 속성값들이 중구난방이라 어떤 속성을 갖고있는지 코드로 확인이 어렵다 => 협업에서의 문제 스타일마다 다른 속성.. 2021. 1. 2.

정직하게 배워보는 Next.js 시리즈를 시작합니다. 해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 8부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다. 안녕하세요! 주니어 개발자 장원익입니다. 정직하게 배워보는 Next.js 시리즈를 시작합니다. 본 내용은 공식 문서의 교육 방향을 최대한 지키려 노력했으며 Next를 배우고싶어하는 모든 초보자들에게 도움이 되는 글이라고 생각합니다. 대상 독자 Next.js를 배워보고 싶은 사람. SEO 를 하기 위해 다양한 정보를 찾고있는 사람. SSR과 SSG를 리액트 프로젝트에서 사용해보고 싶은 사람. 필요 역량 React 개발 경험 styled-components 개발 경험 (Optional) 필요 역량은 리액트 개발 경험.. 2020. 12. 31.

정직하게 배워보는 Next.js 시리즈를 마치며... 해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 8부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다. 0. 목차 1. create-next-app으로 next 개발 환경 세팅하기 2. create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅 3. 페이지를 연결하기 위한 Link-Component 그리고 Pre-Fetch Dynamic Routing과 Link를 이용해 간단한 게시판을 만들어보자. 4. Next.js에서 head 태그를 조작하는 멋진 방법 번외 & 실습) 이미지와 동영상을 저장하고 사용해보자. 5. 웹의 발전 과정으로 보는 SSG와 SSR 6. next의 두 번째 핵심 P.. 2020. 12. 31.

이전 1 2 3 4 5 ··· 12 다음

티스토리툴바