post-thumbnail

React 성능 향상 시키기2 (Debounce 사용해 kakao Map API 효율적으로 사용하기🙄)

React 성능 향상 시키기2 (Debounce 사용해 kakao Map API 효율적으로 사용하기🙄)

2021년 2월 3일
·
0개의 댓글
post-thumbnail

React 성능 개선하기!🤤 (Throttle, Debounce)

React 성능 개선하기!🤤 (Throttle, Debounce)

2021년 1월 24일
·
0개의 댓글
post-thumbnail

[TIL] react+typescript+webpack 처음부터 다 해보기

왜 이제야 하게 됐는지 잘 모르겠다.. 너무 중요하단걸 알고 있지만 몇번 봐도 어려워서.. 그리고 우리에겐 CRA이 있으니 웹팩에 별로 중요성을 느끼지 못하고 있었습니다.그렇게 공부 하던중... 정말 프론트엔드 고수가 뭘까.. 고수가 되려면 어떻게 해야할까.. 고민하던

2021년 1월 19일
·
0개의 댓글
post-thumbnail

[TIL] react-hook-form, react 로그인

웹앱의 필수 조건이라 하면 절대로 로그인을 때어놓을수 없습니다. 로그인을 하며 input에 정보를 입력하면 react의 state값이 변하기 때문에 화면이 재 렌더링 되는 것을 한번쯤을 봐왔을 겁니다. React.memo? 위 상황에서 쓸대없는 렌더링을 줄여주기 위해

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

[TIL] React-testing-library를 사용해보자 -1(준비와 간단한 코드)

항상 필요하다고 생각하고 해야한다고 생각해왔지만 귀찮다고 미루던 TDD를 시작해 보려고 합니다.. TDD란? TTD란 Test Driven Development의 약자로 테스트 주도 개발이라고 합니다. TDD를 함으로서 이점은 테스트 코드를 작성하며 결과를 예측할수 있기 때문에 설계의 대한 오류를 좀더 빨리 발견할수 있다는 것입니다. (기존 개발 프로세스...

2021년 1월 4일
·
0개의 댓글
post-thumbnail

[TIL] Vue 성능개선?

성능개선...? 성능 개선이라고 하기도 창피하지만 몰랐던 정보니 혹시나 제 블로그를 보고 Vue를 공부할 여러분 들을 위해 부끄러움을 무릅쓰고 작성해 보겠습니다. Vue의 성능을 개선할 수 있는 방법중 하나인 v-once에 대해 설명해 보려 합니다. v-once 아래

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

[TIL]Vue+Typescirpt+Vuex 사용하기 -7 (Vue 컴포넌트 재사용 하기)

컴포넌트 재사용하기 전 게시글에서 TheListItems.vue와 Completed.vue의 구조가 거의 같은것을 볼수 있었습니다. 이런 반복된 코드는 알아보기 쉽지 않고, 복잡하고, 편하지 않습니다. 이제 Completed.vue와 TheListItems.vue에 Prop를 통해 재 사용 해보겠습니다. 본격 재 사용하기 작업을 마친뒤 어떻게 하면 재 사...

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

[TIL]Vue+Typescirpt+Vuex 사용하기 -6 (Router,getters)

Vue Router란? 라우터란? 웹 페이지간의 이동방법을 뜻합니다. 싱글 페이지 애플리케이션(SPA)에서 많이 사용(React, Vue, Angulur) 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 사용자에게 답해주는 시간 동안 화면 상에 깜빡거리는 현상이

2020년 12월 30일
·
0개의 댓글
post-thumbnail

[TIL]Vue+Typescirpt+Vuex 사용하기 -5 (Store 모듈화 하기,Vuex helper)

Vuex모듈화 하기 크기가 큰 프로젝트를 작업하다 보면 Vuex를 한곳에서 관리하기가 힘들어 지게 됩니다. Store를 모듈화 해서 상태를 관리하게 된다면 좀더 직관적이게 확인할수 있습니다. 저희가 진행하는 TodoList같은 경우 규모가 작아 굳이 사용할 필요 없지만, 큰 프로젝트를 진행한다고 생각하고 진행해 보겠습니다. store/index에 작업했던...

2020년 12월 29일
·
0개의 댓글
post-thumbnail

[TIL]Vue+Typescirpt+Vuex 사용하기 -4 (성능 개선하기)

Vuex를 사용하여 조금이라도 성능 개선하기 아주 작은 프로젝트라 크게 신경 쓸 경우는 없겠지만 만약 사이즈가 커지면 렌더링 개선이 필요하게 될것입니다. 개선점을 찾기전 Vue Devtools를 알아보고 가겠습니다. Vue Devtools란 Vue.js로 개발하는 경우

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

[TIL]Vue+Typescirpt+Vuex 사용하기 -3

Vuex란? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리로, React의 Flux패턴에서 아이디어를 얻어 만들었습니다. Flux패턴이란? MVC패턴의 문제점 페이스북에서 말하는 MVC의 가장 큰 단점은 양방향 데이터 흐름 입니다. .png) MVC패턴에서 Controller는 Model의 데이터를 조회하거나 업데이트 하는 ...

