profile
내 이름 고은정, 은을 180deg 돌려 고긍정 🤭
post-thumbnail

React | 유지, 보수를 위한 API 통신은 어떻게 할까? (Axios 모듈화)

axios.create() 메소드로 작성해보는 API module..🧚🏻

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

React | 컴포넌트 성능 향상 시키기 (feat. Lodash throttle & debounce)

자바스크립트 유틸리티 라이브러리, Lodash의 throttle과 debounce를 리액트에 적용해보자.

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

React + TypeScript | JavaScript에서 TypeScript로 변환 시 에러 모음

기존 JavaScript로 작성했던 프로젝트(초기 단계)를 TypeScript로 리팩토링하는 데에 성공했다.

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

JavaScript | Iterable Object, Iterator

JavaScript 공부 시에 레퍼런스를 보다보면 iterable, iterator라는 단어를 종종 접한다.오늘은 이 두 개념의 차이에 대해 정리하겠다.Iterable : An object which has enumerable properties and can perf

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

React | 쉬운 토글 메뉴 만들기

오늘은 간단하게 리액트 토글 메뉴를 어떻게 구현했는지 정리해보고자 한다.더 심플하고 좋은 방법을 생각하고 싶은데, 이 글을 보시는 누구나 제안해주신다면 감사히 받겠습니다..!먼저 상태값을 지정해주어야겠지..먼저 상태값은 객체로 관리해준다. 객체 안에 모든 tab 메뉴를

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

JavaScript | 비동기의 꽃, Async와 Await

이 글은 콜백함수와 Promise에 이은 비동기 시리즈의 마지막편입니다.오늘은 드디어 비동기 처리의 마지막 편이다. Async와 Await은 promise를 좀 더 편하게 사용할 수 있는 비동기의 꽃! 비동기의 보물!이다.async와 await은 promise를 기반으

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

JavaScript | Promise 개념부터 이해하기 (2/2)

JavaScript Promise 개념부터 이해하기 (1/2)에 이어지는 글입니다.이어서 promise chaining에 대해 알아보자.then은 promise로부터 받은 데이터를 처리하면서도 또 다른 promise를 받아 비동기적으로 처리할 수도 있다.다음의 코드를

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

JavaScript | Promise 개념부터 이해하기 (1/2)

(앞서 정리한 JavaScript 콜백 함수 개념에 이어서 정리하는 Promise 편...!)Airbnb를 클론하는 프로젝트의 중간 즈음... 이런 피드백을 받게 된다.나는 mockdata와 서버에서 받는 데이터를 동시에 받기 위해 axios를 두 번 사용했고, 비동기

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

JavaScript | Callback 함수

비동기 프로그램이란? 자바스크립트는 동기적(Synchronous)이다. 즉 호이스팅이 된 이후부터 우리가 작성한 순서에 따라 동기적으로, 순서에 따라 처리된다. 비동기(Asynchronous) 처리를 할 때 대표적인 함수는 setTimeout()이다. setTim

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

JavaScript | event.composedPath()

오늘은 event.composedPath()에 대해 적어보려 한다.먼저 mdn 공식 문서를 인용해보자면,The composedPath() method of the Event interface returns the event’s path which is an array

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

JavaScript | 전개 구문, 스프레드 연산자 (일명 three dots 문법)

React 프로젝트를 진행하면서 정말 수없이 많은 전개구문, 스프레드 연산자를 사용했다.확실하게 기록하기 위해 TIL을 작성하기로 한다!먼저 공식문서부터 확인!즉, 전개 구문을 활용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우)

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

React | 세상 간단하게 모달창 만들기 (라이브러리 X)

위의 모달창을 보자. 위의 모달창에는 X 버튼이 달려있지 않다. 하지만 모달창의 바깥 부분을 클릭하면 바로 모달창이 꺼진다. 이런 간단한 모달창을 세상 쉽게 만드는 방법을 적어 본다. (리액트 초심자가 리액트 초심자에게 드리는 팁입니다!😇)Event.stopPropa

2020년 11월 29일
·
2개의 댓글
post-thumbnail

Project | 인스타그램 클론 프로젝트

약 1주일 동안 혼자 바닐라 자바스크립트로 인스타그램을 구현하고, 다음의 2주 동안 팀으로 React를 활용하여 구현.CRA 활용한 초기 세팅Github 기반 PR 활용하여 피어 코드 리뷰 진행공용 컴포넌트를 공유한 협업 프로젝트JavaScript 1주(10/26 ~

2020년 11월 15일
·
2개의 댓글
post-thumbnail

JavaScript | event target과 currentTarget의 차이점

이 글에서는 React onClick 이벤트 상황에서 event.target과 event.currentTarget의 차이점을 정리해본다.흔히 쓰는 event.target은 이해할 수 있다. 다만 currentTarget과 다른 점은 무엇일까?MDN 문서를 먼저 빠르게

2020년 11월 15일
·
0개의 댓글
post-thumbnail

JavaScript | Class 클래스

클래스는 객체 지향 프로그래밍의 핵심이다. '객체 지향 프로그래밍'이라는 단어에서 '객체'는 JavaScript의 데이터 타입을 말하는 것이 아니다. 여기서 객체는 말 그대로 사물을 뜻한다.하지만 클래스는 결국 key와 value를 갖는 object를 잘 설계하기 위한

2020년 11월 4일
·
0개의 댓글
post-thumbnail

JavaScript | Object 객체의 개념과 사용

아마 자바스크립트를 배우기 시작하신 분들은 '객체'에 대해 들어보셨을 것이다.이 글은 초심자, 혹은 어느 정도 객체를 들여다 본 분께 도움이 될 것 같다. 객체를 자유롭게 쓰고 수정하는 것이 아직은 어색한 분들께 이 글이 도움이 되었으면 좋겠다.자바스크립트의 거의 모든

2020년 11월 1일
·
0개의 댓글

JavaScript 아코디언 메뉴 만들기

위의 코드에서 panel-question 에 active가 활성화 된 부분은 패널-바디가 열리고,active가 없는 panel-question 은 닫히게 만드려고 한다.또한 button으로 모든 panel-question이 닫히는 기능을 추가한다.panel-questi

2020년 10월 4일
·
0개의 댓글
post-thumbnail

JavaScript | event.target 이벤트 위임

오늘은 event.target (이벤트 위임)에 대해 정리한다.자바스크립트의 이벤트 중에서 클릭한 요소를 가져오는 방법이다.아래와 같이 li 안에 button이 있는 상황에서 button을 누르면 li가 사라지는 객체를 만들 때, event.target은 button이

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

JavaScript | sort()

오늘은 array의 내장 함수 중 sort()에 대해 간략히 정리해본다.sort() 메소드는 배열의 요소를 적절하게 정렬한 후 리턴한다. 원 배열이 바뀐다는 것을 유의하자. 기본 정렬 순서는 문자열의 유니코드 기준을 따른다. 위의 결과로 보아 숫자의 경우 오름차순이 아

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

JavaScript | Local storage 사용하기

오늘은 localStorage와 sessionStorage의 차이점을 알아보고 localStorage에 접근해 저장된 값을 가져오는 방법에 대해 정리해본다.sessionStorage는 브라우저 탭이 열려 있는 동안만 유효하다. 따라서 창을 닫거나 종료 시에는 저장된 값

2020년 9월 29일
·
0개의 댓글