헤드라인만 봐도 무슨 내용인지 알 수 있게 작성고객 만족도 설문조사 같은 정성적인 것은 삭제회사의 목적 (비전): 스마트교육회사가 지향하는 시장과 핵심가치 ex) 배달의 민족은 정보기술을 활용하여 음식배달 시장을 혁신 시키고자 합니다.문제의식 (가장중요): 기존의 pl

배경2018년 4차산업혁명위원회에서 마이데이터 시범사업을 추진하여 기업 중심의 데이터 활용에서 정보주체(개인) 중심으로 전환하는 것에 뜻을 모았다. 이에 과학기술정보통신부, 금융위원회 등 각 부문별로 마이데이터 서비스 시범사업을 추진 중이며 관련 법제도의 개정도 추진하

SPA 는 Single Page Application 의 약어이다.말 그대로 한 개의 페이지로 이루어진 애플리케이션이다.기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여

flex 라는 display 속성: css 의 flex 는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구이다.flex 를 사용하기 위해서는 컨테이너 태그에 display: flex 속성을 부여해야한다.(flex-direction: row; 을 사용하여 정렬방법을 세로로

일정 관리 애플리케이션 개발 흐름 1\. 프로젝트 준비하기2\. UI 구성하기3\. 기능 구현하기 Todo Template : 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정관리)를 보여준다. children으로 내부 JSX를 props로 받아와서 렌더링해준다.Todo

컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언 하는 방식이다. 이 방식을 'CSS-in-JS' 라고 한다. 이와 관련된 라이브러리는 굉장히 많지만,그 중 개발자들이 가장 선호하는 styled-component 에 대해서 알아보자. styl

문법적으로 매우 멋진 스타일시트CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해준다. Sass에서는 두 가지 확장자 .scss와 .sass를 지원한다. 이 두가

일반 CSS : component를 스타일하는 가장 기본적인 방식Sass : 자주 사용되는 css 전처리기 중 하나로 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있게 해준다.CSS module : 스타일을 작성할 때 CSS클래스가 다른 CSS 클

컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언 하는 방식이다. 이 방식을 css-in-Js라고 부른다. css-in-JS 라이브러리 중에서 개발자들이 가장 선호하는 styled-components를 알아보자! styled-component

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정하도록 설정할 수 있는 Hook 이다. 클래스형 컴포넌트의 componentDidMount 와 componenetDidUpdate 를 합친 형태로 보아도 무방하다.Info.js마운트될 때만

useState는 가장 기본적인 Hooks 이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.함수형 컴포넌트에서 상태를 관리해야 한다면 Hooks 를 사용하면 된다.counter.js const value, setValue = useState(0);

모든 리액트 컴포넌트에서는 라이프사이클이 존재한다. 컴포넌트의 수명은 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야하거나 컴포넌트를 업데이

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 event 라고한다.예시)💁🏼‍버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고,클릭했을 때는 onclick 이벤트를 실행한다.함수형 컴포넌트로 구현하기EventPractice.j

props 와 state 둘 다 컴포넌트에서 사용하거나 랜더링할 데이터를 담고 있어 비슷해보이지만 그 역할은 다르다. props 는 부모 컴포넌트 가 설정하고, state 는 컴포넌트 자체적으로 지닌 값 으로 컴포넌트 내부에서 값을 업데이트 할 수 있다.

react 16.8 ver 이후부터, useState 를 사용하여 클래스컴포넌트에서 state를 사용하는것처럼 사용할 수가 있다. 이 과정에서 Hooks 를 사용한다. Hooks 의 종류는 다양하지만, 가장 기본이 되는 useState 먼저 짚고 넘어가자 🐻배열 비

자바스크립트 콜백함수란 ? 콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다. 리액트에서 콜백함수는 어떻게 사용될까? setState를 사용하여 값을 업데이트하고

state의 초기값 을 지정해 주기 위해 constructor메서드를 선언해 주었다.하지만,!할 수 있다. Counter.js이렇게, constructor 메서드를 선언하지 않고도 state 초기값을 설정할 수있다.this.setState를 사용하여 state값을 업데

react에서 state는 컴포넌트 내부에서 바뀔 수 있는 값 을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이다. 컴포넌트 자신은 해당 props를 읽기 전용 으로만 사용할 수 있다. cf) 앞에서, Mycomponent.js 의

비구조할당 문법을 통해 props 내부 값을 추출.Mycomponent.jsMycomponent.js // ver.2

Mycomponent.js 를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정하자. props 의 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다. props 를 랜더링할 때는JSX 내부에서 {} 로 감싸주어야 한다.App.js 컴포넌