본문 바로가기

웹

[React] 리액트 Netlify 깃헙 연결 배포 시 Module not found: Can't resolve... 에러 개요 github에 올린 레포지토리를 Netlify에 연결해서 배포를 하려고 했는데, 이런 오류가 떴다. Module not found? 파일은 멀쩡하게 있는데... 뭐가 문젠가 싶어 이리저리 검색해본 결과, Case-sensitive와 관련이 있었다. ▶netlify포럼의 지원 가이드 글 Git에서는 대소문자 구분을 하지 않고 같은 파일로 취급하는데, netlify는 대소문자 구분을 하기 때문에 문제가 발생한다는 것이였다. 설마...하고 github의 오리진 레포지토리에 올라가있는 파일명을 확인해보니, 아니나 다를까 작업 중간에 파일의 앞글자를 소문자로 고쳤던 파일이 레포지토리 쪽에는 파일명이 대문자로 되어있었다. 해결방법 해결하기 위해서는, 오리진 레포지토리 쪽의 파일명을 고치던가 혹은 로컬 파일을 .. 더보기
[React] css, styled-component에서 & + & 의미 얼마 전에 리액트 코드를 보다가 styled-component에서 이런 부분을 봤다. & + & { margin-top:3rem; } css 연산자에서 &(엠퍼센트)를 쓰는걸 본적이 없었기 때문에 혹시 내가 모르는 선택자인가? 싶어서 검색을 해봤더니, css가 아니라 styled-component에서 쓰는 것이였다. (참고로 sass에서도 비슷하게 사용된다) 즉, 순수 css에서는 쓰이지 않는 표현이다. (내가 찾아볼 때 검색을 css 키워드로 했기때문에... 비슷한 루트로 검색을 해보는 사람을 위해 게시글 제목엔 css를 붙여뒀다.) 그래서 무슨 의미이냐? 먼저 style-component에서의 &는 현재 요소를 뜻한다. 예를 들면... const Item = styled.div` &:hover{ ba.. 더보기
[React] 리액트에서 환경 변수(.env)설정하기, API키 정보 숨기기 git을 이용해 프로젝트 작업을 할 때, API KEY나 비밀번호와 같이 민감한 정보가 포함되어있어 커밋이 곤란한 때가 있다. 그럴 때는 환경 변수와 .gitignore를 사용하면 쉽게 문제를 해결할 수 있다. 1. 프로젝트의 루트 지점에 .env 파일을 생성한다. (.gitignore가 없다면 이것도 같이 만들자.) 2. 환경변수로 사용할 내용을 .env 파일에 작성한다. REACT_APP_(환경 변수 이름) = (값) 변수가 여러개여도 세미콜론이나 반점(,)을 쓰지 않고 엔터로 구분해둔다. 3. gitignore파일에 .env를 추가한다. 4. 해당하는 키를 쓰는 코드에서 process.env.(키이름)으로 불러다 쓴다. 주의사항 환경변수는 서버를 재시작하면 그때부터 적용이 된다. 401 오류가 난다.. 더보기
npm init -y 플래그(옵션) npm init -y 다른 사람 블로그 글을 보다가 못보던 플래그를 발견했다. 무슨 뜻인가 하고 찾아보니... 터미널 창에서 npm init로 package.json파일을 만들 때, package의 이름이나 버전, 정보 등을 작성하도록 질문이 뜨는데 그 과정을 생략하고 빈 npm 프로젝트를 만들 때 사용하는 플래그였다. 참고자료 https://stackoverflow.com/questions/62725481/what-is-the-meaning-of-npm-init-y 더보기
[Typescript]타입스크립트 기본 문법 정리 변수 선언 해당 변수의 값의 타입을 명시하기 위해 타입 주석을 붙여 변수를 선언한다. 변하는 값은 let, 변하지 않는 값은 const로 선언하며 const는 변수 선언 시 반드시 초깃값을 같이 선언해야한다. const 변수명: 타입 = 초깃값 let 변수명: 타입 //예시 const name: string = 'amy' let price: number let isError: boolean = true대표적인 타입은 총 4가지가 있으며, 타입과 무관하게 값을 저장할 수 있게 할 때는 any로 표기할 수 있다. (자바스크립트와의 호환을 위한 타입) 유형 타입 타입 예시 수 number 1,2,10,-500 등 불리언 boolean true, false 문자열 string 'tree&#.. 더보기
[JavaScript] Intersection Observer API - 화면 내 보이는 요소 검사 개요 직역하면 교차 지점 관찰자 API. 간단히 말하자면, 페이지 안에서 사용자 눈에 요소가 보이는지, 혹은 페이지 바깥에 있어서 보이지 않는지와 관련된 API라 할 수 있다. 어떨 때 필요할까? MDN docs에서는 이 API가 나오게 된 주요한 이유를 이렇게 설명하고 있다. 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩(lazy-loading) 스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 무한 스크롤(infinite-scroll)을 구현 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션을 수행할 지 여부를 결정 좀 더 구체적으로 예시를 들어 보자. 만약 스크롤을 .. 더보기
[React]리액트 라우터로 화면 넘기기 (버전 6 기준) www.address-a.com/home www.address-a.com/contact www.address-a.com/... 위와 같이, SPA 웹 또는 앱(여기서는 address-a.com)에서도 입력된 url 주소에 따라 다른 화면 페이지를 연결시켜주려면 어떻게 해야할까? 주소가 달라지면 다른 화면을 보여주는 것을 '라우팅' 이라고 하는데, 이 기능은 리액트 자체에 내장되어있지는 않다. 여기서는 라우팅 라이브러리인 리액트 라우터를 사용하는 기본적인 방법을 알아보도록 하자. 1. 리액트 라우터 이 라이브러리는 사용용도에 따라 달리 설치할 수 있다. react-router-dom: 웹에서 사용 react-router-naitve: 리액트 네이티브 즉 앱에서 사용 react-router: 위의 둘을 통합.. 더보기
[React] 리액트의 스타일링: CSS 모듈과 스타일드 컴포넌트 리액트로 작업을 할 때, 컴포넌트 단위로 스타일을 적용하고 싶다면 쓸 수 있는 방법이 몇 가지 있다. 여러 라이브러리, 프레임워크 등등... 그 중 기존의 CSS만 알아도 쉽게 사용할 수 있는 CSS 모듈과 스타일드 컴포넌트(styled-components)에 대해 알아보자. 1. CSS Module ✔CSS에서: 파일의 이름을 파일명.module.css의 형식으로 한다. ✔리액트에서: import styles from '파일명.module.css'; 로 불러와 적용한다. ⭕장점: 자체적으로 고유 해시값을 붙인 클래스를 생성해주기 때문에, 동일 프로젝트 내에서 CSS클래스의 이름 중복이 가능 → 따라서 네이밍 규칙이 간소화됨. 🚫단점: CSS파일의 수가 많아져 관리가 번거로워질 수 있음. 예시 코드 /*.. 더보기

티스토리툴바