본문 바로가기

전체 글451

yarn berry pnp monorepo npx create-nx-workspace@latest boardnx --preset=ts --workspaceLayout=packages yarn set version berry .yarnrc.yml nodeLinker: "pnp" yarn add -D @nrwl/nest, next 등등 에러 나오는대로 설치 yarn nx g @nrwl/next:app yarn nx g https://kimyanglogging.tistory.com/8 2023. 3. 20.
nx workspace nx project create npx create-nx-workspace npm i @nrwl/react npx nx g @nrwl/react:application client nest js 추가 npm i @nrwl/nest npx nx g @nrwl/nest:app react next npm i @nrwl/next npx nx g @nrwl/next:app my-new-app 전체 실행 npx nx run-many --target=serve 개별 실행 npx nx serve 만들어진 react-next 앱에 페이지 추가하기 nx g @nrwl/next:page my-new-page --project=my-new-app nx g @nrwl/next:component my-new-component --.. 2023. 3. 13.
AWS S3 - CloudFront - Github action 자동배포 방법 https://www.youtube.com/watch?v=ABagrTFN7z0 { "Version": "2012-10-17", "Statement": [ { "Sid": "AccessToGetBucketLocation", "Effect": "Allow", "Action": [ "s3:GetBucketLocation" ], "Resource": [ "arn:aws:s3:::*" ] }, { "Sid": "AccessToWebsiteBuckets", "Effect": "Allow", "Action": [ "s3:PutBucketWebsite", "s3:PutObject", "s3:PutObjectAcl", "s3:GetObject", "s3:ListBucket", "s3:DeleteObject" ], "Re.. 2021. 12. 24.
Spring boot nginx 연동 설정 80 => 8080 https://dev-alxndr.tistory.com/13 Nginx Spring boot 연동 (reverse proxy) nignx → spring boot reverse proxy WebServer와 WAS를 분리하기 위해 Nginx를 활용해보도록 하겠습니다 분리하는 이유는 해당 링크 정리가 잘되어 있으니 참고 바랍니다. 아직 Nginx가 설치안되어 있다면 링크 dev-alxndr.tistory.com server { # SSL configuration # # listen 443 ssl default_server; # listen [::]:443 ssl default_server; # # Note: You should disable gzip for SSL traffic. # See: https:/.. 2021. 10. 30.
AWS에 돈 안내고 싶다! 내 집 컴퓨터로 서비스 운영하기 0. 우분투 리눅스로 컴퓨터 os 를 설치한다. 서버 = 리눅스 국룰 필요하다면 ssh 통신은 아래 링크에 적힌 방법으로 열 수 있다. openssh-server 및 openssh-client 설치 # sudo apt-get install openssh-server # sudo apt-get install openssh-client ssh 설치 # sudo apt-get install ssh sudo gedit /etc/ssh/sshd_config # Port 22 위와 같이 되어있는 부분을 찾아 아래처럼 바꾼다(# 빼기) Port 22 3) restart sudo service ssh restart https://www.crocus.co.kr/1646 주의사항 - ssh 통신을 열었다면. 가급적 비밀번.. 2021. 10. 6.
ubuntu https 통신 설정하는 방법 ssl 설정하기 https://jp-hosting.jp/nginx-lets-encrypt%EB%A5%BC-%ED%86%B5%ED%95%B4-nginx%EC%97%90%EC%84%9C-%EB%AC%B4%EB%A3%8C%EB%A1%9C-https-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0/ 2021. 10. 6.
useMemo 사용 예시 1. 단일 컴포넌트에서 표시하는 경우 export function Price() { const prices = usePrices() // 훅을 호출한다 if (prices.length === 0) return null // 컴포넌트에 표시한다 return } function usePrices() { const { someData } = useSomeData() // 다른 훅을 사용해야 하는 경우 return React.useMemo(() => { if (!someData) return [] // 데이터가 없을때 해야하는 것이 있다면 정의한다 const result = someData return result .map((some) => ({ keyA: some.AAA, keyB: some.BBB, })) .. 2021. 9. 20.
useCallback 사용 예시 페이지 컴포넌트에서는 아래와 같이 작성한다 export function SomePage() { const { closeSomething } = useSomething() const { pathname } = useLocation() const onClickButton = useCallback(() => { closeSomething(pathname) },[pathname, closeSomething]) return ( this button ) } 1. 버튼의 onClick 함수를 useCallback 으로 정의한다 2. useCallback 의 [ 파라미터 ] 부분에는 useCallback 안에서 사용했던 변수와 함수를 작성한다. export function useSomething() { const cl.. 2021. 9. 20.
리액트 lazy 와 @loadable/components 비교 리액트 페이지 로딩 성능을 개선하기 위해서 lazy 로딩을 할때가 있다. 사용할 수 있는 유명한 선택지는 2개이다. lazy 와 @loadable/components 간략하게 비교한 표를 첨부한다. 서버사이드 렌더링이 필요하다면 @loadable/component 서버사이드 렌더링을 하지 않는다면 react lazy를 써도 좋다. react lazy 를 쓰면 별도로 @loadable/component를 설치하지 않아도 된다. 2021. 9. 2.

티스토리툴바