웹/React 썸네일형 리스트형 [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 오류가 난다.. 더보기 [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] 리액트 Hook 정리 - 2 Context Hook 리액트 컴포넌트 트리에서 컨텍스트 객체를 받아 현재 값을 반환하는 Hook 함수. 부모와 자식 컴포넌트 사이 중간 컴포넌트들을 건너뛰고 데이터를 전달할 수 있다. 즉, 전역적인 데이터를 공유할 때 쓴다. (UI테마 등) 만약 깊이가 깊은 컴포넌트나, 애플리케이션 내의 여러 컴포넌트들에 props를 전달해야 한다면, 일일히 넘겨주려면 코드 작성도 수정도 번거로울 것이다. context를 쓰면 단계마다 넘겨줄 필요 없이 한번에 여러 컴포넌트들에게 값을 공유할 수 있다. -특징: useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 된다. -사용법: 선언: createContext(초기값) 컴포넌트: 사용: useContext(Context명) -사용 예: .. 더보기 [React] 리액트 Hook 정리 - 1 1. Hook이란? 기존 클래스 컴포넌트에서만 가능했던 기능들(state, lifecycle관리)을 클래스 없이 사용할 수 있게 해주는 기능. 리액트 버전 16.8부터 추가되었다. 2. Hook을 쓰는 이유 - Class개념과 같이 객체지향에 익숙하지 않은 개발자도 리액트의 주요기능을 함수에서 쉽게 사용할 수 있음 - componentDidMount나 componentDidUpdate등의 lifecycle API 에서 불필요하게 포함된 요소를 직관적으로 분리해 사용가능. - Hook을 쓰면 계층 변화 없이 상태 로직을 재사용할 수 있음. 3. Hook 사용 시 주의점 - 최상위 레벨에서 Hook을 호출해야함. (반복문이나 조건문 등 중첩 함수 내에서 실행x) - 리액트 함수 컴포넌트 내에서만 Hook을 .. 더보기 [React] vscode에서 리액트 JSX 태그 자동완성 적용 방법 개요 HTML에서 꺽쇠()를 입력하지 않고 태그명만 입력하면 자동완성되는 기능에 익숙해지고 보니, 리액트에서 JSX태그도 자동완성을 하고싶은데... 익스텐션을 찾아봐도 마땅히 나오는게 없었다. 서치를 해보니 따로 익스텐션 설치 없이도 할 수 있는 기능이었다. 방법1 - 개별 파일에 적용 VScode창 오른쪽 하단에는 현재 커서 위치나 인코딩 형식, 적용중인 익스텐션 등이 나와있는 바가 있다. 그중에서도 (js파일을 열고있는 상태라면) JavaScript라고 써져있는 부분이 있다. 이걸 클릭한다. 그러면 화면 상단에 여러 언어들이 나열된 언어 모드 선택 창이 뜬다. react를 검색해서 JavaScript React를 눌러준다. 이제 JSX 태그를 작성해보면 자동완성이 뜨는걸 확인할 수 있다. li>a 등.. 더보기 이전 1 다음
