Toy Project 17

React Hooks [useState] 리액트 훅

React Hook : state machine에 연결하는 방법 functional component에서 state를 가질 수 있게 해줌 => class component, did mount, render ... 등을 안해도 됨 => 함수형 프로그래밍 +) 관련 영상 참조 총 2가지의 useState hooks에 대해 정리 1. useState useState 항상 2개의 value를 return 한다. 초기에 state를 initialState를 세팅할 수 있는 옵션을 제공한다. const [item, getitem] = useState(1); **hook으로 짠 코드와 class component로 짠 코드 비교** [hook] const App=()=>{ const [item,setItem]=use..

Typescript로 블록체인 만들기

블록체인 간단하게 : 블록의 연결 Creating a Block 1. 블록 구조 생성 class Block { public index: number; public hash: string; public previousHash: string; public data: string; public timestamp: number; constructor( index: number, hash: string, previousHash: string, data: string, timestamp: number ) { this.index = index; this.hash = hash; this.previousHash = previousHash; this.data = data; this.timestamp = timestamp;..

Typescript TSC-Watch, Interfaces, Classes

TSC-Watch 1. yarn add tsc-watch --dev 2. package.json 수정 https://github.com/chasonghui/typechain/commit/4a8223a916d0425dfad0c32066b2fa0c3b7d9371 types in typescript · chasonghui/typechain@4a8223a Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Browse files types in typescript Loading branch information Showing 6 changed ..

Typescript Settings 타입스크립트 초기설정

Typescript Typescript : 프로그래밍 언어, Javascript 의 subrest, 컴파일할때 javascript로 변함. 자바스크립트는 너무 자유분방, type은 언어가 예측가능하고 읽기쉬움 자바스크립트의 upgrade version Setting Typescript up 작성시 환경 : vscode, window, 쉘: gitbash 1. yarn init 또는 npm init 초기화 명령을 통해 package.json을 생성한다. 2. yarn global add typescript 3. tsconfig.json 생성 typescript 에게 어떻게 javascript로 변환하는지 알려줌, 옵션설정 4. index.ts 생성 명령어 tsc : ts파일에 있는 코드를 컴파일해서 ind..

ReactJS 개발환경 구축

개발환경 : WSL2mnt폴더가 아닌 리눅스 홈에 새로운 폴더 하나를 생성하여 진행하였다.윈도우환경보다 훨씬 빠르다 ! node.js , npm, npx 설치 ! 버전은 LTS로 하였다 WSL2 환경에서 cd ~(home)에 Documents폴더를 만들어준 후wsl환경 설정하는 방법npx create-react-app movie_app_2021 명령어를 실행한다.그다음 code movie_app_2021 을 실행한다.(또는 폴더로 직접 이동하여 vscode를 연다.) git 과 연동git init - 여기서 reinitialize ~~ 라고 뜬다.git repository 생성git remote add origin [your repository address]git add .git commit -m "i..

React로 영화 웹 서비스 만들기

완성 소스1 → 영화진흥원 API사용(포스터 x) 완성 소스2 → 강의내용 API 사용(포스터o) 이 포스팅은 강의내용API를 사용한 완성 소스2 에 관한 포스팅이다. [미리보기] 미리보기 프로젝트 시작 개발환경 구축, JSX 와 props, state에 대한 설명은 같은 카테고리의 글을 참고하길 바란다. 개발환경 구축이 완료되었다면 프로젝트를 시작할 수 있다 ~! 디렉토리 구조 실행 환경 API 받아오기 yts.mx 라는 사이트에서 영화 관련 API를 받아온다. (axios를 사용) API로 받아오는 영화 데이터를 다루기 위해서 movies.js 파일을 생성했다. 컴포넌트 라이프 사이클을 활용하여 로딩이 끝난 다음 데이터를 불러 띄우는 과정을 진행하였다. render 함수가 호출되고 나서 어떤 함수가 ..

ReactJS JSX 와 PROPS + STATE

React는 component 를 사용해서 html처럼 작성하려는 경우에 필요 컴포넌트와 App.js 컴포넌트는 ReactDom을 렌더링 하는 과정에서 필요한 함수적 요소이다. 말 그대로 HTML을 뱉는(반환하는)함수! 이것을 App.js 파일에서 각각 만들 수 있다. Html을 JS로 다루는 기술인데, 우리는 이 기술을 JSX라고 한다. javascript안의 HTML = JSX (react에만 특화된 개념) -jsx 에서 component에 정보를 보낼 수 있음 -React는 재사용가능한 component를 계속 만들 수 있음 -component간의 정보전달 가능(father가 children에게) -ex) Food component 에 kimchi 라는 value로 prop name을 줌 웹사이트에..

[Vanila JS] Javascript 기본

nomad coders 의 바닐라JS로 크롬앱 만들기를 기반으로 작성됨 Javascript : 웹에서 사용하는 하나뿐인 언어 ECMA script: specification ES5, ES6... : versions of ECMA Vanilla JS : raw JS ( JS without Library) 변수var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나,그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 constname이 이미 선언 되었다는 에러 메세지가 나온다. (const도 마찬가지) 변수를 선언할 때는 const를 기본으로 사용하자. let은 진짜 필요할 때만 사용! let name = 'bath..

[Vanila JS] JavaScript 로 크롬 APP 만들기

완성된 소스코드 github 현재시간을 출력해주고 사용자이름,to-do list을 입력받고 출력(로컬저장소에 저장됨) 그리고 to-do list 를 삭제할 수 있는 딱 기본기능만 되어있는 chrome app이다. Javascript만 적용한 모습이고 , CSS는 거의 적용하지 않았다. CSS와 추가기능을 구현한 chromeapp을 보려면 여기로! [미리보기] files 총 사용한 파일들이다. nico 쌤은 Divde and conquer을 좋아해서, 각 기능마다 .js로 분리할 뿐만 아니라 기능안의 세부기능은 전부 함수로 분리되어 작성되어있다. 객체지향설계 수업들을때 교수님이 수백만번 강조하신 모듈화 !!!!!!!!!! 를 잘 하는것같다 index.html 메인 html이며 body에 시계, 입력창2개,..