분류 전체보기51 와일드 SSL을 적용하다! 몇 개월째 운영 중인 개인 서버에 HTTPS를 적용할 때, 처음에는 단일 도메인 SSL 인증서만 발급받아 사용했습니다 하지만 서비스 규모가 커지고 서브도메인이 늘어나면서 매번 서브도메인마다 새 인증서를 발급·적용하는 작업이 정말 너무 번거롭고 귀찮았어요 그리고 유료 SSL 인증서를 사용하는 도메인도 있었고 무료 SSL 인증서를 사용하는 도메인도 있어서 유지보수면에서 너무 비효율적이었습니다 그래서 이번에는 와일드카드 SSL 인증서를 새로 발급받아, 개인서버의 모든 도메인에 적용해보기로 했습니다! SSL 너는 뭐니? SSL은 인터넷 상에서 데이터를 안전하게 주고받기 위해 사용하는 보안 기술입니다 쉽게 말해, 우리가 웹사이트와 통신할 때 보낸 내용(예: 로그인 정보, 결제 정보 등)이 도중에 누군가에게 훔쳐.. 2025. 6. 1. ESP32 카메라 모듈로 무선통신 스트리밍 서버만들기 IoT 관련하여 프로젝트를 만들다 보니 다양한 기기에 대한 호기심이 생겨 하나씩 만들어 보고 있습니다마이크로컨트롤러에선 원래 다량의 데이터를 주고받는 게 아니라 제어와 관련된 역할을 주로 담당하는데 저렴하게 카메라테스트를 해볼 수 있는 정도선에서 구현이 가능하여 테스트를 해보았습니다 1. 카메라 모델 및 핀 설정하기#define CAMERA_MODEL_AI_THINKER#include "camera_pins.h" CAMERA_MODEL_AI_THINKER를 미리 정의하면 camera_pins.h 내부에서 AI Thinker 보드에 맞는 GPIO 번호들이 매크로로 설정됩니다. 2. 필수 라이브러리 포함하기#include #include "esp_camera.h"#include "esp_http_serve.. 2025. 5. 31. 파이썬 시작해보기 파이썬(Python)이란?"인생은 짧기에, 당신에겐 파이썬이 필요하다." 파이썬의 만든 네덜란드 귀도 반 로섬이 한 말입니다이 말에서 유추할 수 있듯 빠르게 배우고 적응하고 개발할 수 있도록 만들어진 언어입니다 문법이 간결하고 직관적이며 현재 다양한 분야 (웹, 데이터분석, AI, 자동화 등)에 널리 사용되고있습니다파이썬은 아래와 같은 특징을 갖고 있습니다 들여쓰기로 코드 블록 구분 (가독성 최고)다양한 라이브러리방대한 커뮤니티와 기술자료입문부터 실무까지 가능한 범용적인 언어1.개발환경 구성하기개발을 시작하려면 파이썬을 다운로드하고 설치해야합니다https://www.python.org/downloads/ Download PythonThe official home of the Python Programm.. 2025. 3. 31. 리액트 복습-3 Hooks 사용(state, memo, Effect...) 1. Hook 이란 무엇인가?함수영 컴포넌트에서 React의 기능(상태관리, 생명주기 등)을 사용할 수 있게 해주는 함수입니다Hook의 기능은 과거 클래스에서만 사용할 수 있었는데 이 기능을 함수형 컴포넌트에서 사용할 수 있게 되면서 업데이트된 기능이 바로 Hook입니다 2. Hook의 종류useState : 상태관리 useEffect : 생명주기 관리useContext : 전역 상태 접근useRef : DOM 제어 및 상태 값 저장useMemo : 값 메모이제이션useCallback : 함수 메모이제이션useReducer : 복잡한 상태 로직 관리등이 있으며 현재 18 버전 이후로 새로운 훅들이 추가되었습니다 3. 훅의 특징use로 시작해야 합니다함수 컴포넌트 및 커스텀 훅 내부에서만 사용 가능하비다조.. 2025. 3. 27. 리액트 복습-2 Layout구성, React Router 사용해보기 1. 레이아웃의 구성대부분의 레이아웃의 형태는 보통 Header, Content, Footer 구조로 이루어져 있습니다 이 페이지에서 변하지않고 항상 사용되는 영역은 어떤 영역일까요? 보통 Header, Footer 영역입니다 각 페이지마다 내용이 거의 변경되지않습니다그렇기 때문에 별도 컴포넌트로 나눠서 관리하도록 했습니다 import { BrowserRouter as Router } from "react-router-dom"; //리액트 라우터를 사용하도록import Header from "./layout/Header";import Content from "./layout/Content";import Footer from "./layout/Footer";function App() { return ( .. 2025. 3. 26. 리액트 복습-1 환경구축, 컴포넌트 만들기 1. 리액트 설치하기npx create-react-app my-appcd my-app 왜 npm 이 아닌 npx로 환경을 세팅하는가?npm은 패키지를 설치만 합니다 패키지를 직접 관리해야 하는 귀찮음이 있어요 그에 비해 npx는 패키지를 자동으로 설치하고 실행합니다 쉽게 말해서 설치화 실행(프로젝트생성 등)을 같이하는 자동화 도구라고 볼 수 있습니다 본 코드에서는 react 애플리케이션을 my-app 라는 폴더명으로 만들고 my-app 폴더로 이동하겠다는 명령어입니다 2. 리액트의 표준 프로젝트 구조my-app/├── public/│ └── index.html├── src/│ ├── assets/ # 이미지, 폰트, CSS 등 정적 파일│ ├── components/ .. 2025. 3. 26. 이전 1 2 3 4 5 ··· 9 다음
