소신의 블로그생활

Rust를 사용한 Axum 서버에서 Amazon S3에 이미지를 저장하는 과정에서 Pre-signed URL을 활용하는 방법은 클라이언트가 서버를 거치지 않고 직접 S3에 파일을 업로드할 수 있게 해주면서도 보안을 유지할 수 있는 효율적인 방법입니다. 이 과정에서 Axum 서버는 Pre-signed URL을 생성하고, 업로드 될 파일의 content_type과 S3 key를 관리하여 데이터베이스에 저장하는 로직만 수행합니다. 다음은 이 과정을 설명하기 위한 순서와 설명입니다: 0. 사전 준비 사항 AWS 이미지를 저장해놓을 S3 Bucket 디렉토리 구조는 원본 이미지를 저장해놓을 raw/ 이미지 크기 별 폴더 w140/ w600/로 구분해놓았습니다. lambda 활용하여 이미지 크기를 조정하여 저장해놓..

Rust AXUM을 활용한 RestfulAPI 웹 애플리케이션 서버를 개발해봅시다. 전체적인 폴더구조, 흐름은 다음과 같습니다. 프로젝트 시작 cargo new {project_name} --bin 0. 프로젝트 폴더 구조 src/ |-- main.rs |-- .env |-- {domain}/ |-- mod.rs |-- entity.rs |-- handler.rs |-- usecase.rs |-- repository.rs |-- dto/ |-- mod.rs |-- req.rs |-- res.rs |-- config/ |-- mod.rs |-- database.rs 1. 필수 패키지 설치 먼저, 프로젝트를 시작하기 전에 Cargo.toml 파일에 다음 패키지들을 추가해야 합니다: axum: 웹 애플리케이션..

When dealing with sub-packages (or sub-modules) in Rust, especially in larger projects like an axum web application, structuring your code effectively is key to maintaining clarity and manageability. Let's address your example structure and how you can organize and reference these modules and sub-modules. Given your project structure: src/main.rs src/photo/handler.rs src/photo/usecase.rs src/pho..

Introduction: Rust, a system programming language known for its safety and performance, offers a powerful module system that facilitates the organization and reuse of code. Understanding how to effectively manage modules and packages is essential for Rust developers looking to build robust and maintainable applications. This guide will take you through the basics of Rust's module system, package..

Rust's powerful error handling model is exemplified by its use of the Result type, which represents either success (Ok) or failure (Err). This model encourages explicit handling of all possible errors, making Rust programs more robust and reliable. In the context of web development with Axum, a web framework for Rust, understanding how to effectively use Result, map_err, ?, Ok, and Err is crucia..

React에서 고차 컴포넌트(Higher-Order Component, HoC)는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. HoC는 컴포넌트의 재사용성, 로직 공유, 상태 추상화, prop 조작 등에 유용합니다. HoC의 기본적인 구조는 다음과 같습니다: function withHoC(WrappedComponent) { // 반환되는 새로운 컴포넌트 return function(props) { // 추가 로직이나 상태를 이곳에 작성 // ... // WrappedComponent에 props를 전달 return ; }; } HoC 예제: 로딩 상태 관리 예를 들어, 여러 컴포넌트에서 공통적으로 사용되는 로딩 상태 관리 로직을 HoC를 사용하여 구현할 수 있습니다. 아래는 로딩 상태를..

useEffect와 useMemo는 React의 훅(Hook)이지만, 사용 목적과 동작 방식이 서로 다릅니다. 차이점 요약 useEffect는 컴포넌트가 렌더링된 후에 실행되는 부수 효과를 다루는 데 사용됩니다. useMemo는 계산 비용이 높은 연산의 결과를 메모이제이션하여 성능을 최적화하는 데 사용됩니다. useEffect는 DOM 업데이트, 데이터 가져오기, 구독 설정과 같은 작업에 주로 사용됩니다. useMemo는 복잡한 계산이나 재계산을 피해야 하는 값의 계산에 주로 사용됩니다. 1. useEffect 목적: useEffect는 컴포넌트의 렌더링이 완료된 후에 부수 효과(side effects)를 수행하기 위해 사용됩니다. 부수 효과는 데이터 가져오기, 구독 설정, 수동으로 DOM 조작하는 것 ..

정렬, 요소 배치, 등 웹 화면을 그릴 때 자주 사용하는 CSS 기법들을 정리해보았다. 순서 특정 요소 내 정가운데 정렬 화면 가운데 정렬 내부 요소 크기 조정 1. 특정 요소 내 정가운데 정렬 .flex-center{ display: flex; justify-content: center; align-items: center; } div 박스 내에 있는 요소를 정가운데에 정렬해야 할 경우 사용한다. 2. 화면 가운데 정렬 .screen-center { width: 100%; max-width: 393px; (screen-x 화면 최대 크기) height: 100%; display: flex; align-items: center; /* fixed center */ position: fixed; top: 5..

Prettier는 코드 포매터로 저장 시 자동으로 코드를 깔끔하게 정리해주는 라이브러리이다. 이번에 프론트엔드 협업을 진행하면서 코드를 맞추기위해 Prettier를 사용해야했고, VScode에서 사용하는 법을 정리하려고 한다. prettier-vscode github Prettier (Code Formmater) doc 협업함에 있어 컨벤션을 정하는 것은 당연히 중요하지만 코드 가독성을 높이기 위해서 줄바꿈, 들여쓰기를 적절히 하는것도 중요하다. 본 글은 node로 생성한 프로젝트가 있다는 가정하에 진행한다. 순서 1. prettier 설치 2. prettier 설정 3. vscode 설정 1. prettier 설치 package.json이 들어가있는 Node 프로젝트라면 환경에 상관없이 사용가능 npm..

테스트코드를 짜임새있게 작성했을 때 이점이 많이 있다. 특정 코드를 수정했을 때 문제가 될 수 있는 부분을 빠르게 확인할 수 있기 때문에 리팩토링이 원활하게 이루어진다. pytest를 활용해서 테스팅을 진행할 때, 파일을 수정하고나서 저장한 뒤 직접 테스트 파일을 실행하는 것이 귀찮았다. 디렉토리 내 파일이 변경되는 것을 추적하고 자동으로 특정 명령어를 실행할 수 있도록 쉘 스크립트를 작성했다. > FileTracker github TDD (Test Driven Development) 테스트 주도 개발은 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나이다. 개발자는 먼저 요구사항을 검증하는 자동화된 테스트 케이스를 작성한다. 그런 후에, 그 테스트 케이스를 통과하기 위한 최소한의 코드..