본문 바로가기

분류 전체보기

(78)

[ WEB ] AJAX에 대해 알아보기. AJAX란 무엇일까? 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)을 말하며, 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. AJAX는 페이지의 새로고침 없이 서버에 요청을 보낼 수 있고, 서버로부터 데이터를 받고 작업을 수행하는 특징을 가진다. 브라우저에서 제공하는 Web API인 XMLHttpRequest(HTTP비동기 통신을 위한 메서드와 프로퍼티를 제공) 객체를 기반으로 동작한다. 위의 그림은 전통적인 웹페이지의 생명 주기(왼쪽)와 Ajax(오른쪽)의 비교 이미지이다. 전통적인 웹페이지의 경우(왼쪽 이미지) html태그로 시작하여 html..

[ 책 추천 ] Learning React 작년에 했던 JavaScript Deep Dive 책 스터디 팀과 함께 2023년은 Frontend 연속 책 스터디를 하게 되었다. 2023년 1월 ~ 2월 까지는 Learning React(러닝 리액트)라는 책을 공부하기로 했는데, 이번 기회에 처음 알게 되어 책을 읽어보니 빠르게 변화하는 프론트엔드 프레임워크나 라이브러리를 도서로 구매하여 읽는다는 것이 조금 별로라고 생각했던 나에게도 괜찮게 느껴지는 책이었다. 2022년 3월 20일에 2판 2쇄가 발행된 책인데, 최신 자바스크립트의 핵심 설명뿐만 아니라 함수형 프로그래밍에 대해 소개하며, 리액트의 최신 기술들도 소개한다. 책의 목록을 간단히 소개해보면 1. 리액트 소개 2. 리액트를 위한 자바스크립트 3. 자바스크립트를 활용한 함수형 프로그래밍 4...

[ React / Next ] Web Google Login 기능 구현 (gsi/client) 회사에서 Next를 사용하고 있는 Web의 Google Login 지원을 위해 웹용 Google 계정으로 로그인 기능을 구현해야 해서 많은 사람들이 사용하던 react-google-login 라이브러리를 사용하려고 했지만 더 이상 구글에서 지원하지 않는 객체를 사용하는 라이브러리라서 에러가 발생했다. 다른 라이브러리를 사용하려다가 아래의 구글 개발자 페이지를 참고하여 Google Identity Service(GSI)를 이용하여 로그인을 구현해보기로 했다. 공식 문서 링크 구글 개발자 페이지 Authentication - 웹용 Google 계정으로 로그인 Google 로그인 특징 - Google 계정으로 웹 서비스에서 사용자 인증을 쉽고 빠르게 관리할 수 있도록 한다. - 사용자는 Google 계정에 로..

[ AWS ] S3 객체 삭제에 대한 대처 방법 현재 회사에서 리소스를 저장하기 위해 AWS S3를 사용하고 있다. 평화로운 수요일 오후 4시 16분. 개발팀의 신입 개발자분이 AWS CLI를 통해 S3에 저장된 객체들을 일괄 삭제 해버렸다. aws s3 sync s3://Repo이름 --delete --no-progress --exclude '.*' 위의 명령어를 입력하여 삭제 하려는 폴더가 아닌 전체 영역에 대한 삭제 명령을 날려버렸다고 한다. 본인이 삭제하려는 폴더뿐만 아니라, 다른 폴더들까지 실시간으로 삭제되는 것을 보면서 뭔가 잘못되었다는 것을 깨달은 그는 급하게 해당 명령을 정지시켰고, 우리가 사용하는 리소스들이 이름 내림차순으로 삭제되었다. 총 6개의 폴더가 삭제되었고, 당황하여 스스로 해결해 보려고 했지만 해결하지 못하였고, 개발팀 전체..

[ WEB ] HTTP Header(헤더) - 1 HTTP 헤더란 무엇일까? HTTP 헤더는 클라이언트와 서버가 요청 / 응답으로 부가적인 정보를 전송할 수 있도록 해주는 역할을 한다. 대.소문자를 구분하지 않는 이름과 콜론 (:) 다음에 오는 값(줄 바꿈 X)으로 이루어져 있으며 값 앞에 붙은 빈 문자열은 무시되며, 필요시 임의의 헤더를 추가할 수 있다. HTTP 헤더 필드 명 확인하기 HTTP 헤더의 분류 - General 헤더: 메시지 전체에 적용되는 정보로 요청 / 응답에서 모두 사용되지만 콘텐츠 자체에는 적용되지 않는 헤더로, Connection, Date, Cache-Control 등이 있다. - Request 헤더: 패치될 리소스나 클라이언트에 대한 정보를 포함하는 요청 정보 헤더로, User-Agent, Cookie, Referer 등이 ..

[ JavaScript ] async await 문법 ES8에서 간단하고 가독성 좋게 비동기 처리를 동기처럼 동작하도록 구현할 수 있는 async/await가 등장했다. async/await는 프로미스를 기반으로 동작하며, async/await를 사용하면 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다. async 함수는 async 키워드를 통해 정의하고, 프로미스를 사용하여 결과를 반환한다. async function asyncCall() { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); // expected output: "resolved" } asyncCall(); await 키워드는..

[ WEB ] Cookie에 대한 정리 글 Cookie 란? HTTP쿠키(웹 쿠키 또는 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로, 브라우저는 해당 데이터 조각들을 저장해 놓았다가, 동일한 서버에 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용하며, 이를 사용하여 stateless인 HTTP 프로토콜에서 상태 정보를 기억하여 사용자의 로그인 상태를 유지할 수 있다. 쿠키는 Key=value 형태로 이루어져 있다. 타입은 String이고, 공간 제약이 있어서 4KB 이상 저장이 불가능하다. Set-Cookie 는 서버에서 클라이언트(사용자 브라우저)로 쿠키를 전송하기 위해 사용한다. (응답) Set-Cookie: = 쿠키의 특징 - 쿠키는 ..

[ JavaScript / Promise ] 자바스크립트의 Promise에 대하여 자바스크립트는 싱글 스레드 방식으로 동작하는 언어이기 때문에 동기 방식으로 태스크를 처리한다. 그래서 비동기 방식으로 처리를 하려면 과거에는 주로 콜백 패턴을 사용했는데, 콜백 패턴은 콜백 헬로 인해 가독성이 좋지 않고 에러 처리 및 여러 개의 비동기 처리를 한번에 하기도 힘들다는 단점이 있기 때문에 ES6에서 도입된 Promise를 이용하면 이러한 단점들을 보완하며 비동기 처리를 가능하게 한다. 비동기 함수란? 작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 시작하여 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 하는 기술로 작업이 완료되면 프로그램이 결과를 제공한다. 이 때문에 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결괴를 외부로 반환하거나 상위 스코프의..

이전 1 2 3 4 5 6 7 ··· 10 다음

티스토리툴바