삽질블로그 삽질블로그

React 로 빌드하기 위해 고려해야하는 사항들 webpack 과 같은 번들러를 사용하여 번들링 되고 babel 과 같은 컴파일러 사용하여 변환 코드 분할과 같은 production 최적화 성능 및 seo 를 위해 일부 페이지를 정적으로 사전렌더링 할 수 있다 -> serverside rendering, client side rendering 둘다 가능 React 앱을 data store에 연결하기 위해 서버측 코드를 작성해야할 수 있다. Next.js 위에 언급한 문제들에 대한 솔루션 제공 직관적인 페이지 기반 라우팅 시스템 pre-rendering, static-site-generation(정적 생성 ssg), server-side-rendering 자동 코드분할 (페이지 로드 속도 up) 최적화된 ..

프로젝트를 노드 패키지 관리자로 관리하기 위한 과정 (with next) 1. package.json 생성 2. $ npm install react react-dom next 3. html 에 있는 태그, react 에서 모듈을 가져오겠다는 "React.", id가 app 인 태그, html, body 모두 react 에서 생성해주므로 필요없다. 결과 (index.jsx) import {useState} from 'react'; function Header({title}) { return {title}; } function HomePage() { const [likes, setLikes] = useState(0); function handleClick(){ //console.log( "increment ..

참고문헌: https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs * 사용용어 사용자 인터페이스 - 사용자가 애플리케이션을 사용하고 상호 작용하는 방법입니다. 라우팅 - 사용자가 애플리케이션의 다른 부분 사이를 탐색하는 방법입니다. 데이터 가져오기 - 데이터가 있는 위치와 가져오는 방법. 렌더링 - 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치입니다. 통합 - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 연결 방법. 인프라 - 애플리케이션 코드(서버리스, CDN, Edge 등)를 배포, 저장 및 실행하는 곳입니다. 성능 - 최종 사용자를 위해 애플리케이션을 최적화하는 방법. 확장성 - 팀, 데이터 및 트래픽이 증가함에 따라 애플리케이션..

auto install을 시킨 후 사이트를 실행시켰는데 정상적으로 실행되지 않는다. node sass 버전이 업데이트 되면서 node 버전과 안맞는 문제가 발생 이전에는 그냥 자동설치 후 실행하면 바로 실행이 됐었는데, 몇달있다가 다시 install해보니까 문제가 발생한다. package.json 에 라이브러리가 최신버전으로 정의되어있는 경우 이런 문제가 발생하는 것 같다. terminal에 뜨는 console오류를 확인하고 그에 따라서 검색하면 각 에러에 따라 대응방법이 잘 나와있다. 그렇게 한단계씩 해결했다. 오류를 전부 쓰지는 않았다. 내가 실행시켰던 console history 보면서 블로그 기록중.. ㅠㅠ 1. react-scripts 수동설치 $ npm install -g react-scrip..

현재 나는 react "학습중"이다. 메모하려고 블로그를 쓰고있지만 부족한 부분이 많을 수도 있다. 생각보다 인강을 듣고 검색하고 해도 배운것과 다른 또다른 방식에 접하면 변경하기가 쉽지는 않은 것 같다. inflean 강의에서는 function component 로 정의하고, redux-thunk로 action을 실행시키는 dispatch에 함수를 전달할 수 있도록 하여 callback 방식을 자주 사용하던 나에게는 구현이 매우 간단한데 현재 사용하는 템플릿은 class component로 컴포넌트를 정의하고, redux-saga를 사용하여 firebase에서 데이터를 가져오곤 한다. redux-saga의 러닝커브가 꽤나 높다고 하는데 내가 어려웠던 이유는 생각보다 인터넷에 예제가 별로 없었다. ㅠㅠ ..

내가 듣는 강의의 강사님이 컴포넌트 생성 시 항상 사용하는 단축키가 있다. 강의에서는 Visual Studio를 사용하고 있으며, 생성된 javascript 파일에서 "rfce"를 치면 컴포넌트 생성 구조가 자동으로 완성된다. 하지만 난 webstorm을 사용중이라서 ES7 등 VSCode에서 지원해주는 플러그인 같은 것을 따로 찾아봐야했다. Settings - Plugins 에서 React snippets 를 검색해서 install한다. 그리고 rccp 를 입력 후 VSCode처럼 자동완성이 가능하다 VSCode의 rfce -------> Webstorm의 rccp 참고로 rccp 이외의 추가 단축키는 아래에서 확인하면 될 것 같다. 참조 : plugin document github.com/jinsih..

깃에서 소스를 다운로드 받은 후 위와 같은 에러가 발생한다. 에러내용 : Unresolved variable or type store 해결 & 설정방법 File - Settings - Languages & Frameworks - JavaScript에서 javascript language version 변경 React JSX로 변경 후 에러가 사라진다.

* HOC(higher-order component) ? > 특징 : 다른 컴포넌트를 받아 새로운 컴포넌트를 return하는 function > Auth라는 컴포넌트(HOC) 내에 다른 컴포넌트들을 삽입 가능 const EnhancedComponent = higherOrderComponent ( WrapperdComponent ); * HOC 적용방법 1. front 폴더 아래 hoc 폴더 auth.js 생성 import react, {useEffect} from 'react'; import Axios from "axios"; import {useDispatch} from "react-redux"; import { auth } from '../_actions/user_action'; /** * * @pa..