진짜 작은 개발자

ReactJS의 기능을 적극 활용하여 ToDoList 만들기! 바닐라JS 때보다 훨씬 간단함 전체 코드는 다음과 같다 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDos(currentArray => [toDo, ...currentArray]); setToDo("");..

오늘은 useEffect()에 대해 공부했다... 거두절미하고 바로 시작 예를 들어 다음과 같은 화면을 만든다고 해 보자. 맨 위에 검색창이 하나 있고 그 밑에 Click me를 누르면 숫자가 올라가는 counter가 있다 그리고 화면엔 안 띄울 건데 API CALL이 있다고 해 보자. 다음과 같이 작성했다. import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) ..

본격적으로 react를 사용하여 웹 만들기를 해보자! 이번 포스트는 웹 만들기 전 설치해야 할 것들에 대한 내용을 담았다. 본격적으로 만들어가는 것들에 대한 건 다음 포스트부터,,,^^ 일단 Node.js를 설치해야 함. Download | Node.js (nodejs.org) Download | Node.js LTS Recommended For Most Users nodejs.org 여기서 자기 컴퓨터에 맞는 거 설치하면 되는데 나는 이유 모르게 Node.js가 이미 설치되어 있었다; 아마 옛날에 다른 프로젝트 하려다가 포기하고 남은 것인듯 자기 컴퓨터에 Node.js가 설치되어 있는지를 확인하고 싶다면 명령 프롬프트에서 다음과 같이 입력해보면 알 수 있다 node -v 추가로 npx 커맨드도 사용할 ..

이어서 개념 공부 및 연습...~ 이번 시간에는 props에 대해 배워보자... 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 이 페이지에서는 컴포넌트의 개념을 소개합니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 출처: Components와 Props – React (reactjs.org) Components와 Props – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 예를 들어, 같은 스타일의 버튼을 여러 ..

저번에 이어서 ReactJS 연습하는 시간~~ 단위 변환기(Converter)를 만들어보자. 단위 변환기란??? 분 초, cm m 등 단위를 변환...해주는... 기... 사용자가 숫자를 입력하면 적절하게 변화시켜주는 걸 만들어볼 것이다. 우선 저번에 배운 useState()를 사용하여 아래와 같이 작성해준다. 저번과 같이 useState()를 사용하되, 이번에는 modifier를 조금 다르게 작성해주었다. parameter에 event를 작성하여 target을 불러올 수 있도록! 이 부분은 바닐라JS 공부할 때 배운 내용을 생각해보면 이해가 쉽게 간다. 저번 시간에는 버튼을 누르면 숫자가 커지는 것을 구현했으므로 onClick을 사용했는데, 이번에는 onChange를 사용했다. value에 변화가 생기..

바닐라JS로 크롬 앱 만들기(Momentum 만들기)를 다 끝냈습니다. 기대했던 것보다 Nomad Coders 강의 퀄리티가 좋아서, 이어 다른 코스도 몇 개 수강해보려고 하는데요 두 번째로 들어볼 강의는 ReactJS로 영화 웹 서비스 만들기 입니다 a.k.a 넷플릭스 본격적으로 웹을 만들어 보기 전에, React JS 기본 문법을 공부하는 시간을 갖고 있는데 어렵다... 기보단 헷갈린다... 복습하지 않으면 금방 잊어먹겠다... 싶어서,,, 여기다가 공부 기록을 먼저 남겨보려고 합니다. 그럼 강의 요약노트,,, 시작,,, 1. React JS를 사용하여 JS 파일에서 element 만들기 React.createElement() 로 element를 정의해주고 ReactDOM.render로 웹에 넣어주는..

안녕하세요...? 마지막 포스트를 쓰고 대략 3주가 지났군요... 바닐라 JS로 크롬 앱 만들기 (6)은 9월 27일에 업로드된 글이지만... 사실 9월 8일에 작성한 걸 약 3주간 묵혀둔 거였답니다... 그 동안에 저는 크롬 앱 클론 코딩을 끝내버리고 완성본을 깃허브에 올려버렸습니다... 후후 드디어 끝났다 지난 포스트까지 만든 기능들은 사용자 이름 입력 받기 인삿말 넣기 시계 만들기 랜덤 명언 출력하기 랜덤 배경화면 출력하기 투두리스트 만들기 등 이 있는데요? 여기서 기능적으로 추가한 것은 날씨 불러오기 정도밖에 없답니다. 나머지는 사용자 편의를 고려하여 아주~!! 자잘하게 추가한 것들이며, 전부 강의에서 배운 내용을 응용했습니다. 그럼 우선 완성본 먼저 보시죠 Momentum (pear27.gith..

5. To-do list 만들기 (계속) 항목을 입력해서 화면에 띄우기, 삭제 버튼으로 삭제하기, 항목을 데이터베이스(localStorage)에 저장하기 이렇게까지 완료했다. 일정을 노트에 쓰면 걍 쓰고 지우면 되는데^^.. 이제 항목을 데이터베이스에서 삭제하기 만 구현하면 투두리스트는 끝! 삭제 기능을 구현하기에 앞서, 항목이 저장되는 방식을 조금 수정해보자. 기존에는 localStorage에 string의 array 형태(이걸 string으로 바꾼)로 저장되어 있었다. ["a", "b", "c", "d"] 이걸 object의 array 형태(이걸 string으로 바꾼)로 저장하는 식으로 바꿔보자. id를 추가해서! [{text: "hi", id: 1694176213051}, {text: "hello"..