그럼에도 불구하고

webpack-dev-server 서버를 사용하다 오류가 발생했습니다. package.json { "name": "eslint_webpack_study", "version": "1.0.0", "description": " ", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "build:dev": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "eslint": "^8.38.0", "eslint-config-google": "^0.14.0", "webpack": "^5.78..

오늘은 Cookie에 대해 알아보겠습니다. [ Cookie ] 쿠키는 브라우저에 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다. 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰입니다. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다. 사용자가 동일 도메인에..

오늘은 Context API에 대해 알아보겠습니다. [ Context ] Context는 리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능입니다. 주로 Context는 전역적으로 필요한 값을 다룰 때 사용하는데, 꼭 전역적인 필요는 없습니다. Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트 간에 값을 전달하는 방법이다"라고 접근을 하시는 것이 좋습니다. [ Context API ] React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 안에서 데이터를 다루기 위해 사용됩니다. 이 Props와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트, 즉 위에서 아래, 한쪽으로 데이터가 흐르게 됩니다. 만약 다른 컴포넌..

오늘은 useReducer에 대해 알아보겠습니다. [ useReducer ] React 공식 문서에 따르면 useReducer는 useState의 대체 함수라고 합니다. 위와 같이 React 공식 문서에서 언급된 것처럼, useReducer는 State(상태)를 관리하고 업데이트하는 Hook에만 useState를 대체할 수 있는 Hook 훅입니다. 다시 말해, useReducer는 useState처럼 State를 관리하고 업데이트할 수 있는 Hook입니다. useReducer의 묘미는, 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해 준다는 것입니다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가..

오늘은 useEffect()에 대해 알아보겠습니다. [ useEffect ] useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook입니다.여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻합니다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었습니다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있습니다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 ..

오늘은 useRef에 대해 알아보겠습니다. [ useRef ] useRef는 current 프로퍼티로 전달된 인자 (initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. - React 공식 홈페이지 useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻합니다. 우리가 자바스크립트를 사용할 때에는, 우리가 특정 DOM을 선택하기 위해서 querySelector 등의 함수를 사용했습니다. React를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 필요합니다. 그럴 때 우리는 useRef라는 React Hook을 사용합니다...

오늘은 Portal에 대해 알아보겠습니다. :) [ Portal ] React 공식 문서에 따르면 Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법이라고 합니다. 현재 와 은 부모 자식 관계로 속해있습니다. [ 사용 이유 ] 일반적으로 react는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트가 렌더링 되는 tree 구조를 가지고 있습니다. 하지만 때때로 이런 tree구조가 불편함을 가져다주기도 해서, 이럴 때 부모-자식 관계를 유지하지만 독립적인 위치에서 렌더링을 하면 훨씬 편리한 경우가 있습니다. 대표적인 예로 modal은 부모 컴포넌트의 스타일링 속성에 제약을 받아 z-index 등으로 번거로운 후처리를 해줘야합니다. 이러한 상황에서 portal..

React에서 input에 연결시킬 태그에 for 속성을 넣으면 다음과 같은 에러가 발생한다. 이럴 때는 for 대신 'htmlFor'를 사용하면 해결된다.

오늘은 scrollIntoView()에 대해 알아보겠습니다. 가끔 웹페이지를 보다 보면 화면 바깥으로 빠져나가있어 스크롤해야만 볼 수 있는 메뉴 탭이 있습니다. 살짝 화면을 빠져나간 메뉴를 클릭하면 메뉴 탭은 빠져나간 그 자리 그대로 있고, 내용만 바뀌게 됩니다. 하지만, 메뉴를 누르게 되면 자연스러운 애니메이션과 함께 스크롤되는 동작을 보이는 웹페이지도 있습니다. [ scrollIntoView() ] scrollIntoView() 메서드는 특정 요소가 화면에 보이도록 스크롤을 이동시키는 메서드입니다. 이 메서드는 요소의 상위 컨테이너를 스크롤하는 것이 아니라, 요소 자체를 스크롤합니다. 이 메서드를 호출하면 해당 요소가 현재 뷰포트에 보이도록 스크롤됩니다. scrollIntoView() 메서드는 인수를..

오늘은 Styled Component에 대해 알아보겠습니다. :) [ Styled Component ] React, Vue, Angular와 같은 라이브러리, 프레임워크가 인기를 끌면서 재활용 가능한 컴포넌트 기반 개발이 주류가 되고 있습니다. 여러 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 모두 담는 코드를 많이 사용하고 있습니다. React는 이미 JSX를 통해 HTML을 포함하고 있고, Styled Component 라이브러리를 사용하여 CSS를 JavaScript에 삽입할 수 있습니다. [ 설치 방법 ] npm install --save styled-components [ SASS는 불충분한가요? ] CSS 클래스명에 대한 고민 문제 가이드가 없으면 복잡해지는 구..

오늘은 state란 무엇인지 알아보겠습니다. [ prop / state ] React 공식 문서에 따르면 prop와 state를 다음과 같이 정의하고 있습니다. prop(properties의 줄임말)와 state는 일반 자바스크립트 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리한다. React에서 this.props와 this.state는 모두 렌더링된 값을 나타낸다. 다시 말해 현재 화면에 보이는 걸 말한다 state와 prop을 정리하면 아래와 같습니다. 둘 다 일반 자바스크립트 객체이다. state는 컴포넌트 안에서..

Mac에서 Git clone 사용해 보자 최근에 Window에서 Mac으로 바꾸면서 기존에 작업하던 프로젝트를 Mac에 옮겨야 할 상황이 생겼다. 기존 컴퓨터에서 Git에 올린 프로젝트를 Mac으로 옮겨봤다. 굉장히 간단한 작업이었는데 내가 저장하고 싶은 폴더를 생성 후, 터미널로 그 경로에 접속한 다음에 git clone과 내가 가져올 프로젝트의 url 주소를 입력하면 끝이였다. git에서 위 사진의 프로젝트 주소를 복사해서 입력하는 것이다.