React Components 는 항상 HTML 문서를 반환한다. 이때 JSX 문서 형식을 이용한다. 클릭과 같은 이벤트와 CSS 도 같이 넣을 수 있다. 하나의 완성된 HTML 문서라고 생각하면 된다. 이제 레고에서 하나의 블록을 만들었다고 생각하자. 원하는 모양의 html 문서를 조합하면 된다. 조합된 html 문서는 보였다 안보였다 하면서 화면을 변경한다. React 에서도 JavaScript 와 비슷하게 적용한다. JavaScript Eventonclick="shoot()" React EventonClick={shoot}
분류 전체보기
시나리오 1. useState를 통해서 변수에 값을 저장하고 변경할 수 있었다. 2. 변수가 언제 변경되는지 알 수 있을까?3. 이때 필요한 것이 useEffect 이다. 4. 변수가 변경될 때마다 useEffect 는 동작한다. (fetch, timer 에서도 감지한다.) 변화에 대한 감지를 다음과 같이 구분할 수 있다. 1. 모든 변화에 대해서 감지2. 특정 변수에 대해서만 감지3. 처음 한번만 감지 사용형식useEffect(, ) # 모든 변화에 대해서 감지함.import { useState, useEffect } from "react";const [count, setCount] = useState(0);useEffect(()=>{ console.log('감지');}); setCount(count..
설정 파일 열기sudo vi /etc/ssh/sshd_config Port 22 주석 제거 및 수정Include /etc/ssh/sshd_config.d/*.conf#Port 22#AddressFamily any#ListenAddress 0.0.0.0#ListenAddress :: 서비스 다시 시작sudo service ssh restart 방화벽 추가sudo ufw deny 22sudo ufw allow 1234
개발PC에서 이메일 인증을 통한 회원가입시 메일 발송과 회원가입 링크를 확인해 보기 위해서 간단한 smpt 서비스 제공 https://mailpit.axllent.org/ Mailpit - email & SMTP testing toolMailpit - email & SMTP testing tool with API for developers Mailpit is a small, fast, low memory, zero-dependency, multi-platform email testing tool & API for developers. It acts as an SMTP server, provides a modern web interface to view & test captured emmailpit.ax..
도커 컨테이너 내부에서 호스트 머신 서비스에 접근해야 할때 이 옵션은 Docker 컨테이너 내부에서 호스트 머신에 접근할 수 있게 해주는 중요한 네트워킹 설정입니다.1. `host.docker.internal`은 Docker가 제공하는 특별한 DNS 이름으로, 컨테이너에서 호스트 머신을 참조할 때 사용됩니다.2. `host-gateway`는 호스트 머신의 게이트웨이 IP 주소를 자동으로 할당합니다.실제 사용 예시:- 컨테이너 내부에서 실행되는 애플리케이션이 호스트 머신에서 실행 중인 다른 서비스(예: 데이터베이스)에 접근해야 할 때- 호스트에서 실행되는 API나 서비스를 컨테이너 내부에서 호출해야 할 때이 설정이 없다면, 컨테이너는 기본적으로 격리된 환경이기 때문에 호스트 머신의 서비스에 접근하기 어려..
DeepSeek 를 로컬에 다운받아서 구동해보기 필수요구사항- Ollama- deepseek-r1- docker- openwebui 1. Ollama 다운로드https://ollama.com/ 에 접속 ollama 프로그램 다운로드 후 설치 2. deepseek-r1 를 다운받는다.https://ollama.com/search 터미널 창에서 자신의 컴퓨터 사양에 맞는 모델 크기를 터미널에서 다운로드 받는다.ollama run deepseek-r13. docker 에서 openwebui 컨테이너를 실행시킨다.docker run -d \ --name openwebui \ -p 8080:8080 \ -v open-webui:/app/backend/data \ --restart always \ ..
원하는 아이디에 모든 권한 부여하기docker-compose exec mysql bashmysql -u root -pGRANT ALL PRIVILEGES ON *.* TO 'custom_user'@'%';FLUSH PRIVILEGES; 코드 설명docker-compose exec mysql bashDocker Compose로 실행 중인 서비스 중 'mysql' 컨테이너에 bash 셸로 접속하는 명령어입니다.mysql -u root -pMySQL 서버에 root 사용자로 접속하는 명령어입니다.-p 옵션을 사용하면 비밀번호를 입력하라는 프롬프트가 나타납니다.GRANT ALL PRIVILEGES ON *.* TO 'custom_user'@'%';'custom_user' 사용자에게 모든 데이터베이스(첫 번째 *..
들어가기도커를 이용한 라라벨 개발 세팅에 대해서 알아본다. Sail 을 이용해서 Docker 를 이용한 개발 명령어 - Create Laravel curl -s "https://laravel.build/example-app" | bash 참고 링크 : https://laravel.com/docs/11.x/installation#docker-installation-using-sail 기존 라라벨에 Sail 추가하는 방법composer require laravel/sail --devphp artisan sail:install./vendor/bin/sail up vendor/laravel/sail 폴더 GitHub clone1. Docker + Nginx + PHPhttps://github.com/ssh5..
app:delegated는 Docker에서 볼륨을 설정할 때 사용하는 옵션으로, 파일 동기화의 성능을 최적화하기 위한 설정입니다.기본 구조volumes:- .:/var/www/app:delegated.: 로컬 머신의 현재 디렉터리(호스트 경로)를 의미합니다./var/www/app: 컨테이너 내부에서 위 디렉터리를 연결할 경로입니다.:delegated: 볼륨 동기화 전략을 지정하는 옵션입니다.:delegated 옵션의 의미의도: 데이터 동기화의 우선순위를 호스트(로컬 머신)보다 컨테이너 내부의 동작에 두는 설정입니다.주요 특징:컨테이너가 우선: 컨테이너가 데이터를 로컬 머신보다 더 빠르게 읽고 쓸 수 있도록 설계되었습니다.비동기 동기화: 로컬 머신으로의 데이터 업데이트는 비동기로 수행됩니다. 즉, 컨테이너..
라라벨 프로젝트를 다운로드 하기 위해서 composer 를 이용해서 다음과 같이 명령어로 생성한다.composer create-project laravel/laravel myfirstlaravel Composer란? 설치 및 실행하기 위와 같은 명령어를 실행하기 위해서는 composer 가 설치되어 있어야 한다. docker 를 이용하면 composer 설치없이 간단하게 원하는 폴더에 설치할 수 있다. docker-compose.ymlservices: composer: image: composer:latest container_name: laravel_composer volumes: - ./src:/var/www/html w..
Dockerfile 문서를 만들어서 터미널에서 docker build 명령어를 실행하면 이미지가 생성된다. Dockerfile 은 이미지를 생성하는 방법에 대한 기술 문서이다. 이 문서를 실행하는 명령어는 `docker image build` 이다.생성된 이미지는 `docker container run` 명령어를 통해서 실행된다. Dockerfile 기본구조생성하기touch Dockerfile 작성하기FROM node:12.18.4RUN npm install -g http-serverWORKDIR /home/node/appCMD ["http-server", "-p", "8080", "./public"] - RUN: 이미지를 생성하는 과정에서 실행되는 명령어- CMD: 만든 이미지에서 컨테이너가 만들어져 ..
1. 베이스 이미지8.2-fpmDebian 기반 이미지를 사용합니다.일반적으로 다양한 소프트웨어와 라이브러리를 지원하며 더 많은 패키지를 기본적으로 사용할 수 있습니다.8.2-fpm-alpineAlpine Linux 기반 이미지를 사용합니다.Alpine은 경량화를 목표로 설계되었으며, 기본적으로 크기가 매우 작습니다. (약 5MB)2. 이미지 크기8.2-fpm크기가 상대적으로 큽니다. 다양한 기능과 라이브러리가 포함되어 있기 때문입니다.용량: 보통 20MB~50MB 이상.8.2-fpm-alpine크기가 훨씬 작습니다. 불필요한 패키지를 제외하고 최소한의 라이브러리만 포함되어 있습니다.용량: 약 5MB~10MB 정도.3. 사용 목적 및 성능8.2-fpm복잡한 애플리케이션을 개발하거나 많은 종속성을 가진 환..
