https://1-blue.github.io/FE 개발자, FE 개발자의 블로그, 1-blue의 블로그, 1-blue 2023-06-05T09:21:25+09:00 박상은 https://1-blue.github.io/ Jekyll © 2023 박상은 /assets/img/favicons/favicon.ico /assets/img/favicons/favicon-96x96.png 2023-06-05T00:44:00+09:00 2023-06-05T00:44:00+09:00 https://1-blue.github.io/posts/deploy/ admin

해당 포스트는 AWS-EC2, nginx, certbot을 이용한 배포 방법에 대한 포스트입니다. 깊은 이해도를 갖고 설명하기 보다는 구글링을 통해서 찾은 방법들을 한곳에 모아서 정리하는 포스트입니다.( nginx, certbot, ssl이 무엇인지는 이후에 공부하고 따로 포스팅할 예정입니다… 🥲 ) 🐊 AWS-EC2 무료로 사용하기 위해서 AWS-EC2 프리티어를 이용해서 인스턴스를 생성하면 됩니다. 다른 블로그들에서 상세하게 설명해주기 때문에 간단한 부분은 넘어가겠습니다. 0️⃣ 보안 그룹 보안 그룹에서 아웃바운드 규칙은 모두 열어주고, 인바운드 규칙에서는 HTTPS, SSH의 접근 권한을 열어주는 게 좋습니다. ( 단, HTTPS가 적용되기 전에 확인하고 싶다면 HTTP를 열어...

2023-06-02T07:47:00+09:00 2023-06-02T07:47:00+09:00 https://1-blue.github.io/posts/font-face/ admin

해당 포스트는 웹에서 @font-face를 이용해 폰트 및 굵기 적용 방법에 대한 포스트입니다. 폰트는 시작하는 시점에 메인, 서브, 특수 폰트 세 가지 정도를 정하고 사용하는 것이 좋은 것 같습니다.개발 도중에 적용하면 레이아웃이 달라지거나 굵기가 원하는 대로 적용이 안 되는 경우가 발생합니다 🥲 ❓ 작성 이유 최근에 blegram라는 개인 프로젝트는 하는 도중에 폰트를 적용하게 되었습니다. Google Fonts만 사용하다가 눈누라는 사이트를 알게 되었고 폰트를 적용하면서 굵기가 적용이 안되는 문제가 있어서 원인을 찾아보다가 알게 되어서 기록하는 포스트입니다. 🗜️ 폰트 적용 방법 눈누에서 원하는 폰트에 들어가서 우측 상단에 있는 웹폰트로 사용부분을 복사해서 css에 붙여넣기를 ...

2023-05-07T15:43:00+09:00 2023-06-04T15:03:03+09:00 https://1-blue.github.io/posts/next-13/ admin

해당 포스트는 blegram이라는 솔로 프로젝트를 만들면서 사용했던 Next.js 13의 SSR과 Fetch API에 대한 내용을 기록하는 포스트입니다. 아직 Next.js 13에 대해 공부가 부족한 부분이 많아서 잘못된 내용이 포함되어있을 확률이 높습니다…🥲지금 기록해두지 않으면 나중에 지금의 경험을 잊을 것 같아서 기록하는 용도로 작성했습니다. 🔥 사용 0️⃣ “use client” Next.js 13에서는 기본적으로 컴포넌트를 SSR을 하고 "use client"을 최상위에 작성한 컴포넌트는 CSR을 합니다. CSR을 적용해야하는 컴포넌트는 클라이언트에서만 사용할 수 있는 기능을 사용하는 컴포넌트입니다. 대표적으로 use를 붙이는 훅을 사용하는 컴포넌트입니다. 처음에는 이 부...

2023-04-23T19:17:00+09:00 2023-04-23T19:17:00+09:00 https://1-blue.github.io/posts/react-query/ admin

해당 포스트는 blegram이라는 솔로 프로젝트를 만들면서 사용했던 react-query에 대한 내용을 기록하는 포스트입니다. 🧨 옵션 값 아래의 옵션 값들은 공통적으로 사용할 수 있는 옵션 값이고, 구체적인 요청에서 다시 설정할 수 있습니다. ( ChatGPT가 번역한 설명 ) cacheTime: 데이터가 캐시되어 유지되는 시간을 결정 staleTime: 캐시된 데이터가 만료되기 전에 해당 데이터를 사용할 수 있는 시간을 설정 refetchOnWindowFocus: 윈도우 포커스를 되찾았을 때 자동으로 새로고침 여부를 결정 refetchOnMount: 컴포넌트가 마운트될 때 새로고침 여부를 결정 refetchInterval: 데이터를 주기적으로 자동으로 업데이트할 시간 ...

2023-04-16T21:36:00+09:00 2023-04-20T10:27:26+09:00 https://1-blue.github.io/posts/Learning-TypeScript-15%EC%9E%A5/ admin

해당 포스트는 러닝 타입스크립트 15장을 읽고 정리한 포스트입니다.책의 모든 내용을 작성하는 것이 아닌 주관적인 기준에 따라 필요한 정보만 정리했습니다. 🧩 매핑된 타입 매핑된 타입은 키 집합의 각 키에 대한 새로운 속성을 만들어 새로운 타입을 생성하는 것을 의미합니다. 인덱스 시그니처([i: string])와 유사하지만 :대신 in을 사용합니다. [key in Animals]에서 key는 변수처럼 아무 값이나 들어갈 수 있고, Animals의 key들을 하나씩 뽑아서 등록합니다. type Animals = "cat" | "dog"; type Animal = { [key in Animals]: number; }; /** * type Animal = { * cat: number...