post-thumbnail

ㅇㅇ

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

2020년 9월 10일
·
0개의 댓글

마이데이터 - 교육부문

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

2020년 8월 11일
·
0개의 댓글

SPA

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

2020년 8월 11일
·
0개의 댓글
post-thumbnail

justify-content

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

2020년 8월 10일
·
0개의 댓글

일정 관리 웹 애플리케이션 만들기

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

2020년 8월 10일
·
0개의 댓글

styled-component

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

2020년 8월 10일
·
0개의 댓글
post-thumbnail

Sass

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

2020년 8월 10일
·
0개의 댓글

컴포넌트 스타일링

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

2020년 8월 6일
·
0개의 댓글

styled-components

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

2020년 8월 5일
·
0개의 댓글
post-thumbnail

useEffect

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

2020년 8월 5일
·
0개의 댓글
post-thumbnail

Hooks

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

2020년 8월 5일
·
0개의 댓글
post-thumbnail

컴포넌트 라이프사이클 메서드

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

2020년 8월 5일
·
0개의 댓글

이벤트핸들링

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

2020년 8월 4일
·
0개의 댓글
post-thumbnail

props 와 state 차이

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

2020년 8월 4일
·
0개의 댓글
post-thumbnail

⭐️ 함수형 컴포넌트에서 useState사용하기-Hooks

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

2020년 8월 4일
·
0개의 댓글

콜백함수

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

2020년 8월 4일
·
0개의 댓글
post-thumbnail

state 2.constructor() 없이 state 사용하기

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

2020년 8월 4일
·
0개의 댓글
post-thumbnail

state

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

2020년 8월 4일
·
0개의 댓글

비구조할당

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

2020년 8월 4일
·
0개의 댓글
post-thumbnail

[react] props

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

2020년 8월 4일
·
0개의 댓글