본문 바로가기

전체 글400

[TIL] 리액트로 todoList 만들어보기 / 오늘의 개발일지 오늘은 치과치료가 있어서 공가를 냈었다 치료를 가기 전에 오늘까지 제출해야하는 과제도 있어서 오늘은 정말 정신없이 하루가 지나간 것 같다 (지금도 마취가 덜풀린 상태 ㅋㅋㅋㅋ) 처음 과제할 때는 추가, 삭제버튼만 구현하면 되는 줄 알았는데 완료 버튼 기능을 구현해야한다는 것을 나중에 알아서 오늘 부랴부랴 완성을 했었다 아래는 리액트 강의 배우고 내가 만들어본 todoList !!! https://warn-code.tistory.com/175 [리액트] 리액트로 todoList 만들기 ( #1_수정해야하는 부분있음) app.js import React, { useState } from "react"; import "./App.css"; import TodoItem from "./components/Todo.. 2022. 12. 7.
[리액트] 리액트로 todoList 만들기 ( #1_수정해야하는 부분있음) app.js import React, { useState } from "react"; import "./App.css"; import TodoItem from "./components/TodoItem"; // import todoDone from "./components/todoDone"; function App() { const [inputValue, setInputValue] = useState(""); const [todoList, setTodoList] = useState([ { id: 1, todoItem: "Test", isDone: false, }, { id: 2, todoItem: "나의 버킷리스트", isDone: true, }, { id: 3, todoItem: "리액트 장인되기!", .. 2022. 12. 7.
[TIL] 스스로 만드는건 어렵지만 배는 재밌당! 오늘의 개발일지 나는 어제 리액트 강의를 완강해야되는 줄 알았는데, 진도표 확인을 제대로 안했던 것인지 알고보니 수요일까지 듣는거였다! (오히려 좋아!!!!) 리액트 강의 끝나고 과제가 항상 있다고 했는데, 오늘 과제를 확인해보니 개인 TodoList를 만드는거였다. 예전에 웹종때도 투두리스트를 만들었었는데, 어느덧 시간이 흘러 리액트로 투두 리스트를 만들 날이 올줄이야 >__ 2022. 12. 6.
[TIL] 월요일이라 그런지 리액트 첫날이라 그런지 지치는 오늘의 개발일지 오늘은 리액트 첫 수업 날이었다!! 첫 수업때 어버버 하지 않기 위해 주말에 리액트 입문 강의도 몇 개 듣고, 리액트에서 자주 사용되는 자바스크립트 문법도 복습을 했었는데, 오늘 처음 접하는 거라 그런지 100% 완전하게 이해가 되지는 않았다 오늘은 운동쉬고 머리를 좀 식히는 시간을 가져야 될 것 같당 내일은 카페 일찍부터 나가서 범위를 빨리 마치고, 복습하는 시간을 차분하게 가져봐야징 오늘도 고생했당 >_ 아래는 오늘 리액트 공부하면서 정리한 노트!!! https://warn-code.tistory.com/172 [리액트] 리액트 입문 강의 정리노트 리액트는 자바스크립트를 이용한 프론트앤드개발을 더 편리하게 해주기 위한 라이브러리다 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서.. 2022. 12. 5.
[리액트] 리액트 입문 강의 정리노트 리액트는 자바스크립트를 이용한 프론트앤드개발을 더 편리하게 해주기 위한 라이브러리다 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업뎃함 MPA(멀티 페이지 어플리케이션) 아키텍처는 페이지마자 서버에 해당 페이지의 HTML파일을 요청하고, 이를 브라우저가 응답으로 받아 유저가 볼수 있도록 그려주는 구조였다. SPA는 서버에서 HTML페이지들을 일일이 다운로드하는 것이 아니라, 하나의 마크업 HTML 파일을 받아서 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시함 Virtual DOM -> 가상돔이라고 한다. HTML 마크업 구조를 자바스크립트로 조작이 가능한 객체 형태(Object 형태)로 모델링한 것을 DOM이라고 한다. (Document Object Mo.. 2022. 12. 5.
[리액트] 리액트 입문강의 듣는중 / 리액트의 'state'란? >> 리액트 state 매번 코드가 업데이트 될 때마다, ui를 바꿔주는 건 너무 낭비라고 함 ui를 바꾸는 건 굉장히 '비싼' 일이라고 한다. 뭔지도 모르는 변수가 업데이트 될 때마다 매번 ui를 바꾸는 건 굉장히 낭비되는 짓 리액트는 이러한 불필요한 업데이트를 방지하기 위해 'state'라는 개념을 만들었음. 변수와 또 다른 개념의 state를 만드는 것 state가 업데이트 되면, ui를 업데이트 해주겠다는 것! const [count2,setCount2] =useState(0); useState는 함수이다. useState는 무엇을 반환하냐? 배열(Array)을 반환한다. '0'은 초기값임. 이 초기값을 담고있는 state 변수 하나랑 ( count2 ) 이 state값을 바꿀 수 있게(업데이트 .. 2022. 12. 4.

티스토리툴바