서버는 EC2로, 클라이언트는 S3으로 배포 실습을 진행했다. 배포하려면 인스턴스 생성이 필요한데, 코드스테이츠 측에서 먼저 생성해준 상태여서 그 인스턴스를 이용했다. 백엔드 배포

수신 webhook URL 생성https://hooks.slack.com/services/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앞으로 웹훅을 사용하기 위해 이 URL이 필요하다.웹훅 설정 페이지https&#x3A

Representational State Transfer API 의 약자로, 2000년도 로이 필딩의 박사학위 논문에서 최초로 소개되었다.구성 요소는 다음과 같다.자원(Resource) : URI행위(Verb) : Http Method표현(Representations)

번들링이란 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음으로, 여러 개로 흩어져 있는 파일들을 압축, 난독화하여 하나의 파일로 모아주는 역할을 한다.웹팩은 웹 개발자들과 백엔드 개발자들이 가장 많이 사용하는 번들링 도구이며, 여러 개의 파일을 하나의 파일로 합쳐

Lucy에서 스터디 한 내용인데 꼭 기억해두고 싶어서 기록!로그인 방식을 지원하는 대표적인 두 가지 방식 Session과 JWT 개념에 대한 정리Authentication (인증): 로그인과 같이 사용자 혹은 프로세스의 신원을 확인하는 프로세스Authorization

재귀는 자기 자신을 재참조하는 방법으로, 재귀 함수란 함수에서 자기 자신을 다시 호출해 작업을 수행하는 방식입니다.변수를 여러번 만들 필요 없이 메서드를 재귀로 호출하며 변경된 상태를 전달하므로 변수의 수를 줄일 수 있고 반복문을 사용하지 않아도 돼서 코드가 간결해집니

타입이 void 인 함수 increase, decrease 를 props로 하위 컴포넌트에 전달해서 사용하려고 했다.이런식으로 전달해준 뒤 하위 컴포넌트에서 타입을 지정해 주었다이런식으로 지정해 주었는데상위 컴포넌트인 index.tsx 에서는'() => void' 형식

husky 디렉토리 안의 pre-commit 파일 때문인지 자꾸 커밋오류가 났다. Running tasks for staged files... eslint --fix 이런 에러였는데 스택오버플로우에 npm을 yarn으로 바꿔보라는 말이 있어서 바꾸고 yarn을 설치해

리액트로 인스타그램 클론하는 프로젝트를 진행하던 도중 input 에 한글자 입력할때마다 리렌더링이 되는 현상이 나타났다..내가 작성한 코드는 다음과 같았다 (input 부분만 가져왔다)연속으로 입력되지가 않고 한글자 한글자씩 입력되는 문제가 자꾸 발생해서 개발자도구를

웹 표준이란 웹에서 표준적으로 사용되는 기술이나 규칙 으로, 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법이다.웹 개발에 사용되는 HTML, CSS, Javascript 등의 기술을 다룬다.유

프로젝트를 진행하며 시스템의 각 모듈을 개별 repo에서 관리할 것인지, 하나의 repo에서 관리할 것인지에 따라 모노레포 / 멀티레포 로 나뉘게 된다.이 때 나눠서 관리하는 것을 멀티레포, 하나의 저장소에서 관리하는 것을 모노레포라고 한다.Monorepo는 하나의 r

Redux 리덕스란 상태 관리 라이브러리로, 주로 React와 함께 사용되지만 하위 라이브러리는 아니다. 리액트 없이도 사용될 수 있다. 만약 이런 구조를 가진 리액트 웹이 있다고 할 때, 컴포넌트 3과 6에서만 사용되는 state(상태) 가 있다면 리액터 단방향 데

Tailwind CSS와 css-in-js 프레임워크를 통합하여 사용할 수 있는 라이브러리twin.examples 깃허브npm twin.macro 공식문서tailwind css는 Utility-First 컨셉을 가진 CSS 프레임워크이다. 각 class가 담당할 스타일

ESLint ESLint란 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구이다. 문법 중 에러가 있는 곳에 표시를 달아주어 문법적 에러를 찾아주고 코드 스타일을 유지하여 개발자가 읽기 쉬운 코드를 만들어 주는 역할을 한다. 문법

가끔 노드 버전때문에 npm run start 했을 때 브라우저가 로딩되지 않는 문제가 있어서 nvm으로 버전을 낮춰주었다.nvm 설치 확인nvm version설치된 node.js 확인nvm list이런식으로 설치된 node 버전들이 나열된다.특정 node.js 설치하

리액트 강의를 듣다가 useMemo와 useEffect의 개념 및 차이를 정확하게 이해하고 싶어서 정리해보는 글이다.리액트의 컴포넌트들은 생명주기(Lifecycle)를 가지게 되는데, 간단히 탄생-변화-죽음 으로 나타낼 수 있다.탄생 : Mount, 화면에 나타나는 것

정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다.버블 정렬(bubble sort)은 여러 정렬 알고리즘(삽입 정렬, 퀵 정렬, 병합 정렬, 기수 정렬 등) 중 가장 기본적인 알고리즘입니다.버블 정렬 알고리즘은 아래와 같습니다.첫 번째 요소가 두

UI란 사람들이 컴퓨터와 상호작용하는 시스템을 의미한다. 사용자가 마주하는 폰트, 버튼, 레이아웃 등 사용자가 마주하게 될 시각적 디자인이다.UX란 사용자 경험의 약자로 사용자가 어떠한 서비스/제품을 직, 간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다.UX는 U

SOP란 Same-Origin Policy 의 줄임말로, 동일 출처 정책을 뜻한다. 즉, 같은 출처의 리소스만 공유가 가능하다 라는 정책이다!출처는 위 그림과 같이 프로토콜, 호스트, 포트의 조합으로 되어있다. 하나라도 다르면 동일한 출처로 보지 않는다.SOP가 생겨나

Promise는 자바스크립트 비동기 처리에 사용되는 객체이다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다.서버에다가 데이터 요청을 보내고 데이터를 받아오기도 전에 화면에 표시하려고 한다면 오류가 발생하겠지만, 이런 문제를 해결하기 위한 방법중 하나가 pr