profile
°˖✧ Dreams come true ✧˖°
태그 목록
전체보기 (102)frontend(32)React(17)redux(16)JavaScript(14)typescript(14)코딩앙마(13)벨로퍼트(9)성능 최적화(5)컴포넌트 성능 최적화(4)redux saga(4)hooks(4)computer science(4)redux thunk(4)Redux+TS(3)React + TS(3)반복문(3)starbucks(2)break(2)캡틴판교(2)변수(2)instagram(2)기록하고 싶은 코드(2)Bang & Olufsen(2)network(2)데이터 타입(2)Redux-thunk+TS(2)Immer(2)array(2)continue(2)redux-middleware(2)2020.12.11 TIL(2)none(2)middleware(2)함수(2)CS(2)closure(2)position(1)math(1)D-day 계산(1)article(1)footer(1)nav(1)aside(1)section(1)refactoring(1)연산자를 이용한 타입 정의(1)union type(1)min-width(1)if 조건문 예제풀이(1)JS Functions(1)responsive web(1)데이터 타입 종류(1)데이터 할당(1)absolute(1)osi 7 layers(1)D-day(1)header(1)relative(1)오픈 API(1)push(1)뱅앤올룹슨(1)prompt(1)projects(1)Symbol(1)불(boolean), 비교 연산자, 논리 연산자(1)동적 라우팅(1)how the web works(1)Thread(1)호이스팅(1)process(1)Proxy(1)데이터 타입 배경 지식(1)for문(1)첫 프로젝트(1)개요(1)right(1)boolean(1)lifecycle(1)connect()(1)sequence(1)typesafe actions(1)Template literal 장정(1)객체 메소드(1)나머지 매개변수(1)정보처리기사(1)Redux Basics(1)array method(1)반응형 웹(1)garbage collection(1)Spread Syntax(1)float(1)Inherit(1)필요한 경우(1)Document(1)개발자 도구(1)while문(1)await(1)sessionStorage(1)타입스크립트를 쓰는 이유(1)ts(1)useEffect(1)비교 연산자(1)인터섹션 타입(1)left(1)fixed(1)img(1)코로나(1)for ~ in(1)semantic tags(1)기본 타입(1)Temporal Dead Zone(1)number(1)async(1)버튼 디자인 (속성)(1)return(1)while(1)for(1)메서드체이닝(1)reverse proxy(1)&&(1)pagination(1)타입스크립트 연습(1)react-virtualized(1)string methods(1)webpack(1)Redux 기본 개념(1)main(1)Flexbox(1)가비지 컬렉터(1)div(1)Template literal 단점(1)hoisting(1)첫 팀 프로젝트(1)팀 프로젝트(1)inline-bloc(1)문자열 메소드(1)문자열(1)Reusing(1)@media(1)let(1)var(1)클로저(1)String(문자열)(1)계산된 프로퍼티(1)filter(1)Rest parameters(1)application(1)인터페이스(1)build(1)String(1)코어 자바스크립트(1)instagram instamg(1)media query(1)useMemo(1)useReducer(1)리팩토링(1)setInterval(1)setTimeout(1)arrow function(1)작업 환경 준비(1)DOM(1)axios(1)Custom Hooks(1)특정부분 font(1)기본 개념(1)함수 표현식(1)button(1)object.entries(1)버튼(1)useCallback(1)import 모듈(1)브라우저 동작 원리(1)splice(1)font(1)background image(1)구조 분해 할당(1)생성자 함수(1)cons(1)localstorage(1)Pop(1)block(1)화살표 함수(1)inline(1)수학 method(1)do while문(1)배열 메소드(1)코로나 예방접종센터(1)심볼(1)Intersection Type(1)난수(1)Query String(1)display(1)redux-actions(1)객체 지향 기법(1)유니온 타입(1)instamg(1)code splitting(1)FrondEnd(1)array methods(1)cookie(1)slice(1)computed property(1)semantic web(1)무한 루프(1)redux-devtools-extension(1)atomic design(1)(1)object.keys(1)template literal(1)Map(1)메소드(1)TDZ(1)Object methods(1)else(1)if(1)enums(1)object.values(1)max-width(1)뱅앤올라프(1)Git test(1)이넘(1)range(1)보이기(1)OS(1)static(1)scope(1)git(1)백틱(1)redux-devtools(1)논리 연산자(1)전개 구문(1)감추기(1)사용 패턴(1)3가지 규칙(1)타입스크립트로 리액트 상태 관리(1)숫자 method(1)else if문(1)destructuring assignment(1)object(1)배열(1)cors(1)버튼 테두리 없애고 싶다면(1)front end(1)web(1)변수 선언(1)
post-thumbnail

