이안의 평일코딩

yarn이 설치되어 있다면 터미널에서 아래와 같이 입력하여 타입스크립트 프로젝트용 기초환경을 설정한다. $yarn create react-app 프로젝트폴더명 --template typescript 나는 TS-TodoList를 프로젝트명으로 하여 생성했다. 위와 같이 tsx파일로 타입스크립트 리액트 프로젝트 기본 셋팅 성공!

웹은 Client와 Server로 나누어진다. Client는 요청을 보내는 역할을 하고 Server는 요청을 보고 알맞은 응답을 해준다. 그리고 Client는 그 응답을 바탕으로 DOM에 그린다. (css처리 + javascript로드) 이 과정을 반복한다. 웹의 발전으로 수많은 요청과 응답을 처리해야 되기 때문에 Server 부하, Client도 페이지 깜빡임이 나타남. Ajax라는 기술을 통해 일부분만 정보를 가져올 수 있게 되고 더 나아가 SPA라는 개념이 등장한다. SPA(Single Page Application) SPA는 url을 움직이더라도 html을 새로고침하지 않는 것이다. React는 SPA를 지원하는 라이브러리이며 Client Side Rendering 방식으로 동작한다. Server..

이벤트란?클릭이나 스크롤을 내리는 등 사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것을 말한다. 이벤트 리스너, 이벤트 핸들러는 어떤 이벤트 발생 시 처리하는 함수이다. 자주 사용되는 DOM이벤트로 click(마우스 왼쪽 클릭), contextmenu(마우스 오른쪽 클릭), keydown(키보드 누를 때), keyup(키보드 뗄 때), submit, focus 등이 있다. 이벤트 등록 방법 인라인 방식 (inline)이벤트를 HTML 요소의 속성으로 직접 지정하는 방식이다. 단점은 HTML 코드에 자바스크립트를 추가해서 코드가 섞여 유지 보수에 좋지 못하다는 점이다.Click프로퍼티 방식 (Property)인라인 방식의 단점을 보완하여 자바스크립트 코드에 프로퍼티 등록 방식이다. 하나의 이벤..

브라우저 저장소(Web Storage)는 HTML5부터 추가된 저장소로 쿠키(cookie)와 비슷한 기능이다. 쿠키(Cookie) 개발자가 아니어도 브라우저를 사용하다보면 쿠키라는 용어에 대해 쉽게 목격한 적이 있을 것이다. 쿠키란 웹사이트에 의해 유저의 정보를 저장하는 것이다. 서버와 데이터를 공유하는 용도로 사용되며 데이터의 유효기간을 지정이 가능하다. (ex: 1시간 뒤, 하루 뒤) 장점으로는 대부분의 브라우저가 지원을 한다는 점이지만 단점으로는 4kb 데이터 저장 제한으로 사이즈가 매우작고 서버에 매 HTTP 요청으로 데이터 전달 낭비가 발생한다는 점이다. 팝업창 다시 보지 않음 기능에 사용된다. 로컬 스토리지(Local Storage) 가볍지만 기능이 많지 않고 단순히 key(키):value(값..

드디어 React로 쇼핑몰 프로젝트를 완료하여 Heroku를 통해 배포에 성공했다. 구글링이나 유튜브에 Heroku 배포에 대해선 너무나도 많은 자료가 있지만 업데이트 부분에는 잘 다루지 않아서 나도 추후에 볼겸 참고용으로 써본다. 즉, 이 글은 이미 1차로 deploy가 된 후에 업데이트 된 build를 어떻게 다시 배포하는가에 대해서 쓴 글이다. build 먼저 위와 같이 해당 프로젝트의 터미널에서 빌드를 해준다. npm run build Heroku에서 deploy하기 heroku login 위와 같이 입력하면 q를 제외한 아무 키나 누르면 Heroku 로그인할 수 있는 인터넷 새창이 뜬다. git add . git commit -am "메세지입력" git push heroku main 순서대로 입..

단위 , 콤마 찍기 (단위변환).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 리액트 예시 import React, {useEffect, useState} from 'react' import UserCardBlock from './Sections/UserCardBlock'; function CartPage(props) { const dispatch = useDispatch(); const [Total, setTotal] = useState(0) //(중략) let calculateTotal = (cartDetail) => { let total = 0; cartDetail.map(item => { total += parseInt(item.price,10) * it..

타입 추론 // 타입 추론 기본 1 (변수, 속성, 인자의 기본 값, 함수의 반환 값) var a = 'abc'; function getB(b = 10) { var c = 'hi'; return b + c; } 10 + '10' //1010 // 타입 추론 기본 2 (인터페이스, 제네릭 이용) interface Dropdown { value: T; title: string; } var shoppingItem: Dropdown = { value: 'abc', title: 'hello' } // 타입 추론 기본 3 (복잡한 구조) interface Dropdown { value: T; title: string; } interface DetailedDropdown extends Dropdown{ descrip..

제네릭이란? 제네릭(Generics)이란 함수를 정의할 때 타입을 비워놓은 상태에서 타입이 뭐가 들어갈 것인지 호출하는 시점에서 정의하는 것으로, 타입을 추론해서 최종 반환값까지 붙일 수 있다는 타입 정의에 대한 이점을 가지고 있다. function logText(text: T):T { console.log(text); return text; } // : 함수의 타입을 string으로 쓰겠다 // 파라미터와 반환값이 string이 될 것이라고 제네릭으로 선언 const str = logText('abc') 제네릭을 쓰기 위한 빌드업 - 함수 중복 선언, 유니온 타입의 단점 아래와 같이 기존의 타입 정의 방식으로 각각 정의해서 함수를 중복으로 선언하면 문제없이 사용가능하지만 유지보수관점에서는 타입을 단순히..