리액트 라우터 참고문서 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..

* 리액트에서 자주 사용하는 HTML 태그 Link 컴포넌트는 a 태그의 리액트 버전이다. 다른 페이지 주소로 이동한다. 차이점은 a 태그는 외부 URL 주소로 이동할 수 있지만 Link 컴포넌트는 웹사이트 내부에서만 이동 가능하다. Fragment 태그는 화면에 렌더링되지는 않지만 컴포넌트를 하나의 최상위 요소로 묶어주는 역할을 한다. * JSX 문법을 사용하지 않고 HTML 문서를 만드는 방법 참고문서 JSX 없이 사용하는 React – React A JavaScript library for building user interfaces ko.reactjs.org import logo from './logo.svg'; import './App.css'; function App() { return (He..

state 참고문서 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org * state 개념 컴포넌트 내부에서 변경이 가능한 데이터이다. 리액트에서는 state 를 변경함으로써 웹 페이지를 업데이트한다. 사용자 인터렉션을 처리하기 위하여 이벤트 핸들러 함수에서 state 를 변경한다. 예를 들면, 사용자가 버튼을 클릭했을때 state 를 변경하고 변경된 새로운 데이터를 이용하여 웹 화면을 리렌더링한다. * state 사용의 장점 기존 자바스크립트에서는 DOM 요소에 직접 접근하여 웹 페이지를 변경하였다. 이렇게 하면 전체 웹페이지에서 특정 DOM 을 검색하는데 시간이 걸리고, 변경해야 할 데이터가 많은 경우 ..

* 컴포넌트 개념 컴포넌트는 웹페이지에서 특정한 기능을 담당하는 부분을 그룹핑해서 모듈화시킨 요소이다. 예를 들면, 네비게이션 기능을 담당하는 네비게이션 컴포넌트, 리스트 중 하나의 아이템을 보여주는 아이템 컴포넌트, 상세한 내용을 보여주는 상세 컴포넌트 등이다. 즉, HTML 문서(웹페이지)에서 특정한 기능을 담당하는 HTML 요소들의 그룹이다. 아래는 아이템 컴포넌트의 예시다. todo name todo description * 컴포넌트 사용하는 이유 컴포넌트를 사용하는 이유는 웹페이지에서 공통적으로 사용되는 HTML 요소들을 그룹으로 묶어서 재사용하기 위함이다. 프로그래밍 언어의 함수나 모듈과 유사한 역할을 한다. 또한, 재사용하지 않더라도 웹페이지에서 특정한 기능을 담당한다고 생각되는 부분이 명확..

* 리액트 설치하기 리액트 설치 가이드 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org npx create-react-app syleemomo-react 또는 npx create-react-app@latest syleemomo-react cd syleemomo-react npm start Node 14.0.0 이상 버전 및 npm 5.6 이상 버전이 필요하다. 위 명령어로 잘 설치가 되지 않으면 아래와 같이 create-react-app 모듈을 먼저 설치한 다음에 CMD 창에서 create-react-app 명령어로 폴더를 생성하자! npm install -g create-react-app cr..

참고 블로그 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com 그리드 기본개념 - 컨테이너에 적용하는 속성들 A B C D E F G H I .container{ display: grid; border: 3px solid #333; } .container .item{ background-color: orange; margin: .1rem; } 컨테이너에 적용하는 속성 (grid-template-columns, grid-template-rows, -ms-grid-rows, -ms-grid-columns) ..

참고 블로그 반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리 이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 nykim.work 참고 문서 미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. developer.mozilla.org 참고 문서 2 미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN CSS Media Query는 예를 들..