728x90 반응형 React11 Create-React-App 에서의 npm run eject CRA 개인 프로젝트를 구현하면서 CRA는 쓰지 않을 이유가 없었다 중요한 라이브러리나 웹팩 설정 없이 명령어 하나로 간편하게 프로젝트를 실행할 수 있기 때문 CRA를 사용하면 필요한 웹팩 / 바벨 / eslint 등 연결에 대해서 신경쓰지 않아도 된다 autoprefixer 를 지원해주어 자동으로 -webkit-, -ms- 를 적용해주기도 한다 (이건 웹팩 설정, 크로스 브라우징 용도) => emotion styled 를 사용하면 알아서 붙기도 함 styled-components는 보통 styled-reset method 로 브라우저의 초기값을 초기화 시킨다. npm run eject 주의할 점 : 한번 eject를 하게 되면 이전 상태로 되돌릴 수 없다 eject는 숨겨져 있던 모든 설정을 모두 볼 .. 2023. 3. 20. react) inline style 단점 react 는 jsx 문법을 사용한다. jsx 는 react.createElement 를 통하여 변환이 되고 모든 속성이 props 객체의 부분이 된다 inline style 카멜케이스로 작성한다. inline style의 단점으론 html 파일 사이즈를 크게 만들어 화면에 웹페이지가 로딩 되는 시간이 따로 걸리고 html, css 코드가 섞이게 되어 유지 보수가 힘들기도 하다(가독성) 하지만 가장 큰 단점은 inline style에서 사용한 {}는 이전 값과 비교했을 때 다른 객체로 인식하기 때문에 (참조하는 주소값이 달라짐) 리렌더링을 일으키게 되는 것이다. 그러니까 한번 돔을 만들어 놓고 또다시 돔을 그린다 => 비효율적 이를 memo를 통하여 메모이제이션 한다는 해결방안도 있지만 css-in-js.. 2023. 3. 20. react) public 폴더 src 폴더 🗂 public 컴파일시 필요하지 않은 것들 절대경로 사용 가능 (import 시 "./파일명" 이렇게 가져올 수 있음) 사용자가 웹브라우저상에서 볼 수 있는 정적파일들 (image) 이 담김 🗂 src 개발하면서 컴포넌트 안에서 쓰이는 파일을 넣음 public 파일 가져올 때 단점 웹팩으로 처리되지 않고 원본이 빌드됨 -> 파일이 경량화 되지 않음 -> 파일 경로 잘못 입력시 컴파일 단계가 아니라 사용자가 접근할 때 404 오류를 받음 const url = process.env.NODE_ENV === 'development' ? `./${domain}/image/img` : 'image/img'; // 보통 이렇게 처리하는 듯 경량화를 위해서라도 src에 이미지 파일 넣는게 맞겠네! ☺️ 판단 후 여러.. 2023. 3. 10. next.js 왜 사용하나요 요즘 프론트엔드 개발자 필수템 next.js 어떻게 저떻게 사용은 했지만 프리렌더링과 html 파일 만들어져서 빠르고 SEO 좋다~ 하는 점만 두리뭉실하게 알았지 딱히 뭘 알고 쓴다는 느낌은 없었다 그래도 next 왜 쓰는지 뭐가 좋은지 는 정확히 알아야하지 않을까... 🤔 싶어 시작한 글 React.js : Html과 JS파일을 한꺼번에 보내고 클라이언트가 js 코드를 통해 웹 화면을 렌더링 Next.js : Pre-Rendering된 웹 페이지를 클라이언트에게먼저 보내고, React가 번들링된 자바스크립트 코드들을 클라이언트에게 전송함. SSR vs CSR SSR 서버사이드 렌더링 CSR 클라이언트 사이드 렌더링 👆 SSR 클라이언트가 데이터에 요청하면 프->백->데이터베이스->백->프->브라우저 순.. 2023. 2. 26. useEffect counter로 작동 순서 정리 import { useEffect, useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); const handleOnClick = () => { setCount(prev => prev + 1); }; console.log('useEffect 전'); useEffect(() => { console.log('실행'); return () => console.log('-------cleanUP--------'); }, [count]); console.log('useEffect 다음'); return ( {count} button ); }; export default Counter; useEffect 는 컴포넌트.. 2023. 2. 21. 'string' 형식은 '--downlevelIteration' 플래그 또는 'es2015' 이상의 '--target'을 사용하는 경우에만 반복할 수 있습니다. 문제 'string' 형식은 '--downlevelIteration' 플래그 또는 'es2015' 이상의 '--target'을 사용하는 경우에만 반복할 수 있습니다.ts(2802) setCheckList(prev => [...id]); 스프레드 문법인 es6를 지원하지 않는 환경에서 작성하면 생기는 오류 해결 //tsconfig.json "downlevelIteration": true tsconfig.json 에 추가해주었다. 2023. 2. 9. react 오류 : Element type is invalid, expected a string (for built-in components) or a class/function but got : react 가 컴포넌트 못 찾는 오류 path 지정이 잘못되어서 난다 이걸로 두 시간 버렸다 해결책 멀쩡했다가 갑자기 저 오류 뜨면 방금 전에 import 했던 게 잘못된 것! 1. export, default export 살펴보고 import { usehooks } from "./hook" 이런 애들 {} 필요한지 필요 없는지 잘 보기 2. export 안 한 컴포넌트 있나 살펴보기 3. 컴포넌트는 무족권 function이거나 class 여야 함! 4. 저장 누르기 2023. 2. 6. react) codebox에서 받은 파일 npm i 안 될 때 //package.json "dependencies": { "react": "18.0.0", "react-dom": "18.0.0", "react-router-dom": "6.3.0", "react-scripts": "^5.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, react-script 버전 문제! react-script : 4.0.3 이었고 npm uninstall react-scripts 로 기존 스크립트 지우고 npm install -save react-s.. 2023. 1. 21. Winnerest 메인 페이지 리팩토링(Observer 무한스크롤) Winnerest 메인 페이지 구현 (무한 스크롤, Intersection Observer) 👆 메인페이지 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 학습용으로 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡았습니다. 메인 페이지 0119eunji.tistory.com observer Intersection 라이브러리를 사용해 구현했던 메인 페이지를 캣보우 프로젝트를 하며 다시 공부한 Observer API 를 사용해 다시 리팩토링했다. const Main = () => { const navigate = useNavigate(); const token = localStorage.get.. 2023. 1. 8. 이전 1 2 다음 728x90 반응형
