즐겁게, 코드

타입스크립트가 점점 프론트엔드 생태계에서의 입지를 굳혀가고 있는데요, 간단한 입력값을 상태로 관리하는 예제를 타입스크립트로 구성해보도록 하겠습니다. 😆 진짜 쉬워요! 타입스크립트를 끼얹기 전까진... import React, { useState } from "react"; const App = () => { const [name, setName] = useState(null); const handleInput = (e) => { setName(e.target.value); }; return ( {name} ); }; export default App; 입력받는 값을 상태로 관리하고 화면에 나타내는 코드입니다. 이렇게만 보면 간단하지만 갑자기 타입스크립트를 얹게 되면 막막할 수도 있는데요, 위 코드에 차근..

🚨 주의! 본 포스팅은 리액트 웹 어플리케이션을 기반으로 합니다. 지난 글에 이어 유저 페이지에서 프로필 사진을 지정할 수 있도록 하고, 이미지를 업로드하면 곧장 S3에 올라갈 수 있도록 합니다. 이를 구현하는 과정을 크게 [input 태그 커스텀] - [AWS SDK 연동] - [대체 이미지 설정] 단계로 나눠 설명드리겠습니다. [1 / 3] - input 태그 커스텀 먼저 클라이언트의 파일 업로드를 위해 input[type=file] 태그를 활용합니다. 그런데, 이걸 스타일하는게 아주 악랄합니다. input[type=file]는 브라우저가 기본적으로 “파일 선택 / 선택된 파일 없음” 이라는 문구를 출력하는데요, 이게 속성을 설정한다고 해서 보이지 않는게 아니라 position: absolute 등 ..

산학프로젝트 진행 중, AWS 사용 비율이 낮다는 지적을 받아 S3를 사용할 곳을 찾고 있었습니다. 그러다 떠올린 것이 S3를 활용해 "유저 프로필 사진을 업로드하는 기능을 추가할 수 있게 하면 어떨까?" 라는 생각을 하게 되어 바로 제작에 들어갔습니다. ⚙️ AWS S3 설정하기 S3 사용 순서는 크게 [정책 / 역할 설정] - [Cognito로 접근 권한 부여] - [S3 버킷 퍼블릭 설정] - [클라이언트 코드에서 SDK로 접근] 단계로 나뉩니다. 과정이 꽤나 긴 만큼, 이미지 스크린샷 위주로 설명을 진행하겠습니다. [1 / 3] - IAM에서 역할 설정하기 먼저, 정책을 생성하기 위해 IAM 메뉴에 들어옵니다. IAM 메뉴에서는 AWS 서비스에 접근할 수 있는 권한을 부여할 수 있는데요, [역할]..

오랜만에 개츠비 블로그를 보수하던 중, 제목이 너무 길면 모바일에서 못나게 보이던 문제가 있었습니다. text-overflow 속성을 활용하면 저렇게 삐져나오는(overflow) 텍스트를 쉽게 처리할 수 있습니다. 🔨 text-overflow text-overflow는 먼저 단독으로 사용될 수 없습니다. text-overflow는 overflow: hidden을 대체하는 것이 아니라 레이아웃을 삐져나오는 순간 해당 텍스트를 특정 문자열로 교체하는데요, 따라서 항상 삐져나온 텍스트를 숨겨주는 overflow: hidden 과 여러 줄의 텍스트를 한 라인으로 만들어주는 white-space: nowrap 속성이 항상 세트로 필요합니다. (+ 적용할 문자는 항상 display: block 속성이어야 합니다!)..

📋 내용 : styled-components를 사용해 스타일할 때, 자기 자신에 선택자 지정하기 const Container = styled.div` display: flex; width: 1200px; height: 800px; `; styled-components를 사용해 위와 같은 컴포넌트를 만들었다고 가정하자. 그런데 말 그대로 이런 스타일의 컴포넌트를 만든 것인데, :hover나 ::after 등의 의사 선택자(Pseudo-selector)는 어떻게 지정할까? 아주 간단하다. const Container = styled.div` display: flex; width: 1200px; height: 800px; &::after { content: ""; width: 30px; height: 30px..

📋 내용 : 타입스크립트 사용 시, Cannot find module... 이 출력되는 문제 외부 파일을 불러올 때, 일치하는 타입 선언을 찾지 못했다는 오류가 자주 목격됩니다. 타입스크립트는 해석할 수 없는 타입에 대해 이런 오류를 출력하는데요, 타입 추론을 돕기 위해 d.ts 라는 이름의 파일을 만들어 활용할 수 있습니다. // types.d.ts // 예시. yml 형식의 파일을 불러와 사용하고 싶을 때 declare module "*.yml" { const data: any; export default data; } // 비슷하게, svg 파일을 불러온다고 하면 이렇게 사용하면 됨! declare module "*.svg" { const data: any; export default data; }..

📋 내용 : 타입스크립트 코드에서 require.context를 인식하지 못하는 문제 Building a Blog with Next.js | CSS-Tricks In this article, we will use Next.js to build a static blog framework with the design and structure inspired by Jekyll. I've always been a big fan of how css-tricks.com next.js 기반 블로그 튜토리얼을 따라가던 중, 이 부분에서 문제가 생겼습니다. // api/index.ts import matter from "gray-matter"; export async function getAllPosts() { // 타..