developer_jju's_day

23.04.11 수업내용 안녕하세요 jju_developer입니다. 오류사항을 해결하고 나서 node.js express 프레임워크 설치하였습니다. 기본적으로 NodeJS를 먼저 알아보겠습니다. Node.js란? Node.js는 Chrome의 V8엔진을 이용하여 javascript로 브라우저가 아니라 서버를 구축하고, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)입니다. 그렇다면 Express란 무엇일까요? Express란? Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다. 사실상 Nodejs의 표준 웹서버 프레임워크로 불려질 만큼 많은 곳에서 사용하고 있습니다. Express는 Node..

23.04.11 수업내용 안녕하세요 jju_developer입니다. 오늘은 오류.. 팡팡팡 난 사건에 대해 해결방안을 공유드립니다. react에서 create-react-app을 설치해 front-end 서버를 간편하게 구동했던 것처럼 node에서는 express를 사용하면 back-end 서버 구현을 쉽게 할 수 있다는데... lab 폴더로 이동을 했는데 npm i -g express-generator하니까 오류가 나서 아래와 같이 해결을 하였습니다! vscode에서 lab폴더로 이동한다음에 npm i -g express-generator 이렇게 치니까 오류나서 // express를 설치한다. // D:\dev\workspace\react\lab>npm i -g express-generator // D..

안녕하세요 jju_developer입니다. 오늘 수업내용 중 리액트에서 사용하는 데이터 전달 변수와 리엑트 아키텍처에 대해 간략하게 알아보겠습니다. [React 데이터 전달 변수] 1. props: 부모 컴포넌트에서 자식 컴포넌트 전달하기 위한 변수이며, 부모에서 자식으로 자식에서 손자로 가는 구조입니다. 부모 -> 자식 -> 손자 (단방향) 2. states: 자신 컴포넌트에서 사용하는 지역 변수입니다. 3. context: props와 다르게 부모에서 손자로 바로 갈때 사용가능! 또는 손자(소비자)->부모(공급자) 가능 context는 데이터의 공급자와 소비자를 정의하여, 필요한 컴포넌트만 사용합니다. 4. redux: 리덕스는 부모, 손자 관계 없이 아무 곳(아무 컴포넌트)에서나 접근 가능합니당 s..

맥쌤 수업 내용 브라우저가 화면에 요청을 하면 Front-End 서버 (리액트)가 그 요청을 받고 데이터는 Back-End 서버에서 (백엔드 서버_Java, Spring, DB) 받아옵니다. 어떻게 요청을 받느냐면 REST API로 요청을 받습니다. Front에서 Back으로 요청을 보낼 때에 REST API를 이용하는 것이죠! reponse로 JSON 데이터를 받습니다. 데이터를 받으면 변화가 생기니까 Front에서는 랜더링이 발생하죠! (rendering) 이런 구조로 개발을 해야 한다는 맥선생님의 말씀! 💡fetch()란? 웹에서는 클라이언트와 서버가 http 프로토콜을 통해 요청과 응답을 주고받습니다. http에서 사용하는 방식은 여러 가지가 있지만, GET과 POST를 가장 많이 사용합니다. G..

안녕하세요 jju_developer입니다. 오늘은 react-bootstrap!! 에 대해서 알아보겠습니다. 📌 react-bootstrap 이란 • react 에서 Bootstrap5를 사용 가능하도록 개발한 라이브러리입니다. • 각종 레이아웃, 버튼, 입력창, 테이블 등을 미리 디자인을 정의해 두어 React에서 컴포넌트를 불러 사용가능합니다. • 프로젝트 내 따로 bootstrap.js 파일을 둘 필요가 없고 react-bootstrap 라이브러리만 설치하여 사용 가능합니다. 📌 reactstrap 사용법 • react Bootstrap 문서에서 참고해 npm에서 react-bootstrap 라이브러리를 설치합니다. • npm install 은 yarn add 와 동일하기 때문에, yarn은 yar..

안녕하세요 JJU_developer입니다. 이번시간에는 함수형 컴포넌트와 클래스형 컴포넌트 그 둘의 차이점에 대해서 알아보도록 하겠습니다~~!!!! React에는 컴포넌트를 선언하는 방식 1. 클래스형 컴포넌트(class component) 2. 함수형 컴포넌트(function component) React 공식문서에서는 함수형 컴포넌트와 훅(hook)을 사용할 것을 권장하고 있습니다. 👉 클래스형 컴포넌트 1. class 키워드가 반드시 필요합니다. 2. Component로 상속받아야 합니다. 3. render() 메소드가 반드시 필요합니다. 4. state, Life Cycle 사용 가능합니다. 5. 메모리 자원이 함수형 컴포넌트에 비해 많이 사용합니다. 6. 컴포넌트가 복잡하며, 로직의 재사용이 힘..

안녕하세요 jju_developer입니다. 앞서서 배운 props에 이어서 setState에 대해 알아보겠습니다!! setState()란? setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링 됩니다. 리액트(React)의 state는 컴포넌트 내부의 변경 가능한 값이라고 했습니다. 클래스형 컴포넌트는 state를 사용하고, 함수형 컴포넌트는 useState 훅(클래스 내부에서는 동작 X)을 사용합니다. 그렇다면 일반적으로 사용하는 변수를 두고 왜 state를 사용해서 값을 관리할까요? 이는 state가 갖는 특성 때문인데요. 바로 값이 변경되면 리렌더링(Re-rendering)이 발생하기 때문입니다. 따라서 값이 변화함에 따라 실시간으..

안녕하세요 jju_developer입니다. 이번시간에는 컴포넌트의 props라는 개념에 대해서 알아보겠습니다. props는 properties의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다. props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다. props를 전달받은 자식 컴포넌트에서는 데이터를 수정할 수 없으며, 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 합니다. ^^ 예제 1 props import React, { Component } from 'react'; class R017_Props extends Component { render() { let props_value = this.props...

안녕하세요 jju_developer입니다. 수업 도중 어제 배운 생명주기 사이클을 보았는데 이해가 잘 가지 않아서 다시 정리를 해보았습니다. 리액트의 핵심 = 컴포넌트 그리고 이 컴포넌트는 생명주기를 가집니다. Component는 생성(mount)-> 갱신(update) -> 소멸 (unmount)라는 과정을 거치게 됩니다. 이러한 각각의 과정에서 특정하게 정한 함수 = 메서드 를 실행하면서 이 함수들을 생명주기 함수 또는 생명주기 메서드라고 하는 것 입니다. Component 순서 자세히 보기 컴포넌트를 생성할 때 위 이미지처럼 순서대로 진행이 됩니다. 1. constructor() 2. getDerivedStateFromProps() 3. render() 4. componentDidMount() 설명..

안녕하세요 jju_developer입니다. 지난 시간에 이어서 이번에는 템플릿 문자열 사용하기에 대해서 알아보겠습니다. 009 템플릿 문자열 사용하기 import React from 'react'; import './App.css'; import Es6 from './R009_Es6' function App() { return ( 009 템플릿 문자열 사용하기 jju Start React 200! CSS 적용하기 ); } export default App; 기존의 문자열을 사용할 때에는 문자열+문자열을 했지만 import React, { Component } from 'react'; class R009_Es6 extends Component { constructor(props) { super(props)..