# loader
React Session 로그인 구현(w. 회원가입, JSON Server, react-query): (2) 클라이언트
이전 포스팅에 이어서 이번엔 클라이언트 쪽의 코드를 작성해보자. 클라이언트 클라이언트 코드도 역시 중요한 부분만 체크하며 샥샥 넘어가보자고! 폴더 구조
멋쟁이 사자처럼 11기 해커톤 - React Router v6.4 적용기
React Router더욱 더 강력해진 React RouterReact Router v6.4가 업데이트되었다는 소식을 전해듣고, 이번 해커톤에서 v6.4를 적용시켜 SPA를 구현하였습니다.이번 v6.4를 업데이트를 통해 React Router는 그저 라우팅 기능만을 하
[React] 리엑트 라우터 action
좋다.앞전의 loader 1과 loader 2에서 많은 데이터를 loader를 통해 로딩하고 패칭하여 접근까지 하는 방법을 살펴보고 학습했다.이제는 데이터 패칭만이 아닌 사용자가 직접 어떤 양식이나 데이터를 보내보는 방법을 살펴볼 차례이다. (post 혹은 put/pa
[React] 리엑트 라우터 loader 2
react-router-dom에서 제공하는 아주 중요한 기능인 loader의 전반적인 개념과 기능은 리엑트 라우터 loader에서 살펴보았다.이제 응답에대한 오류 처리와 더불어 조금 더 동적으로 라우터를 사용하는 방법을 알아보자.기존 useEffect를 통해 수작업으로
CSR(Client Side Rendering) 오류 (미해결)
짜자잔제 블로그 모바일 메인 홈페이지 입니다. 저는 JSON 형태로 저장된 포스팅 파일들을 loader를 통해 fetch 함수로 불러와서 메인 화면에 표시했습니다. loader 함수를 Home 컴포넌트 페이지에 저장하고, index 컴포넌트에!서 import 하여 lo
javascript 코드 관리 용어 정리
nest React에서 "nest"라는 개념은 컴포넌트 계층 구조를 구성하는 것을 의미합니다. Nesting은 컴포넌트를 다른 컴포넌트 내에 중첩시키는 것을 말합니다. React에서는 UI를 작은 단위의 재사용 가능한 컴포넌트로 구성합니다. 이러한 컴포넌트들은 계층
넥스트 이미지 컴포넌트 cdn 이미지 불러오기
cdn 주소를 env파일에 담아놓고 path parameter만 바꿔 이미지 컴포넌트 src에 pass 했다.그런데 어떤 짓을 해도 503이 안 없어지는 것이다. 그래서 사수님께 여쭤보았고 아주 빠르게 해결해주셨다. loader를 사용하는 것이다.loader는 url
ERROR in ./src/main.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ERROR in ./src/main.cssModule build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):node.js: 14.20.1mini-css-extract-plugin: "^2.7
생각보다 어려운 Webpack 번들링 (loader 관련 에러)
이전 글의 연장선이다.이전 글이 Webpack 도입에 관하였던 내용이었다면, 이번 글은 기존에 있던 라이브러리 들과의 충돌을 해결하는 내용을 담았다.기본적으로 webpack에서 해야될 세팅을 다 끝냈다고 생각했다. 왜냐면 공식문서가 하라는 기본대로 다 했기에 말이다.
ERROR in ./src/loader.css Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
["css-loader", "style-loader"] 작성 순서 오류
Unit2 - 번들링과 웹팩
webpack, entry, output, 번들링, loader, plugin번들링 : 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위프론트엔드 개발자에게 번들이란?\-> 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음
번들링, 트랜스파일링 전략
레벨로그 프로젝트 webpack webpack으로 3개의 환경을 나누어서 번들링을 진행한다. webpack 폴더 구조를 보면 다음과 같다. webpack webpack.common.js webpack.js webpack.dev.js webpack.pr
웹팩(Webpack)의 config 파일 속성
webpack은 22년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러입니다.실리콘벨리나 국내 IT 대기업을 막론하고 프론트엔드 애플리케이션을 대규모 유저에게 제공하기 위해 가장 많이 사용하는 방법이기도 합니다.Webpack이란 여러 개의 파
webpack loader
웹팩은 모든것을 모듈로 바라보기 때문에 자바스크립트 뿐만 아니라 스타일시트로 import 구문으로 불러 올수 있다.CSS 파일을 자바스크립트에서 불러와 사용하려면 CSS를 모듈로 변환하는 작업이 필요하다. css-loader가 그러한 역할을 가능하게 해준다.모듈로 변경
[Webpack5] loader와 asset modules
로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다.뿐만 아니라 CSS 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.로더를 테스트 해보기 위해 my-webpack-loader.js 파일을
[Django] 장고 Views를 활용한 HTTP 요청 처리#4_장고 기본 CBV API
1) > 여태까지 html 파일을 instagram 앱의 templates/instagram에 저장해왔다. template loader는 app directory loader, file system template loader로 구분할 수 있다. 특정 앱에 속하지 않은 html 파일은 프로젝트 settings.py의 DIRS에 저장하는 편이 좋다. 2) ...
