geniee1220의 등록된 링크

키자드에 등록된 총 30개의 포스트를 확인하실 수 있습니다.

Naver Blog

[Network] REST와 RESTful API

REST : REpresentational State Transfer '어떻게 인터넷에서 정보를 공유할 것인가?' Tim Berners-Lee에 의해 정보 표현 수단으로 HTML이, 그 정보들의 식별자로 URI를, 전송하는 방법으로 HTTP가 고안된 이후 던져진 화두 '어떻게 하면 Web을 망가뜨리지 않고 HTTP를 진보시킬수 있을까?'에 대한 답으로 웹의 독립적 진화를 위한 아키텍쳐 스타일 REST가 제안되었습니다. REST란 분산 하이퍼미디어 시스템(=www)을 위한 아키텍쳐 스타일로, REST API란 REST 아키텍쳐 스타일을 따르는 API를 이르고 이를 RESTful하게 작성되었다고 합니다. REST 구성과 HTTP 메서드 자원(Resource) www 상에 존재하는 모든 자원은 URI를 고유 식별자로 가지고 있습니다. 클라이언트는 URI를 통해 자원을 지정하여, 해당 자원에 대한 상태 조작을 요청합니다. 행위(Verb) 클라이언트가 서버로 요청을 보낼 때 CRUD를 위해

원문보기 내부링크
Naver Blog

[Git] Git Flow 전략

Git Flow란 Git 은 원격 저장소와 이슈 트래커 기능을 지원하여 여러 개발자들이 크고 작은 프로젝트를 빠르고 효율적으로 관리할 수 있도록 돕는 오픈소스 클라우드 버전 관리 시스템입니다. Git Flow는 Git을 이용한 버전과 소스 코드 관리, 협업에 대한 프로세스를 관리하기 위한 git 브랜치 전략을 이릅니다. Branch 소개 master 상용 서비스 배포용 브런치 직접적으로 코드의 수정이 이루어지지 않습니다. 2. develop 개발의 주축이 되는 브런치 기능을 개발해야 한다고 했을 때, develop에서 feature 브랜치를 분기하여 사용합니다. 3. feature/ 기능 개발시 사용하는 브랜치 feature 개발 완료시 develop에 merge 한 이후 해당 브랜치는 삭제합니다. 4. release/ 배포를 위한 실질적인 작업이 이루어지는 브랜치 QA는 release 브랜치 기준으로 작업합니다. 버그 확인까지 완료될 경우 develop과 master 브랜치로 me

원문보기 내부링크
Naver Blog

[Computer Architecture] 컴퓨터 구조와 프로그래밍 이해

컴퓨터 시스템 컴퓨터 시스템은 하드웨어(Hardward)와 소프트웨어(Software) 두 가지로 구성되어 있습니다. 주요 하드웨어 : CPU(중앙처리장치), Memory, Storage(HDD,SDD), Network 주요 소프트웨어 : 운영체제(OS)와 응용 프로그램 폰 노이만 구조 존 폰 노이만이 제안한 구조로 오늘날 존재하는 거의 모든 PC는 폰 노이만 구조를 따르고 있습니다. 폰 노이만이 컴퓨터의 구조를 제안하기 이전에는 계산을 할 때마다 손으로 스위치 및 전선을 배치하여 작업을 수행했습니다. 만약 앞서 수행한 작업과 다른 작업을 수행하고 싶다면, 기존에 배치한 전선을 전부 재배치하는 과정을 필요로 했습니다. 폰 노이만 구조는 이러한 과정 없이 소프트웨어를 교체하는 것만으도 새로운 작업을 수행할 수 있다는 장점이 있습니다. 메모리에 프로그램과 데이터가 저장되고, CPU에 저장된 데이터를 ALU(Arithmetic Login Unit)이 연산 수행하는 방식입니다. 컴퓨터 주요

원문보기 내부링크
Naver Blog

[OS] 운영체제(Operating System)와 커널(Kernel)

운영체제의 구조 운영체제(Operating Ststem : OS)란 커널에 라이브러리, 어플리케이션이 추가된 상태를 이릅니다. 커널(Kernel) 커널은 항상 메모리에 상주하는 운영체제의 핵심이 되는 부분입니다. 컴퓨터 자원을 관리하는 자원 관리자로서 대표적으로 다음 4가지 기능을 가지고 있습니다. 커널은 사용자가 물리적인 하드웨어에 접근하고 사용할 수 있도록 하기 위한 목적을 가지고 있고, 사용자가 쉘(Shell)을 통해 입력한 명령어를 해석하여 하드웨어에 전달해주는 역할을 합니다. 메모리 관리 각 프로그램이 어디에서, 무엇을, 얼마나 사용하는지를 추적하고. 메모리 자원을 할당하는 역할을 합니다. 가상 메모리를 사용할 수 있도록 합니다. 2. 프로세스 관리 및 CPU 스케쥴링 사용자가 시스템에 로그인 함과 동시에 수많은 프로세스가 실행되는데, 커널은 CPU의 시간 자원을 배분하는 역할 - 어떤 프로세스가 언제, 얼마나 사용할지 - 을 하여 여러 개의 프로세스가 동시에 동작하는 것처

