Docker 사용법 docker 는 내 컴퓨터안에 또 하나의 컴퓨터를 사용하는 것이다. Docker 를 사용하는 이유 개발을 할 때 세팅할 때 번거로움이 생기는데, 개발 버전 이슈 운영 체제 이슈 이를 해결하기 위해 가상머신을 이용하여 버전을 통일 시켜 개발을 한다. but, 컴퓨터안에 또 다른 컴퓨터를 만드니까 속도가 느리다. ...

SSL 과 HTTPS 의 이해 SSL (Secure-Socket-Layer) SSL은 인증서로 사면서 구매를 할수도 있다. https로 접속할수있게해준다. TLS (Transport-Layer-Security) SSL의 상위 단계 로드밸런서에 SSL 인증서는 AWS나 클라우드에서 딸각만 하면되므로 매우 쉽다. 그러나 VM 인스턴스에 SS...

평소에 Next 12 사용하다가 next 14로 버젼이 올라갔을때 빌드 build를 위해 yarn build 를 썼지만 out 폴더가 생성되 않았다. 이는 버젼이 변화하면서 out 폴더 파일이 생성되기 위해서는 next.config.js 파일에 추가적이 내용을 작성해야된다. const nextConfig = { ... output: "exp...

클라우드란? 내 컴퓨터가 아닌 외부 컴퓨터를 통해 yarn dev 시키는 방법 ⇒ 24시간 동안 켜놔야된다. 아마존 , 구글 , MS에서 컴퓨터를 빌려주는 서비스 ⇒ 클라우드 접속 권한을 부여하여 터미널을 사용할 수 있게 해 준다. 클라우드 서비스 제공자 (Cloud Provider) 아마존 - AWS 구글 - GCP : 아마존에 비...

❗️ 라이브러리 하위 모듈 버전 고정하는 방법 사용하고 있는 외부 라이브러리가 의존하는 모듈의 특정 버전으로 고정시키고 싶을 경우 yarn 패키지 매니저 사용 시 package.json 에 다음을 추가 { "devDependencies": { ... }, "resolutions": { "@types/react" : "17.0.2" ...

테스트 코드란? 테스트 코드란, 소프트웨어의 기능과 동작을 테스트하는데 사용하는 코드이다. 작동을 했을 때, 기능이 정상적으로 동작하는지 확인하는지는 개발 도중에 확인할 수 있는 부분이지만 업데이트와 배포를 하게 되면 생각이 바뀌게 된다. 테스트 코드가 필요한 이유! ex) 직접했을경우 : 게시판기능 10개 개발 ⇒ 상품 기능 개발 20개 ⇒ ...

결제 시스템은 카드사, PG사관계 간의 복잡한 계약이 필요한데 결제 솔루션사를 이용하면 쉽게 결제 시스템을 구현이 가능하다. 대표적인 결제 솔루션사 ) 아임포트⇒ portone으로 이름 변경 , 부트페이 결제과정) 유저가 브라우져에서 결제를 요청하면 결제 솔루션사에서는 결제 완료된 내용을 응답하는데 이 내용을 가지고 DB에 저장해야된다.⇒ 총 결...

프론트엔드 성능 최적화 방법 Page Speed Insights 를 통한 성능 점검 memoization - memo, useMemo, useCallback 브라우저 - Layout (=Reflow 최소화) dynamic import 컴포넌트 렌더링 ⇒ 버튼 클릭시 보여지는 컴포넌트 (Next - next/dyna...

ImagePreload 이전페이지 import { useRouter } from "next/router"; import { useEffect } from "react"; // 함수 외부에 내용을 저장한다. const preloadImageData = []; export default function ImagePreloadPage(): JSX.E...

react에서 페이지의 성능 최적화하는 방법 useMemo 를 사용하는경우 Memo ⇒ memoizaion 이란 뜻으로 해석하면 메모리에 값을 넣는것을 의미한다. 리액트에서 함수형 컴포넌트는 (컴포넌트는 렌더링 => 컴포넌트 함수 호출 => 모든 내부 변수 초기화) 같은 순서를 거치게 되는데, import { useState } fr...