노마드코더 10

[ReactJS로 영화 웹 서비스 만들기] ToDo List 만들기

노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의에서 ToDoList 를 만들어보았다. 강의에서는 단순히 에 입력하면 아래에 목록으로 출력이 되는 간단한 형식이었다. 그렇게 넘어가려던 중, 강의 댓글을 보니 ToDoList 에 삭제 기능을 넣는 것에 대한 논의가 이뤄지는 것을 발견했다. 그래서 필자도 삭제 기능까지 포함하여 꽤 있어보이는 ToDoList 를 만들어 보기로 했다. 1. 강의 결과물 강의에서 배운 결과물의 코드와 화면은 아래와 같다. import {useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDosList, setToDosList] = useState([]); cons..

노마드코더 2023.06.09

[ReactJS로 영화 웹 서비스 만들기] 5. Effects

본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 듣고 정리한 글입니다. 더 자세한 설명과 정보는 영상을 통해 확인할 수 있습니다. ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 지난 글에서는 CRA(Create-React-App) 에 대한 강의를 정리하여 올렸습니다. 이번에는 Effects 에 대한 강의를 듣고 정리합니다. [ReactJS로 영화 웹 서비스 만들기] 4. Create React App 본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 정리한 글입니다. 더 자세한 내용과 설명은 무료 강의를 들어주세요! ReactJS로 영화 웹 서비스 만들기 – 노마드 ..

노마드코더 2023.05.31

[ReactJS로 영화 웹 서비스 만들기] 4. Create React App

본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 정리한 글입니다. 더 자세한 내용과 설명은 무료 강의를 들어주세요! ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 지난 글에서는 ReactJS 의 Props 에 대해 정리하였다. [ReactJS로 영화 웹 서비스 만들기] 3. Props & PropTypes ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React 본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 수강하고, 개인적으로 정리한 글입니다. 더 자세하고 choboit.tistory.com 이번에는 간단히 React App ..

노마드코더 2023.04.27

[ReactJS로 영화 웹 서비스 만들기] 3. Props & PropTypes

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React 본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 수강하고, 개인적으로 정리한 글입니다. 더 자세하고 쉬운 설명은 강의를 참고하세요~! [ReactJS로 영화 웹 서비스 만들기] 2. State 본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 수강하고, 개인적으로 정리한 글입니다. 더 자세하고 쉬운 설명은 강의를 참고하세요~! ReactJS로 영화 웹 서비스 만들기 – 노마드 choboit.tistory.com 지난 글에서는 State 에 대한 강의를 듣고 실습하며 블로그에 정리했습니다. 이번에 정리 해볼 니코쌤의 강의는 ReactJS - Props 에 대한..

노마드코더 2023.04.20

[ReactJS로 영화 웹 서비스 만들기] 2. State

본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 수강하고, 개인적으로 정리한 글입니다. 더 자세하고 쉬운 설명은 강의를 참고하세요~! ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 직전 강의 정리는 다음 링크로 들어가시면 됩니다. [ReactJS로 영화 웹 서비스 만들기] 1. The basic of REACT 본 글은 노마드코더의 "ReactJ로 영화 웹 서비스 만들기" 강의를 복습 정리한 글이다. 영상 강의에서 더 자세하고 쉬운 설명을 들을 수 있으니, 본 강의에 흥미가 생긴다면 영상 강의를 수강하자. choboit.tistory.com 1. State? State 는 기본적으로 데이터가 저장되..

노마드코더 2023.03.21

[ReactJS로 영화 웹 서비스 만들기] 1. The basic of REACT