원문보기 내부링크
Naver Blog

[OS] 프로세스 스케쥴링(Process Scheduling)과 스케쥴링 알고리즘

프로세스 스케쥴링 배치 처리 시스템 Batch Processing 배치 처리 시스템(일괄 처리 시스템)은 초기의 컴퓨터 시스템에서 사용된 형태. 일정량 또는 기간동안 등록된 데이터를 모아 한번에 처리하는 시스템입니다. 배치 처리 시스템은 등록된 프로그램을 프로그램 실행 요청 순서에 따라 순차적으로 실행됩니다. 배치 처리 시스템을 사용할 경우 동시에 여러 작업을 진행할 수 없다는 치명적인 단점을 가지고 있고. 이를 해결하기 위해 시분할 시스템, 멀티 프로그래밍 시스템이 고안되었습니다. 시분할 시스템 Time Sharing System CPU가 각 프로그램을 일정 시간(time slice) 동안 번갈아 가면서 실행하는 시스템. 멀티 프로그래밍 시스템과 결합하면 모든 작업이 동시에 진행되는 것처럼 보이는 대화식 처리가 가능합니다. 다중 사용자를 지원하고, 프로세스 응답 시간을 최소화 하는 데 목적을 두고 있습니다. 멀티 프로그래밍 시스템 Multi Programming System 다중

원문보기 내부링크
Naver Blog

[OS] 프로세스(Process)와 컴퓨터 구조

