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

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 뒤에 붙는 ..

Component 클래스 혹은 함수로 정의할 수 있다. 리액트로 작성된 화면은 컴포넌트로 구성되어 있다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 컴포넌트의 두가지 종류인 클래스 컴포넌트와 함수형 컴포넌트의 생명주기는 https://dev-dorydory.tistory.com/14에 정리해두었다. Page Transition (페이지 이동) 라우팅이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 React Router가 라우팅 라이브러리 중 가장 많이 쓰인다. react-router 사용자가 입력한 주소를 감지..

회사에서 Web 서비스나 관리자페이지 개발을 할 때 React를 사용하여 개발을 한다. 여러 프레임워크 중 Vue나 Angular, Svelte가 아니라 왜 React를 써야하는지 알고싶어졌다. React 공식 홈페이지에 가서 어떤 친구인지를 찬찬히 읽어보았다. React 자바스크립트 라이브러리로 UI(User Interface)를 만들기 위해 사용된다. React로 프로젝트를 개발할 때에는 JSX를 사용한다. React 컴포넌트는 render() 메서드를 통해 입력 데이터를 받고 화면에 표시할 것을 반환한다. JSX(JavaScript XML) Javascript에 XML을 추가한 문법이다. 자바스크립트에서 HTML을 작성하듯이 사용하기 때문에 한 파일 내에서 자바스크립트와 HTML을 동시에 작성할 수..

VS Code에서 작업했고, 로컬에서는 JS가 module로 불러올 때 CORS 에러가 나기 때문에 Live Server라는 extension을 설치하여 진행했다. 설치가 끝나면 우측 하단에 Go Live라는 버튼이 생기는데 요거를 클릭하면 가상 서버에 해당 html파일이 띄워진다. 이 상태로 진행해보자. Interactive Web을 배워보고 싶어서 기초부터 시작했다. Interactive Developer라는 진짜 대단한 월클 유투버가 올려주신 강의를 따라서 개발해보았다. 일단 index.html, style.css, test.js, figure.js 파일들을 만든다. style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; hei..