분류 전체보기 검색 결과

해당 글 777건

Next + Typescript (1) tsconfig setting

@zeit/next-typescript를 사용하는 방법은 deprecated되었습니다. 공식문서 : nextjs.org/docs/basic-features/typescript Next Example도 참고합시다 : github.com/vercel/next.js/tree/canary/examples/with-typescript 우선 Next 프로젝트를 생성한 후 tsconfig.json을 생성한 뒤 실행시켜보려고하면... 때문에 해당 패키지들을 설치한 후 확장자를 tsx 꼴로 지정하시면 타입스크립트를 사용하실 수 있습니다. 주의하실점이, js였을 때는 확장자를 jsx로 하지 않아도 오류가 나지는 않았지만 ts를 사용하시게 된다면 확장자가 ts면 오류가 납니다. 우선, tsc --init으로 tsconfig..
React, Next, Redux/▲ Next.js 2021. 2. 3. 23:07

useSpring을 이용한 3d-card 만들기

앞서 react-spring은 5개의 훅을 가지고 있다고 안내하였다. darrengwon.tistory.com/1238 react-spring 소개 및 간단한 이용법 이번 프로젝트에서는 다루는 asset들이 패션 모델들의 이미지였기 때문에 프론트엔드에서 애니메이션, 트랜지션 등 화려한 뷰를 보여줄 필요가 있었다. 그래서 이번 기회에 react-spring을 써보기로 darrengwon.tistory.com useSpring : data를 a에서 b로 이동시키는 spring이다. useSprings : multiple spring이다. useTrail : 단일 dataset을 위한 multiple spring이다. 하나의 spring을 다른 것들이 따라간다. 그래서 "Trail"이다. useTransiti..
React, Next, Redux/⚛ React.JS 2021. 2. 2. 13:44

react-spring 소개 및 간단한 이용법

이번 프로젝트에서는 다루는 asset들이 패션 모델들의 이미지였기 때문에 프론트엔드에서 애니메이션, 트랜지션 등 화려한 뷰를 보여줄 필요가 있었다. 그래서 이번 기회에 react-spring을 써보기로 했다. 이번 아니면 언제 쓰겠는가. www.react-spring.io/ react-spring Bring your components to life with simple spring animation primitives for React www.react-spring.io 자연스러운 애니메이션을 위해 스프링의 원리를 기반으로 한 애니메이션을 설계했다고 한다. React, React-Native, React-Native-Web 에서 모두 사용 가능하다. 설치 yarn add react-spring 용량과 ..
React, Next, Redux/⚛ React.JS 2021. 2. 2. 11:49

아임포트 인증 결제(일반적인 결제) in Web

여기를 참고하면 편합니다. github.com/iamport/iamport-manual/blob/master/%EC%9D%B8%EC%A6%9D%EA%B2%B0%EC%A0%9C/README.md iamport/iamport-manual 아임포트(iamport) 결제연동을 위한 매뉴얼입니다. Contribute to iamport/iamport-manual development by creating an account on GitHub. github.com 실제 작성한 코드는 개인사업자 등록 이후 다루도록하겠습니다. 아임포트 관련 문서와 특징 공식 홈페이지 : www.iamport.kr/ github : github.com/iamport iamport manual : github.com/iamport/iam..
미분류/💰 Import, fin-tech 2021. 2. 1. 22:10

그래서 무슨 PG를 써야 하나

아임포트에서 안내해주는 pg 서비스 가입 절차에 따르면 서비스에 적합한 PG사를 고르는 것이 중요하다고 언급하고 있습니다. www.iamport.kr/pg PG사는 기본 결제수단을 제공하는 PG사와 전문적인 목적에 특화된 PG사로 나눠서 보면 이해하기 쉽습니다. KG이니시스, 나이스페이먼츠 등 PG사들은 일반적으로 카드결제, 실시간계좌이체, 가상계좌, 핸드폰결제를 지원합니다. 반면 페이팔은 해외결제를, 카카오페이나 페이코 등은 간편결제를 제공하는데 특화되어 있습니다. 또한 휴대폰결제에 특화된 다날의 경우 수수료와 정산주기 면에서 기본 PG사들의 휴대폰 결제보다 더 나은 조건을 제공하므로, 판매단가가 소액이거나 미성년자 결제비중이 높을 때 사용하면 좋습니다. 따라서 나에게 적합한 PG사가 어떤 것인지 먼저..
미분류/💰 Import, fin-tech 2021. 2. 1. 14:31

결제 프로세스에 대하여 (이것이 k-결제 프로세스이다)