JavaScript | setTimeout / setInterval

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것구현 방법 setTimeout, setInterval일정 시간이 지난 후, 함수를 실행setTimeout(함수, 시간, 인수)매개변수첫 번째 실행하는 함수(일정 시간이 지난 뒤) 두 번째

4일 전
·
0개의 댓글
post-thumbnail

TypeScript | 연산자를 이용한 타입 정의

타입 의미: A이거나 B이다 ( JS의 OR 연산자(||)와 같음 )연산자(|)를 이용 → 타입을 여러 개 연결하는 방식any 사용 시 → JS로 작성하는 것처럼 동작 유니온 타입 사용 시 → TS의 이점을 살리면서 코딩 가능 예시 코드 인터페이스와 같은 타입을

4일 전
·
0개의 댓글
post-thumbnail

TypeScript | 이넘(Enums)

특정 값들의 집합을 의미하는 자료형예시 TS에서 지원하는 것문자형 이넘숫자형 이넘선언 시, 초기 값을 주면 초기 값부터 1씩 증가 초기 값을 주지 않으면 → 0부터 1씩 증가예시주의선언할 때, 만약 이넘 값에 다른 이넘 타입의 값을 사용하면 → 선언하는 이넘의 첫

6일 전
·
0개의 댓글
post-thumbnail

Redux-saga+TS | saga 사용 / 리팩토링

목표프로젝트에서 비동기 작업을 관리하기 위하여 redux-saga 를 사용하는 방법(redux-thunk 대신)을 알아볼 것redux-saga로 똑같이 구현할 것(redux-thunk로 구현했던 것)redux-saga 설치하기이유GET_USER_PROFILE 액션에서

7일 전
·
0개의 댓글
post-thumbnail

TypeScript | 인터페이스

인터페이스란?상호 간에 정의한 약속 혹은 규칙타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의 가능객체의 스펙(속성과 속성의 타입)함수의 파라미터함수의 스펙(파라미터, 반환 타입 등)배열과 객체를 접근하는 방식클래스인자를 받을 때 객체의 속성 타

2022년 1월 10일
·
0개의 댓글
post-thumbnail

JavaScript | 클로저 (Closure)

JS는 어휘적 환경을 갖는다.코드가 위 → 아래 까지 어떻게 동작하는지 파악코드가 실행되면 스크립트 내에서 선언한 변수들이 어휘적 환경 (Lexical Environment) 에 올라감let 으로 선언된 변수호이스팅 됨.초기화 x → 사용 불가함수 선언문바로 초기화 →

2022년 1월 8일
·
0개의 댓글
post-thumbnail

Redux-saga 03 | saga 적용, 리덕스 개발자 도구(redux-devtools-extension) 활용

흐름'비동기' 액션 타입 선언→ INCREASE_ASYNC, DECREASE_ASYNC 액션 생성 함수 제작 (해당 액션에 대한)→ increaseAsync, decreaseAsync() => undefined를 두 번째 파라미터로 넣음. → 마우스 클릭 이벤트가

2022년 1월 7일
·
0개의 댓글
post-thumbnail

Redux-saga 02 | 라이브러리 설치 방법 / 주요 함수

$ yarn add redux-saga들어오는 모든 액션에 대해 특정 작업을 처리ex 가장 마지막 실행된 작업만 수행 (기존 진행 중이던 작업 有 → 취소 처리)여러 액션이 중첩되어 디스패치 되었을 때 → 가장 마지막 액션만 처리 (기존 것들 무시)ex 설정된 시간

2022년 1월 7일
·
0개의 댓글
post-thumbnail

Redux-thunk+TS 02 | 리팩토링 (thunk 함수 & 리듀서)

가장 먼저 해야 할 것thunk(Promise 기반)를 만들어 줌. (1줄로)thunk 만드는 법 액션 생성함수(createAsyncAction 로 만든) & 함수(Promise 를 만드는)를 파라미터로 가져와서 만들음. 단순히 데이터만 바로 조회하는 형태의 코드일

2022년 1월 7일
·
0개의 댓글
post-thumbnail

Redux-thunk+TS 01 | Basics (리덕스 모듈 / 프레젠테이셔널 / 컨테이너)

redux-thunk 설치 $ yarn add redux-thunk axios 설치 $ yarn add axios (API 요청 목적) 모두 공식적으로 타입스크립트 지원됨 → @types/redux-thunk 나 @types/axios를 따로 설치할 필요

