popo story popo story

font-awesome 은 우리가 개발시 아이콘이 필요할 때 자주 사용하는 웹사이트이자 라이브러리이다. 해당 사이트에 들어가면 여러 종류의 아이콘을 무료로 사용할 수 있다. 그냥 html 에 아이콘을 사용할 때는 별도의 라이브러리 없이 웹폰트를 기반으로 하는 태그로 작성할 수 있는데, 그와 다르게 react 에서는 라이브러리를 사용해 svg기반으로 별도의 컴포넌트로 사용할 수 있다. svg 기반 아이콘이 기능이나 성능적인 측면에서 유리한 점이 많아 최근 자주 사용하는 추세이다 (화질이 제일 좋기도함) 리액트에서 font awesome 을 사용하는 방법을 알아보도록 하자 설치 ① 기본 패키지 @fortawesome/fontawesome-svg-core 설치 SVG 기반 아이콘을 활성화 시키기 위해서는 기본..

1. 한개의 함수/변수 export 내보내기 보통 export 어떤 함수(코드)나 변수를 다른 파일에서도 쓰고싶을 때 사용한다 내보낼 함수나 변수가 하나인경우 주로 default 를 사용해 export를 한다 const Name="patrick" export default Name; export 는 한 파일에 한번만 사용할 수 있으며, 코드 맨 마지막줄에 위치한다 2. 두개 이상의 함수/변수 export 내보내기 만약 다른 파일에서 사용하고 싶은 함수나 변수가 두 개 이상이라면, 위 코드에서 default를 빼고 중괄호 { } 를 써준다 const Name="patrick" const Age="10" export { Name, Age }; 그리고 이 내보낸 값을 다른 파일에서 import 시 중괄호 { ..

'뒤로가기' 버튼을 누르면 이전 페이지로 이동하는 기능을 구현해보자 useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공한다 useNavigate는 react v6 에서 useHistory 가 변화한 것이다. 이 때 useHistory 에서 사용하던, window의 history 를 이용한 navigate 기능도 할 수 있게 되었다 react-router-dom 이 v6 로 업데이트 되기 이전에는 history.goBack() 을 이용하였지만 v6 로 업데이트됨에 따라 useNavigate 를 사용해야한다 import { useNavigate } from "react-router-dom"; const App = () => { const ..

게시판 목록 / 상세 내용 페이지를 따로 만들어 목록의 게시물을 클릭하면 id를 상세 내용 페이지로 보내 해당 id에 맞는 content가 렌더링 되게 하도록 하였다. 그러기 위해서는 게시물을 클릭했을 때 페이지 넘김과 props 전달 (id 값)이 동시에 되어야했고 Link를 통해서 구현할 수 있었다 react-router-dom 이 v5 까지는 Link to 안에 props 값을 넘겨줄 수 있었는데 v6 로 업데이트 되면서 props로 값을 넘겨줄 수 없게되었다 따라서 Link 를 통해 값을 넘겨주고자 할 때는 state 를 사용해야한다 {sample.title} Link to 에 이동하고자 하는 주소 경로를 작성하고, 그 경로에 넘겨줄 값은 위 코드 처럼 state 안에 작성해주면 된다 중괄호 두 ..

웹사이트를 개발할 때 어떻게 페이지 이동을 할 수 있는지 알아보자 프로젝트 생성 및 라이브러리 설치 react-router-dom 라이브러리를 이용하면 쉽게 구현할 수 있다 yarn add react-router-dom 우선 yarn 명령어를 이용해 react-router-dom을 설치한다 프로젝트에 라우터 적용 프로젝트에 리액트 라우터를 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter 라는 컴포넌트를 사용하여 감싸면 된다 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다 Route 컴..

매번 프로젝트 생성할때마다 까먹어서 책 찾아보는..ㅠ yarn 으로 리액트 프로젝트를 생성하고 싶다면 yarn create react-app "프로젝트이름" ex) yarn create react-app hello → hello 파일 생성 이 명령어를 입력하면 성공적으로 파일이 설치된다 > cd 파일이름 > yarn start 해주면 웹페이지가 열린다 ** yarn을 사용하지 않는 경우 > npm init react-app 을 사용하면 된다

리액트를 사용할 때 쉽게 사진 첨부하는 방법! public 폴더에 첨부하고자 하는 사진을 저장한다 그리고 태그를 이용해 파일 경로를 써주면 끝!

- 반드시 해야하는 것은 아니지만 해두면 유용 - 디렉터리를 많이 만들어서 구조가 깊어졌을 때 사용하면 좋음 (1) 우선 한 작업들을 git에 커밋한다 $ git add. $ git commit -m 'Commit before yarn eject' (2) yarn eject 명령어를 실행한다 $ yarn eject $ react-scripts eject (3) 프로젝트 디렉터리에서 config 디렉터리를 찾고, webpack.config.js 를 연다 (4) 그 파일에서 "sassRegex" 키워드를 찾는다 //webpack.config.js - sassRegex 찾기 { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders ( { import..