끄적끄적

! Javascript ? Typescript 위의 이미지와 비슷하게 Javascript와 Typescript는 비슷해보입니다. 하지만 가장 중요한 차이인 JS는 동적타입언어 이며 TS는 정적타입언어 입니다. 동적타입언어는 런타임시 변수의 타입이 결정되고, 정적타입언어는 컴파일시 변수의 타입이 결정됩니다. TS는 JS의 모든 기능을 포함하면서 정적타입을 지원하는 언어입니다. JS는 타입을 지정하지 않기 때문에 중간 마다 다양한 타입의 값들을 변수에 할당할 수 있습니다. 이러한 자유로움 덕분에 진입장벽이 낮고, 적은 코드에서의 생산성이 높습니다. 하지만 TS는 변수를 선언할 때마다 타입을 고민해야지만, 많은 코드에서의 생산성이 높습니다. 생산성의 차이는 변수와 같은 것들을 다양한 곳에서 사용하고 코드의 잠..

데이터를 저장할 수 있는 것이 오직 서버만인 것은 아닙니다. HTML5에서 Web Storage API를 제공하여 쿠키를 사용하지 않고도 직관적인 key : value 형식의 데이터를 저장 및 사용할 수 있게 해줍니다. (쿠키도 key : valye 형식을 갖습니다) 이번 블로그에서는 Cookie와 Localstorage, Session Storage의 저장소로서의 개념과 특성에 대해 알아보겠습니다. ! 쿠키(Cookie)란? 쿠키는 웹사이트 접속지 접속자의 개인 장치에 다운되고 브라우저에도 저장되는 작은 텍스트 파일입니다. 서버를 통해 이용자의 설정과 과거 이용내역에 대한 일부 정보를 갖고 있습니다. HTTP요청을 흘때 서버는 요청자체만으로 누구에게 오는지 알 수가 없기에 쿠키를 읽어 나를 파악할 수 ..

Javascript(JS)에서 중요한 개념인 Closure를 알아보겠습니다. JS를 사용해본 사람이라면 언젠가 들어봤을겁니다. 클로저. 하지만 개념이 어렵고 낯설어 이해하기가 쉽지 않습니다. 지금부터 closure의 개념과 간단한 예제를 통해 왜! 사용하는지에 대해서 알아보겠습니다. ! 클로저(Closure)란? Javascript에만 국한되는 것이 아닌 일급객체를 다루는 함수형 프로그래밍 언어에서 사용하는 개념으로, 함수가 실행될 때 의 스코프(lexical scope)를 기억해 함수가 외부에서 사용됐을 때도 이를 기억해 사용할 수 있게 해주는 것이다. 이렇게만 들으면 매우 어렵습니다. 간단하게 전역변수를 지역변수처럼 사용할 수 있게 해주는 것입니다. 이렇게도 들어도 매우 어렵습니다. :( 코드로 살펴..

이제 컴포넌트들을 작성할 시간입니다! 4. App.js 루트 컴포넌트로 MakeTodo와 Todo 컴포넌트를 return 해줍니다. // App.js import React from 'react'; import MakeTodo from './MakeTodo'; import Todo from './Todo'; function App(props){ return( // 할일을 적을 수 있는 컴포넌트 // 할일을 보여주는 컴포넌트 ) } export default App; 5. MakeTodo.js // MakeTodo.js import React, {useState} from 'react'; import { connect } from 'react-redux'; function MakeTodo(props){ c..

오늘은 Redux를 이용한 아주 간단한 TodoList를 만들어보려고합니다. ! Redux가 무엇인지 잘 모르시는 분은 pyolog.tistory.com/7 을 참고하시면 좋을 것 같습니다. 1. 우선 cra(create-react-app)로 리액트 프로젝트를 생성하겠습니다. npx crate-react-app redux_test 2. 먼저 src 폴더 밑에 store를 작성하겠습니다. import { createStore } from "redux"; // 초기 state , 배열에 저장하겠습니다. export const INITAIL_STATE = {todos : []}; //■■■■■■■■■■■■■■■■■■■■■■■ action 정의 ■■■■■■■■■■■■■■■■■■■■■■■■■■■ export fu..