3장. Node.js[Node.js란?] Node.js는 웹 브라우저 이후 등장한 자바스크립트 런타임 이다.  자바스크립트 런타임이란 자바스크립트의 구동 환경이라는 뜻으로, 지금까지는 웹 브라우저가 유일한 자바스크립트 런타임이었으며, 그러므로 자바스크립트는 웹 브라우저 외에서는 사용할 수 없었다.그런데 Node.js라는 독립적인 자바스크립트 런타임이 등장하면서 어떤 환경에서도 자바스크립트를 실행할 수 있게 되었고, 활용 범위가 넓어짐과 함께 자바스크립트를 사용하는 개발자도 늘어나 2022년 기준으로 자바스크립트는 개발자가 가장 많이 사용하는 프로그래밍 언어가 되었다.  Node.js는 단순히 자바스크립트 런타임이며, 서버 개발 기술은 아니다.  리액트 활용을 위해 Node.js의 학습이 선행되어야 하는 ..

24-25/React.js 2 2024. 10. 11. 12:34

프로젝트 준비하기 요구사항 분석하기 → 리액트 앱 만들기 → 폰트 설정하기 → 이미지 준비하기 순으로 진행한다. 1. 요구사항 분석하기 어떤 페이지가 있고 무슨 기능이 있는지 알아보도록 하자. Home 페이지 사용자가 앱에 접속하면 처음으로 만나는 페이지다. 인덱스 페이지라고도 부르며 경로는 ‘/’다. 헤더: 월 단위 일기 조회, 좌우버튼으로 날짜 이동 일기 리스트: 일기 정렬, 버튼으로 New 페이지로 이동해 일기 추가 New 페이지 새로운 일기를 추가하는 페이지이며 경로는 ‘/new’이다. 헤더: 버튼 날짜 입력, 감정 이미지 선태그 일기 작성 폼 하단: , 버튼, 버튼은 Home 페이지로 돌아감 Diary 페이지 작성한 일기를 상세히 조회하는 페이지며 경로는 ‘/diary/id’이다. Home에서 ..

23-24/React.js 3 2024. 1. 12. 10:00

Read : 할 일 리스트 렌더링하기 CRUD의 두 번째 요소인 Read 기능을 이용하면 배열에 저장한 여러 할 일 아이템을 반복해서 페이지에 렌더링 가능하다. 배열을 리스트로 렌더링하기 1. App컴포넌트의 state변수 todo에 저장된 할 일 아이템들을 Props로 TodoList 컴포넌트에 전달한다. //App.js (...) function App() { const [todo, setTodo] = useState(mockTodo); (...) return ( ** ); } export default App; 2. TodoList 컴포넌트에서 todo를 리스트로 렌더링한다. 📌 리액트에서 배열 데이터를 렌더링하는 법 => 배열 메서드 map을 이용하면 HTML 또는 컴포넌트를 순회하면서 매 요소를..

23-24/React.js 3 2023. 12. 22. 10:10

프로젝트 준비하기 요구사항 분석하기 오늘의 날짜를 요일, 월, 일, 연도 순으로 표시한다. → Header To do를 작성하는 입력 폼이 있고, 추가 버튼을 클릭하면 할 일 아이템 생성한다. → TodoEditor 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일 추출 가능하다. → TodoList 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 토글 하는 체크박스, 아이템 이름, 등록 날짜, 삭제 버튼으로 구성한다. → TodoItem *토글: 디지털 신호가 1 또는 0을 되풀이하는 상태 (이 일을 마쳤는지 아닌지) 리액트 앱 만들기 폴더 만들기 → CORNERSTUDY/week910 npx create-react-app . 불필요한 파일과 코드 삭제하기..

23-24/React.js 3 2023. 12. 1. 10:00

컴포넌트 실습 환경 설정하기 본격적인 실습에 앞서 5장에서 사용할 새 리액트 앱을 만든다. 리액트 앱 만든다. npx create-react-app . 사용하지 않는 파일 삭제한다. → Create React App이 자동으로 생성한 파일들로 테스트 코드를 작성하거나 리액트 앱의 성능을 살필 때 사용한다. 진행할 실습에서는 사용하지 않으므로 삭제한다. src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js 사용하지 않을 코드를 삭제한다. index.js → 주석으로 표시된 코드는 모두 삭제한다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './in..

23-24/React.js 3 2023. 11. 3. 10:00

Node.js의 개념 자바스크립트 런타임 : 자바스크립트를 실행하는, 자바스크립트의 구동 환경 (ex: 웹 브라우저) Node.js 등장 이후 어떤 환경에서도 자바스크립트 실행이 가능해졌다. Node.js로 자바스크립트 실행 1. 비주얼 스튜디오 코드에 sample.js 파일을 생성한다. 2. 코드 작성 후, Ctrl + S로 작성한 코드를 저장한다. 3. Ctrl + J로 비주얼 스튜디오 코드의 터미널을 오픈한다. 4. 경로가 해당 폴더에 있는 것을 확인한 후, 터미널에 명령어를 입력한다. node sample.js // js파일을 node.js로 실행하는 명령어 Node.js 패키지 만들기 패키지 : Node.js에서 여러 개의 자바스크립트 파일을 실행하고 관리하는 일종의 관리 단위 1. 패키지 단위..

