redux-thunk에 대해 알아보자
Redux Thunk thunk란 evaluation을 delay시키기 위한 함수를 말한다. redux thunk란 delay되는 dispatch()를 사용하기 위한 미들웨어 주로 async 요청을 할 때 사용한다. middlware 등록 import thunk from 'redux-thunk' const store =...
Powershell Alias 설정하기
Set-Alias 또는 New-Alias > Set-Alias 별칭 실제커맨드 > New-Alias 별칭 실제커맨드 > Get-Alias # Show all alias New-Alias는 ovverride시 error를 발생한다. (더욱 안전하다.) alias를 설정했으면 $profile에 저장해야한다. > notepad $profile...
React Blog (3)
컴포넌트 구성 react component의 전체적인 구성을 살펴본다. src - pages - components - auth - post - write - common - posts - containers - modules - lib - style...
React-Express Local dev 환경설정
react와 express 사용 프론트 엔드에서 react를 사용하고 백엔드에서 express를 사용하여 로컬 개발환경을 구성할 수 있다. 이렇게 하면 직접 API를 구성하거나 데이터베이스를 통하여 다채로운 개발경험을 할 수 있다. Localhost CRA로 생성한...
Express에 Logger와 Debugger 셋팅하기
Logger logger로 morgan 패키지를 이용할 것이다. 설치 npm install -D morgan import import logger from 'morgan' // ... app.use(logger('포맷')) Mount 인자를 통하여 log의 포맷을 정할 수 있다. app.use(logger('dev')) app.use(logger('common')) app.use(logger('combined'))...
Scroll Indicator
scrollTop, scrollHeight, clientHeight scrollTop An element’s scrollTop value is a measurement of the distance from the element’s top to its topmost visible content. element.scrollTop // return the number of pixels...
Code Piece 2
CSS 변수와 Javascript를 이용하여 스타일 동적으로 바꾸기 css 변수 선언 .carousel-slides { --currentSlide: 0; transform: translateX(calc(var(--currentSlide) * 100%)); } x축으로 -100%만큼 이동, 즉 왼쪽으로 .carousel-slides의 width만큼 이동. currentSlide라는 css변수를 선언하여...
Inersection Observer API를 활용한 Infinite Scroll
출처: Intersection Observer API Intersection Observer API The Intersection Observer API lets code register a callback function that is executed whenever an element they wish to monitor enters or exits...
scrollIntoView다루기
scrollIntoView DOM요소.scrollIntoView(옵션) DOM요소의 scrollIntoView를 호출하면 해당 요소로 스크롤이 이동한다. EX) 클릭 시 맨 위로 올라가는 버튼을 만들기 (scroll to top) const scrollToTop = document.querySelector('.scroll-to-top') const topDiv = doucment.querySelector('.top-div') scrollToTop.addEventListener('click', e...
Code Piece - 1
Click 시, 특정 스타일 on & off 하기 addEventListner('click', cb) classList.toggle('클래스이름') 이용 HTML 작성 <ul id="nav"> <li> <button>1</button> </li> <li> <button>2</button> </li> <li> <button>3</button> </li> </ul> 스타일 정의 /* style.css...
React Blog (2)
Auth Logic User와 관련된 auth 로직에 관해 정리한다. 회원가입(register) 사용자는 브라우저의 form 태그로부터 회원가입에 필요한 정보를 받는다. 전달받은 정보를 검증하기 위한 schema를 작성한다. schema 작성을 위해 joi을 사용한다. yarn add...
styled-components에서 props 활용하기
styled-component에서 props 받기 tagged template literal을 사용하기 때문에 ${}내부에 props를 받는 함수를 정의하여 props를 사용할 수 있다. const StyledDiv = styled.div` ${props => /* do something with props*/} ` props에...
React Blog (1)
개발일지 리액트를 다루는 기술이라는 책에서 진행한 블로그 프로젝트를 따라해보며 쓰는 개발일지 Backend Folder Structure backend - node_modules - src - api - auth - auth.ctrl.js - index.js - posts -...
Regexp Quick Recap (정규표현식 간단 요약) with Javascript
Regexp 생성 Regexp constructor const str = "Almost before we knew it, we had left the ground." // new RegExp("pattern", "flags") const regexp = new RegExp("[a-z]", "g") str.match(regexp) literal const...
React - useState를 이용해서 Tagbox 만들어보기
생각하기 input과 submit button으로 이루어진 form이 있다. input에 태그를 입력하고 enter를 누르거나 button을 클릭하면 태그가 추가되어 렌더링한다. 입력한 태그를 받을 state 가 필요하다. 태그 리스트 state가 필요하다. 태그를 추가하는 로직이...