티스토리

Nomad

검색하기

블로그 홈

Nomad

ock-nomad.tistory.com/m

sentialo 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

메이커로서 받아보면 좋은 뉴스레터 최근 나만의 제품을 만들어 보고 싶다는 생각이 많이 들게 되었고 나는 메이커가 되어야 겠다고 결심을 했습니다. 메이커가 되기 위해서 다양한 제품과 마케팅, 비즈니스 방법들을 받아보기 위해 많은 채널들을 구독 하였습니다. 그 중 조쉬의 프로덕트라는 뉴스레터를 추천드립니다. 조쉬의 프로덕트는 다양한 비즈니스와 프로덕트 그리고 1인 창업가의 이야기를 전해줍니다. 다양한 비즈니스 방식과 제품들을 빌드 하는 방법들에 대해 들을 수 있었고 성공한 1인 창업가의 이야기를 통해 많은 동기부여도 받았습니다. 메이커에 관심이 있으신 분이라면 꼭 구독하시는 걸 추천 드립니다. 아래 링크에서 구독을 받아볼수 있습니다. https://maily.so/josh 공감수 0 댓글수 0 2023. 12. 12.
[TIL] 03.02 iamport를 통한 naverpay 연동 및 axios interceptors 한동안 iamport 를 통해서 naverpay 연동을 위한 작업을 진행하였다. 결제 로직상 에서 naverpay를 paymethod로 받을 수 있는 작업은 완료가 되어 있었기에 관련 서류를 준비해 요청을 보내고 iamport에 naverpay 검수 요청을 보냈다. naverpay를 적용 하기 위해서는 통과해야 하는 요건들이 있는데 그 중 아래 3가지 문제에 대해서 통과하지 못했다. 1. naverpay 객체를 보내야 한다. 2. 에러 메시지는 가공 되어서는 안된다. ex) 결재실패: 결재 오류가 발생했습니다. (X) 결재 오류가 발생했습니다.(o) 3. 위변조된 결제 건에 대하여 자동으로 취소 요청을 하고 이용자에게 해당 결제가 위변조 되었다는 사항을 전달해야함 1,2 번 문제는 쉽게 해결을 하였는데 .. 공감수 0 댓글수 2 2021. 3. 2.
[TIL] 01.28 제품 리스트 레이아웃 정렬 이번 주 동안은 제품 리스트의 레이아웃을 잡는 작업을 계속 진행을 했다. 첫번째 그림과 같은 카드형과 두번째 그림과 같은 리스트형 총 두가지 형태로 만들어야 했고 카드형일 경우 640px 이상일 경우 3줄 이하일 경우엔 2줄로 나올 수 있도록 레이아웃을 조절해야 했다. 둘다 flex를 사용하여 정렬을 맞춰 주었다. 카드형은 이미지가 들어갈 공간을 이미지를 감싸고 있는 tag에 padding 값을 주어서 공간을 만들고 이미지는 살짝 작게 들어가야했기 때문에 %로 이미지 크기를 맞추어 주었다. 리스트형은 이미지가 고정폭으로 들어 갔기 때문에 좀더 쉽에 작업을 할 수 있었다. 카드형의 방법을 그대로 가로로 돌려서 사용해 주었다. 공감수 0 댓글수 0 2021. 1. 28.
[TIL] 01.21 배너 작업, 실시간 시계 react-slick 을 사용하여 배너컴포넌트를 만드는 작업을 진행 하였다. react-slick을 사용할 때 공식문서를 보면 css를 import 해서 사용하는데 지금 우리 프로젝트에서는 css 파일을 만들어서 react-click의 className 값을 지정해주어서 필요한 부분은 커스텀하여 사용하고 있다. 위와 같이 dot 이 있고 이미지 크기가 고정이 되는 슬라이드를 만들어야 했다. dot을 생성하려면 setting 값에 dots: true 를 넘겨주면 되는데 이렇게만 넘겨주면 크기와 색상이 기본 값으로 넘어가서 내가 원하는 dot을 만들 수 가 없었다. 그래서 css 파일에서 dot 의 css 속성을 직접 수정을 하여 구현을 하였다. 구현을 하고 나서 보니 appendDots과 dotsClass.. 공감수 0 댓글수 0 2021. 1. 23.
배너 이미지 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 1. 21.
[TIL] 01.20 오늘은 서비스 업데이트를 진행 하였다. - 비타민 검사 결과 페이지 챌린지 section 부분 작업 완료 - 슬라이드 버튼과 readmore 버튼 정렬 수정 - slider 내 이미지 크기와 숫자가 반응형에 맞춰서 자연스럽게 줄어들도록 수정 - Paragraph 컴포넌트 수정한 값이 지금 현재 작업 하고 있는 부분과 이 컴포넌트를 사용하고 있는 페이지에서 영향을 미치고 있어서 해당되는 페이지 전부 수정 - 제품이 없을 경우 챌린지 페이지로 이동 시키는 버튼을 추가하려고 하다가 백엔드와 논의 하여 default 제품 목록 값을 받아 올 수 있도록 해보기로 함 확정은 아님 공감수 0 댓글수 0 2021. 1. 20.
[TIL] 01.19 어제 페이스북을 새로 연결 하고 해결이 된듯 하였으나 이전 페이스북 회원가입을 한 회원정보가 연동이 되지가 않았다. 이전에 페이스북으로 가입을 했더라고 지금 연동되는 페이스북 앱은 새로운 앱으로 인식이 되어서 새로운 회원이 생기게 된다. 이걸 해결하기 위해서는 결국 기존의 페이스북 아이디가 필요한데 찾을 수 없는 상황이기 때문에 다른 방법으로 처리할 수 있는 방법을 생각해야만 했다. 두가지 해결 방법을 생각 했는데 1. 우리가 회원정보에서 필수로 받는 값은 이메일 값이다. 그래서 페이스북 회원 가입을 할 때 기존 회원인 것으로 판단이 되면 기존 회원 정보에서 페이스북 토큰값을 수정해 주는 방법 2. 페이스북으로 가입되어 있는 회원의 수도 적고 소셜로그인을 대부분 카카오를 이용하기 때문에 페이스북 회원가입.. 공감수 0 댓글수 0 2021. 1. 19.
[TIL] 01.18 페이스북 로그인 문제 페이스북 로그인에 대해서 문제가 생겨서 확인을 해보았다. "사용할 수 없는 기능: 현재 이 앱에서 Facebook 로그인을 사용할 수 없습니다. " 라는 에러 메시지를 보여 주었다. 우리 프로젝트에서 페이스북 로그인을 사용하는 방식은 로그인 플로 직접 빌드 방법이고 로직 상에서 문제는 발견하지 못하였다. 에러 메시지와 백엔드에서 찍히는 에러메시지를 확인해본 결과 페이스북 인증 서비스의 기간 만료가 원인인 것으로 파악이되었다. 하지만 현재 사용하고 있는 페이스북 인증 키 를 가지고 있는 아이디가 개인 계정이였고 그 계정의 주인이신 분은 현재 회사에 계시지 않아 이 참에 회사용 계정을 파서 해당 계정의 인증 키를 적용하기로 하였다. 그래서 새로 계정을 만들어 적용을 하려고 하였는데 여기서 또 문제가 발생 하.. 공감수 0 댓글수 2 2021. 1. 18.
[TIL] 01.14 결제 폼 디자인 수정 작업 지금 진행 중인 프로젝트에서 결제 폼 디자인도 바뀌기 때문에 디자이너와 논의 하면서 수정작업을 진행했다. 디자인 시스템을 차츰 만들고 있는 중이기에 앞으로 쭉 사용이 될건지 통합이 될건지 인자를 어떻게 넘겨 줄건지 등에 대해서 계속 생각을 하면서 작업을 진행을 하였다. 지금 디자인에서 Input 이 기존 Input과 다르기 때문에 디자이너와 논의 하여 공통된 부분가 차이가 나는 부분을 정리하여 분기처리를 통하여 두가지 Input이 나올 수 있도록 수정함 헤더 컴포넌트가 기본적으로 shadow를 가지고 있는데 현재 디자인에서는 shadow가 없기 때문에 디자이너와 논의 하여 기본적으로 shadow를 가지고 있지 않고 shadow 인자를 넘겨주면 shadow가 생기도록 수정을 진행 이미 적용되어 있는 헤더 .. 공감수 0 댓글수 0 2021. 1. 14.
[TIL] 01.14 결제 테스트 및 타입 지정 오늘은 여태까지 했던 결제 로직 수정을 마무리 하기위해 타입 지정을 하고 코드 정리하는 시간을 가졌다. Checkout, CheckoutForm, Payment, PaymentModule 컴포넌트의 타입을 namespace로 설정을 해주었다. 코드 정리를 하는 도중 url에 order_id 와 chellenge_id 을 쿼리로 붙이는 부분이 있었는데 백엔드 분과 상의한 결과 굳이 붙여줄 필요가 없는 쿼리라는 결론이 나왔고 해당 쿼리문을 제거한 다음 테스트를 진행해 봤을때 문제가 발견되지 않았지만 혹시 몰라서 일단 주석처리를 하고 진행하기로 하였다. 결제 테스트를 하면서 에러가 나는 부분들 수정 진행 - redirect URL 생성이 되지 않는 버그 해결 - db에 입력되는 uuid 와 web hook에서.. 공감수 0 댓글수 0 2021. 1. 13.
[TIL] 01.12 결제 방식 변경 정리 (페이지 이동 => 다이얼로그) 오늘은 드디어 결제 방식 수정을 완료하였다. 그동안의 과정을 정리해보려고 한다. 기존의 결제 방식은 아래의 그림 처럼 결제 폼에서 submit 을 실행 하면 페이지 이동이 발생하고 iamport 모듈이 뜨는 방식이였다. 이 방식으로는 간편 결제를 추가했을 경우 처음 결제 방식을 선택하고 만약 다른 결제 방식을 선택하는 경우 페이지를 이동을 해야하고 또 결제 폼 입력을 새로해야 한다는 불편함이 있기에 방식을 수정하기로 하였다. 아래와 같은 형태로 만들어서 submit이 실행이 되면 결제 모듈이 뜰수 있도록 수정작업을 진행하였다. 처음에는 기존의 결제 로직을 그대로 가져가려고 했기 때문에 꽤나 애를 먹었다. 하지만 기존의 결제 로직은 페이지 이동이 일어 났을 때의 로직이였고 지금은 한 페이지에서 흐름을 제어.. 공감수 0 댓글수 0 2021. 1. 12.
[TIL] 01.11 결제 로직 수정 결제 폼에서 submit 버튼을 눌러서 폼을 제출을 하였을 경우 formik에서 isSubmitting 인자는 true로 바뀌게 되고 이 인자가 true가 되면 submit 동작이 일어나지 않도록 막아두도록 되어 있다. 하지만 현재 결제폼 에서는 결제가 완료되자 않고 모듈이 꺼졌을 경우 다시 submit 동작이 가능하도록 만들어야 했다. import { useFormikContext } from 'formik' const { setSubmitting } = useFormikContext; 위와 같이 useFormikContext 를 사용하여 setSubmitting 함수를 가져와서 결제가 실패하면 setSubmitting(false) 가 실행이 되도록 설정해 두었다. 그리고 결제가 실패를 하거나 에러가 .. 공감수 0 댓글수 0 2021. 1. 11.
[TIL] 01.07 결재 방식 수정 결재 방식을 innate 와 chellenge를 나누는 방식으로 수정을 진행 chellenge 결제 모듈을 dialog 형식으로 뜰 수 있도록 수정 data 넘겨주는 부분과 lifecycle 관련 하여 수정 중 공감수 0 댓글수 0 2021. 1. 7.
[TIL] 01.06 결재 방식 수정 payment api 보내고 Data 받아옴 ⇒ 주문서 생성 api 실행 ⇒ 결제 모듈 실행 의 결제 흐름은 그대로 두고 차이가 나는 부분은 props로 받아서 함수가 실행되어야 하는 흐름에 맞춰서 넣는 식으로 해결을 해보려고 했지만 똑같은 역할을 하는 함수에서 하나는 값을 return을 해버리고 하나는 값을 store에 저장을 해버리고 또 api의 res값을 받아와서 사용해야 하는데 innate에서는 사용을 하지 않고 이런 부분들은 하나로 합칠 수가 없다고 생각이 들어서 innate는 그대로 두고 chellenge만 수정을 하였다. 이 문제를 해결하기 위해서는 현재 innate와 chellenge 결제 관련 api와 db가 나뉘어져 있는것으로 하는데 이걸 하나로 묶고 하나의 store에서 판매를 하는 .. 공감수 0 댓글수 0 2021. 1. 6.
[TIL]01.05 결제 방식 수정 어제에 이어서 결제 방식을 수정하는 작업을 진행했다. 현재 사이트에서 사용하는 결제 form이 두가지라서 이것을 우선 하나로 합쳐주는 작업을 계속해서 진행 중인데 이 부분이 쉽게 해결이 되고 있지 않다. 공감수 0 댓글수 0 2021. 1. 5.
[TIL] 01.04 결제 방식 변경 현제 우리 사이트의 결제 방식은 결제하기 버튼을 누르면 페이지가 이동이 되고 결제 모듈이 뜨는 방식이다. 현제 결재 기능에 간편결제 기능을 추가하려고 하기 때문에 결제하기를 클릭할 시 페이지 이동이 없고 dialog로 바로 뜨도록 만드는 방식으로 바꾸려고 한다. 간편 결제 값을 내려주기도 편하고 사용자 입장에서도 페이지가 왔다갔다 하는것 보다는 이 방법이 더 편할것 같다는 생각이 들었다. 결제 페이지를 들어가면 getInitialProps 함수에서 form 입력값이 전부 입력이 되어 있는지 확인하고 결제 정보를 store 에서 가져온다. 페이지가 로드 되고나서 주문을 생성 하는 api를 보내고 setState를 통해서 response 값의 id 값을 넘겨준다. 그리고 값들을 정리를 해서 결제 모듈로 넘겨.. 공감수 0 댓글수 0 2021. 1. 4.
[TIL] React FunctionComponent props generic 으로 받기 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 .. 공감수 0 댓글수 0 2020. 10. 20.
[TIL] 10.15 next.js getIntialprops, getServerSideprops, getStaticProps 의 차이점 이전에 getServerSideprops, getStaticProps 에 대해서 간단하게 정리한 글이 있었지만 그때는 완벽하게 이해는 하지 못 했다. 오늘 다시 이 메소드들을 살펴 보면서 이해한 부분들에 대해서 적어보려고 한다. getIntialprops는 next 9 버전 부터 사용을 권장하지 않지만 getServerSideprops와의 차이점을 설명하기 위해 넣어보았다. 우선 getIntialprops과 getServerSideprops 의 차이점에 대해서 알아보자. 두 메서드 모두 요청 마다 데이터를 가져와서 페이지를 pre-render 해야하는 경우에 사용하면 된다. 두 메서드의 차이점은 데이터 요청을 했을 경우 페이지를 새로 그리는지 아닌지에서 차이가 난다. - 첫 요청의 값 = { name: .. 공감수 0 댓글수 0 2020. 10. 15.
[TIL] 10.12 ssr 정리 최근 react 의 라우팅 방법에 대해서 의문점이 들어서 여러 가지 자료를 보고 조사를해 보았다. 여러 자료를 보면서 헷갈렸던 부분들도 있었다. 이제 부터 내가 이해한 부분을 간단히 설명해보겠다. 처음 매우 헷갈렸던 부분은 기존의 ssr 방식이였다. 지금의 ssr과 예전의 ssr 방식은 좀 뭔가 다른 부분이 있던것 같았다. 그 답은 정답인지 모르겠지만 스택오버 플로우 답변을 통해서 알 수 있었다. 해당 답변에서 이러한 설명이 있다 => "지금은 URL이 해석되는 곳이 2곳 이지만 옛날에는 1곳 뿐 이였다." 이 설명으로 애매모호하던 부분의 의문증이 풀렸다. 옛날은 위의 그림의 위쪽 표 같은 방식일 때를 말하고 지금은 아래쪽표와 같은 방식일 때를 말하는것 같다. 1.server에서 뷰와 데이터를 전부다 처.. 공감수 1 댓글수 0 2020. 10. 12.
[TIL] 10.08 sass include media 와 exclude 순서 컴포넌트 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.. 공감수 0 댓글수 0 2020. 10. 8.
[TIL] 09.24 box shadow naming 요즘 디자이너와 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번째 값은 마.. 공감수 0 댓글수 0 2020. 9. 24.
[TIL] 09.23 tab 읽지않음 표시 기능 어제 작성을 해두고 올리지 않아서 오늘 올려본다. 오늘 아래 사진과 같이 각 tab 마다 읽지 않은 내용이 있다는 것을 알리는 기능을 추가 가능한지 물어 보아서 생각해 보았다. 내용을 읽지 않았다면 주황색 점이 붙게된다. 처음 내용을 들었을 땐 간단하게 생각했지만 구현을 하기위해 작업을 하다보니 생각보다 고민해야할 부분이 많았다. 일단 원래 기획에 없던 사항이라서 반응형 레이아웃에서 문제가 생긴다 370px 아래로 내려가게 되면 tap 부분의 자리가 부족하여 점이 tab 밖으로 밀려나가게 된다. 기능적인 문제로는 프론트만 구현을 한다고 하면 반쪽 짜리 알림이 되는 것이였다. 왜냐하면 페이지를 새로고침 하거나 다른 페이지로 갔다가 다시 들어올 경우 한번 읽었다고 하더라도 저 점이 계속 붙어 있게 된다. 백.. 공감수 0 댓글수 0 2020. 9. 24.
[CleanCode] 의미있는 이름 - 의도를 분명히 밝혀라 책에서 "소프트웨어에서 이름은 어디나 쓰인다" 라고 말하는 것처럼 정말 변수명, 함수명 외에도 컴포넌트의 파일 명을 정할때 URL path 명을 정할 때 타입의 이름을 정할 때 코드를 작성하다 보면 수많은 이름을 지정한다. 이 장에서는 이렇게 자주 사용되는 이름을 잘 짓는 간단한 규칙을 몇 가지 소개한다. 1. 의도를 분명히 밝혀라 - 변수의 존재 이유는? - 수행 기능은? - 사용 방법은 ? 위의 질문들에 대해서 내가 이전에 작성한 코드를 보고 질문에 답을 해보았다. 함수의 존재 이유는? article 들을 filter 하여 보여주기 위해서 수행 기능은? articleList를 for문을 돌면서 article 의 category 가 tag와 일치하는지 확인하고 일치하면 filterArr 에 담아서 출력.. 공감수 0 댓글수 0 2020. 9. 12.
[TIL] 09.10 text 에 <span/>,<br/> 태그 입히기 text 로 불러오는 문장에서 []로 감싸진 부분을 하이라이트 해주고 n 문자가 오면 엔터를 걸어 주어야 했다. 3가지 방법을 고민을 했는데 1. react에서 제공해주는 dangerousHtml 메서드를 사용하는 방법. - text를 DB에 저장할때 [] 대신 태그로 n 대신 태그를 같이 넣어준다. - DangerousHtml 컴포넌트를 만들어 해당 컴포넌트로 text 값을 넘겨주어 dangerousHtml메서드를 이용하여 변환 시켜준다. - DangerousHtml 컴포넌트 css 파일에 span 태그는 font-weight과 color 가 적용 되도록 만들어 준다. span { font-weight: bold color: green } ex) 안녕하세요 개발자 입니다. => 안녕하세요 개발자 입니다.. 공감수 0 댓글수 0 2020. 9. 10.
[TIL] 08.31 Next.js sass "attribute starts with" error next 에서 그리드 시스템을 적용하는 중 속성 선택자로 [class^="col-"] 와 같이 설정을 해 두었을 경우 pure css 에는 className 또는 id 값이 있어야 한다 라는 에러가 뜨게 된다. 이 에러의 원인은 next.js 였다. next.js 9.2 이상 버전에서 sass 속성 선택자 attribute starts with 는 전역 css 에서만 사용이 가능하다. 나는 _grid.module.scss에서 적용을 해주고 있었는데 _grid.scss 로 바꾸어 주고 App.js 에서 전역으로 적용을 해주어야 했다. 아래 깃헙 이슈에서 이 문제를 발견하고 해결할 수 있었다. https://github.com/vercel/next.js/issues/10142 공감수 0 댓글수 0 2020. 8. 31.
[TIL] 08.19 Next.js getStaticProps and getServerSideProps getServerSideProps 는 runtime 시 실행 getStaticProps 는 빌드시 실행 next build 명령어를 실행하게 되면 Next.js 는 페이지를 3 타입으로 최적화 한다. λ (Lambda): 이러한 페이지는 런타임에 렌더링되며getInitialProps 또는getServerSideProps를 구현할 수 있습니다. ○ (Static): Static으로 렌더링 된 페이지에는 HTML 만 포함되며 이 페이지는 매우 빠르다. ● (SSG): 정적 사이트 생성 페이지도 정적 방출로 제공됩니다. 이는 HTML 및 프리 페치 된 props (getStaticProps 정적 메소드에서)을 렌더링한다는 점에서 정적 페이지와 다릅니다. 완전히 서버레서 렌더 하려는 이유 사이트 엔진 최적화를 .. 공감수 0 댓글수 0 2020. 8. 19.
[TIL] 08.11 카카오 메시지 템플릿 카카오 템플릿 생성은 카카오 개발자에 페이지에 가서 도구 메뉴를 클릭한 후 메시지 템플릿에 들어가면 템플릿을 만들 수 있다. 자세한 설정은 아래 링크로 들어가보면 잘 나와 있다. https://developers.kakao.com/sdk/reference/js/release/Kakao.Link.html#.sendCustom__anchor https://developers.kakao.com/docs/latest/ko/message/js#link-send-with-template-id // 페이지 진입 시 kakao initialize useEffect(() => window.Kakao.init(process.env.KAKAO_API_KEY, []); // 템플릿 객체 생성 카카오 개발자에서 생성한 템플릿I.. 공감수 0 댓글수 0 2020. 8. 11.
[TIL] 08.07 비타민 검사 서비스에서 회원가입을 빼는 작업을 진행 하였다. 우선 현재 로직에서 빼는게 가능한지 테스트 삼아 시도를 해보았다. 사용자 인증 부분을 모두 제거하고 onSubmit 함수에 걸려있는 submit 조건을 마지막 step 에서 실행이 되도록 바꾸어 주었다. 그리고 페이지 마다 걸려있는 Auth Hoc 도 제거 해주고 서버 분과 맞추어 시도를 해보았다. 생각 보다 쉽게 회원가입을 제거 할 수 있었다. 다만 백에서는 좀 수정할 부분이 많았다. 공감수 0 댓글수 0 2020. 8. 7.
[TIL] 08.06 next tsconfig absolute path tsconfig absolute path tsconfig에서 baseUrl:"." 이렇게 설정을 해두면 ./src 폴더 내에 있는 파일들에 대해서 감싸기? 때문에 ./src/component 라는 path에 import {} from "component/..." 이렇게 바로 접근이 가능하다. 하지만 ./src/component/button/Button.js 라는 경로가 있을 경우 Button.js에 바로 접근 하기위해서는 path 설정을 아래와 같이 해주어야 한다. dir/dir/ 경로를 절대 경로 설정하는방법 { "compilerOptions": { "baseUrl": ".", "paths": { "@/button/*": ["components/button/*"] // /* 이것을 추가로 적어주어야 한.. 공감수 0 댓글수 0 2020. 8. 6.
[TIL] 08.05 next dinamic route 현재 회사 서비스는 next-routes 라이브러리를 통해서 route 지정을 해주고 있었기에 지금 진행하는 프로젝트에서도 해당 라이브러리를 사용하려고 하였다. 하지만 next 9 버전에서 dinamic routes를 제공해주는데 왜 라이브러리를 따로 사용하고 있을까 라는 생각이 들었고 사수에게 물어보니 그동안 next 업데이트를 진행 할 수 없기도 했고 현제 프로젝트에 얽혀 있는 부분이 있어서 계속 사용하고 있다고 하였다. 그래서 현재 진행 하는 프로젝트에서는 next-routes를 제거 하고 next 에서 제공해주는 dynamic route로 적용을 해주었다. 방법은 엄청 간단하였다. pages 폴더에 파일들을 만들면 해당 파일들이 그대로 url 주소가 되는 것이였다. pages - index.js .. 공감수 0 댓글수 0 2020. 8. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.