23-24/React.js 3 2023. 10. 13. 12:09

1. 리액트의 특징 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리이다. 프론트 엔드 기술 중 가장 많은 프로그래머가 사용하는 기술이다. 페이스북 개발 팀이 만들어낸 기술이다. [ 컴포넌트 기반 유연성 ] 새로운 기능 추가 및 업그레이드 시 코드 수정이 많이 필요하지 않다. 중복 코드: 동일한 내용을 여러 번 작성해야 하는 코드이다. 코드의 중복 -> 유연성을 크게 해친다. 리액트는 모듈화를 이용하여 중복 코드를 제거한다. 공통 사용되는 코드를 컴포넌트 단위의 모듈로 만든 후 호출로 사용한다. 업데이트: 웹 페이지의 정보를 교체하는 일이다. 문서 객체 모델을 조작하여 업데이트를 한다..

23-24/React.js 2 2023. 10. 13. 12:08

리액트 기술 블로그에 오신 여러분, 환영합니다! 저희 블로그에서는 리액트(React)에 대한 다양한 기술적인 내용을 다룰 예정입니다. 리액트는 현대적인 웹 개발에서 매우 중요한 역할을 하는 라이브러리로, 빠르고 효율적인 웹 애플리케이션을 구축하기 위한 필수 도구 중 하나입니다. 리액트는 자바스크립트 라이브러리이기 때문에 자바스크립트에 익숙하지 않다면 학습하기 어렵습니다. 기초적인 자바스크립트를 공부했다는 전제 하에 기본적인 자바스크립트 문법을 다시 한번 살펴보고, 이어서 객체의 특징이나 단락평가 같은 실전에 적용할 수 있는 문법을 다루겠습니다. 1. 함수 함수의 사용법을 본격적으로 알아보기 전에, 우리가 함수를 사용하는 이유가 무엇일까요? 자바스크립트 코드를 작성하다 보면 유사하게 동작하는 코드를 작성할..

23-24/React.js 1 2023. 9. 29. 10:00

Javascript란? 자바스크립트에 대해 자세히 살펴보기 전에 우리가 보는 인터넷 웹 페이지 구성에 대해 먼저 살펴보자. 웹 페이지는 HTML, CSS, Javascript 이 3가지의 언어로 만들어진다. HTML은 웹 페이지 요소의 배치를, CSS는 스타일링을, Javascript는 동작을 담당한다. 웹페이지의 주된 목적은 정보 전달 뿐만이 아닌 사용자와의 상호작용이다. 자바스크립트를 사용하여 동적인 기능을 장착할 수 있게 되고 자바스크립트 엔진은 그것을 가능하게 한다. 이것이 오늘날 자바스크립트의 중요성이 점점 커지고 있는 이유이기도 하다. 이제 자바스크립트 문법을 본격적으로 살펴보도록 하자. 변수와 상수 변수는 값을 가리키는 이름이면서 값의 저장소이다. 값 변경이 가능하고 선언과 동시에 할당(초기..

23-24/React.js 3 2023. 9. 29. 10:00

이번장에서는 리덕스를 사용하여 리액트 애플리케이션 상태를 관리하는 방법에 대해 알아보겠습니다. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만 프로젝트의 규모가 커짐에 따라 상태 관리가 복잡해질 수 있습니다. 리덕스를 사용하여 상태 관리를 하면 다음과 같은 장점이 있습니다. 1. 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어 코드를 유지보수 하는데 도움이 됩니다. 2. 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용합니다. 3. 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화할 수 있다. 이번 실습의 흐름은 다음과 같습니다. 프로젝트 준비 → 프레젠테이셔널 컴포넌트 작성 → 리덕스 관련 코드 작성 → 컨테이너 컴..

22-23/22-23 리액트 스타터 1 2023. 1. 12. 10:01

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다. 리덕스 라이브러리는 전역 상태를 관리할 때 효과적입니다. 코드의 유지 보수성을 높이고, 작업 효율을 극대화할 수 있습니다. 리덕스는 편리한 개발자 도구를 지원하고 미들웨어 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있습니다. 이전 장에서 배운 Context API로 같은 작업을 할 수 있습니다. 단순히 전역 상태 관리만 요구된다면 Context API를 사용하는 것으로 충분합니다. ..

22-23/22-23 리액트 스타터 1 2023. 1. 12. 10:00

전개 연산자와 배열의 내장 함수를 이용해 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어쓸 수 있습니다. 그러나 객체 구조가 엄청나게 깊어지면 불변성을 유지하며 이를 업데이트하기 어렵습니다. 이번 장에서는 immer라는 라이브러리를 사용하여 구조가 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 업데이트하는 것을 배워보도록 하겠습니다. 12.1 immer를 설치하고 사용법 알아보기 immer 라이브러리를 사용하기 위해서는 yarn을 통해 설치해야 합니다.이번 예제로 쓸 리액트 프로젝트와 함께 immer을 설치해 주세요. $ yarn create react-app immer-tutorial $ cd immer-tutorial $ yarn add immer 위와 같이 폼에서 아이디와 이름을 입력하면..

22-23/22-23 리액트 스타터 1 2022. 12. 29. 10:01