CORS (Cross-Origin Resource Sharing) SOP(Same-Origin Policy) 브라우저에서 API를 요청할 때에, 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근할 수 있는 정책으로 인해 다른 도메인에서 API를

CI/CD의 CI는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Intergration)을 의미한다. CI를 성공적으로 구현하면 애플리케이션에 대한 새로운 코드 변경사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되어 여러 명의 개발자가

TypeScript의 열거형(Enum) TypeScript의 열거형(Enum)은 특정 값의 집합을 정의할 때 사용한다. 열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있다. TypeScript에서 열거형은 일반적으로 JavaScript의 상수값 대

🛠️ TypeScript 프로젝트 환경 구성법

역방향 데이터 흐름 추가 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지말 알 수 있다. 데이터가 어떻게 입력되었는지는 알지 못한다. 그러므로 하위 컴포넌트에서의 어떤 이벤트로 인한 상위 컴포넌트

웹 많이들 웹이라고 하면 인터넷을 떠올린다. 하지만 인터넷은 웹 기반으로 작동하는 것이 아니다. 인터넷이 웹보다 좀 더 포괄적인 개념으로 '전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망'을 의미하며

React에서 Hook이란, 함수형 컴포넌트에서 사용되는, state와 관련된 기술들을 모아서 일컫는 말이며 Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. 대표적으로 useState() 와 useEffect()

Redux 상태 관리 라이브러리중 하나인 Redux는 전역으로 관리하는 저장소에서 직접 state를 꺼내쓸 수 있기 때문에 Props Drilling을 방지하기에 매우 효과적이며 React 없이도 사용할 수 있는 상태 관리 라이브러리이다. Redux의 구조 Red

Props Drilling 은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이 컴포넌트들은 props를 전달하는 용도로만 받는 현상을 의미한다. Props의 전달횟수가 5회 이내라면 Props Drilling은 큰 문제가

상태란 변하는 데이터이며 프론트엔드 개발에서는 UI에 동적으로 표현되는 데이터를 의미한다. 위의 이미지는 쇼핑몰 장바구니화면에서의 상태를 나타낸 것이다. "장바구니에 담기"와 같은 버튼을 눌러, 해당 물품을 장바구니에 추가할 수 있습니다. 동적인 데이터이므로 이것은 상

DOM 엘리먼트의 주소값을 활용해야 하는 경우인focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 등의 상황일 때 useRef 로 DOM 노드, 엘리먼트, 그리고 Rea

Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기)가 등장했다. Component Explorer에는 많은 UI 개발 도구가 다양하게 있는데 그중 하나가

React 환경에서 사용 가능한 Styled Components라는 라이브러리는 CSS를 컴포넌트화 해준다. Styled Components는 CSS in JS라는 개념이 대두되면서 나온 라이브러리로 기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, R

(CDD)Component-Driven Development 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면

Git이란 개발자의 코드를 효율적으로 관리하기 위해 개발된 '분산형 버전 관리 시스템'이다. Git에서는 소스 코드가 변경된 이력을 쉽게 확인할 수 있고, 특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수도 있다. 통합하자면 소스 코드 기록을 관리하고 추

사용자 흐름이라고도 불리는 User Flow는 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻하며 보통 다이어그램을 그려 정리한다.사용자 흐름을 다이어 그램으로 작성시 기본적으로 세가지 요소를 사용한다. 직사각형: 사용자가 보게될 화면ex. 회원

피터 모빌(Peter Morville)의 벌집 모형은 좋은 UX를 만드는 요소에 대한 답을 준다. 이 모형에서는 UX의 7가지 요소를 제시한다.유용성은 제품이나 서비스가 목적에 맞는 사용가능한 기능을 제공하는지에 대한 요소다. 여기에는 꼭 목적에 맞지 않거나 비실용적이

모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 말한다. 닫기 버튼이나 모달 범위 밖을 클릭시 모달이 닫히는 것이 일반적이며 모달을 닫기 전에는 기존 화면과의 상호작용이 불가능하다. 이는 브라우저 페이지를 여는 팝업창과는 구분된 개념으로 팝업은 브라우저에 의해 강

UI(사용자 인터페이스)는 사람들이 컴퓨터와 상호작용하는 시스템을 의미한다. 화면상의 그래픽요소는 물론 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이기에 UI라고 볼 수 있다. 이 중 최근 스마트폰, 컴퓨터, 키오스크, 터치 스크린 안내판

JSON 은 JavaScript Object Notation의 줄임말로 데이터 교환을 위해 만들어진 객체 형태의 포멧이다. 네트워크를 통해 어떤 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메시지 내용을 담은 객체를 다른 프로그램에 전송해야한다면 메시지를 보내는 발신자와