React

React? 리액트는 페이스북의 UI를 더 잘 만들기 위해 페이스북에서 만든 JavaScript UI 라이브러리이다.

state란 말 그대로 컴포넌트의 상태 값이다. state와 props는 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다.

React 개발 환경으로 사용할 디렉토리를 생성하고, React 앱에게 이곳을 개발환경으로 만들어달라고 요구한다고 생각하면 쉽다. 디렉토리에 세팅을 하는 방법을 알아보자.

render, componentDidMount, componentDidUpdate, componentWillUnmount등의 함수는 React.Component class에서 제공하는 메서드이다.

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

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

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

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

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

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

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

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

카카오 프렌즈샵 클론 코딩 프로젝트를 진행하고 있다. 메인의 전체 제품보기 탭에서 두가지 방법으로 Sorting 하는 모달창을 작업하는 중 배운 "객체 계산된 속성명으로 중복된 함수를 축약한 방법"을 기록한다.

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

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

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

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

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

css-in-js는 2018년 이후 폭발적으로 성장하고 있다. 그 중 Styled-Components는 npm 다운로드 수 기준으로 현재 가장 인기있는 css-in-js 라이브러리이다.

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

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

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

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

프라이탁 스토어 안내 페이지를 만들고 있다. 백엔드에서 스토어 관련 데이터를 크롤링하는데 문제가 있다고 해서 직접 데이터를 만들어야 하는 상황이다! 300개가 넘는 데이터를 직접 목데이터로 만들기에는 무리가 있지 않을까 싶었는데, faker.js, randomLocat

리액트를 공부하면서 항상 CRA를 사용해서 초기 개발 환경을 구축했는데, 다음주부터 나가는 기업협업에서는 웹팩을 사용한다는 이야기를 선배 기수에게 들었다. 미리 웹팩을 훑고 가면 좋다는 조언을 듣고, 여러 블로그와 유튜브를 찾아보며 웹팩을 이해해보고 있다!

처음 일을 시작하고 jsx나 tsx 파일에 텍스트를 직접 마크업하지 않은 것을 보고 멘붕이 왔었다. t( '...' ) 이런 식으로 내용을 적용한 것을 볼 수 있었는데, 이게 i18n을 사용해서 국제화 작업을 한 것임을 알아냈을때 유레카를 외치고 싶을 정도였다. ㅋㅋㅋ

햄버거 버튼을 눌렀을때 사이드에서 네비게이션 모달이 나오는 페이지의 형태는 쉽게 찾아볼 수 있다. 이때 사용성을 위해서 모달창은 스크롤이 가능하지만(화면보다 네비게이션의 높이가 긴 경우), 그 외에 dimmed 영역은 스크롤이나 터치 이벤트가 불가능하게 하는 것이 좋다

일반적인 메신저나 댓글에서는 입력한 내용의 길이에 따라 인풋 상자의 크기가 변하는 것을 볼 수 있다. useRef로 간단하게 위 기능을 구현해보자.

Axios는 HTTP 통신을 하는데 아주 핫한 Javascript라이브러리다.

MobX는 리덕스와 같이 인기있는 리액트 상태 관리 라이브러리다.

Next.js 공식 튜토리얼 따라하면 두시간 안에 기본기 끝내기 쌉possible

Next.js에 존재하는 두가지 종류의 Pre-rendering 방법과, 데이터는 어떻게 불러오는지에 대해 알아보자.

Next.js에서는 어떻게 라우팅을 구현할까? 공식문서 튜토리얼을 따라가보자