* 위쪽에 중앙정렬하기 아이템 1 아이템 2 아이템 3 body { padding: 0; margin: 0; } #container { width: 40%; margin: 0 auto; background: tomato; text-align: center; } .item { width: 30%; height: 300px; line-height: 300px; background: skyblue; margin: 1%; display: inline-block; } @media screen and (max-width: 1100px) { #container { width: 80%; } .item { width: 30%; margin: 1%; } } @media screen and (max-width: 800px)..

아이템 1 아이템 2 아이템 3 아이템 4 아이템 5 아이템 6 아이템 7 아이템 8 아이템 9 아이템 10 body { padding: 0; margin: 0; } #container { width: 40%; margin: 0 auto; background: tomato; text-align: center; } .item { width: 30%; height: 300px; background: skyblue; margin: 1%; display: inline-block; } @media screen and (max-width: 1100px) { #container { width: 80%; } .item { width: 30%; margin: 1%; } } @media screen and (max-wid..

* index.js 파일 수정하기 git checkout master 를 해서 master 브랜치에서 아래 코드 수정후 git add / git commit / git push heroku master 명령어를 실행하자! app.listen(process.env.PORT || 5000, () => { console.log("server is running on port 5000! - nodemon") }) 히로쿠 서버는 포트를 동적으로 부여하므로 위와 같이 코드를 수정한다. mongoose.connect(CONNECT_URL, { // Mongo DB 서버 연결 useNewUrlParser: true, useUnifiedTopology: true }).then(() => console.log("mongo..

참고 블로그 '프로젝트/할일목록(TODO) 앱' 카테고리의 글 목록 syleemomo.tistory.com 해당 프로젝트는 할일목록 앱 프로젝트의 연장선에 있다. 그래서 서버 구조나 서버 설정은 할일목록 앱 프로젝트를 참고하면 된다. * 모델 구현하기 const mongoose = require('mongoose') const wordSchema = mongoose.Schema({ r_seq: { type: String, trim: true }, r_word: { type: String, trim: true }, r_link: { type: String, trim: true }, r_chi: { type: String, trim: true }, r_des: { type: String, trim: true..

* 칼렘 레이아웃 예시 포토1 포토2 포토3 포토4 포토5 포토6 포토7 포토8 포토9 포토10 포토11 포토12 포토13 포토14 포토15 포토16 포토17 포토18 포토19 포토20 포토21 포토21 포토23 포토24 포토25 포토26 포토27 포토28 포토29 포토30 body { padding: 0; margin: 0; } #photo-box { width: 60%; columns: 4; margin: 50px auto; } .photo { width: 100%; height: 300px; margin-bottom: 10px; background: tomato; display: inline-block; /* 컬럼 짤림 방지*/ } .photo img { width: 100%; height: 100..

리액트 훅 참고문서 1 Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 훅 참고문서 2 Hook 개요 – React A JavaScript library for building user interfaces ko.reactjs.org * 리액트 훅의 개념 리액트 버전 16.8 부터 새로 추가된 기능이다. 기존의 함수형 컴포넌트는 props 만 전달받아 렌더링할 뿐 state 를 사용하여 상태값을 변경할 수 없었다. 또한, 라이프사이클 메서드도 사용하지 못하였다. 함수형 컴포넌트에서도 이를 가능하게 하는 것이 바로 리액트 훅이다. * 리액트 훅을 사용하는 이유 상태관련 로직을 독립적으로 분리하기 위함이다..

리액트 라우터 참고문서 React Router | TutorialDeclarative routing for React apps at any scalereactrouter.com * 라우팅의 개념라우팅이란 현재 화면에 보여지는 웹페이지에서 다른 웹페이지로 이동하는 것을 말한다. 라우팅을 하면서 웹페이지의 주소가 변경된다.  * 리액트 라우터 동작방식예전에는 라우팅을 할때마다 보여주려는 웹페이지의 리소스를 서버에 접속해서 가져왔다.  즉, 라우팅할때마다 서버에서 HTML 파일을 가져와서 렌더링하였다. 이렇게 하면 서버에 접속하는 시간 때문에 웹페이지를 이동할때마다 사용자에게 웹페이지를 보여주는데 시간이 걸렸다.  리액트 라우터는 SPA (싱글페이지 애플리케이션)을 이용하여 라우팅할때 컴포넌트를 교체하는 방식..

요소참조 참고문서 Ref와 DOM – React A JavaScript library for building user interfaces ko.reactjs.org * 요소 참조의 개념 자바스크립트에서 특정 DOM 을 선택해야 할때 getElementById 나 querySelector 함수를 사용한다. 리액트에서는 대부분 state 를 사용하여 DOM 을 제어하지만 특별한 경우 DOM 을 직접 선택해야 하는 경우도 있다. 예를 들면, 버튼을 직접 클릭하게 한다거나 입력창에 포커스를 줘야 하는 등이다. * 요소 참조하는 방법 클래스형 컴포넌트 import React, { Component } from 'react' class CustomInput extends Component { constructor(..

* 컴포넌트 스타일링하는 몇가지 방법 기본적으로 CSS 를 사용하여 스타일링한다. 그 밖에 SASS 와 Styled Component 가 있다. SASS 는 CSS 를 마치 프로그래밍적으로 생각하여 중복되는 CSS 코드를 변수나 함수로 만들어 사용가능하다. Styled Component 는 Tagged Template literal 을 사용하여 자바스크립트로 스타일링한다. 컴포넌트 스타일링을 할때 어떤 도구를 사용할지를 결정하는건 개발자의 선호에 달려있다. 그보다 중요한건 어떤 도구를 사용하든 컴포넌트를 만들고 스타일링할 수 있는지다. 그래서 일단은 기본적인 CSS 를 사용하여 스타일링하는 연습을 하는 것이 우선이다. * 컴포넌트 스타일링시 참고할 문서 https://mui.com/material-ui/..

생명주기 참조문서 React.Component – React A JavaScript library for building user interfaces ko.reactjs.org 생명주기 예시 State and Lifecycle – React A JavaScript library for building user interfaces ko.reactjs.org * 컴포넌트 생명주기의 개념 컴포넌트가 웹 화면에 처음 렌더링되고, 사용자 이벤트에 의하여 화면이 업데이트되고, 사용자가 현재 웹 화면에서 다른 페이지로 이동하면서 컴포넌트는 각자의 라이프 사이클을 가진다. 사람이 처음 태어나서 외모가 변하고 언젠가 생명을 마감하는 것에 비유된다. * 라이프사이클 도식화 그림 참조그림 React Lifecycle Met..