profile
(~˘▾˘)~♫•*¨*•.¸¸♪ ❝ 쉽게만 살아가면 재미없어 빙고 .ᐟ ❞
post-thumbnail

TIL 65 | Google Map API + 스타일링

프라이탁 홈페이지를 클론하고 있는데, 이번에는 지도 API를 꼭 다뤄보고 싶어서 store 안내 페이지를 맡게 되었다. 프라이탁 페이지에서는 OSM Mapnik 라는 라이브러리를 사용하고 있는데, 나는 이를 앞으로 더 자주 사용하게 될 구글맵으로 바꿔서 적용하기로 했다

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

TIL 63 | 클래스형 컴포넌트 vs 함수형 컴포넌트

참고자료 [React] 클래스형 컴포넌트 vs 함수형 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하지만 약간의 차이점이 존재한다. 클래스형 컴포넌트는 state 기능 및 라이프사이클 기능을 사용할 수 있으며, 임의 메서드를 정의할 수 있다. render 함수가 꼭 있어야 하고 그 안에서 jsx를 반환한다. 함수형 컴포넌트...

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

TIL 62 | 클래스형 컴포넌트인 로그인 페이지를 함수형 컴포넌트로 바꿔보자 ( Hooks & styled-component)

아직 익숙하지 않은 훅스 개념을 직접 코드로 쳐보면서 익혀보자. 3주 전에 만들었던 Instagram 로그인페이지를 Hooks를 사용해서 functional 컴포넌트로 바꿔보고 styled-component를 적용해서 새로 작성해보았다.

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

TIL 61 | Redux

아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해1\. Single Source of Truth하나의 Store를 사용한다.2\. State is Read-only어플리케이션에서 state를 직접 변경할 수 없다.

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

TIL 59 | Hooks (useState, useEffect)

참고자료 : React Hooks 공식문서, 함수형 컴포넌트, 클로저, useState함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 함수이다.

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

TIL 58 | 페이지네이션

리스트에서 데이터를 한번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 것을 의미한다.

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

카카오클론, 기억하고픈 코드 2 - 애니메이션

지난 검색창에 이어 이번에는 3일에 걸쳐 겨우 성공한! 애니메이션 코드를 기록해보고자 한다. 카테고리 및 유저 아이콘 버튼을 클릭시 나오는 모달창의 transition 효과, 메인에서 탭이 바뀔때 나타나는 효과 이렇게 두가지 애니메이션을 구현했다.

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

React | 카카오 프렌즈샵 클론 프로젝트

팀 프로젝트 GitHub 레파지토리위코드에서의 1차 클론 코딩 프로젝트가 끝났다. 내가 제안했던 사이트인 "카카오 프렌즈샵" 이 많은 투표수를 받아 감사하게도 다시 한번 PM으로 프로젝트에 참여할 수 있었다.

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

TIL 57 | 동적라우팅 Dynamic Routing (상세페이지 이동)

상품 리스트 페이지에서 해당 상품을 클릭 시 상세 페이지로 넘어가는 기능은 단순히 path를 바꿔준다고 되는 것이 아니다. 리액트의 3rd party 라이브러리를 사용하여 동적라우팅을 구현해보자.

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

TIL 56 | React로 무한스크롤 구현

참고 자료 : React에서 Infinite Scroll 구현하기무한스크롤은 화면의 맨 아래까지 스크롤을 하면 새로운 컴포넌트가 랜더되는 형태이다. 페이스북, 인스타그램 등 다양한 사이트가 이러한 무한 스크롤 형식을 띄고 있다.

2020년 9월 18일
·
1개의 댓글
post-thumbnail

TIL 55 | Ref 이용하여 핀터레스트 스타일 레이아웃 (masonry) 만들기

참고자료 : React에서 Ref 사용하기, Ref와 DOM(공식 문서)리액트는 컴포넌트 트리 선언과 props 사용을 통해서, DOM 노드에 레퍼런스를 걸지 않고도 UI 제어가 대부분 가능하다. props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단이다.

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

나의 첫 React 팀 프로젝트, Westagram

CRA를 사용하여 팀원이 함께 초기 셋팅을 진행공동으로 public 폴더와 scss를 사용하고 관리git을 사용한 첫 번째 협업 프로젝트

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

TIL 53 | 로그인 & 회원가입 API

오늘 처음으로 백엔드와 만나는 경험을 했다! 아주 아주 역사적인 날이다. 내가 작성하지 않은 내용의 데이터를 API를 통해서 받는다는 것이 너무 신기했다.

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

TIL 51 | 첫 React 프로젝트, 주요 리뷰 정리

자바스크립트로 만들었던 인스타그램 클론을 React, Sass로 바꾸고 동일한 기능을 구현했다. 그 과정에서 마주한 장벽, 해결법, 그리고 뼈가 되고 살이 되는 멘토의 리뷰를 기록하고 정리한다.

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

TIL 50 | Mock Data

UXUI 디자인을 할 때 디자인 안에 실제 데이터가 아닌 가상의 데이터를 넣어 디자인을 하듯이, 프론트엔드 개발자 역시 API가 나오지 않은 상황에서 mock data를 만들어 화면에서 데이터가 어떻게 나타나는지 테스트하며 개발을 진행한다.

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

TIL 49 | React 이벤트 핸들링 실습 2 (JS코드 React로 바꾸기)

이번에는 메인페이지의 댓글 기능을 React로 구현해봤다. 사실 아직 Props나 State 개념이 제대로 이해가 된 것은 아닌데, 그냥 이것 저것 구글링해보며 먼저 만들어보면 좀 더 감이 잡힐까 싶어서 실습을 해보고 있다.

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

TIL 48 | React 이벤트 핸들링 실습 (JS코드 React로 바꾸기)

지난 번에 만들었던 인스타그램의 로그인 페이지를 React 라이브러리를 활용하여 구현해보고자 한다.

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

TIL 47 | React Router, Sass

라우팅(Routing)이란 다른 경로(주소)에 따라 다른 화면(View)을 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어있지 않다. 따라서 리액트의 라우팅 기능을 위해 React-router라는 라이브러리를 사용한다. (Third-party Library)C

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

TIL 46 | React 정리

웹 애플리케이션의 규모가 커지고 다양한 UI,UX를 구현하게 되면서 이전의 방법으로는 애플리케이션을 개발하고 유지보수하는 것이 어려워졌다. 규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고, 많은 양의 데이터 관리와 코드 유지보수를 더욱 편리하기 위해 다

2020년 8월 31일
·
0개의 댓글
post-thumbnail

TIL 44 | React 이벤트 핸들링

addEventlistener를 사용하여 DOM으로 event handler를 추가했듯이, React에서는 React element에 이벤트를 추가해서 event handler 함수를 넘겨준다.

2020년 8월 30일
·
0개의 댓글