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

React | 이게 아마도 Redux를 쉽게 이해하는 방법

(이 글은 Probably this is the easiest to understand React + Redux flow illustration 을 번역한 글입니다.)오늘은 그동안 리덕스를 통해 알음알음 써오던 것들을 정리하는 TIL을 써보고자 한다.리액트로 프로젝트를

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

React | 쉬운 토글 메뉴 만들기

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

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

React | 환경변수 사용하여 API key 숨기기(.env 이용)

리액트 프로젝트를 하면서 API key를 발급받아 사용하는 일이 잦다.카카오 developer 혹은 google developer와 같은 API key들은본인의 고유한 key이므로 그냥 깃헙에 올리면 안된다.React CRA 기반으로 작업을 한다면 dotenv를 사용해

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

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

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

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

React | 동적라우팅 (Dynamic Routing)으로 상세페이지 구현하기

오늘은 SPA를 기반으로하는 리액트에서 어떻게 상품 리스트에서 개별 상품 페이지로 넘어가는지, 그리고 개별적으로 데이터를 받아올 수 있는지 알아보기로 하자. 다음의 페이지를 보면 '몬스터'들의 리스트다. 해당 주소를 보자. 자 그렇다면 어떻게 각각의 몬스터들의 상세 페

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

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

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

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

React | 틱택토 게임 만들기 (2/2)

(1편에서 이어지는 문서입니다..)튜토리얼은 리액트 공식 문서를 참고했다.자세한 내용은 여기에서 찾을 수 있다.리액트를 공부하다보면 Immutable data라는 말을 자주 듣는다. 즉 불변하는 데이터를 만들어놓는 것이 중요하다. 일반적으로 데이터 변경에는 두 가지 방

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

React | 틱택토 게임 만들기 (1/2)

튜토리얼은 리액트 공식 문서를 참고했다.자세한 내용은 여기에서 찾을 수 있다.먼저 CRA로 간단하게 tic-tac-toe 폴더를 만들어주었다. 초기 세팅을 해두고 CSS툴은 공식 문서에서 제공하는 것을 가져왔다.필요 없는 파일들은 미리 지워두었고 (로고, 기타 js 파

2020년 11월 6일
·
1개의 댓글
post-thumbnail

React | Component의 Lifecycle

React는 컴포넌트 단위로 화면에 렌더링하는데, 이 때 각각의 컴포넌트는 Lifecycle을 갖는다. 다음은 라이프사이클 다이어그램이다. 이번에는 리액트의 LifeCycle API에 대해 알아보자. Lifecycle 자세한 다이어그램은 이곳에서 볼 수 있다.컴포넌트

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

React | Component의 State

state란 말 그대로 컴포넌트의 상태 값입니다. state와 props는 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 합니다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고, state는 컴포넌

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

React | Component와 Props

리액트는 컴포넌트 기반 라이브러리이다. 컴포넌트는 UI의 여러 부분을 분할해서 코드의 재사용성과 유지 보수성을 향상시킨다. 즉, 컴포넌트는 독립적으로 재사용 가능한 코드로 관리할 수 있도록 도와준다. 웹페이지를 하나의 완성품이라고 했을 때, 컴포넌트는 하나의 부품이다.

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

React | JSX란? 렌더링 Rendering이란?

JSX를 정리하기에 앞서 간단히 리액트를 정리해보자. 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다. 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다. 이 리액트는 3가

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