분류 전체보기542 [React] 새창 Pop up 데이터 넘겨주는 방법 const childPopup = useRef() const onPopup = () => { const url = `/preview` childPopup.current = window.open(url, "_blank"); // "noopener, noreferrer" childPopup.current.param = param } . . . 미리보기 param 을 넘겨주면 새창 컴포넌트에 props 에 param이 담겨있다. 신기방기 childPopup.current.param = param 2023. 7. 19. [React] 새창 Pop up 열기 리액트에서 새창팝업 띄우는 방법은 두가지가 있다. 1. import React, { useState } from 'react'; import { Link } from "react-router-dom" const ButtonPreview = (props) => { return ( 미리보기 ); }; export default ButtonPreview; Link태그 사용하여 타겟을 _blank를 주는방식 이 경우 라우터에 /preview 경로 파일을 연결해준다. js파일만 세팅해주면 간단하게 사용가능하지만 우리는 대부분 리액트를 사용할때, 컴포넌트들을 화면에서 분리하고 그 컴포넌트만 랜더링 하기때문에 디폴트 레이아웃이 잡혀있을것이다. 나의 경우 새창은 디폴트레이아웃과 상관없는 화면음으로 다른 방법을 사용했다.. 2023. 6. 13. Docker로 리액트앱 생성하기 Ctrl + ~ 터니널 실행 $ docker run -it --name node-01 node:17-alpine3.15 ash Unable to find image 'node:17-alpine3.15' locally 17-alpine3.15: Pulling from library/node df9b9388f04a: Already exists 1bedfac31d6a: Pull complete 6463b5f3dbb1: Pull complete 885e68a88c76: Pull complete Digest: sha256:76e638eb0d73ac5f0b76d70df3ce1ddad941ac63595d44092b625e2cd557ddbf Status: Downloaded newer image for node:17-.. 2023. 5. 1. docker run : 컨테이너 생성 # 컨테이너 생성 $ docker run --name python-10 python:3.10-alpine3.15 python-10 이라는 이름의 컨테이너가 생성된다. # 생성된 컨테이너 리스트 확인 $ docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES a2a72e9447d3 python:3.10-alpine3.15 "python3" 59 seconds ago Exited (0) 59 seconds ago python-10 2a4a08bd20e3 docker:test "docker-entrypoint.s…" 30 minutes ago Up 30 minutes 0.0.0.0:8888->3000/tcp, :::8888->3000/tcp st.. 2023. 5. 1. docker ps -a : 컨테이너 리스트 확인 명령어 $ docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 2a4a08bd20e3 docker:test "docker-entrypoint.s…" 22 minutes ago Up 22 minutes 0.0.0.0:8888 stupefied_driscoll 2023. 5. 1. docker container prune :사용하지 않는 Docker 오브젝트 일괄 삭제 컨테이너 prune은 중지된 모든 컨테이너를 삭제해줍니다. $ docker container prune WARNING! This will remove all stopped containers. Are you sure you want to continue? [y/N] y Deleted Containers: a4365005d20a190be4a9227f49660e3183fabe968428d4707007a77757dd18a5 ..... Total reclaimed space: 67.06MB 중지된 컨테이너는 CPU나 메모리 같은 자원을 사용하지는 않습니다만, 모든 Docker 컨테이너는 고유한 디스크 영역(레이어)을 가지고 있기 때문에 컨테이너를 삭제해서 디스크 용량을 확보할 수 있습니다. 단, 중지된 컨테이너.. 2023. 5. 1. [오류]System has not been booted with systemd as init system (PID 1). Can't operate.Failed to connect to bus: Host is down 에러 $ sudo systemctl start docker System has not been booted with systemd as init system (PID 1). Can't operate. Failed to connect to bus: Host is down 해결 sudo /etc/init.d/docker start 2023. 5. 1. 🐳 Docker 명령어 정리 / Docker 트러블슈팅 Docker 명령어 docker build 이미지 생성 -t, tag 이미지이름 , 정확히는 이미지 : 태그 -f, file Dockerfile 이름 (Dockerfile 의 위치 -rm 빌드후 컨테이너 삭제 -build arg ARG 값 전달 docker run 컨테이너 실행 -d 백그라운드 실행 -I 컨테이너 입력 -t 컨테이너 출력 --net 네트워크 지정 -p, port 포트번호 연결 -v, volume 바인드 마운트 --name 컨테이너 이름 -e, env 환경변수 전달하기 --rm 컨테이너 종료시 , 컨테이너 삭제 --entrypoint docker exec 컨테이너에 접속 -i, interactive -t: terminal 예 docker exec it bash docker cp 파일 디렉토.. 2023. 4. 29. Chatgpt 가 설명해주는 Nest.js의 장단점 Nest.js의 장점과 단점에 대해 알려드리겠습니다. 😎장점: Express와 같은 Node.js 웹 프레임워크에서 사용하는 많은 개념들을 확장하여 더욱 구조적이고 모듈화된 애플리케이션을 쉽게 개발할 수 있습니다. TypeScript를 지원하여 컴파일 시간에 타입 오류를 잡을 수 있어 코드 안정성과 유지보수성이 높아집니다. 모듈화된 아키텍처를 사용하여 코드를 쉽게 재사용하고, 테스트하기도 용이합니다. Nest.js는 웹 애플리케이션 뿐만 아니라 마이크로서비스, API, 스트리밍, 웹소켓 등 다양한 분야에서도 사용할 수 있습니다. 😎단점: Nest.js는 새로운 개념들과 아키텍처를 포함하고 있기 때문에, Node.js나 Express와 같은 경험이 많은 개발자들에게는 학습 곡선이 높을 수 있습니다. Nes.. 2023. 4. 25. 이전 1 2 3 4 5 6 7 8 ··· 61 다음 728x90 반응형
