전체 글 썸네일형 리스트형 React에서의 CORS Error 처리 CORS Error 란? SOP(Same-Origin Policy)에 의해 발생하는 오류이다. SOP는 같은 출처(Origin)의 리소스만 공유할 수 있도록 하는 정책으로, Origin은 프로토콜과 호스트, 포트를 포함한다. 브라우저에 쌓이는 보안에 민감한 데이터를 다른 곳에서 접근하여 악용하는 등 보안관련 문제 때문에 생겨난 정책이다. 다른 출처의 리소스를 사용하려면 CORS를 사용해야한다. CORS의 동작 방식 3가지 1. Preflight 요청 클라이언트가 브라우저를 통해 서버로 요청을 보낼 때, 브라우저에서 서버로 바로 실제 요청을 보내는 것이 아니라, OPTIONS 메서드로 사전 요청을 보내서 접근권한 여부를 먼저 확인하는 것을 Preflight 요청이라고 한다. 접근 권한이 있다면 브라우저는 .. 더보기 코드스테이츠 CI&CD 기초, 실습 CI/CD란? CI: 개발자를 위한 자동화 프로세스, 지속적인 통합(Continuous Integration) 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되도록 한다. 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결. CD: 지속적인 서비스 제공(Continuous Delivery), 지속적인 배포(Continuous Deployment)를 의미. CI/CD 플랫폼인 Github action 을 이용해서 CI/CD 작업을 할 수 있다. 이벤트 트리거(Pull Request, push)에 의한 워크플로우(Workflow)를 구성할 수 있다. 워크플로우는 yaml 파일로 작성된다. yaml은 j.. 더보기 [React] favicon 업데이트 적용 문제 증상: favicon을 변경하였음에도 적용이 안됨. 해결: // pulic/index.html //원래 코드 //변경 코드 원래코드를 변경코드로 바꿔준다. 원인: 캐시된 이미지를 사용하고 있기 때문에 강제로 이미지를 업데이트해야한다. 출처:How To Force Refresh A Cached Favicon Image - holly bourneville - Medium 더보기 [타입스크립트] Enum, Interface [Enum] //숫자형 Enum Fruit { Melon,//0 Orange,//1 Apple=4,//4 Strawberry//5 } //문자형 Enum Fruit2 { Melon: 'Melon', Orange: 'Orange', Apple: 'Apple', Strawberry: 'Strawberry' } //숫자형(역매핑) enum Enum { A } let a = Enum.A; // a = 0 let nameOfA = Enum[a]; // Enum[0] = "A" Enum(열거형)에는 숫자형(default), 문자형열거형이 있다. 열거형을 사용하면 오타와 같은 실수를 방지할 수 있으며, 코드의 가독성과 안정성을 높일 수 있다. 숫자형에만 존재하는 특성으로 역매핑이 있다. 역매핑을 이용하여 열거형의 키.. 더보기 [타입스크립트] 환경구성 [환경구성] vscode같은 코드 편집기에서는 ts파일에서 자동으로 타입 검사를 시행해주는데, 메모장 같은 기본 편집기를 사용하면 매번 해당 명령어를 이용해서 타입검사를 실시해야한다. (매우 비효율적) 따라서 타입스크립트를 사용할 때, 코드편집기가 필수적이다. [절차] 1. npm init -y: 프로젝트를 생성한다. => 노드 프로젝트를 생성한다. package.json이 생성되고, 이제 npm 명령어를 이용해서 ts를 설치할 수 있다. 2. npm i typesript: ts를 설치한다. => 타입스크립트를 설치한다. 3. npx tsc -init: tsconfig.json을 생성한다. => ts와 관련된 설정에 대한 모음을 가진 파일인 tsconfig.json파일을 생성한다. [tsconfig.js.. 더보기 DOM과 Virtual DOM [DOM] HTML을 읽고 분석하여, HTML tag를 JavaScript Node(text, class 등 모두 포함)로 변환한다. 이 변환의 최종 형태는 DOM(Tree형 객체모델)이다. DOM은 Tree형 객체모델이기 때문에 자바스크립트로 탐색하는 성능이 뛰어나서, 변경이나 업데이트 속도가 빠르다. 하지만, 렌더링에서 성능 문제가 발생할 수 있다. 먼저 DOM의 rendering과정에 대해 설명하겠다. 일단 DOM이 변경(DOM API이용해서 변경할 수 있음)되면, 그에 맞게 브라우저에서 re-rendering이 되어야 한다. Rendering하려면 DOM과 CSSOM(DOM에 CSS요소들을 병합)을 토대로 만들어진 Render트리가 필요하다. 이때 Render트리는 html에서 , , css에서 .. 더보기 package.json 과 package-lock.json 처음 프로젝트를 다운로드 받았을 때 포함되어 있는 package.json과 package-lock.json에 대해 간단히 알아보았습니다. package.json 은 프로젝트에서 패키지의 의존성(버전정보), 스크립트 실행 등 정보를 저장하는 파일입니다. 덕분에 프로젝트를 다운로드 받고 npm install을 실행하면, package.json 파일의 dependencies와 devDependencies의 버전정보를 파악하고, 해당 패키지의 버전정보에 따라 설치할 수 있게 됩니다. 밑은 package.json의 예시입니다. "dependencies": { "express": "^4.18.2" } ^의 의미는 기호는 패키지 매니저가 패키지를 설치하거나 업데이트할 때 최신 마이너 버전을 자동으로 설치하도록 합니다.. 더보기 [자바스크립트] 비동기(promise) [Promise란?] 비동기 처리를 위한 패턴 중 하나. =>전통적인 콜백 패턴의 단점을 보완(콜백 헬, 가독성, 에러 처리) =>비동기로 받아온 데이터 사용 시점을 명확히 할 수 있음. 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 "내부"에서 수행해야 한다. 이때, 비동기 함수의 후속 처리를 위해 비동기 함수는 비동기 처리 결과에 대한 후속 처리를 수행하는 콜백함수를 전달. (비동기 처리 성공시 호출하는 콜백함수, 실패시 호출하는 콜백함수) 이런 구조는 콜백헬을 발생시킬 수 있음. 콜백헬: 콜백 함수를 통해서 비동기 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 비동기 처리 결과를 가지고 또다시 비동기 함수를 호출하게 돼 콜백이 중첩되고 복잡도가 올라가는 현상. 에러는 실행컨텍스트 .. 더보기 이전 1 2 3 다음
