HAN STORY

💡 Build 작업Next.js 로 만든 서버를 다른 곳에 배포하기 위해 터미널에 npm run build 위 코드로 build 를 하면 리액트 문법으로 작성한 코드들을 친화적인 html, css, js 파일로 바꿔주는 작업을 한다.그 다음에npm run start 명령어를 통해서 실제로 유저 요청을 처리할 수 있는 Next.js 서버가 완성된다.실제로 운영하는 사이트라면 클라우드에 올려서 npm run start 를 실행시킨다. 💡 Dynamic rendering / Static rendering- Dynamic rendering기본적으로 Next.js 는 페이지를 하나 만들면 기본적으로 static rendering 식으로 페이지를 보여준다.npm run build 시 생성한 html 을 보여주는..

💡 글작성 페이지 만들기export default function Write() { return ( 글작성 버튼 );} 우선 /write 경로로 페이지를 만들어줬다.form 태그를 사용해 위처럼 api uri 와 method 를 설정해준 후에 input 태그의 name 을 설정해주고 button 에 submit type 을 설정해주면 버튼 클릭 시 해당 데이터들이 서버로 전달된다.💡 글작성 서버 만들기최상단 경로에 pages 라는 폴더명과 함께 위처럼 파일을 만들면 /api/post/new 이렇게 api 요청을 보낼 ..

💡 Dynamic route 를 활용한 게시글 조회https://hanstory33.tistory.com/293 위 링크처럼 게시글 당 id 가 있고 게시글 목록에서 제목 클릭 시에 해당 id 게시글의 상세 페이지로 이동시키고자 했다.import {connectDB} from "@/util/database";import Link from "next/link";export default async function List() { const db = (await connectDB).db("forum") let result = await db.collection('post').find().toArray() return ( {result.map((item, i..

✔️ Feign Client 란?Feign Client 는 HTTP 요청을 인터페이스만으로 처리를 할 수 있게 도와주는 클라이언트이다.Spring Cloud 에서 제공하는 @FeignClient 어노테이션을 이용해서 메서드 호출처럼 외부 API 나 다른 마이크로서비스를 쉽게 호출할 수 있게 한다. ✔️ 넷플릭스는 왜 Feign Client 를 만들었을까?넷플릭스는 전 세계 수억 명에게 서비스를 제공하면서, 초대형 마이크로서비스 아키텍처로 전환했다.서비스 간의 수많은 HTTP 통신을 안정적이고 효율적으로 처리해야 했고, 이 과정에서 문제들을 겪는다.  HTTP 요청 코드가 너무 많고 반복적이다.실패 처리(fallback)나 로드밸런싱을 일일이 다 구현해야 한다.코드가 복잡해서 유지보수가 힘들다.그래서 간결..

📚 RabbitMQ특징프로토콜: AMQP (표준 메시징 프로토콜 지원)메시지 전달: Push 모델 기반. 브로커가 소비자에게 메시지를 적극적으로 전달.큐 중심 설계: 메시지가 큐에 저장되고, 소비자가 이를 처리하는 전통적인 방식. 메시지 삭제는 소비자가 처리 후 ACK(확인 응답)를 보내면 이루어짐.라우팅: Exchange를 통해 Direct, Topic, Fanout, Headers 방식으로 유연하게 메시지 라우팅 가능.구성: 단일 노드에서 동작 가능하며, 클러스터링 지원은 있지만 Kafka만큼 분산 시스템에 특화되지 않음. 메시지 보장: 메시지 확인 및 재전송 메커니즘으로 높은 신뢰성 제공한다.사용 사례작업 큐 관리: 예를 들어, 사용자 등록 후 환영 이메일 전송, 이미지 변환 작업 등 비동기 작업..

✔️ TouchableOpacity, ...styles Work Travel  header 에서 onPress 를 활용해서 work 와 travel 의 상태를 true 로 저장시켰다.이 상태값을 활용해서 이후에 placeholder, list 들을 상태값에 따라 다르게 보여지게 한다. styles 앞에 ... 을 붙이면 기존 객체를 그대로 가져와서 새로 추가하는 내용만 수정한다는 뜻이다. ✔️ TextInput TextInput 의 다양한 prop 을 이용해서 Customizing 해주었다.완료 버튼을 done 으로 바꿔주었다.onSubmitEditing 에 addTodo 함수를 연결해주었다. ✔️ Todo 저장const onChangeText = (payload) => setText(payl..

✔️ 날씨 불러오기expo install expo-location const getWeather = async () => { const {granted} = await Location.requestForegroundPermissionsAsync(); if (!granted) { setOk(false); } const { coords: {latitude, longitude}, } = await Location.getCurrentPositionAsync({accuracy: 5}) const location = await Location.reverseGeocodeAsync({latitude,..

✔️ React Native Components and apishttps://reactnative.dev/docs/components-and-apis Core Components and APIs · React NativeReact Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following catreactnative.dev ✔️ ..

✔️ Application Structure 우리가 직접 코드를 짜는 곳은 JavaScript 와 Markup/Styling 이다.하지만 어플리케이션은 그 이외에 구조들이 필요하다.Android 같은 경우에는 나머지 부분이 Java 로 되어있고, IOS 같은 경우는 swift 로 되어있다.그렇기 때문에 우리가 앱을 만들 때에는 Java, X-code 등 환경세팅이 복잡하게 필요한 것이다.✔️ React Native 작동 원리기존에 ReactJS 같은 경우는 코드를 그대로 브라우저에서 실행하는 원리이지만,React Native 는 코드를 그대로 실행하는 브라우저가 있는 것이 아닌, ios 와 android 로 각 각 번역해주는 번역기 라고 생각을 해주면 된다.각 각의 ios 와 android 에 bridg..

✅  3-Layer Architecture & Hexagonal Architecture더보기1. 3계층 아키텍처 (3-Layer Architecture)🏗 구조3계층 아키텍처는 애플리케이션을 세 개의 논리적 계층으로 나누는 전통적인 설계 방식입니다.Presentation Layer (UI Layer)사용자 인터페이스 담당 (웹, 모바일, API 컨트롤러 등)HTTP 요청을 받아 비즈니스 로직을 호출하고, 응답을 반환Business Layer (Service Layer)핵심 비즈니스 로직 담당데이터 처리 및 도메인 규칙 적용Data Access Layer (Repository Layer)데이터베이스 및 외부 저장소와의 상호작용ORM (JPA, MyBatis 등) 또는 직접 SQL 쿼리를 사용✅ 장점이해하..