본문 바로가기

분류 전체보기

(139)
[React] 230501 학습일기 http://www.yes24.com/product/goods/97782392 초보자를 위한 리액트 200제 (React) - YES24 따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나 www.yes24.com 길고도 긴 무기력 상태를 벗어나 이젠 좀 열심히 살아보려 한다. ㅋㅋ..ㅜㅜ ** 시작하기 전에 굉장한 것을 알아냈다. R008_LifecycleEx.js 파일이 아래와 같고 import React,{Component} from "react"; class R008_LifecycleEx extends Component { constructor(pro..
[React] 220423 학습일기 http://www.yes24.com/product/goods/97782392 초보자를 위한 리액트 200제 (React) - YES24 따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나 www.yes24.com 1. 생명주기 함수 static getDerivedStateFormProps(props, state) 사용하기 App.js를 수정해보자. import React from 'react'; import './App.css'; import R006_LifecycleEx from './R006_LifecycleEx'; function App() { ret..
[React] 230417 학습일기 http://www.yes24.com/product/goods/97782392 초보자를 위한 리액트 200제 (React) - YES24 따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나 www.yes24.com 1. src 폴더의 index.js에서 태그를 삭제했다. Strict모드: - 어플리케이션 내의 잠재적 문제를 알아내기 위한 도구. - 생명 주기 함수를 여러번 실행하는 원인 책에서는 import * as serviceworker from './serviceworker'; . . . serviceWorker.unregister(); 를 썼는데 내 ..
[React] 220416 학습일기 http://www.yes24.com/product/goods/97782392 초보자를 위한 리액트 200제 (React) - YES24 따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나 www.yes24.com 그동안 너무 정신없이 리액트를 배우다보니 기초가 와르르.. 그래서 책을 샀다. 공부해보자. 1. npm : node package manager yarn: 페이스북에서 만든 패키지 관리 도구. npm에 비해 캐싱, 신뢰성 등이 개선됨. 2. npm install -g yarn 으로 yarn을 설치해주었다. 여기서 -g는 무엇이냐? Q. npm in..
[ReactJS] 코드 모음 https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 노마드코더 강의를 듣고 작성하였다. 2.3 Events in React 이거는 JSX를 사용하지 않은 버전이다. 2.5 JSX Arrow function 여기서 직접 만든 컴포넌트들은 모두 함수 직접 만든 컴포넌트의 첫 글자는 반드시 대문자여야 함. 3.0 Understanding State UI를 계속해서 업데이트 시켜줘야 함. => reRender을 해줘야 함. 그렇기때문에 이 방법은 좋은 방법이 아님. 3.1 setState part 1 3.2 setState Part 2 setCou..
[JavaScript]Todo-List 만들기(2) 어느정도 왠만한 todo-list 같아졌다. 아래는 js 파일. index.js let todoList = []; let completedList = []; let num =1; //returnId는 string const todoListElement = document.querySelector(".todo-list"); const completedListElement = document.querySelector(".completed-list"); const initTodoDivElement = document.querySelector(".todo-initDiv"); const initTodoFormElement = document.querySelector(".todo-item"); const initT..
[JavaScript] Todo-List 만들기(1) 자바스크립트 코드는 다음과 같다. index.js // 여기에서 코드를 작성하세요! let todoList = []; let num =1; let controlNum; let controlTodo; const todoListElement = document.querySelector(".todo-list"); const initTodoFormElement = document.querySelector(".todo-item"); const initTodoInputElement = document.querySelector("input"); const proposeNewTodoElement = document.querySelector(".todo-item-add"); // console.log(proposeNew..
[JavaScript] 230327 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. html의 도움을 받으려면 태그를 써주는 것이 좋다. form이 submit될 때마다 페이지는 새로고침된다. 2. const loginInput = document.querySelector("#login-form input:first-child"); const loginButton = document.querySelector("#login-form input:last-child"); function onLoginSubmit(tomat..
[JavaScript] 230326 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. document를 이용하면 JavaScript에서 html에 접근할 수 있다. 2. html 속에 있는 내용을 id로 가져오기. 실행할 html 파일이다. Grab me! 그리고 html을 실행하고 나서 콘솔에서 document.getElementById("title"); 을 입력해주면 3. 하 망했다. html 파일을 liveserver 이라는 VScode 확장 프로그램을 사용해서 실행했었는데 const title = documen..
[JavaScript] 230324 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. array 배열 파이썬의 list 같은 개념이다. 숫자, string, bool 등 여러 자료형이 하나의 array에 함께 들어갈 수 있다. 시작과 끝에 대괄호를 붙인다. [와 ] const mon = "mon"; const tue = "tue"; const wed = "wed"; const thu = "thu"; const fri = "fri"; const sat = "sat"; const sun = "sun"; const days..