전자 결제 서비스 제공 업체를 탐색했으니 일반적인 결제 절차가 이루어지는 과정에 대해 알아봅시다. iamport에서 제공해주는 정보를 정리한 것입니다. iamport/iamport-manual 아임포트(iamport) 결제연동을 위한 매뉴얼입니다. Contribute to iamport/iamport-manual development by creating an account on GitHub. github.com 이해 당사자 * 가맹점 서버 이 글을 보고 있는 당신이 구성할 백엔드 서버. 비즈니스 로직을 수행하는 곳이니 WAS일 터이다. * PG(결제대행사) 가맹점과 카드회사간 네트워크 망을 구축해 카드 결제 승인 등 업무를 하는 부가통신사업자이다. KG이니시스, KCP, 토스페이먼츠(구 LG U+) 가..
미분류/💰 Import, fin-tech 2021. 2. 1. 12:54

certbot를 활용한 https 인증서 발급 및 cron 설정

certbot.eff.org/docs/ Welcome to the Certbot documentation! — Certbot 1.11.0.dev0 documentation certbot.eff.org AWS ACM 사용해도 되긴 하는데 솔직히 AWS console 세팅이 더 복잡하고 손이 많이 갑니다. greenlock-express은 불안정하고, 무엇보다 프로젝트가 관리가 안되고 있습니다. 다음과 같이 구성할 예정입니다. 1. certbot 설치 실무적인 cerbot 설치 과정은 아래 사이트에서 편하게 확인할 수 있다. certbot.eff.org/lets-encrypt/snap-nginx Certbot - Snap Nginx a project of the Electronic Frontier Found..
🐧 Linux, shell, web server/📗 Nginx 2021. 2. 1. 07:28

3 tier 구성에서 Web Server와 WAS의 차이는 무엇인가?

3 tier 하면 web-was-db 의 구성이 일반적인데 여기서 was(web application server)가 무엇이며 web server와 무엇이 구별되는 것인지를 확인해보기로 하자. Web Server는 Client의 요청과 접속을 관리하고 단순히 정적 내용을 뿌리는 것. HTML을 프로그래밍 언어가 아니고 정적인 내용만 준다. 단적인 예로, HTML에서 for문을 쓸 수 없지않은가? 반면 Web Application Server는 동적인 내용을 만들어내는 서버이다. 비즈니스 로직을 수행하고 DB에 접근한다. 클라이언트(브라우저)가 요청 => Web Server는 WAS로 요청 전송 => WAS는 동적으로 컨텐츠 생성 및 비즈니스 로직 수행 => Web Server는 그것을 받아 클라이언트에게..
🌐 Network/🌐 Network 2021. 2. 1. 05:45

Forward Proxy vs Reverse Proxy

- Proxy는 무엇인가 클라이언트와 서버 사이에 존재하는 중계기로, 클라이언트 대신 서버와 대리로 통신을 한다. 함수의 관점에서는 미들웨어인 것이 서버의 관점으로 옮겨왔다고 보면 된다. - Proxy Server의 역할을 무엇인가 특정 요청만 받아들일 수 있음 (필터링) Req, Res를 확인하고, 재 가공할 수 있음 (트랜스코딩) => 스트리밍 서비스에서 화질, 비트레이트 변환하는 미디어 서버도 Proxy 서버로 볼 수 있음. https://darrengwon.tistory.com/1210 캐시를 통해 자원을 저장할 수 있음. (캐싱) 프록시 서버로 넘어온 데이터를 조작할 수 있음. referrer도 지우고, UA도 지우고 개인 식별 헤더 들을 지워버릴 수 있다. (익명화) - Proxy는 알겠는데 ..
🌐 Network/🌐 Network 2021. 2. 1. 05:09

Cache의 개념

Cache는 자주 접근하는 데이터를 복사 해놓는 임시 저장소이다. Cache의 개념은 네가지로 변주된다. 아래에 언급되어 있지 않더라도 cache의 개념 정의에 적합하다면 언제든지 cache가 될 수 있다. 1. 메모리적 개념의 cache 특정 프로그램을 실행하기 위해 메모리에 있던 데이터를 CPU 내의 캐시 메모리에 저장하여 빠르게 실행할 수 있다. darrengwon.tistory.com/818 2. 브라우저 캐시 이미지 등 용량이 큰 일부 정적 파일을 빠르게 불러오기 위해 브라우저에서 파일을 사용자의 로컬 환경에 저장해둔다. 3. CDN 웹 서비스를 구현해본 사람이라면, CDN을 사용해본 적이 있을 것이다. CloudFlare나, AWS CloudFront 등을 이용하면 편하다. 다만, 국내 한정 ..
💻 CS 일반/💻 CS 일반 (etc...) 2021. 1. 31. 07:59