본 글은 노마드코더의 "ReactJ로 영화 웹 서비스 만들기" 강의를 복습 정리한 글이다. 영상 강의에서 더 자세하고 쉬운 설명을 들을 수 있으니, 본 강의에 흥미가 생긴다면 영상 강의를 수강하자. 왕초보를 위한 React Native 101 – 노마드 코더 Nomad Coders React Native로 2개의 앱 만들기 nomadcoders.co 1. Introduction ReactJS 는 JavaScript 라이브러리의 하나로서, UI 를 만들기 위해 사용된다. Facebook 의 소프트웨어 엔지니어 Jordan Walke 가 개발하였으며, 오픈 소스화 되었다. 즉, ReactJS 는 JavaScript 로 UI 작업을 하던 불편함을 해소하고자 만들어진 라이브러리라 볼 수 있다. 그렇다면 HTML..

노마드코더 2023.03.14

[유튜브 클론코딩] 5. Mongo DB and Mongoose 2

본 글은 노마드코더의 "유튜브 클론코딩" 강의를 복습하기 위해 정리한 것입니다. 자세한 내용은 강의로!! Mongo DB and Mongoose 1 : https://choboit.tistory.com/97 [유튜브 클론코딩] 5. Mongo DB and Mongoose 1 본 글은 노마드코더의 [유튜브 클론코딩] 강의를 복습 겸 정리한 글입니다. 자세한 내용은 수업으로! 1. Array Database MongoDB를 사용해보기 전에, POST를 하는 방법에 대해 알아보자. 지금까지 Router choboit.tistory.com 1. Creating a Video MongoDB 에 저장하기 전에 저장할 데이터를 만드는 방법에 대해 알아본다. 즉, 이전에 명시해두었던 Video Model 에 따라 데이..

노마드코더 2022.05.23

[유튜브 클론코딩] 5. Mongo DB and Mongoose 1

본 글은 노마드코더의 [유튜브 클론코딩] 강의를 복습 겸 정리한 글입니다. 자세한 내용은 수업으로! 1. Array Database MongoDB를 사용해보기 전에, POST를 하는 방법에 대해 알아보자. 지금까지 Router에서는 GET 요청만 받아주고 있었다. 하지만, DB를 연계하려면 DB에서 데이터를 받는 것만 필요하지 않고, 데이터를 DB에 보내는 것도 필요하다. 따라서 GET 외 HTTP Method를 express에서 어떻게 구현하지는 알아볼 필요가 있다. 우선, 더미 데이터로 이루어진 Array를 생성한다. 이 Array가 Database 역할을 해줄 것이다. // videoController.js ... let videoInfos = [ { id: 1, title: "Video #1", ..

노마드코더 2022.05.08

[유튜브 클론코딩] 4. Templates - Pug

1. HTML 리턴하기 지금까지 Response를 보낼 때, "res.send()" 함수를 사용하여 문자열을 보내는 것만 했다. 이번에는 응답으로 HTML 코드를 넘겨줘서 브라우저의 화면에 변화를 주는 것을 해본다. // videoController.js ... export const watch = (req, res) => { return res.send(`Watch Video: ${req.params.id}`); }; ... 위 코드처럼 간단하게 HTML 코드를 문자열로 넘겨주면 브라우저에서 해당 코드를 출력해준다. 페이지 소스를 보면, 응답으로 보내준 HTML 코드만 있는 것을 확인할 수 있다. 여기서 더 나아가 페이지를 완전히 바꾸고자 한다면, " 부터 시작해서 "" 로 끝날 때까지 그 긴 문자열을..

노마드코더 2022.04.25

[유튜브 클론코딩] 3. 서버 API 라우팅

1. API Routing 기획 라우팅을 사용해보기 위해 우선적으로 API를 간단하게 기획한다. 2. Router 추가 이제 서버 애플리케이션 코드에 위에서 기획한 대로 Router를 추가한다. 먼저, 대분류에 속하는 라우터를 생성한다. ... const globalRouter = express.Router(); const userRouter = express.Router(); const videoRouter = express.Router(); ... 라우터 자체를 생성하는 것은 위 코드처럼 정말 간단하다. 이젠 각 API에 라우터를 매칭해주면 된다. 기획했던 목록을 보면 대분류 라우터마다 URL의 공통점이 있다. Global Router는 "/"로 시작하고, Users Router는 "/users"로..

노마드코더 2022.04.20
반응형