Test-Driven Development의 약자소프트웨어를 동작시키기 위한 로직을 작성하기 전에, 테스트 코드를 구현하는 것을 프로세스화 한 개발 방법.작성한 코드가 의도적으로 동작하는지 수시로 빠르게 검증할 수 있습니다. 리팩토링 이후에도 소프트웨어가 여전히 동일한

원티드 프리온보딩 프론트엔드 챌린지 8월 사전 과제하나의 모듈 / 컴포넌트가 기대한대로 동작하는지 독립적으로 진행하는 가장 작은 단위의 테스트입니다.해당하는 모듈만 독립적으로 테스트하기 때문에 빠르게 문제 여부를 확인할 수 있고, 테스트에 대한 시간과 비용을 절약할 수

HTTP는 무상태(Stateless) 프로토콜을 사용합니다. 서버가 클라이언트의 상태를 보존하지 않으며 모든 요청이 독립적으로 다뤄집니다. 따라서 요청을 할 때마다 사용자가 누군지 서버에 알려주어야 합니다. 이를 위한 대표적인 방식이 바로 세션과 토큰입니다. ‘사용자가

Project Restoration - 댕근이다옹(DangGeuneDaong)프로젝트에서는 데이터 패칭 라이브러리로 React-Query를 채택하고 fetch API를 사용해 요청을 보내고 있었습니다. MOCK Server로 API 요청까지 성공한 후, 실제 API로

Project Restoration - 댕근이다옹(DangGeuneDaong)프로젝트에서 업로드 기능을 구현하면서 파일과 함께 JSON 데이터를 함께 보내야 할 상황을 마주하게 되었습니다. API 명세서에서 요구한 내용은 다음과 같습니다.body에 File을 리스트에

웹 페이지에서 데이터를 요청하기 위해서는 서버와 통신을 해야 하는데요, Axios는 개발자가 손쉽게 HTTP 요청을 할 수 있도록 하는 JavaScript 라이브러리입니다. Promise API를 기반으로 동작하며 웹 브라우저 혹은 Node.js 환경에서 사용됩니다.

프로젝트를 구현할 때에는 서버로 사용자가 입력한 정보를 보내주는 기능이 필요합니다. 회원가입이나 파일 전송 등 다양한 기능에서 사용되는데요. 이 글에서는 React-Hook-Form 라이브러리를 소개하고 설명합니다.제어 컴포넌트(Controlled Component):

팝업에서 사용할 수 있는 aria-\* 속성을 적절히 사용하여 웹 접근성을 향상합니다. 모달 팝업에서 포커스 트래핑(Focus Trapping)을 구현하여 키보드 사용자가 실수로 팝업에서 벗어나지 않고 팝업 내부를 탐색할 수 있도록 합니다. ❗️모달 팝업이 오픈된 상태

웹 사이트를 개발할 때 외부 링크로 연결해야 할 때 링크 태그에 noreferrer, noopener, nofollow를 사용할 수 있습니다. 이 속성들은 무슨 역할을 하고 왜 사용할까요? 링크 태그에 target="\_blank" 속성을 사용할 때의 보안 문제는 악의

네트워크 프로토콜은 네트워크 상에서 컴퓨터나 기타 장치간에 서로 통신하기 위해 필요한 규칙과 절차의 집합입니다. 장치 간에 교환되는 데이터의 형식과 구조부터 데이터를 전송, 수신 및 처리하는 데 필요한 작업과 동작을 정의합니다. 일반적으로 네트워크 프로토콜을 언급할 때

드래그 앤 드롭은 마우스나 터치 스크린을 사용하여 요소의 위치를 이동시키는 사용자 인터페이스 기술입니다. 이 기술은 사용자가 웹 페이지와 상호 작용할 수 있는 간단하고 직관적인 방법을 제공하기 때문에 웹 개발에서 널리 사용됩니다. 외부 라이브러리를 사용하지 않고 드래그

캐러셀 슬라이드는 가로, 혹은 세로 축으로 회전하며 일련의 이미지를 보여주는 이미지 갤러리의 일종으로 특히 다양한 이미지들을 사용자에게 시각적으로 매력적으로 보여줄 필요가 있을 때 사용됩니다. 일반적으로 온라인 쇼핑몰 사이트에서 제품 이미지를 보여주는 메인 배너에 많이

지연 로딩(Lazy Loading)은 초기 로딩 시간을 줄이고 페이지 로딩 속도를 개선하기 위한 기술로, 리소스들을 실제로 사용하는 시점에 로딩하는 것을 이릅니다. 특히, 이미지 최적화에 가장 많이 사용되는 기법입니다. Lazy Loading을 사용하면 웹 페이지의 초

외부 라이브러리를 사용하지 않고 상하로 움직이는 무한 슬라이드를 구현슬라이드가 진행하며 동일한 슬라이드가 한 화면에 위와 아래 동시에 보여지는 경우가 있으므로, 슬라이드를 2개씩 생성합니다.

스레드는 프로세스 내에서 이루어지는 작업 흐름을 수행하는 단위입니다.프로세스는 컴퓨터의 자원을 분할해서 사용하지만 스레드는 프로세스 내부에 존재하므로, 프로세스의 자원을 공유합니다. 모든 프로세스는 한 개 혹은 그 이상의 스레드를 가지고 있고, 두 개 이상의 스레드를

7-1 PatternCSS 전처리기 SCSS를 사용함으로 얻을 수 있는 주된 장점 중 하나는, 코드 베이스를 여러 파일로 분할할 수 있다는 것입니다. 7-1 패턴은 이를 이용한 SCSS의 대표적인 아키텍처로 공식 가이드라인에서도 언급하고 있습니다.7개의 폴더 안의 분할

모든 프로세스는 운영체제로부터 4GB의 공간을 할당 받습니다.코드, 데이터, 스택, 힙으로 구성된 사용자 영역이 0GB - 3GB까지의 공간을, OS 커널 영역이 나머지 3GB - 4GB까지의 공간을 차지합니다.코드 Code(text)프로그램을 실행시키는 실행 파일

배치 처리 시스템(일괄 처리 시스템)은 초기의 컴퓨터 시스템에서 사용된 형태.일정량 또는 기간동안 등록된 데이터를 모아 한번에 처리하는 시스템입니다. 배치 처리 시스템은 등록된 프로그램을 프로그램 실행 요청 순서에 따라 순차적으로 실행됩니다. 배치 처리 시스템을 사용할

운영체제(Operating Ststem : OS)란 커널에 라이브러리, 어플리케이션이 추가된 상태를 이릅니다. 커널은 항상 메모리에 상주하는 운영체제의 핵심이 되는 부분입니다. 컴퓨터 자원을 관리하는 자원 관리자로서 대표적으로 다음 4가지 기능을 가지고 있습니다. 커

컴퓨터 시스템은 하드웨어(Hardward)와 소프트웨어(Software) 두 가지로 구성되어 있습니다.