전체 글 (64) 썸네일형 리스트형 [Develop/React] immer 정리 immer 정리 리덕스를 사용하면서 액션 타입, 액션 생성 함수, 리듀서를 수정하면서 state에 새로운 객체 반환을 위해 ...을 이용한 전개 연산자와 slice함수를 통하여 객체를 반환하였다. 불변성을 유지하기 위해 다른 포스팅에서 Immutable이라는 라이브러리을 정리했었다. 아래는 Immutable 정리 포스팅이다. [Develop/React] Immutable 정리 Immutable 정리 리엑트 공부 중 리덕스를 사용하면서 액션 타입, 액션 생성 함수, 리듀서를 수정하면서 새로운 객체 반환을 위해 ...을 이용한 전개연산자와 slice함수로 새로운 수정된 새로운 객체를 반환 하였.. hoons-up.tistory.com 프로젝트를 진행하면서 불변성을 유지하면서 업데이트하는 immer이라는 라이.. [Develop/React] create-react-app 절대경로 설정 React 절대경로 설정 컴포넌트나 모듈 사용 시 import를 사용해서 가져다 쓰는데 이때 경로설정을 보통은 기본적으로 상대 경로로 한다. 상대 경로 사용 시 디렉토리 구조가 깊어 질수록 ../../../ 을 사용하게 되어 복잡해질 수 밖에 없다. 따라서 아래와 같이 디렉토리 구조에 맞춰 융통성 있게 상대 경로와 절대 경로를 사용 할 수 있도록 절대 경로 설정 방법을 알아보자. MacOS 일 경우 package.json 파일에 scripts 부분에 start, build 앞에 NODE_PATH를 추가하여 아래와 같이 수정 "scripts": { "start": "NODE_PATH=src react-scripts start", "build": "NODE_PATH=src react-scripts build.. [Develop/React] proxy 수동 설정(setupProxy) proxy 수동 설정(setupProxy) 브라우저에서 출처가 다른 즉 host나 port가 다른 백엔드 서버로 API 요청 시 호출할 때 발생할 수 있는 CORS 관련 오류를 방지하기 위하여 Proxy를 설정하여 준다. 간단하게 설정하는 방법과 수동으로 커스터마이징하는 방법을 정리한다. 해당 proxy 설정을 통하여 로컬 환경에서는 처리하지만 추후 정적인 소스를 서버에 배포하여 API요청을 위해서는 nginx나 apache의 proxy 설정을 해주면 된다. 혹 netlify를 사용했다면 netlify에서도 아래와 설명할 pathRewrite 설정 할 수 있으니 알맞게 설정하면 된다. 테스트는 VLOEERT BLOG에서 API 예시를 사용했다. 첫번째 방법 package.json를 통한 설정 "brows.. [Develop/React] middleware is not a function redux-promise-middleware 이슈 middleware is not a function redux-promise-middleware 이슈 리액트를 다루는 기술을 통하여 미들웨어를 사용하여 비동기 통신하는 부분에서 이슈가 있어 혹시나 개정판이 아닌 리액트를 다루는 기술 도서를 통해서 공부하는 개발자들을 위해 블로그 포스팅을 통하여 정리한다. redux-promise-middleware를 통한 redux 비동기 통신 작업 시 middleware is not a function 발생 import { createStore, applyMiddleware } from 'redux'; import modules from './modules'; //import ReduxThunk from 'redux-thunk'.. [Develop/Javascript] var, let, const란? 차이점 var, let, const란? 차이점 var, let, const Javascript에서 변수 선언 방식에 사용 된다는 공통점이 있지만 서로 확연한 차이점이 존재한다. 선언 제약이라던지 변수의 스코프 레벨에 대한 차이점이 존재한다. var var은 기존에 Javascript에서 사용하던 변수 선언 방식이다. var은 재선언, 재할당등 면에서 제한이 없다. 따라서 여러명의 개발자가 작업을 진행 할 경우 선언한 변수의 중첩등 문제점을 야기할 수있다. 아래와 같이 똑같은 변수를 재선언하여도 문제가 되지않는다. var name = 'hoons'; console.log(name); // 출력 : 'hoons' var name = 'hyuns'; console.log(name); // 출력 : 'hyuns' 또한.. [Develop/Git] git stash 간단사용 git stash 간단사용 git stash는 작업 디렉토리에 unstaged 파일들을 백업하고 작업 디렉토리를 깨끗한 상태로 만드는 것이다. commit되기 이전 작업 중 파일과 git add로 추가된 파일 까지 모두 stash 영역으로 저장되며 수정분량은 제거 된다. 필요했던 상황 작업 환경에 따라 git flow를 통한 개발 방법론을 택하여 진행중인 프로젝트에 깜박하고 master, develop에 작업을 했었다. commit을 친 상태가 아니였고 git stash를 사용 하기로 했다. 아래는 간단한 stash 활용이다. git stash 저장 및 확인 // git stash를 통하여 작업한 내용을 백업한다. (git stash save 동일) git stash // 작업이 재대로 됐을경우 아래와 .. [Develop/React] createStrore applyMiddleware와 devToolsExtension 함께 사용 createStrore applyMiddleware와 devToolsExtension 함께 사용 리엑트에서 리덕스 개발자 도구 사용을 위해서 store 생성 시 devToolsExtension 설정을 해줘야 했다. 설정에 대한 내용을 모른다면 아래 포스팅을 참고 https://hoons-up.tistory.com/16 [Develop/React] 리덕스 개발자 도구 사용 리덕스 개발자 도구 사용 리덕스 개발 시 디버깅에 유용한 툴로 스토어의 상태나 어떤 액션들이 디스패치 되었는지 알 수 있어 유용한 툴이다. 설치방법 1. 크롬 웹 스토어에 접속한다. https://chrome.google.co.. hoons-up.tistory.com 소스 미들웨어와 함께 사용하면서 개발자 도구와 함께 사용하는 방법을 알.. [Delvelop/JavaScript] replace로 replaceAll 사용 정규식을 이용한 replace로 replaceAll 사용 javascript에서 replace는 var text = “foopoo” 문자형 변수가 존재할 때 text.replace("o","f") 로 변환시 맨 처음의 o만 f로 변형되게 된다. 쉡게 모든 o를 f로 변환하고자 할경우는 정규식을 이용하여 replace(/패턴/정규식옵션 , “대체텍스트”)형식으로 써주면 된다 옵션에는 g , i , m이있으며 g - 첫번째 문자만이 아닌 모든 문자를 대체 i - 대소문자 구분하지 않음 m - 여러 줄 검색 따라서 모든 text를 대체 할 경우 text.replace(/o/g ,"f") 형식으로 사용하게되면 모든 o문자가 f로 치환된다. text.replace(/ /g, "f") 모든공백을 f로 치환한다는 뜻.. 이전 1 ··· 3 4 5 6 7 8 다음