2020년 12월 24일
·
0개의 댓글
post-thumbnail

[TIL]Vue+Typescirpt+Vuex 사용하기 -2

achievemen vue, typescript만 이용해 TodoList만들어 보겠습니다. vue 파해치기 먼저 프로젝트를 보시면 App.vue에 template, style, script 태그들이 있는데 하나하나 설명해 보겠습니다 template는 HTML, c

2020년 12월 23일
·
0개의 댓글
post-thumbnail

[TIL]Vue+Typescirpt+Vuex 사용하기 -1

왜 vue? 병역특례로 일자리를 알아보던중 ABLY에서 공고를 올렸길래 읽어보니 vue를 사용한다고 해서.. react를 접어두고 vue를 한번 공부해 보려고 합니다. VUE CLI란? created-react-app 과 같이 vue-cli는 기본 vue 개발 환경을

2020년 12월 22일
·
0개의 댓글
post-thumbnail

[TIL] 클로저란? 클로저의 활용

MDN에서는 클로저를 다음과 같이 정의하고 있습니다.환경을 기억한다... 처음봤을 땐 환경을 기억한다니 무슨 소리지? 라는 생각이 먼저 들었습니다. 이제 부터 코드와 함께 살펴보겠습니다.이처럼 내부 함수에서 외부함수인 outerFunc의 text에 접근할수 있습니다.

2020년 12월 21일
·
0개의 댓글
post-thumbnail

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -4 styled-components 에 media-query 끼얹기

목표 전 게시글에서 미디어 쿼리에 대해 알아보았습니다. 이번 게시글에서는 미디어 쿼리를 이용해 이번 프로젝트에 media-query를 얹어 반응형으로 만드는 작업을 하겠습니다. 본격 미디어 쿼리(media-query)사용하기 이 프로젝트의 목표는 모바일 사이즈가 되었을 때 로고가 Nav의 왼쪽으로 이동하고 로그인과 회원가입이 Menu에 숨겨져, 클릭하지 ...

2020년 12월 20일
·
0개의 댓글
post-thumbnail

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -3 media-query 맛보기

media query(미디어 쿼리)란? 반응형 웹을 구현하는 CSS Technique이며, 사용자의 디바이스에 따라 각각 다른 스타일시트를 적용하게 하는 것. 이번 글에서는 사용자의 환경에 따라 각각 다른 스타일시트를 적용시킬수 있는 media-query에 대해 배워

2020년 12월 19일
·
0개의 댓글
post-thumbnail

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -2(styled-components 맛보기)

Styled-components 맛보기 이 전 게시글에서 react 세팅을 다 마쳤습니다. 이제 본격적으로 styled-components를 활용해 웹 사이트 만들기에 돌입하겠습니다. 마크업 먼저 저희가 만들고자 하는 반응형 웹 사이트는 다음과 같은 구조를 갖고 있습니다. PC 환경에서는 버튼들이 한눈에 보이고, 모바일 환경에서는 contlor박스가 숨...

2020년 12월 18일
·
0개의 댓글
post-thumbnail

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -1

공부 순서 0.반응형 웹 이란? 1.react와 styled-components 사용해보기 2.media-query를 이용해 반응형 웹 적용 시켜보기 styled-components를 동적으로 사용해보기 반응형 웹이란? 세계적으로 온라인 시장이 활성화 되면서 pc중심이었던 온라인 서비스 시장이 휴대폰 태블릿 다양한 디바이스로 확대 되었습니...

2020년 12월 17일
·
0개의 댓글
post-thumbnail

[TIL]reactstrap이란?

.png) reactstrap reactstrap을 공부하기전 먼저 bootstrap이 뭔지 알아보겠습니다. 부트스트랩 사이트에 접속하면 이와 같은 문구를 볼 수 있습니다. 부트스트랩 : http://bootstrapk.com/ 즉 웹사이트 개발의 효율을 올려주는

2020년 12월 16일
·
0개의 댓글