React와 크림을 활용한 영어 단어장 웹 서비스 개발 강좌

React와 Cream 기술 스택으로 영어 어휘 학습을 위한 웹 서비스를 구축합니다.

### 리액트 기초 강좌: 영어 단어장 웹 서비스 제작
* 📌 **리액트**와 **크림**을 사용한 웹 서비스 제작 강좌 소개.
* 📚 컴포넌트 작성법, JSX, **useState**, **useEffect Hook** 등을 학습합니다.
* 💻 **JSON 서버**와 **REST API**를 활용한 CRUD 기능 구현 (단어 추가, 수정, 삭제).
* 📝 토익 영단어장 예시를 통해 기능 구현 과정을 시각적으로 보여줍니다.  단어 추가, 뜻 보기, 암기 표시, 삭제 기능 포함.  데이터는 새로고침 후에도 저장됩니다.
* 🛠️ **Node.js**와 **VS Code** 설치 필요.  (다른 에디터 사용 가능).
* 👨‍💻 **HTML**과 **자바스크립트** 기본 지식 필수. CSS는 다루지 않음.

안녕하세요. 이번 강좌는 React와 크림의 테크 스택을 이용해서 웹

서비스를 하나 만들어 볼 거예요. 컴포넌트 작성법과 JSX 사용법을 배우실 수 있고, useState와 useEffect 같은 Hook들을 함께 다룰 예정입니다.

그리고 CRUD 구현을 위해서 JSON 서버를 띄우고 REST API를 통해

단어들을 추가, 수정, 삭제하는 것을 보여드리겠습니다. 자, 이어서 한번

보여 드리면, 이런 영어 단어장을 한번 만들어 볼 거예요.

토익 영단어장이라고 적겠죠. 보시면 이렇게 날짜가 있고, 이 안으로 들어가면

단어들이 있습니다. 이렇게 뜻 보기 버튼을 눌러서 뜻을 볼 수 있고, 다시 숨길 수도 있구요,

이미 암기한 단어는 여기를 체크하면 이렇게 숨김 처리가 됩니다.

나갔다가 다시 들어와도 저장이 되고, 새로고침을 해봐도

일치되는 것을 볼 수 있습니다. 완전히 외웠다고 생각되면 삭제 버튼을

눌러서 지울 수도 있구요. 그리고 여기 단어 추가 버튼을 이용해서

단어를 추가할 수도 있습니다. 재미있는 프로젝트가 되겠죠?

자, 강의를 잘 들으시려면 준비물이 필요합니다.

첫 번째는 Node.js입니다. Node.js가 설치되어 있지 않으면 이곳으로

가셔서 환경에 맞게 설치하시면 됩니다. 두 번째는 VS 코드입니다. 사실 다른 것을 써도 상관없습니다.

근데 저는 웹 개발할 때 VS 코드를 제일 편한 것 같아요.

이것도 필요하니까 설치하시면 좋겠죠. 세 번째는 가장 중요합니다.

바로 HTML과 자바스크립트에 대한 지식입니다. 사실 이 강좌에서 CSS는 크게 다루지 않습니다.

하지만 HTML과 자바스크립트에 대해서는 어느 정도 알고 계셔야 합니다.

React JS #1 강의 소개 - 초보자를 위한 리액트 강좌

안녕하세요. 코딩앙마 입니다 :)


코딩앙마

React와 크림 테크 스택을 이용한 웹 서비스 개발

컴포넌트 작성법, JSX 사용법, useState와 useEffect Hook 학습

JSON 서버 및 REST API를 이용한 CRUD 구현

영어 단어장 웹 애플리케이션 제작 예시 소개

단어 추가, 수정, 삭제, 암기 기능 포함

VS Code 설치 (선호도에 따라 다른 에디터 사용 가능)

HTML 및 자바스크립트 기본 지식 필수