개발 노트

목차 - 기본설정 - 기본타입 - 함수 - overloading - generic - class - interface js에서는 코드를 작성하는 중에 에러를 처리해주지 않는다. 런타임을 돌려야 에러가 난다. 기본 설정 node는 ts를 기본적으로 실행 할 수 없다.(해석하지 못한다.) npm install -g ts-node ts-node 를 설치함으로 ts-node 를 통해 .ts 파일을 실행시키면 바로 실행 시킬 수 있게 된다. npm init -y npm install -D typescript typescript 를 설치하고 난후 tsconfig.json 파일을 만들어 개인적으로 설정을 해도 되고 tsc --init 을 통해 tsconfig 파일을 자동으로 생성 할 수 있다. { "compilerO..

목차 1. React-Router-dom 설정 2. react-redux 설정 - redux 3. rootReducer - combineReducers 로 쪼개기 - combineReducers 4. reducer 최소 하나 이상만들기 5. 미들웨어 장착 (thunk) - redux-thunk 6. 상태 유지 - redux-persist ## React Setting 1. React-Router-dom 설정 - Header 만들기 잘 작동하는지 > 로 감싸놔야 작동이 된다. - Header styled-components 설정 - BrowserRouter - Routes - Route 만들 page 구상 기본 src에 디렉토리 구조를 짠다. common = 자주 사용 > 모든 페이지에서 사용 될 만한 것..

npx =/= npm 차이점 npx 의 경우 npm 된 파일을 찾을 수 없으면 새로 설치해준다. 설치 후 진행이 가능하다 **npx sequelize-cli sequelize-cli 모델을 새로 만들어주는 기능도 가지고 있따. CRA create-react-app 기존에 쓰던 webpack 의 기능과 React 의 초기 세팅을 도와주는 패키지 $ npx create-react-app [폴더명] 폴더명으로 만들어준다 CRA를 통해 설치하면 따로 webpack 설정 등을 하지 않아도 된다 => 편리하다 초기 설정 git 에 올리고 싶지 않다면 .git 폴더 먼저 삭제해주기 app.js index.js 등 jsx로 바꿔주면 원래 하던것과 비슷하게 할 수 있다. 기본적인 디렉토리 구조 src 아래에 //Comp..

Square Component class Square extends React.Component { constructor(props) { super(props); this.state = { value: null, }; } render() { return ( { this.props.onClick(); }} style={this.props.style} // style 형식 = {{background: "blue"}} > {this.props.value} ); } } 트리의 제일 아래에 있는 Square 부분이다. Board 에서 부터 onClick과 style, value 값을 받아 부여해준다 ** style 형식 = {{background: "blue"}} Board Component class Board..

목차 1.JSX 2. Component Prop[ 3. State 4. 생명주기 5. Event 등록 6. State 끌어올리기 React 컴포넌트 기반 기본적으로 컴포넌트를 기반으로 만들어진다. 컴포넌트는 하나의 아주 작은 단위로 나눠지는 것으로 댓글로 예를 들면 댓글을 작성하는 부분, 댓글이 나오는 부분을 서로 나눌 수 있다. 이러한 컴포넌트에 상태를 부여해서 그 상태값이 변화 될 때 변화를 체크하고 다시 렌더를 시켜주도록 만들어주는 것이다. 기본적인 연습 Component는 앞선 게시글에서 연습을 해봤다. React의 기본적인 형태이다. 1. jsx jsx 문법을 사용한다 const element = Hello, world!; 이런형태의 코드를 작성 할 수 있다. 기본적으로 Javascript 를 ..

promise 는 비동기 함수로 바꿔줄 수 있다. promise 객체는 3가지 상태값을 가지게 되는데, = 값이 아직 없는 상태 = 값이 가득 찬 상태 = 실패 값이 찬 상태 한 번 상태가 변경 된 프로미스 객체는 다시 값을 부여 할 수 없다. const 아반떼 = (callback) => { setTimeout((a) => { console.log("아반떼 go"); callback(); }, 3000); }; const 소나타 = (callback) => { setTimeout(() => { console.log("소나타 go"); callback(); }, 2000); }; const 제네시스 = (callback) => { setTimeout(() => { console.log("제네시스 go")..

join map filter Object.keys reduce **배열메서드는 기본적으로 원본 배열을 바꾸는 것이 아니라 바꾼 배열을 새로 변수로 받아야한다. .join() 배열의 모든 요소들을 연결하는 메서드 연결하면서 string으로 만들어준다. hoin뒤에 인자값에 넣는 값으로 요소 와 요소 사이에 구분자를 넣어준다. const arr = ["reply", "content-type", "body"] let text = arr.join("\r\n") text = reply content-type body **string 상태가 된다. .map 배열의 요소를 바꿔주는 메서드 value 값을 다 한 번 씩 돌려서 return 값으로 바꿀 요소의 값을 넣어주면 된다. const obj = { reply: ..

const eventSlideclone1 = eventSlide[0].cloneNode(true) const eventSlidelast = eventSlide[eventSlide.length-1].cloneNode(true) slideul.insertBefore(eventSlidelast, eventSlide[0]) slideul.append(eventSlideclone1) const eventSlideClone = document.querySelectorAll(".slide > li") const liwide = eventSlideClone[0].clientWidth const sliderWidth = liwide * eventSlideClone.length; let translate = 0 let e..

1. 게시판 2. 배열함수 게시판 화면 HTML 페이지가 하나였지만 이젠 다르다 . 페이지를 넘기듯 표시하는건 2가지 방법이 있다. youtube는 엘리먼트만 갈아 끼우는 것 naver는 아예 페이지를 새로 받아오는것 react view 리스트 글쓰기 글수정 글보기 글삭제 list.html 페이지가 하나라고 하면 --index파일 하나 html끼리 데이터 공유를 하는 방법? -method : get 데이터 공유는 안되지만... 데이터는 넘긴다. cookie .. 브라우저가 만든것 브라우저는 데이터를 저장한다. 데이터저장 = 그냥 글자를 저장한다(파일명) // document.cookie = "name=이름" localStorage window window.localStorage.setItem('name'..

1. 설계하기 2. 실제코드 - 날짜 - try catch 1. 설계하기 Update 내가 수정하려는 아이가 몇 번째 아이인지 모른다. 우리는 creat read를 구현했을 때 array 에다가 데이터 보관 update 와 delete 는 해당 index 고유번호 key 값을 가져와야함 = read 할 떄 신경써줘야함 Create 고유한 번호를 만드는것 - index Read 고유한 번호를 남기기 위해 date 셋 엘리먼트에다가 데이터를 저장하는 용도로 사용하는것 div id='header' data-index="5" = 데이타를 선언했다 = - 변수명은 5다. const header = document.querySelector("#header") console.log(heeader.dataset.ind..