분류 전체보기 (49) 썸네일형 리스트형 [AWS] AWS를 이용한 정적 웹페이지 호스팅 및 도메인 연동 방법 (S3 + CloudFront + Route53을 이용한 프론트 프로젝트 배포 방법, 배포 후 403 뜨는 경우 해결 방법) 정적 웹페이지 배포하기 고정된 데이터를 그대로 보여주는 정적 웹페이지(ex. 회사 소개 페이지, 포트폴리오 페이지...)는 AWS를 이용해 간단하게 배포가 가능하다. AWS의 S3와 CloudFront 서비스를 이용해 웹페이지를 배포하고, Route53으로 개인 도메인을 연동하는 방법까지 알아보자! 배포 방법 1. S3 버킷 생성 및 설정 1-1. 우선 AWS 콘솔에 로그인하여 S3 서비스에 접속한 다음 [버킷 만들기] 버튼을 클릭한다. 1-2. 버킷 이름과 AWS 리전을 설정해 준다. AWS 리전은 가까운 곳으로 설정해 주는 것이 좋다. 1-3. 버킷의 퍼블릭 액세스 차단 설정에서 모든 퍼블릭 액세스 차단 체크 박스를 해제해 준다. 우리는 정적 웹 사이트 호스팅을 할 예정이기 때문에 퍼블릭 액세스가 필.. [Heroku] 헤로쿠 배포 시 webpack: not found 에러 해결 방법 (devDependencies와 dependencies) 문제상황 오랜만에 예전 프로젝트들을 확인하던 중, 헤로쿠로 배포해 둔 '북샵' 쇼핑몰 서버가 내려간 것을 발견했다. 어차피 최근 헤로쿠 무료 사용 기간이 종료되어서 서버를 옮기는 작업을 해야 했던 프로젝트라 옮기기 전 문제가 없는지 확인하려 프로젝트를 다시 한번 서버에 올려보던 중이었는데, 이상하게 무료기간과 상관없는 에러인 웹팩을 찾을 수 없다는 'webpack: not found'라는 메시지가 나타났다. 웹팩이 분명히 있는데 없다고요..? 이 전까지는 서버에 잘 올라갔는데... 뭐가 문제일지 알아보자 원인 내 프로젝트의 package.json에는 헤로쿠 서버에 클라이언트 파일을 올리기 전, 클라이언트 빌드 명령어를 아래와 같이 지정해 두었고, "heroku-postbuild": "cd client &.. 2022년 회고 (2년차 주니어 프론트 개발자의 회고) 처음으로 개발자로서 온전한 1년을 보낸 2022년을 기념하기 위해 그리고 지난날을 되돌아보며 셀프 칭찬과 동기부여도 하고, 아쉬웠던 점과 더 노력해야 할 점을 찾아 개선도 할 겸, 2022년 회고를 작성해보려고 한다. 그렇다면 시작! 2022 서비스 개발 2022년 처음으로 맡은 프로젝트는 서비스 전체의 UI 개편 작업이었다. 사실 원래는 UI 개편이 아닌 특정 기능 고도화 프로젝트를 맡을 예정이었지만, 팀 내에 기획자와 디자이너가 없어 개발자가 주도적으로 기획과 개발을 동시에 진행해야 했던 당시 우리 팀 상황을 미루어보았을 때... 아직 입사한 지 얼마 되지 않아 도메인 지식이 깊지 않던 내가, 기능에 대한 이해와 깊은 도메인 지식이 필요한 기능 고도화 프로젝트를 담당하는 것이 걱정되기도 했고, 동시에.. [Webpack5] webpack-dev-server 변경 사항 바로 반영되지 않을 때, 개발모드에서 live reloading, Hot Module Replacement, 새로고침 안 될 때. (웹팩 watchOptions) 타입스크립트 공부를 위해 typescript + react + wepack 프로젝트 보일러 플레이팅 작업을 하던 중 평소처럼 설정한 웹팩이 평소와 다르게 동작하는 일이 일어났다. (도대체 왜 🤦🏻♀️) 웹팩 개발 서버에 작업 변경사항이 바로 적용되지 않는다 ? 문제 우리 webpack-dev-server는요... 개발 중 소스 코드의 변경 사항을 바로 적용해주어 변경될 때마다 매번 다시 웹팩 명령어를 실행하지 않아도 알아서 다 해주는! 아주 유용한 도구라죠... 그런데 가장 핵심인 이 기능이 동작하지 않는다. 개발자 도구를 열어보면, 콘솔에 [webpack-dev-server] Hot Module Replacement enabled. [webpack-dev-server] Live Reloading e.. [AWS] AWS 과금 환불 받는 법, 환불 후기, 환불 기간 (feat. 눈물의 편지) AWS Certified Developer Associate 공부를 위해 aws 계정을 만들어... 퇴근 후 매일 같이 열심히 공부하던 어느 날... 충격적인 메일을 발견하게 된다. ??? 서둘러 AWS에 들어가보니.. 실습 후 다 삭제한 줄 알았던 ec2 인스턴스가 미처 확인하지 못한 region에서 돌아가고 있었다. (무려 5만원이 넘는 돈.. 얼른 환불 방법을 알아보자) AWS 환불 방법 1. 과금이 의심되는 서비스 먼저 종료하기 우선 aws에 접속해 로그인 한다. Billing Dashboard에 들어가 과금된 서비스를 확인한 후 해당 서비스들을 먼저 종료해준다. (미리 종료를 해야 더이상 과금도 안 되고... 호소가 더 쉬워집니다..) 2. 환불 문의 하기 상단의 물음표 메뉴를 클릭한 후 Sup.. [css] 사용자의 입력에 따라 높이가 조절되는 textarea 만들기 (input 줄바꿈하기, textarea 높이 자동 조절하기, textarea 아래에 여백 생길 때) input과 같은 모습을 하고 있지만, 그 형태를 유지하면서 줄바꿈을 할 수 있는 UI를 만들고 싶을 때 ? 자동으로 높이가 조절되는 textarea를 만들어 구현이 가능하다. 자동 높이 조절 textarea ? 기본적인 형태의 textarea는 고정된 높이를 가지고 높이 이상의 줄바꿈이 일어나면 스크롤이 생기는 방식으로 되어있다. 자동 높이 조절 textarea는 고정된 높이값 없이 사용자가 입력하는대로 줄바꿈에 따라 높이가 자동 조절되는 textarea다 자동 높이 조절 textarea 만들기 const textarea = useRef(); const handleResizeHeight = () => { textarea.current.style.height = 'auto'; //height 초기화 te.. [React] 리액트에서 Swiper.js 를 사용해보자. Swiper 슬라이드 사용예제, Navigation의 arrow 버튼 커스텀하기 스와이프 기능이 있는 슬라이드를 만들어야 할 때 유용한 Swiper 라이브러리를 리액트에서 사용하는 방법과 예제를 포스팅해보려고 한다 Swiper Swiper.js는 스와이프 기능이 있는 슬라이드 UI를 제공하는 라이브러리이다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 공식사이트의 Demos 에서 다양한 형태의 슬라이드를 확인할 수 있고 이 중에서 필요한 슬라이드를 선택해서 적용하면 되는데, 이번.. [JS] 모던 자바스크립트 - 12. 생성자 함수 생성자 함수 - new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 - 하나의 객체만을 생성하는 객체 리터럴 방식과 달리 생성자 함수는 동일한 프로퍼티 구조를 갖는 객체를 여러 개 생성 가능 - 일반 함수와 동일한 방법으로 함수를 정의하고 호출 시 new 연산자와 함께 호출하면 생성자 함수로 동작 - 생성자 함수는 일반적으로 파스칼 케이스로 명명 - new 연산자와 함께 호출하지 않으면 일반 함수로 동작 - 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴 생성자 함수의 인스턴스 생성 과정 1. 인스턴스 생성과 this 바인딩 - 런타임 이전에 실행 - 암묵적으로 빈 객체 생성 → 완성되진 않았지만 생성자 함수의 인스턴스 - 인스턴스는 this에 바인딩 2. 인스턴스 초기화.. [JS] 모던 자바스크립트 - 11. 프로퍼티 어트리뷰트 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 프로퍼티 어트리뷰트 - 프로퍼티의 상태를 나타내는 것 - 프로퍼티의 상태는 프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)을 말한다 - 자바스크립트 엔진이 프로퍼티를 생성할 때 프로퍼티 어트리뷰트를 기본값으로 자동 정의함 - 자바스크립트 엔진이 관리하는 내부슬롯이므로 직접 접근 불가능 프로퍼티 디스크립터 객체 - Object.getOwnPropertyDescriptor 메서드, Object.getOwnPropertyDescriptors 메서드로 간접적으로 프로퍼티 어트리뷰트를 확인 가능함 - 위 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립.. [JS] 모던 자바스크립트 - 10. var, let, const var - ES5까지 변수를 선언할 수 있는 유일한 방법이었음 - 중복 선언이 가능, 중복 선언 시 변수 값을 재할당하며, 초기화문이 없는 경우에는 무시된다 var x = 1; var y = 1; // 초기화문이 있는 선언문은 값 재할당. var x = 100; // 초기화문이 없는 선언문은 무시. var y; console.log(x); // 100; console.log(y); // 1; - 함수 코드 블록만을 지역 스코프로 인정, 함수 외부에서 var 키워드로 선언한 변수는 코드 블럭 내에 선언해도 모두 전역 변수 var x = 1; if(true){ // 여기서 선언한 변수는 함수 내부가 아니기 때문에 전역변수 var x = 10; } console.log(x); // 10 - 변수 호이스팅에 의.. 이전 1 2 3 4 5 다음
