전체 글

[Vite] aws-sdk를 사용한 프로젝트의 빌드 실패 ('request' is not exported...)

오류 'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/xxxxx/node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js React viteJS로 작업한 프로젝트를 빌드 시 위와 같은 오류가 발생했다. AWS Amplify 라이브러리와 관련된 이슈로 보여진다. 해결 방법 // vite.config.js import { defineConfig } from "vite"; export default defineConfig({ resolve: { alias: { "./runtimeConfig": "./runti..

[CSS] transfrom 스타일이 적용된 요소의 자식요소에서 position: fixed가 적용되지 않는 이유

position: fixed 와 transform transfrom 스타일이 적용된 요소의 자식요소에서 position: fixed를 적용시키면 의도한대로 동작하지 않는 것을 볼 수 있다. 보통 뷰포트를 기준으로 요소를 위치시키기 위해 fixed를 사용하지만, transfrom이 적용된 요소의 내부에서는 transfrom 요소를 기준으로 배치가 되게 된다. 이유를 w3 공식문서에서 확인할 수 있었다. For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for..

[Next.js] Dynamic Imports

Next.js에서의 Lazy Loading Lazy Loading은 애플리케이션에서 요구되는 리소스를 필요할 때만 로드해서 로딩 속도를 개선하고 사용자 경험을 향상시키는 전략이다. Next.js 에서 Lazy Loading 을 적용하는 방법으로는 두 가지가 있다. 1. Dynamic Imports 2. React.lazy()와 Suspense React.lazy()와 Suspense React.lazy()는 React에서 제공하는 내장 기능으로 코드를 분할하여 필요한 시점에 비동기적으로 로드할 수 있도록 한다. 이와 함께 Suspense는 lazy 컴포넌트가 로드 되는 동안 대체해서 보여줄 요소를 지정할 수 있다. React 프로젝트 시 React Router 라이브러리와 함께 사용해서 페이지 전환 로딩..

[Next.js] import 경로에 @별칭 사용하기

import 절대 경로 & 경로 별칭 next.js 프로젝트 시 tsconfig.json 옵션을 통해 경로를 별칭으로 지정하여 가독성을 높일 수 있다. import 절대 경로 // tsconfig.json / jsconfig.json { "compilerOptions": { "baseUrl": "./src" } } tsconfig.json 또는 jsconfig.json 파일에서 baseUrl 옵션에 절대경로로 가져올 경로를 작성한다. [ic]"baseUrl":"./src"[/ic] 작성 시 아래와 같이 import 경로를 사용할 수 있다. import 경로 별칭 // tsconfig.json / jsconfig.json { "compilerOptions": { "paths": { "@/*": ["./sr..

AWS S3로 CRA 배포 + GitHub Actions로 자동화 (2)

🏝 GitHub Actions로 배포 자동화 프로젝트에 CICD.yml 파일 생성 루트 디렉토리에 .github/workflows 폴더를 생성한다. 해당 경로에 CICD.yml 파일을 생성하고 원격에 업로드한다. name: CI/CD on: push: branches: - main workflow_dispatch: jobs: cicd: runs-on: ubuntu-latest steps: - uses: actions/checkout@main - run: npm ci - run: npm run build - name: deploy to s3 uses: jakejarvis/s3-sync-action@master with: args: --delete env: AWS_S3_BUCKET: ${{ secrets.A..

AWS S3로 CRA 배포 + GitHub Actions로 자동화 (1)

🏝 정적 웹 사이트 배포 AWS 콘솔에서 S3 서비스 사용 AWS 콘솔로 이동한다. https://us-east-1.console.aws.amazon.com/console/home https://us-east-1.console.aws.amazon.com/console/home us-east-1.console.aws.amazon.com 검색을 통해 S3 서비스로 이동한다. 버킷 만들기 좌측 메뉴에서 버킷 탭으로 이동한다. 여기서 버킷은 하나의 저장소 구획이라고 볼 수 있다. 버킷 만들기를 통해 버킷을 생성한다. 버킷 이름와 AWS 리전 세팅한다. 객체 소유권은 권장하는 세팅인 ACL 비활성으로 둔다. 버킷의 퍼블릭 액세스 차단 설정으로 이동한다. 프로젝트 배포를 위해 차단을 해제한다. 버킷 만들기를 통해 ..

[원티드 프리온보딩 인턴십] 숏에세이

지원하고 싶은 참가기업은 어디인지 지원하고 싶은 참가 기업은 스위치원이다. 비대면 온라인 환전 서비스를 제공하는 회사로 프론트엔드 개발자를 채용 중이었다. 프로젝트에서 타입스크립트와 리액트를 사용하는 점이 좋았고, 읽기 좋은 코드를 지향하고 코드 리뷰를 하는 개발 문화가 존재한다는 점이 기대된다. 프리온보딩 인턴십에서 본인이 얻고 싶은 것 기술 면접 준비, CS 스터디, 리액트 심화 문법 공부 등 취업 전에 필요한 부분들을 짧은 시간 동안 크게 성장할 수 있는 좋은 기회인 것 같아서 지원하게 되었다. 또한 같은 관심사를 가진 동료들과 인연을 맺고 함께 공부하며 취업 준비를 하는 경험을 얻을 수 있을거라고 기대하고 있다. 최종합격까지 몇 개 이상의 이력서 작성 및 제출할 건지 각오 원티드 프리온보딩 인턴십..

Node.js로 CRA 시 기본 파일과 폴더 한 번에 세팅하기

리액트를 공부하면서 CRA 때마다 반복적으로 기본 파일을 생성하거나 폴더링 작업을 하는 것이 시간이 아깝다는 생각이 들었다. 매 번 component 구조나 파일이 바뀌었기 때문에 파일을 복사 붙여넣기도 애매했는데, 이 작업들을 Node.js의 file system을 이용해서 자동화를 해보았다. file system 모듈 import Node.js에 내장되어있는 파일시스템을 불러온다. const fs = require('fs'); 디렉토리 세팅 생성할 디렉토리 경로를 array에 담아 작성해준다. const arrDirectory = [ 'src/apis', 'src/components/Shared/BtnLike', 'src/components/Shared/NotFound', 'src/components..

[Deep Dive] 42장 비동기 프로그래밍

동기 처리와 비동기 처리 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고 한다. setTimeout 함수는 일정 시간이 경과한 이후에 콜백 함수를 호출하지만 setTimeout 이후의 태스크를 블로킹하지 않고 곧바로 실행한다. 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다. setTimeout과 setInterval, HTTP요청, 이벤트 핸들러는 비동기 처리 방..

[Deep Dive] 22장 this

this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 함수를 호출할 때 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. // 전역에서 this → 전역 객체 window를 가리킨다. console.log(this); //window // 일반 함수 내부의 this → 전역 객체 window를 가리킨다. function test() { console.log(this); // window } // stric mode가 적용된 일반 함수 내부의 ..