css에서 가장 중요한것은 블록요소와 인라인 요소의 차이점이라고 아는 것이라고 생각한다.이 개념이 흔들린다면 css를 사용함에 있어 혼란이 올 수 있으니 꼭 정립하고 가자. 1. 블록 요소- div, h1, p 등- 기본적으로 사용가능한 최대 가로 너비를 사용한다- 크기를 지정 할 수 있다- width: 100%; height: 0;으로 시작- 수직으로 쌓임- margin, padding 위 아래 좌 우 사용 가능- 주로 레이아웃을 잡을 때 사용2. 인라인 요소- span, img, a 등- 자신의 안에 포함된 내용 만큼의 너비를 사용한다- 크기를 지정 할 수 없다- width: 0; height: 0;으로 시작- 수평으로 쌓임- html 상에서 span태그 뒤에 줄바꿈이 있으면 띄어 쓰기가 들어간다- ..

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 : 저장시에 코드 포멧터를 자동 적용 (..

html은 head 태그안에 title과 meta 태그 등을 설정함으로써 페이지의 정보를 제공한다.next.js에서는 next/head 컴포넌트를 이용해 설정 할 수 있다. import Head from "next/head"; export default ({ children, title = "This is the default title" }) => ( {title}

공식문서에 보면 next js를 배포할 대 zeit이나 now를 사용하면 간편하게 할 수 있다고 나와있지만, 기존 서비스에 아파치가 이미 띄워져 있어 다른 방법을 찾아야 했다.next js의 서버를 실행 시키면 localhost:3000 으로 서버가 열리기 때문에 아파치의 virtual host와 proxy 설정을 통해 해당하는 도메인으로 접속시 next js를 보도록 만들었다. 그 후 서버의 관리를 위해 pm2를 사용해 next js서버를 열었다.아래의 명령어를 터미널에 입력하면 pm2를 사용해 next js를 띄울 수 있다. # for developmentpm2 start npm --name "next" -- run dev # for productionnpm run buildpm2 start npm ..

ec2에서 아파치를 설치 후 virtual hosting을 세팅하는 방법. cd /etc/apache2/sites-available vi 해당폴더안에 있는 conf파일 이름#버츄얼 호스팅을 통해 proxy설정을 해야 할 때#노드 등 띄워야 할 때 ServerName 도메인 이름 DocumentRoot /var/www/html/ -루트 폴더 설정 Options -Indexes +FollowSymLinks AllowOverride None Require all granted ProxyRequests Off ProxyPreserveHost On ProxyVia Full Require all granted ProxyPass 서버네임으로 접속시 접속시킬 서버 도메인 ProxyPassReverse 서버네임으로 접속..