거북이개발자

1. Next는 모든 페이지를 사전 렌더링 한다.(Pre-rendering) -더 좋은 퍼포먼스 -검색엔친최적화(SEO) -html 생성 순서에 따라 정적 생성과 Server Side Rendering으로 나뉜다. 2. 정적 생성 -프로젝트가 빌드하는 시점에 html 파일들이 생성 -모든 요청에 재사용 -퍼포먼스 이유로, 넥스트는 정적 생성을 권고 -정적 생성도니 페이지들은 CDN에 캐시 -getStaticProps / getStaticPaths -유저가 요청하기 전 페이지를 만들어 놔도 상관없을 시 사용 3. 서버사이드 렌더링 -매 요청마다 html생성 -항상 최신 상태 유지 -getServerSideProps

0. 설 치 npm install @reduxjs/toolkit 1. CreateAction (1) const ADD="ADD"; const DELETE="DELETE"; const addToDo = text => { return { type: ADD, text }; }; const deleteToDo = id => { return { type: DELETE, id: parseInt(id) }; }; r기존의 위의 코드를 const addToDo=createAction("ADD"); const deleteToDo=createAction("DELETE"); 이렇게 변경할 수 있다. (2) console.log(addToDo(), deleteToDo()); 두 함수를 console.log 해보면 이렇나 값을..

0. 화면구성 1. 사용 스택 -HTML, CSS, React, React-Router, KakaoMapApi 2. 주소 ryujungsik.github.io/two_dduk_bundang/#/ Twodduk-bundang ryujungsik.github.io 3. 아쉬운점 1. css에서 정확한 사용을 잘못했다. 2. 백엔드없이 프론트로만 구현하려다 보니 기능이 한정적이다. 3. 디자인 부분에서 너무 촌스럽다. 4. 다음에는 설계 과정에서 모바일, pc 버전을 먼저 생각해두고 만들어야 겟다.

0. 구현 사항 -React와 React-Redux를 이용한 To-Do List 만들 것이다. 1. 전체 코드 (1). Home.js import React, { useState } from 'react' import { connect } from 'react-redux'; import ToDo from '../components/ToDo'; import { actionCreators } from '../store'; function Home({ toDos, addToDo }) { const [text, setText] = useState(""); const onChange = (event) => { setText(event.target.value); } const onSubmit = (event) =>..

0. 구현 사항 -vanilla js와 pure redux를 이용한 To-Do List를 구현한다. 1. 전체 코드 import { createStore } from "redux"; const form=document.querySelector("form"); const input=document.querySelector("input"); const ul=document.querySelector("ul"); const ADD_TODO="ADD_TODO"; const DELETE_TODO="DELETE_TODO"; const addToDo=(text)=>{ return{ type : ADD_TODO, text }; }; const deleteToDo=id=>{ return { type : DELETE_TOD..

0. 구현 사항 위의 사진처럼 버튼을 누르면 숫자가 올라가거나, 내려가는 프로그램을 구현할 것이다. 1. None Redux, Only Vanilla JS const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.getElementById("span"); let count = 0; number.innerText = count; const updateText = () => { number.innerText = count; }; const handleAdd = () => { count = count + 1; updateText(); }; const handle..

1. freeze (1). 변경 가능 var o1 = {name:'kim', score:[1,2]} //many code o1.name = 'lee'; 객체의 경우도 많은 코드들이 추가되면 객체 내용물이 변형이 생길 수 있다. (2). freeze var o1 = {name:'kim', score:[1,2]} Object.freeze(o1); //many code o1.name = 'lee'; 객체의 내용을 변경하기 싫을 시 freeze을 이용해준다. 이렇게 변경하려고 시도하면 에러가 나오는 걸 볼 수 있다. 위 사진처럼 변경이 없는 것을 볼 수 있다. (2). 중첩 객체 freeze var o1 = {name:'kim', score:[1,2]} Object.freeze(o1); Object.freeze..

0. 변수 구분 Primitive Object Number Object String Boolean Array Null Undefined Function Symbol 1. 객체의 가변성 (1). Primitive var p1=1; var p2=1; p2=2; 위의 변수들은 p2=1인 새로운 값을 대입해도 p1의 값은 변하지 않는다. (2). Object var o1={name : 'kim'}; var o2={name : 'kim'}; var o3=o1; o1, o2, o3는 객체를 가리키는 변수이다. 그래서 o3의 값을 변경할 시 o1, o3는 같은 객체를 가리키므로 o1의 값도 같이 바뀐다. 2. 객체의 복사 객체를 복사할 시 위처럼 그냥 대입으로 하면 결국 같은 객체를 가리키기 때문에 Object.as..