머리가 나뻐서 삽질 SAP(Study And Programming)

복습겸 기본적인 전역 상태 관리를 위해서 리덕스툴킷 간단하게 축소하여 구현하였다. RTK를 설치하고 configureStore에 combineReducers를 연결하고 그 안에는 createSlice된 액션 reducer들이 있다. 또한 비동기 함수 디스패치를 위해서 createAsyncThunk 함수를 생성한뒤, extraReducers에 할당 해 주었다. 이로써, 리덕스 툴킷에 대한 설치와 사용 + Thunk까지 실제 API를 사용하여 연결하였다. 전체 구조는 다음과 같다 실제 구현 예제)

simplebar-react - npm (npmjs.com)에서 제공하는 라이브러리를 사용할 때, 스크롤을 세로 가운데 정렬 구현. dom에 대한 참조는 크게 2가지 방법이 있다. 1. scrollableNodeProps를 useRef로 사용하여 참조하는 방법 scrollableNodeProps You can pass props to the underlying scrollable div element. This is useful for example to get a ref of it, if you want to access the scroll event or apply imperative directive (like scrolling SimpleBar to the bottom, etc.). const s..

목차 1. CORS 에러 2. Proxy서버로 우회하는 방법 3. express 로 프록시 서버 만들기 4. React에 적용해보기 5. package.json 을 사용한 프록시 설정 6. CRA의 setupProxy.js 를 사용하기 1. CORS 에러 많은분들이 익히 알고있겠지만 빠르게 그 원인에 대해서만 정리하면 다음과 같다 웹 어플리케이션에서 다른 도메인 또는 포트로 부터 리소스를 요청할 때 발생하는 보안 메커니즘인데, 웹 어플리케이션은 보안 상의 이유로 스크립트에서 동일 출처 정책(Same Origin Policy)을 따르게 되어있다. 동일 출처 정책은 웹 페이지가 다른 도메인, 포트, 프로토콜로 부터 리소스를 요청할 때 제한을 두는 보안 메커니즘이다. CORS는 클라이언트에서 발생한다. 따라서..

await-to-js - npm (npmjs.com) 용도: Async await wrapper for easy error handling 설치) $ npm i await-to-js --save $ yarn add -D await-to-js TypeScript Usage) 공식 홈의 타입스크립트 예시가 적절치 않고 에러가 있어서 다음의 내용으로 작성해 보았다 import to from 'await-to-js'; interface ServerResponse { test: number; } export async function usage() { // const p = Promise.resolve({ test: 123 }); const [err, data] = await to( new Promise((res..

웹 프론트엔드 개발을 위해서는 CSS를 제대로 이해하고 공부해야 할 필요성이 있다 특히 자바스크립트와 프레임워크의 홍수 속에서 CSS는 그 커리큘럼의 일부 구성에 속해 있는 경우가 많기 때문에 기본기를 제대로 준비할 기회가 많지 않았다 Udemy CSS 완벽 가이드 강좌를 통해 CSS의 정의와 원리, 사용 방법 같은 아주 기본적인 내용 부터 시작해서 점차 심화한 내용을 학습해 보기로 하였다 해당 강의는 실제 예시와 그 이론을 함께 살펴보는 방식으로 진행되었다 강의 평점을 보니 4.9점이었다, 수업 내용과 설명이 충실했던것 같다 먼저 CSS 강의의 대상은 아래와 같다 보다 멋진 웹사이트를 구축하고 싶은 웹 개발 초보자 CSS를 알지만 보다 더 깊이 알고 싶은 분 시행착오로 CSS 사용에 지쳐 개선이 필요하..

yarn berry의 PnP기능을 사용하기 위한 Create React App 설치와 Typescript 설정 내용 작성은 2022.11.11 을 기준으로 합니다. (node 16.15.0) 연속해서 설치와 구성이 실패하는 경우 검색을 통해 가장 최근의 설치 튜토리얼을 참조해 주세요. 목차 yarn 설치 프로젝트 생성 node_module과 package.lock.json 제거 yarn berry 버전 적용 vscoe를 사용하는 경우 typescript 설정을 위한 editor SDK 설치와 ZipFS 확장팩 설치 plugin-typescript 설치 .gitignore 설정 react 실행 Property 'toBeInTheDocument' does not exist on type 'JestMatche..

문자열로 받은 파라메터를 가지고 함수를 호출하는 경우 (아마) 가끔 쓸일이 있는 eval() 호출자와 동일한 권한으로 코드를 실행할 수 있기 때문에 위험하다. 예를들어 FileAPI를 사용하는 경우 엑세스하여 악의적인 작업을 수행할 수 있기 때문이다. eval과 new Function 모두 문자열을 js 코드로 분석한다는 공통점이 있지만 다음의 차이가 있다. eval 은 현재 실행 컨텍스트에서 구동되면 실행지점의 지역변수에 엑세스 할 수 있다. 그러나 Function은 지역변수에 엑세스 할수 없기 때문에 더 안전하다. RunCode.ts class RunCode{ public static exec(obj:any){ return Function(` "use strict"; return ( ${obj} ) ..

vite 번들러를 사용한 proxy 설정 1. vite 로 preact-ts 설치 $ yarn create vite https://vitejs.dev/guide/#trying-vite-online Vite Next Generation Frontend Tooling vitejs.dev 이후 설치 질문이 나오는데 설치하고자 하는 앱을 선택한다 ex) preact-ts 2. 설치된 vite에서 vite.config.ts 파일의 proxy 설정 vite가 설치되면 root의 vite.config.ts 파일 설정을 통해서 proxy 를 적용할 수 있다. API를 적용하기 위해서 jsonplaceholder 의 https://jsonplaceholder.typicode.com/todos/1 를 예로 들겠다. 주의!..

이번 실무 프로젝트에서 사용한 타입스크립트 설정파일이다. 컴파일러 옵션에 대한 정확한 작동 방식을 돕기 위해서 꼼꼼하게 설명해 놓았다. .tsconfig.json { "compilerOptions": { // js와 jsx 파일도 포함시키도록 한다. 점진적으로 바꿔나갈때 사용 "allowJs": true, // 모듈 타입.nodejs는 commonjs를 사용하므로 설정함 "module": "commonjs", // es6 모듈 사양에 따라 commonJS모듈을 가져올 수 있다. 기본 내보내기가 없는 모듈에서 대체 모듈 가져오기를 실행한다. import foo from 'foo' 와 import * as foo from 'foo' "esModuleInterop": true, // 사용할 es 버전 "tar..

단어강조 정해진 키워드가 입력되면 색상으로 강조 About 루니툰 정품 ♡ 꾸안꾸룩, 홈웨어룩으로 활용하기 좋은 맨투맨 반바지 트레이닝 세트를 소개할게요 :) 드롭된 숄더라인과 여유있게 넉넉한 가오리핏의 맨투맨과 전체 허리밴딩으로 바디에 편안하게 핏되는 밴딩 반바지가 세트로 구성된 트레이닝이에요. 러블리한 루니툰 캐릭터들로 사랑스러운 포인트는 up! 간편한 트레이닝 룩부터 집앞 마실룩, 캠핑룩 등으로 가볍고 편안하게 스타일링을 완성해주구요, 세트로도 완성도 있는 캐주얼룩 연출에도 좋지만 각각 따로 다양한 상의,하의와 매치해 활용해주셔도 좋아요 ♡ 사랑스러운 옐로우, 핑크 두 컬러 구성으로 준비했구요, 취향따라 초이스하실 수 있으니 놓치지마세요 :) TIP 원단 특성상 물세탁시 수축이나 변형의 가능성이 있..