프로세스 구조 모든 프로세스는 운영체제로부터 4GB의 공간을 할당 받습니다. 코드, 데이터, 스택, 힙으로 구성된 사용자 영역이 0GB - 3GB까지의 공간을, OS 커널 영역이 나머지 3GB - 4GB까지의 공간을 차지합니다. 코드 Code(text) 프로그램을 실행시키는 실행 파일 명령어. 즉 실제 코드가 자리하는 영역입니다. 2. 데이터 Data 전역(global) 변수, 정적(static) 변수, 초기화 데이터가 저장되는 공간입니다. 3. 스택 Stack 임시 데이터를 저장하는 공간입니다. 스택 영역은 함수의 호출과 함께 할당 되며, 함수의 호출이 완료되면 소멸합니다. 해당 함수를 쓰는 지역 변수, 해당 함수를 호출한 위치가 스택 영역에 기록됩니다. 4. 힙 Heap 코드에서 동적으로 만들어지는 데이터, 동적 메모리를 위한 공간입니다. 프로그램이 실행되면서 필요에 따라서 만들어지는 객체나 데이터는 힙 영역에 할당됩니다. 프로세스와 컴퓨터 구조 PC(Program Counter

원문보기 내부링크
Naver Blog

[SCSS] 프로젝트 아키텍처 7-1 Pattern

7-1 Pattern CSS 전처리기 SCSS를 사용함으로 얻을 수 있는 주된 장점 중 하나는, 코드 베이스를 여러 파일로 분할할 수 있다는 것입니다. 7-1 패턴은 이를 이용한 SCSS의 대표적인 아키텍처로 공식 가이드라인에서도 언급하고 있습니다. 이름이 가지는 의미는 명확합니다. 7개의 폴더와 1개의 파일. 7개의 폴더 안의 분할된 SCSS 파일들은, 루트 디렉토리의 main.scss에서 합쳐져 하나의 파일로 컴파일링 됩니다. CSS 파일은 용도 별로 나뉘어진 폴더 구조와 자신의 이름을 통해 어떤 역할을 하는지, 무엇을 위해 만들어졌는지 가시적으로 보여줍니다. 폴더 구조 파일 앞에 붙은 언더바(_)는 이 파일은 @import를 통해 불러지기 전까지는 컴파일링 되지 않는 것을 의미합니다. Abstracts abstracts 폴더는 프로젝트에서 사용되는 전역 변수와 믹스인, scss 함수에 대한 폴더입니다. utilities 혹은 helpers라는 이름을 대신 사용할 수도 있습니다.

원문보기 내부링크
Naver Blog

[OS] 스레드(Thread), 멀티 스레드(Multi Thread), 동기화(Synchronization)

프로세스(Process) [OS] 프로세스(Process)와 컴퓨터 구조 프로세스 구조 모든 프로세스는 운영체제로부터 4GB의 공간을 할당 받습니다. 코드, 데이터, 스택, 힙으... blog.naver.com 스레드(Thread)란? 스레드는 프로세스 내에서 이루어지는 작업 흐름을 수행하는 단위입니다. 프로세스는 컴퓨터의 자원을 분할해서 사용하지만 스레드는 프로세스 내부에 존재하므로, 프로세스의 자원을 공유합니다. 모든 프로세스는 한 개 혹은 그 이상의 스레드를 가지고 있고, 두 개 이상의 스레드를 가지는 프로세스를 멀티 스레드(Multi Thread)라고 합니다. 멀티 스레드(Multi Thread) 동시성(Concurrency)과 병렬성(Parallelism) 프로세스는 동시적, 병렬적, 혹은 이 둘이 혼합된 방식으로 작동합니다. 싱글 코어(Core* CPU)인 경우 멀티 스레드를 통해 동시성(Concurrency)을 높일 수 있습니다. 빠르게 스레드 간에 문맥 교환(Conte

원문보기 내부링크
Naver Blog

[Programmers/JS] 약수 구하기

1. 1부터 N까지 나머지가 0인 값을 구하기 function solution(n) { var answer = []; for(let i = 1; i <= n; i++){ if(n % i === 0){ answer.push(i) } } return answer; } 1부터 주어진 수 n까지 하나씩 대입하며 나머지가 0인 값을 검사하면 이 문제를 간단히 풀 수 있습니다. 시간 복잡도는 O(n) 입니다. 입력값이 커지면 커질수록 모든 수를 다 대입해야 하기 때문에(입력값이 1,000,000,000,000이라면 1부터 1,000,000,000,000까지 하나씩 다 나눠야 하기 때문에) 효율적이지 못한 코드입니다. 코딩테스트는 컴파일에 일정 시간이 지나면 실패 처리하므로 똑같은 문제가 나와도 입력값이 커진다면 통과하지 못할 수 있습니다. 따라서, 더 빠른 계산을 위해 다른 접근이 필요합니다. 2. 제곱근을 활용하기 제곱근을 활용하면 O(n)인 시간복잡도를 O(logN)까지 줄일 수 있습니다.

원문보기 내부링크
Naver Blog

[Markup] CSS 애니메이션으로 상하 무한 슬라이드 구현

1. 목표 외부 라이브러리를 사용하지 않고 CSS 애니메이션만으로 상하로 움직이는 무한 슬라이드를 구현 2. 구현 결과 미리보기 3. 구현하기 슬라이드가 진행하며 동일한 슬라이드가 한 화면에 위와 아래 동시에 보여져야하므로 슬라이드는 각 2개씩 생성 <div class="box"> <div class="slider1"> <div class="slide1"></div> <div class="slide2"></div> <div class="slide3"></div> <div class="slide1"></div> <div class="slide2"></div> <div class="slide3"></div> </div> <div class="slider2"> <div class="slide1"></div> <div class="slide2"></div> <div class="slide3"></div> <div class="slide1"></div> <div class="slide2"><

원문보기 내부링크
Naver Blog

[Performance Optimization] Lazy Loading

Lazy Loading이란? 지연 로딩(Lazy Loading)은 초기 로딩 시간을 줄이고 페이지 로딩 속도를 개선하기 위한 기술로, 리소스들을 실제로 사용하는 시점에 로딩하는 것을 이릅니다. 특히, 이미지 최적화에 가장 많이 사용되는 기법입니다. 프로젝트를 진행하면서 랜딩 페이지의 렌더링이 너무 늦어 패널로 확인해보니 이미지를 불러오는 데 대부분의 시간을 소요하고 있는 것을 알 수 있었습니다. 그렇다면 이 문제를 어떻게 해결할 수 있을까요? 이 포스팅에서는 웹 페이지 리소스에서 가장 많은 지분을 차지하고 있는 이미지를 어떻게 최적화하고, 웹의 초기 로딩 속도를 개선할 수 있을지에 대해 알아봅니다. 왜 Lazy Loading인가? Lazy Loading을 사용하면 웹 페이지의 초기 로딩 속도가 개선되어 사용자들이 더 빠르게 페이지를 이용할 수 있습니다. 특히 이미지를 로딩하는데 소요되는 시간을 줄일 수 있어, 사용자들이 빠르게 이미지를 볼 수 있도록 해줍니다. 또한, 페이지에 필요한

원문보기 내부링크
Naver Blog

[JavaScript] Vanilla JS로 무한 캐러셀 슬라이드 구현

캐러셀 슬라이드는 가로, 혹은 세로 축으로 회전하며 일련의 이미지를 보여주는 이미지 갤러리의 일종으로 특히 다양한 이미지들을 사용자에게 시각적으로 매력적으로 보여줄 필요가 있을 때 사용됩니다. 일반적으로 온라인 쇼핑몰 사이트에서 제품 이미지를 보여주는 메인 배너에 많이 사용되고, 그 외에도 개인 포트폴리오 또는 갤러리 사이트에서 작품이나 이미지 모음을 전시할 때 사용될 수 있습니다. 1. 목표 외부 라이브러리를 사용하지 않고 캐러셀 슬라이드를 구현합니다. 이 글에서는 바닐라 자바스크립트를 사용하여 무한 캐러셀 슬라이드를 만드는 방법을 설명합니다. 다음은 이 슬라이드에서 구현하고자 하는 목표입니다. 접근성 : aria-hidden 및 aria-label 속성등을 사용하여 스크린 리더에 적절한 정보를 제공 자동 재생 : 슬라이더가 3초마다 자동 재생 무한 루프 : 슬라이더가 마지막 슬라이드에 도달하면 첫 번째 슬라이드로 이동 일시 정지 : 사용자가 슬라이더 위로 마우스를 가져가면 슬라이

원문보기 내부링크
Naver Blog

[JavaScript] 드래그 앤 드롭(Drag and Drop)의 이해 & 기능 구현

드래그 앤 드롭은 마우스나 터치 스크린을 사용하여 요소의 위치를 이동시키는 사용자 인터페이스 기술입니다. 이 기술은 사용자가 웹 페이지와 상호 작용할 수 있는 간단하고 직관적인 방법을 제공하기 때문에 웹 개발에서 널리 사용됩니다. 1. 목표 외부 라이브러리를 사용하지 않고 드래그 앤 드롭을 구현합니다. 이 글에서는 바닐라 자바스크립트를 사용하여 드래그 앤 드롭을 구현하는 방법을 설명합니다. 다음은 드래그 앤 드롭에 구현하고자 하는 목표입니다. 지정된 위치에 요소 이동 드래그 스타일 추가 2. 드래그 앤 드롭의 이해 2-1. 드래그 앤 드롭 이벤트 JavaScript에서 드래그 앤 드롭 기능을 활성화하려면 드래그 가능하게 만들려는 요소에서 "draggable" 속성을 "true"로 설정해야 합니다. 그런 다음 위의 이벤트 유형을 사용하여 다양한 드래그 앤 드롭 이벤트를 처리할 수 있습니다. 1. dragstart dragstart 이벤트는 사용자가 끌 수 있는 요소에서 마우스 버튼을

원문보기 내부링크
Naver Blog

[Network] 프로토콜과 프로토콜의 기본 구조 및 동작 이해 - OSI 7계층

네트워크 프로토콜은 네트워크 상에서 컴퓨터나 기타 장치간에 서로 통신하기 위해 필요한 규칙과 절차의 집합입니다. 장치 간에 교환되는 데이터의 형식과 구조부터 데이터를 전송, 수신 및 처리하는 데 필요한 작업과 동작을 정의합니다. OSI 7계층(Open Systems Interconnection 7 Layer) 일반적으로 네트워크 프로토콜을 언급할 때는 일반적으로는 OSI 7계층을 의미합니다. 서로 다른 컴퓨터 시스템과 네트워크가 서로 원활하게 통신할 수 있도록 ISO(국제표준화기구)에서 제정되었습니다. OSI 7계층 모델은 데이터의 물리적 전송에서 응용 프로그램의 사용자 인터페이스에 이르기까지 네트워크 통신과 관련된 다양한 단계를 나타내도록 설계되었습니다. 물리 계층, 데이터 링크 계층, 네트워크 계층, 전송 계층, 세션 계층, 표현 계층, 응용 계층의 7개 계층으로 구성됩니다. 각 계층은 다른 계층과 상호 작용하며 데이터를 처리하고 전송합니다. 캡슐화(Encapsulation)와

원문보기 내부링크
Naver Blog

[Markup] noreferrer, noopener 및 nofollow 이해 - 웹 보안과 SEO

웹 사이트를 개발할 때 외부 링크로 연결해야 할 때 링크 태그에 noreferrer, noopener, nofollow를 사용할 수 있습니다. 이 속성들은 무슨 역할을 하고 왜 사용할까요? target="_blank"의 보안 취약점 해결하기 링크 태그에 target="_blank" 속성을 사용할 때 발생하는 보안 취약점으로는 악의적인 웹사이트가 탭 내빙(Tabnabbing)이라고 하는 피싱 공격을 시도할 수 있다는 것을 꼽을 수 있습니다. 브라우징 컨텍스트(Browsing Context)는 웹 페이지가 렌더링되어 사용자에게 표시되는 환경입니다. 보조 브라우징 컨텍스트(Auxiliary Browsing Context)는 속성 “_blank”이 지정된 링크를 클릭하거나, JavaScript가 window.open()메서드를 사용하여 새 창을 열 때 생성됩니다. 보조 브라우징 컨텍스트는 새 창이나 탭에 표시되고, 상위 브라우징 컨텍스트에 대한 접근과 같은 고유한 기능을 가지고 있습니다.

원문보기 내부링크
Naver Blog

[JavaScript] 모달 팝업의 Focus Trapping과 WAI-ARIA

1. 목표 팝업에서 사용할 수 있는 aria-* 속성을 적절히 사용하여 웹 접근성을 향상합니다. 모달 팝업에서 포커스 트래핑(Focus Trapping)을 구현하여 키보드 사용자가 실수로 팝업에서 벗어나지 않고 팝업 내부를 탐색할 수 있도록 합니다. ️모달 팝업이 오픈된 상태라면 tab을 눌렀을 때 팝업 내부 영역에서만 이동해야 합니다. 2. 구현 미리보기 3. 구현하기 STEP1. HTML MarkUp <h1 tabindex="0">Focus Trapping & WAI </h1> <button id="openPopupBtn" class="popup-open" aria-haspopup="true">Open Popup</button> <div id="popupContainer" class="popup" role="dialog" aria-modal="true" aria-labelledby="popupTitle" tabindex="-1"> <div class="popup-content">

원문보기 내부링크
Naver Blog

[Web] Local Storage, Session Stroage, IndexedDB

Local Storage Local Storage는 키-값 쌍의 형태로 데이터를 저장할 수 있습니다. 값에는 문자열, 숫자, 부울(true, false)값, 문자열로 직렬화(Serialization)할 수 있는 모든 데이터 유형(Object, Array…)이 들어갈 수 있습니다. Local Storage는 여러 부라우저 세션에서 지속되어야 하는 데이터를 저장하는데 사용합니다. 최대 용량은 5MB(브라우저마다 상이하지만 표준 스펙에서 5MB를 권장) 값 저장 localStorage.setItem('key', 'value'); localStorage.setItem('key', 'new_value'); // Update 객체 또는 배열을 로컬 스토리지에 저장할 때는, 저장하기 전에 데이터를 문자열 형식으로 변환해야 합니다. 이 때 JSON.stringfy() 메서드를 사용합니다. const user = { name: 'John Doe', age: 30, }; // 값 저장 localSto

원문보기 내부링크
Naver Blog

[React] 비제어 컴포넌트와 React-Hook-Form

프로젝트를 구현할 때에는 서버로 사용자가 입력한 정보를 보내주는 기능이 필요합니다. 회원가입이나 파일 전송 등 다양한 기능에서 사용되는데요. 이 글에서는 React-Hook-Form 라이브러리를 소개하고 설명합니다. 제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트(Controlled Component): React State에 의해 값이 관리되고, 변경되는 컴포넌트 비제어 컴포넌트(Uncontrolled Component): 상태가 React State가 아닌 외부에서 관리되는 컴포넌트 제어 컴포넌트는 컴포넌트의 상태를 React에서 관리하기 때문에, 컴포넌트의 상태가 변경될 때마다 리렌더링이 발생합니다. 반면, 비제어 컴포넌트는 컴포넌트의 상태를 State에서 관리하지 않고 DOM으로 바로 접근(ref)하기 때문에 이벤트가 발생해도 화면의 리렌더링이 일어나지 않습니다. 제어 컴포넌트로 폼 구현하기 import { useState } from 'react'; const Form = (

원문보기 내부링크
Naver Blog

[Web] Axios 와 API Call

Axios란? 웹 페이지에서 데이터를 요청하기 위해서는 서버와 통신을 해야 하는데요, Axios는 개발자가 손쉽게 HTTP 요청을 할 수 있도록 하는 JavaScript 라이브러리입니다. Promise API를 기반으로 동작하며 웹 브라우저 혹은 Node.js 환경에서 사용됩니다. Axios를 사용하는 이유 직관적으로 사용할 수 있는 쉬운 사용법 + 다양한 프레임워크 라이브러리와의 호환성 Promise 기반 접근 방식 : Axios는 Promise 패턴을 사용하여 비동기적으로 HTTP 요청을 처리합니다. Axios 인스턴스 : 인스턴스로 만들어 사용하면 요청을 보낼 때마다 필요한 설정들을 추가로 작성하지 않아도 됩니다. (ex. 여러 API 엔드포인트로 요청을 보낼 때, 기본 헤더와 인증 토큰 또는 인터셉터를 설정해야 할 때 사용할 때) 요청(Request) 및 응답(Response) 인터셉터 : Axios는 then이나 catch로 처리 되기 전에 요청과 응답을 가로채서 부가적인

원문보기 내부링크
Naver Blog

[Web] File과 JSON 동시에 서버로 전송하기(body 데이터에 각각 다른 Content-Type 적용하기)

Project Restoration - 댕근이다옹 프로젝트에서 업로드 기능을 구현하면서 파일과 함께 JSON 데이터를 함께 보내야 할 상황을 마주하게 되었습니다. API 명세서에서 요구한 내용은 다음과 같습니다. body에 File을 리스트에 담아 보내고, Content-type은 multipart/form-data로 지정할 것 body에 JSON 데이터를 오브젝트에 담아 보내고, Content-type은 application/json으로 지정할 것 { File:[] // 파일 객체 request:{ userId: 'geniee1220', mainCategory: 'DOG' ... } } Header의 Content-type 결정하기 주로 파일, 이미지, 오디오 등 멀티미디어 파일은 바이너리 데이터로 이루어져 있기 때문에, HTTP 에서 이미지나 파일을 올리고자 할 때는 new FormData() 객체를 생성한 다음 서버로 보내는 것이 일반적인 방법입니다. 이 때 HTTP 헤더의 C

원문보기 내부링크
Naver Blog

[Web] Fetch API와 에러 핸들링

Project Restoration - 댕근이다옹 프로젝트에서는 데이터 패칭 라이브러리로 React-Query를 채택하고 fetch API를 사용해 요청을 보내고 있었습니다. MOCK Server로 API 요청까지 성공한 후, 실제 API로 연동을 시작하게 되었는데요. 에러 핸들링을 위해 고의로 존재하지 않는 주소로 요청을 보냈는데, onSuccess가 트리거되는 이상한 현상을 맞닥뜨리게 되었습니다. 문제가 된 코드는 다음과 같습니다. export const addPost = async (data: PostModel) => { try { const response = await fetch('/good/offer/info', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json', }, }); } catch (error) { ... } }; 이 문제를 해결하기 위해 처음 시도한

원문보기 내부링크
Naver Blog

[React] 리액트 리팩토링, 테스트부터 최적화까지

원티드 프리온보딩 프론트엔드 챌린지 8월 사전 과제 테스트 유닛 테스트 vs 통합 테스트 vs E2E 테스트 유닛 테스트(Unit testing) 하나의 모듈 / 컴포넌트가 기대한대로 동작하는지 독립적으로 진행하는 가장 작은 단위의 테스트입니다. 해당하는 모듈만 독립적으로 테스트하기 때문에 빠르게 문제 여부를 확인할 수 있고, 테스트에 대한 시간과 비용을 절약할 수 있습니다. TDD(Test-Driven Development, 테스트 주도 개발)에서 다루는 테스트도 일반적으로 단위 테스트를 이야기합니다. 좋은 단위 테스트를 작성하기 위한 규칙 ‘FIRST’ Fast: 테스트는 빠르게 동작해야 한다. 단위 테스트는 대상 시스템에 대해 지속적이고 빠르게 피드백을 주는데 가치가 있기 때문에 빠르게 동작해야 한다. Independent: 각각의 테스트는 독립적으로 수행되어야 하며 서로 의존해서는 안된다. 즉 단위 기능에 집중해서 작성하고 하나의 테스트는 하나의 기능만 테스트하도록 작성한다.

원문보기 내부링크
Naver Blog

[Software] TDD(Test-Driven Development)

TDD Test-Driven Development의 약자. 테스트 주도 개발. 소프트웨어를 동작시키기 위한 로직을 작성하기 전에, 테스트 코드를 구현하는 것을 프로세스화 한 개발 방법. 테스트 코드가 필요한 이유 작성한 코드가 의도적으로 동작하는지 수시로 빠르게 검증할 수 있습니다. 리팩토링 이후에도 소프트웨어가 여전히 동일한 동작을 수행할 수 있는 안전망 역할을 합니다. 개발한 소프트웨어의 품질을 보증할 수 있습니다. TDD의 장점과 중요성 버그 감소 테스트 코드를 먼저 작성하지 않으면 의식의 흐름대로 코드를 작성하기 때문에, 문제 발생 시 확인해야 할 코드의 범위가 넓어집니다. 반대로 테스트 코드를 먼저 작성하면 예외적인 사항을 미리 정리할 수 있기 때문에, 엣지 케이스에서 버그가 생기는 것을 사전에 방지할 수 있습니다. 또한, 잘 작성된 테스트 코드는 동료 개발자에게 코드의 의도를 설명하는 코드 명세서의 역할을 할 수 있습니다. 사용성이 높은 소프트웨어 개발 TDD를 사용하면

원문보기 내부링크
Naver Blog

[Network] Network Proxy(Forward Proxy, Reverse Proxy)란?

Proxy란? 프록시(Proxy)는 클라이언트와 서버간의 중계 서버로, 통신을 대리 수행하는 서버입니다. 프록시 서버를 사용했을 때, 다음과 같은 순서로 요청 - 응답을 진행합니다. 클라이언트에서 프록시 서버로 전달할 요청을 보낸다. 2. 프록시 서버는 클라이언트로부터 전달 받은 요청을 서버에 요청한다. 3. 서버는 클라이언트가 요청한 데이터를 프록시 서버로 전달한다. 4. 프록시 서버는 서버로부터 전달 받은 데이터를 클라이언트에 전달한다. Proxy의 종류 Forward Proxy 일반적으로 말하는 프록시가 바로 이것으로, 클라이언트와 인터넷 사이에 위치합니다. 포워드 프록시(Forward Proxy)의 대표적인 기능은 다음과 같습니다. 캐싱 : 클라이언트가 요청한 내용을 캐싱 한 번 요청된 데이터라면 캐시하고 있다가 돌려주기 때문에, 전송 시간이 절약됩니다. 불필요한 요청이 줄어들고, 네트워크 병목 현상을 방지하는 효과가 있습니다. 익명성 : 클라이언트 정보를 서버에게 감춤 서버

원문보기 내부링크
Naver Blog

[Web] Session & Cookie & Token(JWT)

HTTP의 무상태성 Stateless HTTP는 무상태(Stateless) 프로토콜을 사용합니다. 서버가 클라이언트의 상태를 보존하지 않으며 모든 요청이 독립적으로 다뤄집니다. 따라서 요청을 할 때마다 사용자가 누군지 서버에 알려주어야 합니다. 이를 위한 대표적인 방식이 바로 세션과 토큰입니다. 세션(Session) & 쿠키(Cookie) 세션(Session) ‘사용자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점까지 같은 사용자로부터 오는 일련의 요청을 하나의 상태로 보고 그 상태를 일정하게 유지하는 기술’ 즉, 서버와 클라이언트 간의 연결이 활성화 된 상태. 세션 ID를 사용해서 사용자의 로그인이 지속되는 상태. 세션에 대한 모든 정보는 세션 저장소(세션 DB)에 저장되어 있습니다. 인증된 사용자에 대한 정보를 서버에서 관리하고 있기 때문에 Stateful 하다고 할 수 있습니다. 세션 저장소로 Redis와 MemCached와 같은

원문보기 내부링크
Naver Blog

[Web] 교차 출처 리소스 공유, CORS(Cross Origin Resource Sharing)

CORS는 뭔가요? 피싱 사이트로 접속했을 때 HTML, CSS, JavaScript 코드를 브라우저에 다운로드 하게 됩니다. 이 때 다운로드 된 자바스크립트 코드로 로그인했던 세션 또는 토큰을 탈취하고 악의적인 동작을 수행할 수 있습니다. 이것을 방지하기 위해 다른 출처(도메인, 프로토콜, 포트 번호)인 경우 브라우저에서는 SOP(Same-Origin Policy 동일 출처 정책) 정책에 따라 요청이 가지 못하도록 막고 있습니다. 하지만 이러한 제한 사항이 있으면, 다른 출처의 리소스를 필요로 하는 웹 애플리케이션은 제대로 작동하지 않습니다. 이 때 필요한 것이 CORS입니다. CORS는 Cross-Origin Resource Sharing의 약자로, 다른 출처간에 리소스를 공유할 수 있도록 하는 정책입니다. 출처(Origin)란? http의 포트 번호인 80번과 https의 포트 번호인 443번은 생략될 수 있습니다. CORS에서 말하는 출처란 웹 리소스가 어디에서 왔는지 확인하

원문보기 내부링크
Naver Blog

[Bundler] Vite에서 Proxy 설정하기

문제는 CORS? Mock API 로 보내던 요청을 배포된 백엔드 서버로 보낸 순간 마주친 에러. 개발자라면 누구나 한 번 쯤 봤을 메세지를 맞닥뜨렸습니다. Access to XMLHttpRequest at 'https://tweaver.site' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resourcev. Proxy 설정으로 CORS 우회하기 Vite의 server.proxy를 사용하면 브라우저의 요청을 프록시 서버로 먼저 보내고, 프록시 서버가 실제 대상 서버에 요청을 전달할 수 있습니다. 이 설정을 통해 프록시 서버가 동일한 도메인에서 요청이 이루어진 것 처럼 보

원문보기 내부링크
Naver Blog

[JavaScript] 자바스크립트의 비동기 처리(Call back, Promise, Async / Await)

동기(Synchronous)와 비동기(Asynchronous)란? 동기는 직렬적(순차적)으로 작동하는 방식입니다. 요청을 보내면 해당 요청이 완료된 후 다음 동작을 실행하는 방식입니다. 비동기는 병렬적으로 작동하는 방식입니다. 요청을 보내면 응답과 관계 없이 다음 동작을 실행하는 방식입니다. 자바스크립트의 비동기 처리 자바스크립트는 싱글 스레드로 돌아가는 언어이기 때문에 한 번에 한 작업만, 하나의 메인 스레드에서 처리될 수 있습니다. 다른 작업은 앞선 작업이 끝나야 수행됩니다. 즉, 자바스크립트는 동기식 언어입니다. 하지만 데이터 요청이나 타이머 등 오랜 시간이 걸리는 작업을 처리할 때에도 동기적으로 처리한다면 어떻게 될까요? 데이터가 불러와지는 동안 사용자는 버튼을 클릭하는 등 어떠한 액션을 취해도 아무 반응없는 화면을 마주해야 합니다. 이러한 문제를 해결하기 위해 자바스크립트는 브라우저에 내장된 Web API를 이용한 비동기 처리를 지원합니다. 비동기 처리를 사용하면 데이터 요

원문보기 내부링크
Naver Blog

[JavaScript] 자바스크립트와 이벤트 루프(Event Loop)

Single Threaded Language, JavaScript 자바스크립트는 싱글 스레드로 돌아가는 언어이기 때문에 한 번에 한 작업만, 하나의 메인 스레드에서 처리될 수 있습니다. 다른 작업은 앞선 작업이 끝나야 수행됩니다. 즉, 자바스크립트는 동기식 언어입니다. 그렇다면 자바스크립트로는 비동기를 처리할 수 없나요? 자바스크립트는 비동기 처리 역시 지원하고 있습니다. 자바스크립트의 비동기 처리를 공부하면서 든 의문은 다음과 같습니다. ‘싱글 스레드인데, 하나의 한 번의 작업만 할 수 있는 거 아닌가? 어떻게 비동기를 지원한다는 거지?’ 그렇다면 자바스크립트의 비동기 처리는 대체 어떻게 할 수 있는 걸까요? JavaScript Runtime 자바스크립트에 멀티 스레드처럼 동작하며 여러가지 작업을 동시에 처리할 수 있는 이유는 자바스크립트 자체는 싱글 스레드 언어지만 자바스크립트가 동작하는 환경이 멀티 스레드이기 때문입니다. 자바스크립트는 자신의 작업을 적절히 웹 브라우저, Nod

원문보기 내부링크
Naver Blog

[JavaScript] 변수 선언(var, let, const)과 스코프(Scope), 그리고 호이스팅(Hoisting)

클로저를 알고 싶은데... 클로저를 공부하기 위해 개념을 찾아보니 다음과 같은 설명을 찾을 수 있었습니다. 함수가 선언될 때 자동으로 생성되는 렉시컬 환경에 대한 설명입니다. 이러한 렉시컬 환경은 스코프 체인(scope chain)을 형성하게 되는데, 스코프 체인은 함수가 선언될 때의 모든 변수와 함수를 포함하는 렉시컬 스코프(lexical scope)를 형성합니다. 외부 함수가 실행 되고 반환된 후에도 외부 함수의 범위 내의 함수에 체이닝을 할 수 있는 함수 입니다. 정보를 은닉하기 위해서 주로 사용 합니다. 제로베이스 김영민 강사님 인터뷰(https://zero-base.co.kr/event/media_insight_contents_FE_frontend_tech_Interview) 렉시컬 환경? 렉시컬 스코프? 스코프 체인? c 클로저에 대한 이해를 하기 위해 필요한 개념인 스코프, 스코프를 이해하기 위해 필요한 변수, 변수를 이해하기 위해 빼놓을 수 없는 개념인 호이스팅까지 함

원문보기 내부링크
1