분류 전체보기

이제 가비아에서 도메인을 하나 사고 이것을 aws Route53에 세팅해 보겠습니다.가비아에 들어가서 아무거나 검색하여 가장 싼 도메인 하나를 구입합니다. 이렇게 500원짜리 저렴한 도메인들이 있습니다. (저는 이미 예전에 사둔 lee-seung-hun.com을 사용할거에요.)이제 My 가비아로 이동해서관리 버튼을 클릭합니다. 그리고 네임서버 설정 버튼을 클릭해줍니다.이제 aws의 Route53으로 들어갑니다호스팅 영역으로 들어와 호스팅 영역 생성 버튼을 클릭합니다.여기서 도메인 이름을 입력하고 생성합니다.이제 여기서 값/트래픽 라우팅 대상에서 1,2,3,4 값을가비아 네임서버 설정에서 복붙을 해 1차, 2차, 3차, 4차에 넣어줍니다.넣을때 뒤에 . 빼고 넣어야해요 !넣을때 뒤에 . 빼고 넣어야해요 !..

React, Vue, Solid 같은 웹을 간단하게 배포를 하고 자동화를 하는 방법에 대해서 누구나 따라 할 수 있게 글을 작성해 보겠습니다.코드는 이 코드를 사용했습니다. Rspack, Solidjs를 사용했지만 React, Vue 등 다양한 기술에도 적용 가능합니다.S3 s3를 세팅해 보겠습니다. 제가 따로 언급하지 않는 부분들은 기본값으로 두시면 됩니다.버킷 이름은 web-baepo로 지정했습니다.모든 퍼블릭 액세스 차단을 해제합니다. 이제 S3 Bucket을 만들고 상세 페이지로 들어가 줍니다. 속성 텝으로 들어가정적 웹 사이트 호스팅에서 편집 버튼 클릭하여 들어가 줍니다.활성화 라디오를 체크하고 변경사항 저장을 눌러 적용을 합니다.이번에는 권한 텝으로 들어갑니다.버킷 정책에서 편집 버튼을 누르고..

