'🐤 Web/🌐 React' 카테고리의 글 목록

TypeScript의 모듈 해석 캐싱 메커니즘 들어가며TypeScript를 사용하다가 예상치 못한 모듈 해석 관련 문제를 마주치게 되었습니다. .d.ts 파일의 위치를 변경했다가 다시 원래대로 되돌렸을 때, 이전에는 에러가 발생했는데 갑자기 정상적으로 동작하는 경우가 있습니다. 찾아보니 이는 TypeScript의 모듈 해석 캐싱 메커니즘 때문이라고 합니다. 이번 포스트에서는 이 메커니즘에 대해 자세히 알아보고, 실제 경험했던 문제와 해결 과정을 공유하겠습니다.모듈 해석이란?모듈 해석(Module Resolution)은 컴파일러가 import가 무엇을 참조하는지 알아내기 위해 사용하는 프로세스입니다. 예를 들어:import { a } from "moduleA";이런 import 문에서 컴파일러는 a의 모든 사용을 검사하기 위해 moduleA가 정확히 ..

Promise.all()과 비동기 처리 - 콘솔 로그만 추가했는데 버그가 고쳐졌다? 🤔 문제 상황React 프로젝트에서 Firebase Firestore를 사용하여 사용자 정보를 가져오는 과정에서 재미있는 현상을 발견했습니다. 시를 완료한 사용자들의 닉네임을 표시하는 기능을 구현하던 중, 몇몇 시에서 첫 번째 사용자의 닉네임이 표시되지 않는 문제가 있었습니다. 문제 해결을 위해 콘솔 로그를 추가했는데, 놀랍게도 로그를 추가하는 것만으로 문제가 해결되었습니다! 🔍 원인 분석원래 코드는 다음과 같았습니다:const fetchUserNicknames = async (userIds: string\[\]) => { if (!userIds.length) return; try { const nicknames: { \[key: string\]: string } = {}; ..

리액트 자바스크립트 -> 타입스크립트로 마이그레이션 하기! 1. 컴포넌트 선언 방식// 기존 JSconst Dashboard = () => { // ...}// 변환된 TSXconst Dashboard: React.FC = () => { // ...}React.FC (Function Component) 타입을 명시적으로 선언하여 TypeScript에게 이 컴포넌트가 React 컴포넌트임을 알려준다이렇게 하면 컴포넌트의 props 타입을 자동으로 추론할 수 있으며, React 관련 타입 체크도 가능하다최신 React에서는 React.FC 대신 React.ComponentType을 사용하는 경우도 있다 2. Props 타입 정의// 기존 JSconst CategoryEditor = ({ onClose }) => { // ...}// 변환된 TSXinterfac..

🌗 Styled Components로 라이트/다크 모드 전환하기 실제 프로젝트에서는 사용자에게 다크 모드와 라이트 모드를 제공하는 것이 중요한 UX 요소 중 하나이다.styled-components와 ThemeProvider를 활용하면 전역 테마 전환을 매우 간단하게 구현할 수 있다.✅ 1. 테마 객체 정의하기// themes.jsexport const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke",};export const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111",};✅ 2. App에서 테마 상태 관리여러개의 property를 가진 객체를 두개 (다크/라이트) 설정함으로써 간편하게 theme을 바꿀 수 있다. // Ap..

Styled Components - 애니메이션, 컴포넌트 선택자, 중첩 스타일링 이번에 더듬어볼 기억은 .. keyframes 도 const 로 따로 빼서 관리하는 거 + styled component 조건문처럼 쓰기 !! ✅ 회전 애니메이션 만들기먼저 keyframes를 사용해 회전하는 애니메이션을 정의한다.import styled, { keyframes } from "styled-components"; const rotationAnimation = keyframes` 0% { transform: rotate(0deg); border-radius: 0px; } 50% { border-radius: 100px; } 100% { transform: rotate(360deg); border-radiu..

Styled Component에서 컴포넌트 확장하기 옛날에 리액트 처음 익힐때 다 공부했던 것 같은데, 프로젝트들을 하다보니 비슷한 컴포넌트를 생성하는 경우가 많은데 무시하고 계속 하다가 .. '아 옛날에 이거 공부했었는데 .. ' 싶어서 정리하게됐다. 일단 그 전에 styled component 를 쓰는 이유는 기존에 div를 만들고 className 이나 style을 부여하는 식이었지만,대신 styled를 임포트 해서 우리가 사용할 html 에서 사용하고 싶은 태그를 지정하고, 백틱 안에 css코드를 적어준다. -> 컴포넌트 이렇게 하게 되면 스타일링 된 컴포넌트를 사용함으로써, 컴포넌트 함수 안에 스타일을 적을 필요가 없고, 가독성이 좋아진다. 나는 큼직한 or 많이 사용할만한 컴포넌트들은 스타일 컴포넌트로 지정하고, 그 안의 자잘한 텍스트나 버..

리액트 폴더구조의 정석이 있을까 우리가 코딩한 src 폴더 사실 노마드코더를 따라했기 때문에.. 그리고 이번 프로젝트는 그 안에서 충분히 커버가 가능했기 때문에 폴더구조에 대한 고민을 할 필요가 없었지만 그래도 폴더 스트럭쳐에 관심이 많은 나는 찾아보았다! 플러터와 다르게, 대부분 거의 통일된 폴더 스트럭쳐를 갖추어 작업을 하는 모습을 볼 수 있었다. 그래서 앞으로 내가 보고 계속해서 참고할만한 내용을 가져와봤다 ..! CRA의 초기 폴더구조 my-app ├── node_modules ├── public ├── src ├── .gitignore ├── package.json └── README.md node_modules 현재 프로젝트에 포함된 라이브러리들이 설치되어 있는 폴더로 보통 깃과 같은 저장소에 올릴 때는 이 폴더를 함께 올리..

개발자도구 야무쥐게 쓰기 ✨ 개발자도구 실행하기 F12 Ctrl + Shift + i Elements : html/CSS 상태 확인 Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시) Sources : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등) Network : 브라우저에서 발생하는 통신 상태 Performance(예전 Timeline패널) : 성능 측정 Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색. Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집 Audits : 페이지를 분석하고 최적화를 위한 팁 나열 Security : Mixed content 이슈, 인증서 문제 등을 디버깅 👍 크롬 개발자 도구 단축키 모..

반응형 웹에서의 컨테이너 크기 반응형 웹이란 브라우저 넓이에 따라 최적화된 사이트를 말합니다. 출력물과는 달리 웹 퍼블리싱 작업이 들어가며, 코드로 구현되기 때문에 고정 값인 디자인을 잡아줄 때 PC / Tablet / Mobile 이런 식으로 최적화된 시안으로 잡아줘야 됩니다. PC const ProjectComponent=styled.div` .contentsbox{ width: 1140px; height: 100%; margin: 0px auto; display: flex; flex-direction: column; } ... ` 우선 저희가 사용한 방법!! (실제 코드 가져왔습니다) 저희는 컨테이너를 1140px로 잡았고, 양쪽에 margin을 auto로 주어 센터에 두었습니다! 그리고 전체 width를 1280px 이상이라고..

이전 1 2 다음

라이브러리 브랜드 그룹 | 🐤 개발하는 참새 🌞

티스토리툴바