티스토리

KEEP GOING

검색하기

블로그 홈

KEEP GOING

immune01.tistory.com/m

이거 웨 않 되?

구독자: 0

방명록 방문하기

공지 조선대 컴공 편입 25.02 ~ 모두보기

주요 글 목록

[React Node.js] React와 Node 연결 React와 Node를 연결하다. 1. React와 Node 구성 화면을 구성하는 React와 서버인 Node를 연결할 때의 구성을 그림으로 표현한 것이다. (그림 1) 기존의 Node.js에서는 templete engine(템플릿 엔진)으로 화면에 보일 엔진을 선택하였는데, React와 연결할 거니까 자연스럽게 React가 템플릿 엔진의 역할을 하게 된다. 2. React와 Node 기본 세팅 2 - 1. Node 설치 프로젝트를 진행할 새로운 폴더를 생성하고 폴더에 Node를 설치한다. npm init 명령어를 터미널에서 사용해서 노드 모듈과 package.json 등을 설치한다. github에 프로젝트를 업로드할 때는 노드 모듈을 올리면 안 된다. 다른 사람에게 파일을 공유하거나 공유받을 때 노드 .. 공감수 0 댓글수 3 2023. 9. 18.
[React.js] React Redux JavaScript 상태 관리 라이브러리인 Redux를 배우다. 1. Redux 정의 1 - 1. 기존 상태관리 문제점, redux 사용하는 이유 기존의 여러 컴포넌트에서 state를 관리하기 위해서 Context API를 사용해서 관리했다. 하지만 Context API를 사용해서 state를 관리하다 보면 문제가 생긴다. 여러 컴포넌트에서 사용하는 state가 많아질수록, 컴포넌트의 구조가 복잡해질수록 Context 컴포넌트를 만들어내고 감싸줘야 한다. 극단적으로 보면 그림 1과 같은 현상이 발생한다. Context는 변하지 않는 state를 관리할 때 사용한다. 즉 상태가 아닌 값인 변수를 설정하는 도구이다. 그리고 Context API는 많은 state를 관리하기에 적합하지 않다. props를 하위.. 공감수 0 댓글수 0 2023. 9. 13.
[React.js] react-router (useParams, useSearchParams) 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 Router를 배우다. 1. React에서의 Router, Route 정의 더보기 # index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom' const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); /.. 공감수 1 댓글수 2 2023. 9. 12.
[React.js] Life Cycle / useEffect 클래스 컴포넌트의 생성부터 소멸까지 이르는 일련의 과정인 Life Cycle을 배우다. 1. Life Cycle (그림 1) Life Cycle은 React의 클래스 컴포넌트의 생성부터 소멸까지 이르는 일련의 과정이다. 이것을 활용해서 컴포넌트가 생성되는 각 과정에서 실행되는 함수를 이용해서 내가 원하는 시점에서 원하는 동작을 하도록 구현이 가능하다. (그림 2) Life Cycle의 과정은 3단계가 있다. 컴포넌트가 생성되는, 컴포넌트가 화면에 처음 그려지는 상태인 Mounting, 컴포넌트가 생성되고 난 후 props, state, force Update의 변화가 생겨서 렌더링, 리렌더링 될 때, 부모 컴포넌트가 갱신이 되었을 때를 가리키는 Updating, 컴포넌트가 화면에서 사라진 상태인 UnMo.. 공감수 0 댓글수 0 2023. 9. 5.
[React.js] Context 컴포넌트 간에 state를 공유할 수 있게 해주는 Context를 배우다. 1. Context ? 리액트는 상위 컴포넌트에서 하위 컴포넌트로 데이터가 이동하는 단방향 전달 방식(그림 1)이다. 우리가 지금까지 실습했을 때는 컴포넌트의 계층구조가 단순했다. 많아야 3층이었는데, 실제로 프로젝트를 진행하게 되면 컴포넌트의 구조가 복잡해지고 계층이 많아지는 현상이 생길 수밖에 없다. 여태 배운 개념만으로는 예를 들어 5층에 있는 컴포넌트에 최상위 컴포넌트의 state를 전달하기 위해서는 하위 컴포넌트에 props로 하나하나 전달해주는 방법밖에 없다. 이런 현상을 Prop Drilling이라고 한다. 그리고 state의 이름을 변경하면 또 하나 하나 props의 이름을 바꿔줘야 하는 번거로움이 있기 때문에 Co.. 공감수 0 댓글수 0 2023. 9. 3.
[React.js] useRef 설명 및 실습 컴포넌트 내에서 데이터를 저장하는 공간인 useRef를 배우고 기본변수, state, ref의 차이점을 배우다. 1. Ref Ref를 사용하는 이유 기존에 컴포넌트 내에서 데이터를 저장하기 위해 state를 사용했다. 하지만 state는 값이 변함에 따라 리렌더링 된다는 단점이 있다. 리렌더링이 되면 컴포넌트에서 사용된 내부 변수가 초기화돼버린다. 리렌더링 되더라도 변수가 초기화되지 않는 것이 필요한 것이다. 이것을 해결해 주는 것이 바로 Ref이다. Ref 특징 Ref로 데이터를 관리하면, Ref의 값이 변하더라도 컴포넌트가 리렌더링이 되지 않아서 불필요한 리렌더링 현상이 줄어들어 성능 저하를 방지한다. Ref로 데이터를 관리하는 컴포넌트가 state에 의해 리렌더링 되더라도 기본 변수와는 다르게 값이.. 공감수 0 댓글수 0 2023. 8. 30.
[React.js] Filter 함수 배열에서 특정 조건에 해당하는 요소만 새로운 배열로 만들어주는 filter 함수를 배우다. 1. filter 함수 설명 filter함수는 map함수와 동일하게 배열에 사용할 수 있는 함수이다. map처럼 배열 내 요소들을 하나씩 함수 내 콜백함수를 거치게 하는데, map과는 다르게 filter함수는 조건을 걸어서 해당 조건을 만족하는 배열 내 요소들만 추출해서 새로운 배열을 반환한다. 1 - 1. map과 filter의 차이 let new_array = members.map((member) => member.task === "Front-end") console.log(new_array); let age_27 = members.filter((member) => member.age < 27) console... 공감수 0 댓글수 0 2023. 8. 29.
[React.js] map 함수 / 컴포넌트 응용 자바스크립트의 map 함수를 컴포넌트에 응용하다 더보기 import React from 'react' import menuList from "./data/menu.json" import Button from 'react-bootstrap/Button'; import Card from 'react-bootstrap/Card'; import 'bootstrap/dist/css/bootstrap.min.css'; const Ex02 = () => { console.log(menuList); return ( menuList.map((menu) => ( {menu.category} {menu.name} {menu.price} Buy )) ) } export default Ex02 1. map 함수 /* map().. 공감수 0 댓글수 0 2023. 8. 28.
[React.js] props와 state 차이점 / 주사위 게임 실습 props와 state의 차이점을 알아보고 두 개념을 이용해서 컴퓨터와 경쟁하는 주사위 게임을 만들다. 1. props와 state 차이점 props는 부모컴포넌트에서 자식컴포넌트로 데이터를 객체형태로 보낼 때 사용한다. 하지만 props는 수정이 불가하고 각 자식 컴포넌트에서 고정된 채로 사용된다. props를 자식컴포넌트에서 변경하고 싶으면 state를 사용해서 변경해서 사용해야한다. 그림 2는 일반적으로 props와 state가 사용되는 흐름을 나타낸 것이다. 부모 컴포넌트에게서 props를 받고 그것을 state로 자식 컴포넌트에서 필요한 데이터로 변경해서 사용한다. props와 state개념을 사용해서 컴퓨터와 내 주사위 중 값이 큰 것이 나온 쪽이 이기는 게임을 만들어 보겠다. 2. 실습 전체.. 공감수 0 댓글수 0 2023. 8. 24.
[React.js] state 컴포넌트 내에서 값이 변하 1. state 란? 기존의 자바스크립트에서는 화면의 특정 값을 변하게 하려면 단순히 해당 변수의 값을 변경시키면 됐다. count의 값을 버튼을 클릭할 때마다 1씩 올리고 화면에 보이게 하기 위해서 기존 자바스크립트에서 방법으로 코드를 작성한 결과↓ 리액트에서는 아무리 버튼을 클릭해도 화면에 실시간으로 값이 변하지 않는 것을 볼 수 있다. 그렇다고해서 count 변수의 값이 변하지 않고 있지 않다는 것을 console 창에서 확인할 수 있다. 그렇다면 count의 값은 정상적으로 변하는데 화면에 변한 값을 출력하고 싶으면 어떠한 방법을 사용해야 할까? 바로 state를 사용하는 것이다. state는 컴포넌트 내부에서 사용하는 데이터를 변경할 때 사용하는 것이다. 일반 변수는 .. 공감수 0 댓글수 0 2023. 8. 24.
[React.js] 컴포넌트(Component) 화면에서 UI 요소를 구성하는 최소단위인 컴포넌트를 배우다. 1. 컴포넌트 정의 컴포넌트는 React에서 자주 사용한다. 반복되는 화면의 큰 틀, 일부분 등을 컴포넌트화 해서 app.js 사용할 수 있다. 2. 컴포넌트 사용 2 - 1. 상황 function App() { return ( 아메리카노 3500 아메리카노 3500 아메리카노 3500 ); } 위 코드를 보면 같은 구조의 코드가 반복되는 것을 볼 수 있다. 이러면 코드가 더러워지고 수정하기 불편하다. 이런 상황에서 컴포넌트를 사용하는 것이다. 2 - 2. 컴포넌트 파일 생성 컴포넌트파일들은 src 폴더 내에서 components 폴더를 생성해서 그 안에 컴포넌트 파일들을 생성해서 사용해 준다. 단, 컴포넌트 파일의 이름의 첫 스펠링은 무조건 .. 공감수 0 댓글수 0 2023. 8. 22.
[React.js] JSX 문법 실습 JSX문법 실습 index.js // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // JSX 문법 및 특징 정리 import App from './App'; import reportWebVitals from './reportWebVitals'; // JSX문법을 활용한 실습 import AppSample from './AppSample'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); // If you want to start measuring performan.. 공감수 0 댓글수 0 2023. 8. 21.
[React.js] Ex01_basic 리액트 JSX 문법의 특징 리액트에서 사용되는 JSX문법에 대해서 배우다. import './App.css' /* shift + alt + f : prettier 저장 JSX문법 - HTML 과 JS를 하나의 파일에 작성할 수 있는 문법 JSX문법의 특징 1. 반드시 부모요소가 하나여야 한다. 모든 것을 감싸는 div태그로 해결 + 꼭 가 아니어도 된다. 2. 표현식 사용 {변수}로 표현식 단, if문은 사용할 수 없다.. 2-1. 조건식이 1개일 때 - && 연산자 하나의 조건식을 확인할 때 A && "B" => A가 true이면 &&의 오른쪽이 출력된다. 2-2. 조건식이 2개일 때 - 삼항연산자 활용 2-3. 조건식이 3개일 때 - return문 위에 조건식을 만든 후 결과값만 {}에 넣어준다. 3. 기존 HTML문법과 다른.. 공감수 0 댓글수 0 2023. 8. 21.
[React.js] 리액트 실행 및 파일 설명 리액트 실행 및 파일 설명 리액트 실행 VSCode에서 새로운 터미널을 열어준다. 새로운 터미널의 경로가 리액트가 설치된 폴더에 연결이 됐는지 확인하고 안되면 cd로 경로 변경한다. npm start를 하면 메인페이지가 새로운 탭(크롬)에 띄워진다. 파일 설명 node_modules 폴더는 우리가 프로젝트 구동에 필요한 라이브러리의 소스코드를 모아둔 폴더이다. public 폴더는 잠깐 html 파일이나 이미지 파일을 보관할 때 사용하는 폴더이다. 가장 중요한 src 폴더에 코드를 짠다. App.js가 메인 페이지이다. App.js에서 코드를 짜면 메인 페이지에 바로 반영이 된다. js 파일에다가 html 코드를 짰는데도 브라우저에 띄워지는 이유는 App.js를 index.html에 넣어주는 index.j.. 공감수 0 댓글수 0 2023. 7. 12.
[React.js] 리액트 정의 및 설치 React.js 정의와 설치 및 프로젝트 폴더 세팅 1. React.js? 리액트는 자바스크립트만으로 UI 구성이 어려워서 Meta에서 만든 라이브러리이다. JS의 단점은 HTML파일과 JS파일을 분리해야하지만 React.js는 JSX문법을 사용해서 HTML문법과 JS 문법을 동시에 사용한다. JSX는 JS에 XML을 추가한 확장 문법이다. 파일을 분리하지 않기 때문에 가독성이 높고 작성하기 쉽다. JS의 또 다른 단점은 document 문법이 너무 길다는 것이다. 그리고 새 페이지를 들어갈 때마다 새로고침을 한다. 리액트는 SPA로 서버로부터 새로운 페이지를 불러오지않고 현재 페이지를 동적으로 다시 작성함으로써 유저와 소통하는 웹사이트이다. 한국에서는 React.js를 많이 사용하기 때문에 React... 공감수 0 댓글수 0 2023. 7. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.