728x90 전체 글125 form vs fetch — CORS와 비동기 요청의 차이 개요웹 개발을 하다 보면 폼(form)으로 데이터를 보내는 방식과 JavaScript로 비동기 요청을 보내는 방식(fetch/axios 등) 사이에서 어떤 걸 써야 할지 고민이 생깁니다.특히, CORS 정책 우회 가능 여부, 비동기 처리 가능 여부, 그리고 UX 제어 방식의 차이는 실무에서 중요한 포인트입니다.둘 다 장단점이 분명하므로, 상황에 따라 목적에 맞는 방식을 선택하는 것은 중요합니다. 이번 포스팅에서는 이 두 방식의 차이를 정확히 비교해봅니다.1. form 태그는 CORS를 우회할 수 있다?맞습니다. 과 같이 작성하면, 브라우저는 서버에 직접 요청을 보냅니다.이 방식은:브라우저가 직접 요청브라우저가 직접 응답 렌더링따라서 CORS 정책 적용을 일부 우회함하지만 JavaScript로 응답 내용을.. 2025. 6. 26. [React] recompose로 함수형 컴포넌트 이하기 개요recompose 는 하이어오더 컴포넌트(= 고차 컴포넌트: Higher-Order Components) - React) 로직을 재 사용하기 위한 컴포넌트를 개발하는 패턴을 모은 라이브러리이다.react^16.8 버전 이상부터는 react-hook에 recompose 기능이 구현되어 있어, 모듈을 import하여 사용하지 않게 되었다.import { branch , withState} from 'recompose' //비효율적import branch from 'recompose' //효율적 그러나 recompose 활용 방법을 이해하면, 함수형 컴포넌트 개발을 이해하는데 도움을 준다. recompose 장단점장점고차 컴포넌트를 쉽게 개발할 수 있다.컴포넌트 로직을 분리하여 재사용이 가능하게 만들고,.. 2025. 4. 17. 브라우저 JavaScript 렌더링 엔진, V8 개요V8엔진 특징과 Javascript가 어떻게 해석되고 실행되는지 알면 JavaScript 엔진의 작동 방식을 더 깊이 이해하면 코드의 성능 특성을 추론하는 데 도움된다!V8 엔진이 무엇인지, 왜 그리고 어떻게 동작 하는지 알아보자. 렌더링 엔진이란?JavaScript 엔진을 내장한 브라우저의 표시 기능을 담당하는 모듈Blink, Gecko, WebKit렌더링 엔진은 자바스크립트뿐만 아니라 HTML과 CSS를 해석하고 화면 드로잉을 종합적으로 수행 Javascript 엔진이란?자바스크립트는 동적 타입의 인터프리터 언어이며 자바스크립트에서 실행되는 모든 것들은 엔진에 의해 처리된다.엔진은 주변 환경과 상호작용하면서 컴퓨터가 프로그램을 실행하는 데 필요한 machine code(바이트코드)를 변환/생성 역.. 2025. 4. 17. Redirect URL 완전 정복: 쿼리 파라미터와 리다이렉트 흐름 설계 Redirect URL 소개Redirect (리다이렉트)란, 사용자가 처음 요청한 URL이 아닌, 다른 URL로 보내는 것을 뜻입니다. 예를 들어, 웹사이트 A의 주소로 접속한 사용자를 웹사이트 B로 이동시키는 것을 말합니다.Redirect URL은 요청 결과를 전달해주는 역할을 합니다. 사용자가 요청을 마친 후 돌아갈 수 있는 웹사이트 URL로, 요청 결과를 알려주고 그 결과를 바탕으로 최종 비즈니스를 진행하는 중요한 중간 역할을 합니다. 기본 Redirect URL 예시https://example.com/redirect?status=success&orderId=12345 OAuth 인증 시 Redirect URL 예시https://myapp.com/auth/callback?code=abc123&sta.. 2025. 4. 17. [window] window10 시작화면 크롬 아이콘 깨지거나 보이지 않는 문제 오류 화면일부 사용자에게서 시작 화면에 고정된 Chrome 바로가기 아이콘이 깨져 보이거나 아예 표시되지 않는 현상이 발생하고 있습니다. 해당 증상은 기능적인 오류는 없으나, 가시성과 사용성 측면에서 불편을 초래할 수 있습니다. 시작 화면에서 해당 바로가기를 제거하고 다시 Chrome 아이콘을 우클릭 > 시작 화면에 고정해도 같은 현상이 지속됩니다. 해결 방법1. 데스크탑에 cmd 창 엽니다. 아래 명령어를 복사한다음 붙여넣습니다.REG ADD "HKCU\Software\Microsoft\Windows\CurrentVersion\ImmersiveShell\StateStore" /V ResetCache /T REG_DWORD /D 1 /Ftaskkill /f /im explorer.exestart expl.. 2025. 4. 14. [Docker] Node.js Docker image Docker Official Image?Docker 공식 이미지는 Docker 오픈 소스 및 즉석 솔루션 저장소의 큐레이션된 세트입니다. 공식 이미지는 명확한 설명서를 포함하고 있으며, 모범 사례를 홍보하고 있으며, 가장 일반적인 사용 사례에 맞춰 설계되었습니다.Node.js란 무엇인가요?Node.js는 확장 가능한 서버 측 및 네트워킹 애플리케이션을 위한 소프트웨어 플랫폼입니다. Node.js 애플리케이션은 JavaScript로 작성되었으며, Mac OS X, Windows 및 Linux에서 Node.js 런타임 내에서 변경 없이 실행할 수 있습니다.Node.js 애플리케이션은 논블로킹 I/O와 비동기 이벤트를 사용하여 처리량과 효율성을 극대화하도록 설계되었습니다. Node.js 애플리케이션은 단일 스.. 2025. 4. 11. [Docker] Docker 기본 CLI 명령어 정리 Docker 라이프사이클Docker ImageDocker Image 조회$ docker imagesDocker Image 생성// 도커 경로가 package.json 에 있는 경우$ docker build ./// 도커 경로가 package.json 외부에 있는 경우// docker build -t {이름공간}/{이미지이름}:{태그} {빌드 컨텍스트(DockerFile이 있는 경로)}$ docker build -t dp -f docker/Dockerfile .Docker Image 삭제$ docker rmi {이미지이름}// 이미지를 사용중인 컨테이너가 있어도 이미지만 강제 삭제$ docker rmi -f {이미지이름}Docker ContainerDocker Container 조회$ docker ps /.. 2025. 4. 11. [Docker] Docker Container, Host 파일시스템 파일시스템(File System)모든 운영체제에는 파일 시스템을 가지고 있다.사용자가 파일을 저장, 검색, 수정하는 데 필요한 모든 기능을 제공하며 컴퓨터 시스템에서 데이터를 저장하고 구성하는 방식을 정의한다.Host, Docker Container 파일시스템 특징Host컨테이너 변경 여부에 상관없이 파일 시스템이 계속 유지 된다.Host 파일 시스템을 공유하면 보다 안전하고 효율적으로 프로그램을 만들 수 있다.Docker Container도커 이미지 배포시 새로운 디렉토리를 만들어서 사용한다.컨테이너가 변경 될때마다 데이터가 초기화/삭제 되기 때문에 필요 없을때 삭제하고, 필요할 때 추가해서 사용할 수 있어서 간편하지만 지속적으로 필요한 파일(DB, 리소스)이 있다면 컨테이너에 올릴 때마다 필요한 파일.. 2025. 4. 11. [Docker] Docker 기본 개념 및 Dockerfile 구성 요소 설명 개요이 포스팅에서는 먼저 Docker의 설치 방법을 소개한 후, 컨테이너 환경을 정의하는 데 사용되는 Dockerfile의 주요 구성 요소에 대해 자세히 설명합니다. DockerDocker는 리눅스 컨테이너 기반의 가상화 기술을 제공하는 오픈 소스 플랫폼입니다. 가상화 기술이란 하드웨어 리소스를 논리적으로 분할하여 하나의 시스템에서 여러 가상 환경을 생성하는 것을 말합니다. Docker 역할컨테이너 기반 가상화 및 환경 표준화애플리케이션과 필요한 실행 환경(라이브러리, 설정 파일 등)을 하나의 컨테이너로 패키징합니다. 이로 인해 개발, 배포, 실행 과정이 단순화되고 효율성이 향상됩니다.호스트 OS 위에서 격리된 환경으로 동작하여 일관된 개발/실행 환경을 제공하여 모든 개발자가 동일한 컨테이너 이미지를 사.. 2025. 4. 11. 이전 1 2 3 4 ··· 14 다음 728x90
