김도리의 개발자로서 성장기

redux 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 컴포넌트간 공동의 상태에 접근해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 접근할 수 있다. Context API를 통해서도 동일한 작업을 할 수 있다. 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기에 대규모의 프로젝트에서는 리덕스를 사용하는 편이 더 좋다. 코드의 유지 보수성을 높여주고, 작업 효율도 극대화해준다. 1. 액션 (Action) 상태에 어떠한 변화가 필요하면 발생하는 것 { type: 'ADD_TODO', data: { id: 1, text: 리덕스 배우기' } } type에 액션의 이름을 넣고, 그 외의 값들은 마음대로 넣을 수 있다. 2. 액션..

일반 CSS 컴포넌트를 스타일링하는 가장 기본적인 방식으로, 특별한 규칙을 사용하여 클래스 이름을 짓는 방식과 CSS Selector를 활용하는 방식이 있다. 1. 이름 짓는 규칙 (컴포넌트 이름)-(클래스 형태) 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지한다. 예시) App-header, App-logo,,, 2. CSS Selector CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다. 예시) // App 클래스 안의 logo 클래스 .App .logo { ... } // App 클래스 안의 header 태그 .App header { ... } Sass 자주 사용하는 CSS 전처리기 중 하나로, 확장된 CSS 문법을 사..

useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. (클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합쳤다고 봐도 무방하다.) import { useEffect } from 'react'; useEffect(() => { ... }); 이렇게 사용하면 렌더링 될 때마다 ... 코드가 실행된다. 화면에 맨 처음 렌더링될 때(마운트)만 실행하고 싶을 때 useEffect(() => { ... }, []); 함수의 두번째 파라미터로 빈 배열을 넣어주면 된다. (단, 개발 환경에서만 useEffect가 두번 호출 될 수 있다.) 특정 값이 업데이트될 때만 실행하고 싶을 때 특정 값이 바뀔때마다 특정 작업을 수행해야 ..

Hooks 리액트 v16.8에 새로 도입된 기능 useState 함수형 컴포넌트에서도 상태 관리를 할 수 있게 해줌 1. 배열 비구조화 할당 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해주는 문법 const array = [1, 2]; const one = array[0]; const two = array[1]; 다음 코드는 array 안에 있는 값을 one과 two에 담아주는 코드이다. 이를 배열 비구조화 할당을 사용하면 const array = [1, 2]; const [one, two] = array; 이렇게 표현할 수 있다. 2. useState 사용하기 import { useState } from 'react'; import 구문을 통해 불러오며 아래와 같이 사용한다. const [valu..

useState 동작원리 함수형 컴포넌트에서는 useState를 통해 상태값을 변경할 수 있다. const [state, setState] = useState(초기값); setState라는 함수를 setter로서 사용한다. 여기서 한가지 오해하는 개념은 setState 함수를 호출하면 state라는 변수의 값이 변경된다는 것이다. => 이것은 잘못된 개념이다. state는 const로 선언되어 있으므로 상태값 변경 불가하다. setState로 상태값을 변경하면 useState 함수 밖에 선언되어있는 어느 전역변수인 value 값을 변경해준 것이지 state라는 변수 자체의 상태값을 변경해준 것이 아니다. 여기서 Closure 개념이 사용된다. Closure는 다수의 명령 흐름들을 하나의 Closure로 ..

Context API란? 컴포넌트간 공동으로 사용해야할 데이터가 있다면 props를 사용했었다. props로만 데이터에 전달할 때 깊이가 깊어지면 여러 컴포넌트를 거쳐 받아야해서 불편하고 실수할 가능성이 커진다. 이렇게 리액트 프로젝트 내에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이 Context API이다. 리덕스, 리액트 라우터, styled-components 등의 리액트 라이브러리들도 Context API 기반으로 구현되어 있다. 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한번에 원하는 값을 받아와서 사용할 수 있다. Context API 사용법 1. 새 Context 만들기 ..

서론 회사에서 React로 프로젝트를 개발하고 있다. 나도 직접 개발하지만 팀이 나눠져있고, 팀별로 개발자들이 따로 존재한다. 현재 중심을 잡아줄 파트장은 없어 내가 대행중인데 각 팀별로 개발자들이 정규직인 팀도 있고, 프리랜서 개발자인 팀도 있다. 프리랜서 개발자들이 정해진 기간동안 개발을 맡아 진행할 경우 새로 올 때마다 우리 코드에 대한 인수인계를 해주어야 하는데 매번 1:1로 그동안 작성되어있던 코드와 가이드를 인수인계해주기 쉽지 않다. 심지어 가이드도 표면적으로 있긴 하나 잘 지켜지진 않았다. 이유는 각자의 코딩 스타일이 다르고, 만들어진 가이드가 뇌피셜로 만들어졌을 가능성이 크기 때문에 웹에 특화된 가이드가 필요했다. (특히 웹 전문 개발자가 만든것이 아닌 넓게 여러 플랫폼을 접해봤던 개발자가..

웹페이지는 다양한 환경에서 접근할 수 있다. PC에서 만날 수 있고, 모바일로도 만날 수 있고, 태블릿으로도 만날 수 있다. 우리는 웹사이트를 개발하기 전, 설계 단계에서 이를 고려해야 한다. 디자이너가 있는 프로젝트에서는 이를 고려한 디자인이 나오고, 이에 맞춰 퍼블리싱을 해야 한다. 반응형 웹을 만드는 방식은 여러가지가 있다. 기존에 사용되던 반응형 웹 만드는 방법 1. Media Query 각 화면의 비율마다 필요한 스타일을 적용할 수 있도록 도와준다. 실제 코드에서 사용했던 미디어 쿼리 : @media all and (max-width: 1080px) { // 적용할 스타일 속성들을 작성 } 1080px 이하의 화면에서는 {} 안에 적는 스타일 속성들로 적용되어 보여진다. @media 뒤에 붙는 ..