2022년 1월 7일
·
0개의 댓글
post-thumbnail

JavaScript | 함수 표현식, 화살표 함수(arrow function)

함수 선언문 함수 표현식 호출 가능한 타이밍프로그래밍 언어 (순차적 실행, 즉시 결과 반환)JS함수 선언 문이 어디서든 호출 가능 한 이유JS 내부 알고리즘 때문 JS는 실행 전, 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해둠 → 사용 범위 커짐 (

2022년 1월 3일
·
0개의 댓글
post-thumbnail

Redux-thunk 02 | 웹 요청 비동기 작업 처리

웹 요청 비동기 작업 처리 1. API 함수화 (lib/api.js) > axios 사용 API 호출 시, 주로 axios(Promise 기반 웹 클라이언트) 사용 설치 $ yarn add axios > 함수화 이유 API 호출 함수 → 따로 작성 시,

2022년 1월 2일
·
0개의 댓글
post-thumbnail

Redux-thunk 01 | 개념 / 미들웨어 적용

(리덕스 사용 프로젝트에서) 비동기 작업 처리 시 (가장 기본적으로) 사용하는 미들웨어함수 형태의 액션 디스패치 가능 액션 생성 함수에서 함수 반환(액션 객체 반환 대신) 창시자 댄 아브라모프(Dan Abramov) Thunk란? 의미: 특정 작업을 나중에 할

2022년 1월 2일
·
0개의 댓글
post-thumbnail

Redux+TS 03 | 리덕스 모듈 파일 분리

분리하는 경우파일이 너무 길어질 때 → 아니면 한 파일에 작성분리 이유 상황 : 한 파일에 액션 type, 액션 생성 함수, 액션 객체들의 타입, 상태의 타입, 리듀서를 선언 → 액션의 수 증가 시, 코드가 너무 길어짐 → 개발 할 때, 뭘 찾을 경우 스크롤을

2022년 1월 2일
·
0개의 댓글
post-thumbnail

Redux+TS 02 | 리덕스 모듈 리팩토링 (typesafe-actions, 메서드체이닝)

typesafe-actions 란?리덕스를 사용하는 프로젝트에서 액션 생성 함수 & 리듀서를 훨씬 쉽고 깔끔하게 작성 가능하게 하는 라이브러리설치 방법 $ yarn add typesafe-actions typesafe-actions 최신 버전 설치 방법 액션 생성

2022년 1월 2일
·
0개의 댓글
post-thumbnail

Redux+TS 01 | 기본

oreduxxreact-redux대안 @types/ 를앞에 붙여서 설치 라이브러리의 타입스크립트 지원 여부 확인 방법직접 설치해서 불러와서 확인GitHub 레포를 열어 index.d.ts 파일 유무 확인써드파티 라이브러리 (라이브러리에 타입스크립트 지원 가능하도록

2022년 1월 2일
·
0개의 댓글
post-thumbnail

TypeScript | 함수

웹 애플리케이션 구현 시, 자주 사용되는 함수는 타입스크립트로 크게 다음 3가지 타입을 정의 가능함수의 파라미터(매개변수) 타입함수의 반환 타입함수의 구조 타입→ 기존 JS 함수 선언 방식에서 매개변수 & 함수의 반환 값에 타입 추가Tip 함수의 반환 값 에 타입을

2021년 12월 28일
·
0개의 댓글
post-thumbnail

React + TS 03 | 타입스크립트로 리액트 상태 관리

TS를 사용하는 리액트 컴포넌트에서 컴포넌트의 상태를 관리(useState & useReducer 사용)하는 방법 학습리액트 컴포넌트와의 차이Generics 사용 → 상태의 타입 설정 (useState<number>())안해도 무방 (Generics 없어도 )

2021년 12월 27일
·
0개의 댓글
post-thumbnail

React + TS 02 | 리액트 컴포넌트 타입스크립트로 작성

프로젝트 생성 리액트 프로젝트 + TS 명령어 $ npx create-react-app ts-react-tutorial --template typescript --typescript 뒤에 --typescript 이 있으면, 타입스크립

2021년 12월 26일
·
0개의 댓글
post-thumbnail

React + TS 01 | 타입스크립트 연습

생성 방법직접 입력명령어 사용 (일반적)typescript 를 글로벌로 설치$ yarn global add typescript프로젝트 디렉터리 내부에서 tsc --init 입력 → tsconfig.json 파일 자동생성만약, 명령어 작동 x npm install -g

2021년 12월 25일
·
0개의 댓글