현제 우리 사이트의 결제 방식은 결제하기 버튼을 누르면 페이지가 이동이 되고 결제 모듈이 뜨는 방식이다. 현제 결재 기능에 간편결제 기능을 추가하려고 하기 때문에 결제하기를 클릭할 시 페이지 이동이 없고 dialog로 바로 뜨도록 만드는 방식으로 바꾸려고 한다. 간편 결제 값을 내려주기도 편하고 사용자 입장에서도 페이지가 왔다갔다 하는것 보다는 이 방법이 더 편할것 같다는 생각이 들었다. 결제 페이지를 들어가면 getInitialProps 함수에서 form 입력값이 전부 입력이 되어 있는지 확인하고 결제 정보를 store 에서 가져온다. 페이지가 로드 되고나서 주문을 생성 하는 api를 보내고 setState를 통해서 response 값의 id 값을 넘겨준다. 그리고 값들을 정리를 해서 결제 모듈로 넘겨..

DropDown Component를 만들었고 props로 아래와 같은 인자를 받도록 만들었다. interface Props { items: Option[]; color?: string; onSelectlist?: (key: string) => void; } const DropDown: FunctionComponent = ({ items, color, selectlist, }) => { const selectedItem = find(listItems, { selected: true }); const changeKey = () => { ... if (selectedItem && selectlist) { onSelectlist(selectedItem.key as T); } ... } .... } export ..

이전에 getServerSideprops, getStaticProps 에 대해서 간단하게 정리한 글이 있었지만 그때는 완벽하게 이해는 하지 못 했다. 오늘 다시 이 메소드들을 살펴 보면서 이해한 부분들에 대해서 적어보려고 한다. getIntialprops는 next 9 버전 부터 사용을 권장하지 않지만 getServerSideprops와의 차이점을 설명하기 위해 넣어보았다. 우선 getIntialprops과 getServerSideprops 의 차이점에 대해서 알아보자. 두 메서드 모두 요청 마다 데이터를 가져와서 페이지를 pre-render 해야하는 경우에 사용하면 된다. 두 메서드의 차이점은 데이터 요청을 했을 경우 페이지를 새로 그리는지 아닌지에서 차이가 난다. - 첫 요청의 값 = { name: ..

최근 react 의 라우팅 방법에 대해서 의문점이 들어서 여러 가지 자료를 보고 조사를해 보았다. 여러 자료를 보면서 헷갈렸던 부분들도 있었다. 이제 부터 내가 이해한 부분을 간단히 설명해보겠다. 처음 매우 헷갈렸던 부분은 기존의 ssr 방식이였다. 지금의 ssr과 예전의 ssr 방식은 좀 뭔가 다른 부분이 있던것 같았다. 그 답은 정답인지 모르겠지만 스택오버 플로우 답변을 통해서 알 수 있었다. 해당 답변에서 이러한 설명이 있다 => "지금은 URL이 해석되는 곳이 2곳 이지만 옛날에는 1곳 뿐 이였다." 이 설명으로 애매모호하던 부분의 의문증이 풀렸다. 옛날은 위의 그림의 위쪽 표 같은 방식일 때를 말하고 지금은 아래쪽표와 같은 방식일 때를 말하는것 같다. 1.server에서 뷰와 데이터를 전부다 처..

컴포넌트 css 작업 중에 중복 사용되는 css를 %를 사용하여 선언을 해주었고 반응형 값이 들어가야했기에 아래와 같이 선언 해주었다. %font { font-size: 14px; font-weight: 600; @include media(">640px") { font-size: 16px; font-weight: 700; } } 그리고 exclude 를 통하여 위의 값을 가져와서 실행을 하니 에러가 발생 하였다. 저런 형식으론 사용 할 수 없다는 에러였다. %font-small { font-size: 14px; font-weight: 600; } %font-medium { font-size: 16px; font-weight: 700; } 그래서 위와 같이 설정을 바꿔주고 폰트의 반응형이 필요한 곳에 me..

요즘 디자이너와 css의 특정 값들을 지정하는 작업을 진행 하고 있다. 오늘은 box shadow의 값을 지정 하였는데 네이밍에 대해서 고민을 하게 되었다. 해당 값은 우선 전역 변수로 지정해주어 className에 추가하면 적용이 되도록 만들 생각이였다. 그래서 우선 혹시 다른 box-shadow 값을 사용하게 되어 네이밍이 겹치는걸 방지하기 위해 global css 에는 제일 앞에 "-- "를 붙여 주기로 정하였다. 디자이너 우선 사용하기로한 shadow는 3가지였다. 1. 1px 1px 8px 2. 1px 1px 3px 3. 0px -3px 6px 여기서 문제는 저 3번째 값이였다. 원래 기존 생각능 shadow-1 shadow-2 이런 방식으로 이름을 지어주여고 하였다. 하지먼 저 3번째 값은 마..