본문 바로가기

전체 글

 (265)
강의 정리 참고 강의 정리 내용은 저작권상 비공개글로 작성하였습니다.
강의 정리 참고 강의 정리 내용은 저작권상 비공개글로 작성하였습니다.
[2022.07.30]소플 강의 정리 3 소플의 처음 만난 리액트 -초청 강의 수강 Styled Components 스타일 컴포넌트를 따로 한 파일에 정리하고, jsx에서 이용하는 방식을 선호한다 함 클래스를 각 지정해주면 코드의 가독성이 떨어질 수 있음 useNavigate useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공합니다./ 웹페이지를 navigate(탐색)한다. => Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줍니다. react-router-dom에서는 페이지 이동을 위해서 useNavigate()훅을 제공한다. https://basemenks.tistory.com/278 windo..
[2022.07.30] 로컬 링크로 모바일에서도 사이트 확인하기 노트북과 모바일이 같은 와이파이여야 한다. 1. 터미널에 ipconfig 를 작성한다. 2. 해당 IPv4 주소를 확인한다. 3. IPv4주소:3000 을 모바일에서 들어가서 확인 가능 + 또는 npm start에서 나오는 주소로 들어가도 확인 가능 배포 전 사이트 확인이 가능하여 편리한 방법이다.
[2022.07.30] React.lazy사용시 SCSS 스타일 적용 오류 로딩시간을 단축하려 전 게시글과 같이 lazy를 사용하자 scss가 적용이 안되는 오류가 발생 원인 1. scss의 다른 파일에서 같은 클래스의 스타일이 적용되었기 때문에 해당 jsx의 scss에서는 따로 지정해주지 않음 해결1. 해당 scss에서도 스타일을 정확하게 기재하여 스타일을 적용시킴 원인2. 다른 사람의 작업 파일 중 jsx의 state가 변하면서 클래스가 변하고 기존 클래스와 변경 클래스의 스타일 파일은 globalStyle에 공용으로 지정되어 사용됨 . =>상위 클래스의 스타일이 해당 jsx에서만 지정이 되어있었기 때문에, 상위부터 클래스 스타일이 적용되지 않아 하위 클래스 스타일도 적용안된던것 해결2. 해당 scss파일에만 적용되었던 클래스 스타일을 globalStyle로 옮겨주어 전역적..
[2022.07.30]사이트 느린 로딩 해결하기(React.memo + React.lazy) 사이트가 로딩시 오래 걸리는 문제를 해결하고 싶었음 (방법1+방법2를 같이 사용하여 로딩시간 단축 해결) 방법1: React.memo 이용하기 ▼ map이 사용되는 jsx에 마지막 export에 아래 코드와 같이 React.memo를 추가한다. export default React.memo(ZetaMap); 방법2 (App.js) (1) import 시켜주기 import { Suspense } from 'react'; (2) 기존 페이지 컴포넌트 import방식을 아래와 같이 const 컴포넌트명=React.lazy(()=>import('경로')); 로 변경한다. const Login = React.lazy(() => import('./pages/login')); (3) Routes를 로 감싸준다. 로딩..
[2022.07.29]React- 소플 강의 정리2 소플의 처음 만난 리액트 -초청 강의 수강 Hook -훅은 무조건 최상위레벨에서만 호출해야 한다. -컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다. -리액트 함수 컴포넌트에서만(+우리가 직접만든 커스텀내에서도) 훅을 호출해야 한다. -훅이 많아지면 헷갈리기에 상단에 훅을 호출하는 것을 모아 놓아 구분하는 것이 좋음 플러그인 추천 eslint-plugin-react-hooks 의존성배열이 잘못되면 알려줌 Custom Hook 만들기 -이름이 use로 시작하고 내부에서 다른 훅을 호출하는 하나의 자바스크립트 함수 -재사용성을 높이기 위한 목적으로 사용 ▼ 아래와 같이 두가지 예시가 중복되는 코드가 많을 때 사용한다. ▼ 위 코드에서 커스텀 훅을 만든 코드 Custom Hook 사용하기 ▼ 위 ..
[2022.07.28]React- 소플 강의 정리 소플의 처음 만난 리액트 -초청 강의 수강 react_sople>react01파일 참고) HTML 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어 Tag: 태그를 사용해 뼈대를 만듦 기본 뼈대 태그: html, head, body * Single Page Application 한개의 페이지/ 각각 페이지를 만들면 효율적이지 않기에 한개 html파일 안에 body태그 안에 들어가는 content만 바꿔서 보여줌 =>SPA 리액트의 특징 JavaScript JavaScript : ECMAScript가 정식명칭, 그래서 ES6이런식으로 표준나타내는 용어쓰이는 것(2015년에 나옴,ES2015나 ECMAScript2015라고도 불림), ES12도나옴(2021년) / 생명을 불어넣는 역할, 스크립트 언어의 ..

티스토리툴바