명민하다

Next.js, Nuxt.js, Gatsby, Hugo, Jekyll 및 HTML에 대한 starter workflows 가 있으니 필요한 파일 복사해서 붙여넣자 1. Next.js, Nuxt.js, Gatsby, Hugo, Jekyll 또는 HTML을 만들어 저장소에 저장한 후 해당 저장소의 설정 탭으로 이동 2. 왼쪽 사이드바에서 페이지를 클릭 3.빌드 및 배포에서 GitHub 작업을 선택 4. repository의 코드를 기반으로 몇가지 workflow가 제안된다. 코드 베이스와 호환되는 workflow를 선택 - 나는 지금 workflow가 하나라서 안보임 5. 구성을 클릭하면 미리 만들어진 workflow로 이동 자유롭게 yaml 파일을 조정하고 코드 커밋하기 - 나는 starter workfl..

이미 정의된 styled-components style 추가하기 const MyStyledComponent = styled(AlreadyStyledComponent)` &&& { color: palevioletred; font-weight: bold; } ` 참고 : https://styled-components.com/docs/advanced

event.preventDefault() 현재 이벤트의 기본 동작을 중단 event.stopPropagation() 현재 이벤트가 상위로 전파되지 않도록 중단 event.stopImmediatePropagation() 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단 return false jQuery를 사용할 때는 위의 두 개 모두를 수행한 것과 같고, jQuery를 사용하지 않을 때는 event.preventDefault() 와 같다.

axios.get('/user/12345') .catch(function (error) { if (error.response) { // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다. console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 요청이 이루어 졌으나 응답을 받지 못했습니다. // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는 // Node.js의 http.ClientRequest 인스턴스입니다. console.log(error.request..

const moveContent = (e:any)=> { // 1. 클릭 이벤트 막기 e.preventDefault(); // 2. 클릭 했을때 target 구하기 const targetId = e.target.getAttribute('href').slice(1); const target = document.querySelector(targetId); // 3. offsetTop 구하기 const moveY = target.offsetTop; // 4. offsetTop 이동 window.scroll({ top: moveY, behavior: 'smooth' }); } ABOUT WORKS CONTACT

최상위 디렉터리에 .babelrc를 만들어주고 아래 와 같은 내용 추가 { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] }

spread const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; const purpleCuteSlime = { ...cuteSlime, color: 'purple' }; console.log(slime); console.log(cuteSlime); console.log(purpleCuteSlime); // console창 {name: "슬라임"} {name: "슬라임", attribute: "cute"} {name: "슬라임", attribute: "cute", color: "purple"} 여기서 사용한 ... 문자가 바로 spread 연산자 이다. spread 연산자는 배열에서도 사용 할 수 있다. cons..

next에서 css-in-js 방식인 styled-component를 이용하려면 몇 가지 설정이 필요하다. _document.js 설정 ssr시에 실행되는 파일인 _documents.js에 styled-components의 스타일 코드를 추출하는 로직을 추가한다. 공식문서를 참고해서 아래와 같이 getInitialProps method를 작성한다. import Document from 'next/document' import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerS..

React에서 import 할 때 {} 중괄호 유무의 의미 import React from 'react'; import TodoTemplate from './components/TodoTemplate'; import { TodoProvider } from './TodoContext'; 위의 파일은 React와 TodoTemplate, TodoProvider라는 변수를 사용할 수 있다. 근데 왜 TodoProvider만 {} 안에 들어간 걸까? 이유는 export 방식의 차이이다. 모듈을 불러올 때 import라고 써주는 것처럼, 모듈을 다른 파일로 보내려면 export라고 명시적으로 써줘야 한다. export 해줄 때 default를 붙인 TodoTemplate의 경우 중괄호 없이 그냥 import de..

PM2 란? - PM2는 애플리케이션을 온라인으로 관리하고 유지하는 데 도움이 되는 데몬 프로세스 관리자 이다. 설치 - 최신 PM2 버전은 NPM 또는 Yarn으로 설치할 수 있다. $ npm install pm2@latest -g # or $ yarn global add pm2 앱 시작 pm2 start [npm | yarn] --name [name][script] # for development pm2 start npm --name "next" -- run dev # for production npm run build pm2 start npm --name "next" -- start 리눅스나 Mac은 POSIX라는 같은 스펙으로 돌아가기 때문에 문제가 없지만 Windows는 문제가 있다. 방법 1...