Frontend/React (34) 썸네일형 리스트형 React와 Next js 이미지 경로 여러가지 방법 Nextjs에서 이미지 경로는 어떻게 설정해야할까? 나의 경우는 public폴더내 images라는 폴더를 새로 생성하여 아이콘들을 넣어두었다. nextjs에서는 public을 절대경로로 인식하고있는 것이 특징이다. 참고로 리액트에서는 배포시 src에있는 모든 파일들을 번들링(html, css, js를 압축)하지만 pubic은 압축하지않는다. heart라는 아이콘을 꺼내기 위해 다음과 같이 경로를 설정하였다. nextjs에서 권장하지않는 방법 do not! 배포시 public바로안에다할 경우 큰문제는없을수있지만 images처럼 만약 public안에 서브폴더를 이용할경우 뜻하지않게 경로를 인식하지못할수도있기때문에 환경변수 process.env를 활용하는것이 권장된다.(하단의 CRA 공식사이트 참고) next.. Nextjs getServerSideProps 예시 [문제발생] 프로젝트중 리액트 useEffect훅을 사용하다가 랜더링 문제에 직면하였다. 문제의 코드 function Post() { const [list, setList] = useState([]) const [commentList, setCommentList] = useState() const [isLoading, setIsLoading] = useState(true) const router = useRouter() const { pid } = router.query const url = `${HOST}/article/${pid}` const getData = async () => { const res = await axios.get(url) setList({ article: res.data.arti.. 랜더링 방식의 종류 SSR vs CSR, SSG SSR과 CSR의 차이는 컨텐츠를 어디에서 만드냐가 핵심이다. 컨텐츠를 클라이언트에서 만들면 CSR, 브라우저에서 랜더링 컨텐츠를 서버에서 만들면 SSR, HTML을 서버를 통해 랜더링. 클라이언트 사이드 랜더링(CSR) 기본 브라우저 렌더링과정(HTML을 파싱하면서 DOM이 나옴)과 다르게 CSR은 JS에서 직접 DOM을만든다. 참고로 리액트에서는 DOM을 직접조작하지않고 컴포넌트에서 jsx문법을 사용해 JS element를 만듬) 장점 : HTML의 용량이 적어진다 -> 최초 접근시 다운속도가빠름 -> 로딩 접근이 빠르다. 단점 : JS의 번들 용량이 커진다, 브라우저 컴퓨팅파워를 많이쓴다 -> 렌더링 퍼포먼스 저하 * CSR 하는 방법: HistoryAPI를 통해 Route(라우팅)처리를 함, DO.. cra -> nextjs 고분분투기 - router, redux, sessionStorage ... 현재 자바스크립트 생태계는 춘추전국 시대라 할 만하다. 지금 이 순간에도 새로운 패키지가 엄청나게 쏟아져 나온다. 기존에 가장 좋은 방법이라 여겼던 것이 새로운 방법으로 대체되는 경우도 있다. 그만큼 우리에게는 하나의 문제를 해결하기 위한 다양한 선택지가 있고, 이들 가운데 하나를 선택해야하는 상황을 자주 맞딱뜨리게된다. ... - 실전 리액트 프로그래밍 기존 CRA에서 만든 프로젝트를 웹팩셋팅하고 옮기려했는데 nextjs를 추천받았다. 오호 이거 쉽겠는데라고 생각했던것은 나의 오산 에러들이 아주 빵빵터지는데.. 엉엉... 울고싶다. Router next 강의쪼금들어보니 라우터 선언따위 필요없었음 ^^ 이때만해도 오 훨씬 간편한데?! 하며 수월할줄알았지.. 하지만 태그들에 삼항연산자를 쓰면서 문제가 발생.. js/리액트 절대경로 설정하기 - jsconfig.json / tsconfig.json 혹시 나의 폴더 구조가 이렇다면? import {...} from './components/폴더/폴더' import {...} from '../../components/폴더/폴더' import {...} from '../../../components/폴더/폴더' 코드양이 증가할수록 임포트할 모듈도 많아지면 점점 복잡해지고 새로운 파일에 임포트 내용을 복사붙여넣기한다면 다시 경로를 검토해야할것이다. 이때 절대경로로 할수있다면 깔끔하고 좋지않을까? import {...} from 'component/styled/login' root 폴더내 jsconfig.json을 생성한다. { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } vs코드를 종료.. 풀스택 프로젝트 깃클론(리액트, 노드) 노트북을 옮기게되어서.. 리액트로 만든 클라이언트단은 매우 쉬웠다. git clone 주소 cd 만든폴더 이동 npm install npm start 다음은 서버단 위와 동일하게하면 당연히 예상대로 몽고서버문제가 날것임 나같은 경우는 gitignore문제 때문이었다. .env에 admin명과 password등이 숨겨져있는데 gitignore된 깃을 클론했으니 몽고디비에 접속할 수 가 없었다. 기존 노트북과 동일 위치에 .env를 만들고 같은 내용을 넣어줬다. JWT jwt(jsonWebToken) json포맷을 이용해 사용자에 대한 속성을 저장하는 claim기반의 web token 로그인할때 서버에서 토큰을 암호화된 형태로 넣어주면 프론트에서 로컬스토리지에서 저장해뒀다가 저장된 jwt를 request header에 넣어서줌 jwt 사용방법 npm i jsonwebtoken var jwt = require('jsonwebtoken'); const secret = 미리 index.js에서 만들어둔req.app.get('jwt-scret') 혹은 문자열 const token = jwt.sign({ email: 'bar' }, secret, {expiresIn:"7d", issuer:'yujin','subject':author}); 로그인할때(setUser) localSt.. yarn 명령어로 쉽게 버전 바꾸기 구버전 혹은 최신버전으로 변경해야할경우 혹은 dependency에서 dev dependency로 옮기고싶을때 보통 삭제했다가 재설치를 한다. #삭제 yarn remove 삭제할놈 또는 npm uninstall 삭제할놈 #재설치(dev dependency) yarn add -D 삭제했던놈@버전 또는 npm i -D 삭제했던놈@버전 그러나 한두개가 아닌경우 삭제했다가 재설치하기가 귀찮을 수 있다. 그럴경우 간편하게 하는방법이 있다고한다. 간편하게 버전 바꾸는 방법 package.json으로 가서 원하는 dependency를 찾아서 버전을 바꿔준다. 나같은경우는 sass-loader가 원래 14버전이었는데 10.1.0버전으로 문자를 변경했다. 우측메뉴에 node_modules 폴더를 찾아서 지워버리고 다음 명.. 이전 1 2 3 4 5 다음