회사에서 React Native를 사용해서 거의 사용해본적이 없어서 간단하게 정리하면서 사용해보려고 한다. 사실 공식문서 보면서 이것저것 해보는거 기록하는용이라 별다른 내용은 없다.코드들은 여기에 정리했다.이걸 왜 써야하나 ?웹에서는 브라우저 히스토리에 스택으로 쌓이는 구조다. 하지만 React Native에서는 이런 히스토리 관리가 내장되어 있지 않아서 따로 구현을 해야하는데 이걸 잘구현 해놓은것이 React Navigation이다세팅은 공식문서를 보고 하면 쉽게 쉽게 할 수 있다.Navigation 등록App.tsx에import * as React from 'react'import { NavigationContainer } from '@react-navigation/native'import { cre..

replace는 push와 다르게 브라우저에 새로 히스토리가 쌓이지 않습니다. 그쵸 ?근데 오늘 신기한 거를 봤습니다. 코드부터 볼까요 ?import { useRouter } from "next/router";export default function Home() { const router = useRouter(); const handleClick = () => { router.replace("/blog"); }; return 블로그 가기;}그리고 next.config.js를 확인해 보겠습니다./** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, rewrites: async () => { ..

(문제 링크)[https://typehero.dev/challenge/generic-type-arguments]문제type GroceryStore = unknown;type GroceryItem = unknown;type CapreseSalad = unknown;이 타입을 변형하여import { Expect, Equal } from 'type-testing';type test_CapreseSaladName = Expect>;type test_CapreseSaladPrice = Expect>;type test_CapreseSaladInStock = Expect>;type test_KrogerDetroit = Expect, { name: 'Kroger', city: 'Detroit' }>>;type tes..

문제 번역왜 Default Generic Arguments이 필요할까요 ?기술적으로 말하자면, 어떤 프로그램도 무조건 기본 파라미터가 필요하지 않습니다. 이건 개발자를 위한 편의기능이에요.가끔 특정 파라미터를 위한 값을 생각하고 있고, 라이브러리 사용자에게 반복적으로 같은 값을 제공하도록 강요하고 싶지 않을때가 있습니다. 이때 Default Generic Arguments는 유용합니다.어떻게 Default Type Arguments를 만들 수 있을까요 ?첫번째 : 함수의 기본값에 대해서 다시 살펴보기일반적인 로깅함수를 살펴보겠습니다. 이 함수는 함상 로그를 위해 message가 필요하지만, log level은 옵션으로 되기를 원합니다.type LogLevel = 'debug' | 'info' | 'not..

문제 번역Hello, World!Type Challenges에서는 타입 시스템 자체를 사용해 검증을 합니다.이 챌린지에서는 밑에 코드를 타입 체크 오류 없이 테스트를 통과시키게 만들어야 합니다.// expected to be stringtype HelloWorld = any// you should make this worktype test = Expect>Take the Challenge 버튼을 클릭해 코딩을 시작하세요! Happy Hacking!이 챌린지는 Type Challenges에 의해 포팅 되었으며, antfu에 의해 작성되었습니다.문제type HelloWorld = any // expected to be a string이것을import type { Equal, Expect, NotAny } f..

오늘은 SEO, 그중에서도 구글 검색 엔진이 하는 일과 최적화에 대해서 공부한 것을 정리해 보겠습니다.SEO란 ?SEO는 Search Engine Optimization의 줄임말로 검색 엔진 최적화을 의미합니다. 쉽게 말해서 우리의 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 것입니다.SEO를 왜 해야 할까 ?SEO는 가장 효율적인 마케팅이라고 생각합니다. 구글에 검색을 했을 때 검색 결과에 높게 표시될 경우 유저들의 트래픽이 증가할 확률이 매우 높습니다.이 사진을 분석해 보면 검색결과 1,2,3등을 합친 게 50%가 넘는 모습입니다.광고 달면 그게 더 높게 나오는데 광고로 하는 게 좋지 않을까 ?물론 돈으로 광고를 달면 아예 검색 결과에 안 나오는 것보다는 괜찮겠지만 유저들은 심리적으로 맨위에 있..

저번에 React 19 + Next js 15 + Panda Css 의 기본적인 세팅을 했습니다. 이제 추가적인 세팅을 하고 서비스에서 사용할 SVG들을 편하게 사용할 수 있는 SVGR이라는 라이브러리를 사용해 보겠습니다.SVGR이란 ?공식문서 첫 화면에서 바로 확인할 수 있는대요. Transform SVGs into React components SVG를 React Component로 바꿔주는 라이브러리입니다.SVGR 설치pnpm i -D @svgr/cli이 명령어로 설치를 해줍니다.SVG 명령어 적용 cli를 사용하기 위한 명령어입니다. 저는 이렇게 구성을 했는데요. npx @svgr/cli --typescript --no-index --jsx-runtime automatic --out-dir ./s..

오늘은 브라우저의 동작 원리에 대해서 살펴볼 예정입니다. 프론트엔드 개발자 면접에서도 많이 나오는 질문이기도 하고요. 우선 브라우저가 먼지 먼저 살펴볼까요 ?브라우저란 ?인터넷을 통해 웹 페이지를 탐색하고 보는 데 사용되는 소프트웨어입니다.브라우저의 내부 구성다들 많이 보신 기억이 있는 사진일 거 같은데요.브라우저는유저 인터페이스 : 유저의 상호작용을 받는 부분으로 브라우저에 위쪽에 보면 뒤로, 앞으로 가기 버튼, 새로고침, 주소 입력창, 북마크 등이 있는 영역입니다.브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 엔진입니다.렌더링 엔진 : 요청받은 내용을 화면에 표시합니다.네트워킹 : 네트워크 호출을 하고 통신, 보안의 역할도 수행합니다.자바스크립트 해석기 : 자바스크립트 코드..