* react-router-dom은 버전마다 코드가 다를 수 있음 패키지 추가 yarn add react-router-dom 페이지 컴포넌트 만들기 이동해야할 페이지 만들기 router.js 파일 만들어서 router 설정코드 작성 app.js에 import 하고 라우터 설정코드 적용 더보기 import React from 'react'; const Home = () => { return Home } export default Home; Home.jsx import React from 'react'; const About = () => { return About } export default About; About.jsx import React from 'react'; const Contact = () ..

명령어 ( 스타일 컴포넌트 패키지) yarn add styled-component 플러그인 설치 (스타일 컴포넌트 플러그인) - vscode에서 style 코드 편하게 작성할 수 있도록 해준다. vscode-styled-component 스타일 컴포넌트 사용법 꾸미고자하는 컴포넌트를 스타일 컴포넌트 방식으로 먼저 만든다. 그리고 그안에 스타일 코드를 작성한다. // src/App.js import React from "react"; // styled-components에서 styled 라는 키워드를 import 합니다. import styled from "styled-components"; // styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. const StBo..

node.js와 npm, yarn 그리고 React 이번에는 내가 궁금했던 것들을 구글링해봤고, 정리하려고 한다. node.js Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍 olive-jam.tistory.com Redux란? 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. 최근 Redux Toolkit이 등장하면서 더욱 더 이 효율성은 빛을 보이고 있다. 보통 리액트를 사용하면서 리덕스를 많이 접하게 될 것이다. 리덕스는 리액트 뿐만 아니라 ..

2022.12.26 - [React 공부] - React 입문 - Component React 입문 - Component 컴포넌트의 기본 구조 // import React from 'react'; function App() { // return ( /* */ ); } // export default App; component는 레고 블럭같은 존재! 컨포넌트를 외부에서 가져올때는 import(컴포넌트 맨 위 코드)를 해줘 olive-jam.tistory.com 이전 포스팅에 컴포넌트에 대해 다뤘는데, 이번에는 리액트 코딩을 해보려고한다. 리액트를 처음 접하는거라 간단하게 버튼만들기 도전 ▶️ 리액트 기본 코딩 import React from 'react'; function App() { // return ..

이번에는 내가 궁금했던 것들을 구글링해봤고, 정리하려고 한다. node.js Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. node.js와 npm 설치는 간단하다. npm의 경우는 Node Package Manager이기 때문에 node.js를 설치하면 같이 설치된다. node.js를 운영체제에 맞춰 다운로드 https://nodejs.org/en/ node -v 터미널에서 코드 입력하면 node.js가 설치된 버전을 확인할 수 있다. 버전이 확인된다면 설치가 정상적으로 된것이다. npm과 yarn npm이란? - 노드 패키지 매니저라는 프로그램으로, 노자바스..

불변성? 불변성이란 메모리에 있는 값을 변경할 수 없는 것이다. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없다. 불변성을 지켜야하는 이유를 말하기전 먼저 알아야할 메모리 구조에 대한 설명이다. JS 메모리 구조 code area 실행한 js 코드를 담는다. call stack 실행 중인 함수를 추적하며 계산을 수행하고, 지역 변수를 저장한다. 변수들은 LIFO 형식으로 저장된다. 또한 원시 타입들이 이 곳에 저장된다. Heap 참조 타입들이 할당되는 곳이다. 콜 스택과 달리, Heap의 메모리 할당은 랜덤하게 배치된다. 또한 메모리 누수를 방지하기 위해 JS 엔진의 메모리 관리자가 항상 관리한다. 원시타입 vs 참조타입 원시타입: Boo..