์ ์ฒด ๊ธ

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...)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F0QGjx%2Fbtsh2FEgtPp%2FKKoWy598N6NVolyrTQSdSK%2Fimg.png)
[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 ๊ฒฝ๋ก์ @๋ณ์นญ ์ฌ์ฉํ๊ธฐ](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvKKcb%2FbtsfWUiXr4j%2FbdL8t97oJ7zKWfSZhKZya0%2Fimg.png)
[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 ๋นํ์ฑ์ผ๋ก ๋๋ค. ๋ฒํท์ ํผ๋ธ๋ฆญ ์ก์ธ์ค ์ฐจ๋จ ์ค์ ์ผ๋ก ์ด๋ํ๋ค. ํ๋ก์ ํธ ๋ฐฐํฌ๋ฅผ ์ํด ์ฐจ๋จ์ ํด์ ํ๋ค. ๋ฒํท ๋ง๋ค๊ธฐ๋ฅผ ํตํด ..
![[์ํฐ๋ ํ๋ฆฌ์จ๋ณด๋ฉ ์ธํด์ญ] ์์์ธ์ด](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKhIjg%2FbtrYI44KC0e%2FbdKZ5qsIbArT5wfEL4yB71%2Fimg.png)
[์ํฐ๋ ํ๋ฆฌ์จ๋ณด๋ฉ ์ธํด์ญ] ์์์ธ์ด
์ง์ํ๊ณ ์ถ์ ์ฐธ๊ฐ๊ธฐ์ ์ ์ด๋์ธ์ง ์ง์ํ๊ณ ์ถ์ ์ฐธ๊ฐ ๊ธฐ์ ์ ์ค์์น์์ด๋ค. ๋น๋๋ฉด ์จ๋ผ์ธ ํ์ ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ํ์ฌ๋ก ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ฅผ ์ฑ์ฉ ์ค์ด์๋ค. ํ๋ก์ ํธ์์ ํ์ ์คํฌ๋ฆฝํธ์ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ ์ ์ด ์ข์๊ณ , ์ฝ๊ธฐ ์ข์ ์ฝ๋๋ฅผ ์งํฅํ๊ณ ์ฝ๋ ๋ฆฌ๋ทฐ๋ฅผ ํ๋ ๊ฐ๋ฐ ๋ฌธํ๊ฐ ์กด์ฌํ๋ค๋ ์ ์ด ๊ธฐ๋๋๋ค. ํ๋ฆฌ์จ๋ณด๋ฉ ์ธํด์ญ์์ ๋ณธ์ธ์ด ์ป๊ณ ์ถ์ ๊ฒ ๊ธฐ์ ๋ฉด์ ์ค๋น, 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์ฅ ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA2zg0%2FbtrQr7hNlSR%2Fdh3ciZYhZ86IEQrubUqEGk%2Fimg.jpg)
[Deep Dive] 42์ฅ ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ
๋๊ธฐ ์ฒ๋ฆฌ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ํ ๋ฒ์ ํ๋์ ํ์คํฌ๋ง ์คํํ ์ ์๋ ์ฑ๊ธ ์ค๋ ๋ ๋ฐฉ์์ผ๋ก ๋์ํ๋ค. ์ฑ๊ธ ์ค๋ ๋ ๋ฐฉ์์ ํ ๋ฒ์ ํ๋์ ํ์คํฌ๋ง ์คํํ ์ ์๊ธฐ ๋๋ฌธ์ ์ฒ๋ฆฌ์ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ ํ์คํฌ๋ฅผ ์คํํ๋ ๊ฒฝ์ฐ ๋ธ๋กํน(์์ ์ค๋จ)์ด ๋ฐ์ํ๋ค. ํ์ฌ ์คํ ์ค์ธ ํ์คํฌ๊ฐ ์ข ๋ฃํ ๋๊น์ง ๋ค์์ ์คํ๋ ํ์คํฌ๊ฐ ๋๊ธฐํ๋ ๋ฐฉ์์ ๋๊ธฐ ์ฒ๋ฆฌ๋ผ๊ณ ํ๋ค. setTimeout ํจ์๋ ์ผ์ ์๊ฐ์ด ๊ฒฝ๊ณผํ ์ดํ์ ์ฝ๋ฐฑ ํจ์๋ฅผ ํธ์ถํ์ง๋ง setTimeout ์ดํ์ ํ์คํฌ๋ฅผ ๋ธ๋กํนํ์ง ์๊ณ ๊ณง๋ฐ๋ก ์คํํ๋ค. ํ์ฌ ์คํ ์ค์ธ ํ์คํฌ๊ฐ ์ข ๋ฃ๋์ง ์์ ์ํ๋ผ ํด๋ ๋ค์ ํ์คํฌ๋ฅผ ๊ณง๋ฐ๋ก ์คํํ๋ ๋ฐฉ์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ผ๊ณ ํ๋ค. setTimeout๊ณผ setInterval, HTTP์์ฒญ, ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ฐฉ..