전체 글

Jekyll 테마를 사용한 Github 블로그 만들기 (window)

Ruby와 Jekyll을 이용하여 GitHub Pages에서 블로그를 설정하는 방법을 단계별로 살펴본다. Ruby 설치먼저, Ruby를 설치해야 한다. Ruby의 공식 설치 프로그램인 RubyInstaller를 방문하여 권장하는 최신 버전의 Ruby와 Devkit을 다운로드하고 설치한다. https://rubyinstaller.org/downloads/ 설치가 완료되면 커맨드 창을 열고 다음 명령어를 입력하여 Ruby가 제대로 설치되었는지 확인한다. 버전 정보가 출력된다면 설치가 성공적으로 완료된 것이다.ruby -v ruby 3.3.4 (2024-07-09 revision be1089c8ec) [x64-mingw-ucrt] Jekyll 설치Ruby 설치가 완료되면, Jekyll과 Bundler를 설치할..

[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요청, 이벤트 핸들러는 비동기 처리 방..