전체 글

SPA(Single Page Application)는 빌드 후 정적 파일 형태이기 때문에 별도에 서버의 로직 없이 파일만 서빙하면 됨으로 정적 파일은 S3에 올리고 CloudFront를 통해 CDN을 통해 콘텐츠를 빠르고 안정적으로 전송한다.CDN이란(Content Delivery Network)콘텐츠를 전세계 여러 서버에 복제해놓고 사용자에게 더 빠르게 전달해주는 네트워크 시스템.S3 버킷 생성S3 버킷 생성퍼블릭 엑세스 차단 설정빌드 결과물 업로드CloudFrontAWS console CloudFront -> 배포 -> 배포 생성원본 -> 생성한 S3 버킷 선택 (만약 S3안에 폴더링이 되어 있을 경우 Origin path에 해당 폴더명 작성 ex) /admin )원본 엑세스 -> 원본 엑세스 제어 ..

서론Next.js로 개발하던 와중에 반응형 결과물을 확인하기 위해 IOS Safari로 접속하였는데 폰트 굵기가 내가 의도한것보다 더 굵게 나오는 상황을 맞딱드렸다. 크롬이나 mac으로 사파리로 열면 문제가 없는데 유독 핸드픈으로 접속할 경우에만 이상한 상황이 발생하였다.해결 방법해당 문제를 좀 찾아보니 IOS Safari에서는 폰트 합성이 문제가 되고 있다는것을 알게 되었고 특히 font-weight:600 & 700에서 문제가 발생하고 있다는것을 알게되었습니다. 해당 문제의 해결방법은 css 속성 중 브라우저가 폰트 합성을 막는걸로 해결이 되었습니다.body, html { font-synthesis: none;} font-synthesis 속성은 지정된 글꼴 패밀리에 굵게, 기울임꼴, 소문자 및/또..

호이스팅이란?호이스팅이란 사전적 의미로 끌어 올리기라는 의미입니다. 자바스크립트에서도 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 현상입니다.변수 호이스팅변수는 var, let, const로 선언하는데 호이스팅되는 방식이 다릅니다. 변수의 생성과정은 선언 단계, 초기화 단계, 할당 단계 3가지입니다.var: 호이스팅과 동시에 undefinde로 변수를 초기화let, const: 선언 자체는 호이스팅은 되었지만 초기화가 되지 않으므로 초기화 전에 호출하게 되면 TDZ라는 일시적인 사각지대에 존재하기 때문에 참조에러가(ReferenceError) 발생console.log(a); // undefinedvar a = 1;console.log(b); //..

쿠키와, 로컬스토리지, 세션스토리지세개 모두 웹 브라우저에서 데이터를 저장하는 기술로 각각의 목적과 사용 방식이 다릅니다.Cookie클라이언트와 서버 간의 통신에 이용되는 정보사용자 정보, 특정 값 등등http 요청 시 Header에 담아서 보냄쿠키정책을 서버, 클라이언트 모두 설정 가능 (단 클라이언트에서 설정 시 제한적)설정된 만료 시간에 따라 쿠키 유지 기간을 제어할 수 있음이용 예시자동 로그인팝업 등 이벤트 성 UI 비노출 기간을 설정 가능다크모드, 언어 등 사용자 설정을 저장보안 및 주의사항XSS(Cross-site Scripting) 악성 스크립트가 브라우저에서 실행되어 쿠키 데이터 읽기 가능하거나 인증 토큰이나 세션 쿠키 탈취 가능하다. 해당 기능에 대해 대처하기 위해 HttpOnly속성을 ..

자바스크립트의 Proxy객체란?프록시의 사전적 정의는 "대리인", "대리"라는 뜻이다. 자바스크립트에서도 뜻 그래도 대리인의 역할을 해주는데 객체의 여러 동작을 가로채(트랩) 다시 정의하는것을 뜻합니다. 해당 기능은 ES6에 새로 추가되었습니다. Vue 2.x 버전에서 객체의 수정 및 삭제를 Object.defineProperty의 getter와 setter를 사용하여 구현하였지만 프로퍼티 변경 시 추적이 어렵다는 이유로 Vue 3.x 부터는 Proxy를 도입했습니다.사용법target은 Proxy의 대상이 되는 객체handler는 대상이 되는 객체의 여러 트랩을 정의const proxy = new Proxy(target, handler);트랩 핸들러 종류객체의 속성 트랩 메서드메서드작동 시점get속성을 ..

env 파일env 파일은 환경 변수를 정의하고 관리하기 위한 파일입니다. 개발 환경, 테스트 환경, 운영 환경 간의 설정값을 분리하여 사용합니다.환경변수 작성법API_URL=https://test.comNEXT_PUBLIC_APP_NAME=DEV_APP런타임 시에 값을 가져와야 할 경우는 NEXT_PUBILC_ 라고 시작해야 합니다.Next.js에서 env 파일 우선 순위.env.local.env.[NODE_ENV].local.env.[NODE_ENV].env[NODE_ENV]에 들어올 수 있는 값은 production, development, test 그 외에 staging 등등만약 동일한 환경변수가 각 파일마다 있다고 가정했을 때 최종 .env.local 파일에 있는 환경변수로 덮어쓰여집니다.실행 &..