교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제웹 애플리케이션은 리소스

사용자가 사이트를 접속했을 때 느리다고 느낀다면, 그리고 그것을 개선했을 때 회사에는 어떤 영향이 있을까?실 사례가 있다. Pinterest는 긴 로딩 시간으로 인해 사용자가 페이지를 나가는 비율이 높았다. 하지만 최적화를 통해 사용자 이탈률을 줄이고 매출은 40%로

웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어글에서 설명하는 브라우저 :오픈소스 브라우저 (파이어폭스, 크롬, 사파리 등)사용자가 선택한 자원\*을 서버에 요청하고 브

프록시 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것 프록시 서버 그 중계 기능을 하는 것클라이언트는 프록시 서버를 '서버'라고 인식서버는 프록시 서버를 '클라이언트'처럼 인식→ (의미적으로) 프록시 서버가 클라이언트의 Request와 서버의 Re

프로그램이란작업을 위해 실행 가능한 파일프로세스란실행 중인 프로그램프로그램 실행 = 프로그램을 프로세스로 바꾸기운영체제는 프로그램을 실행하기 위해서, 프로그램을 메모리의 적당한 위치로 가져온다.동시에 운영체제는 PCB(Process Control Block)을 생성한

프로그램이 동적으로 할당했던 메모리 영역 중에서 필요 없게 된 영역을 해제하는 기능메모리 관리 기법 중의 하나메모리의 힙(Heap) 영역에 할당된 부분이 참조되지 않는데도 해제되지 않은 채로 메모리를 계속 점유하고 있는 것JS는 도달 가능성을 사용해 메모리 관리 수행도

이번에는 Computer Science의 기본 중 하나인 OSI 7 layers에 대해 알아볼 것입니다.소프트웨어 아키텍처 중에 Layered Architecture 라는 것이 있습니다. 이를 따르는 대표적인 예가 네트워크 시스템인데요, 이 네트워크 시스템은 하나의 거

리액트 웹 애플리케이션에서 API 연동 시→ API 요청에 대한 상태 관리 잘해야예시요청 시작 → 로딩 중 명시요청 성공 or 실패 → 로딩 끝났음 명시성공 응답에 대한 상태 관리실패 에러에 대한 상태 관리 리액트 프로젝트 + 리덕스 + 비동기 작업 (위와 같은)

이번 게시글은 지난 게시글 (데이터 타입(종류 / 배경지식))에 이어서 데이터 타입 그 중, 변수 선언과 데이터 할당에 대해 알아보도록 하겠습니다.동작 원리를 알아 볼 것입니다.기본적인 변수 선언식은 아래와 같습니다.말로 풀어 쓰면, "변할 수 있는 데이터를 만든다.

이번 게시글은 자바스크립트의 기본기를 다지기 위하여, '데이터 타입'에 대해 알아보도록 할 것 입니다.목표는, 자바스크립트가 데이터를 처리하는 과정을 살펴봄으로써, 기본형과 참조형 타입이 서로 다르게 동작하는 이유를 이해하고 활용 가능하도록 하며, 데이터 타입 관련 중

hooks(react-redux 제공)로 컨테이너 컴포넌트 제작 가능 (connect 대신)리덕스 상태 조회 가능사용법 const 결과 = useSelector(상태 선택 함수)컨테이너 컴포넌트에서 액션을 디스패치 할 때 사용useCallback과 함께 사용 추천컴

더 짧게 작성 → 가독성 ⬆, 객체 직접 작성xcreateAction 사용(액션에 필요한) 추가 데이터 : payload형태기본형 예시예시 1. 액션 생성 함수 파라미터를 payload에 변형을 주어서 넣고 싶다면creatAction 2번째 함수에 따로 선언예시 2.

src/index.js → 스토어 제작 & 리액트 app에 리덕스 적용 작업형태 예시스토어 사용 위해→ <App/>를 <Provider>로 감쌈<Provider>'react-redux' 제공store: props로 전달리덕스 개발자 도구크롬 확장 프로그

리액트 상태 관리 라이브러리 (가장 많이 사용하는)컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리 → 더 효율적인 관리 가능컴포넌트끼리 똑같은 상태 공유 필요 시 → 여러 컴포넌트 거치지 않고 손쉽게 상태 값 전달/업데이트 가능최적화(실제 업데이트 필요한 컴포넌트

현실의 개체(Entity)를 하나의 객체(Object)로 만들어 소프트웨어를 개발할 때 객체들을 이용해 프로그램을 작성할 수 있도록 하는 기법재 사용성, 확장성 -> 개발 기간 단축, 유지 보수 쉬움복잡한 구조를 단계적, 계층적으로 표현데이터 병렬 처리데이터와 데

함수형: x (가비지컬렉팅=1번 실행→ 메모리 상 제거)→ hooks는 클로저 원리 이용해서 state 저장클래스형 : o함수형 : o (hooks 를 통해서)클래스형 : o함수형 : hooks: 로직 분리 시킴 → 로직 재사용 가능클래스형 : 어렵 (action과 분

함수와 함수가 선언된 어휘적 환경의 조합특징자신이 생성될 시점의 환경을 기억하는 함수 → 함수 실행이 끝나고도 메모리에 스스로를 남겨둘 수 있는 방법클로저를 통해서 JS에는 없는 (비)공개 속성/메소드 구현 방안 마련 가능(외부 함수에 의해 반환되는 내부 함수를 가리

공공 데이터 API를 활용해 코로나 예방접종센터 조회 페이지 구현하나의 웹페이지로 구성 (화면 리스트 페이징) → centerName : 센터명, centerType : 센터유형, facilityName : 시설명, address : 주소구글 맵 센터 정보 표시

클라이언트 정보 저장형태: key와 valueHTML5에서 쿠키의 단점 보완해서 만든 기술 클라이언트에 대한 정보를 이용자의 PC의 하드디스크에 보관하기 위해서 웹 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보

자바스크립트의 비동기 처리 패턴 문법장점콜백 함수 & 프로미스의 단점 보완 (기존의 비동기 처리 방식)개발자가 읽기 좋은 코드 작성 가능함수 앞에 async (예약어) 붙임 → 함수 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await 붙임주의: 비동