bloomCode

이번에 앱을 개발하기 위해서 React-Native에 개발 환경 설정을 해보려고 한다.React-Natvie 앱 개발 방법으로 Expo CLI 와 React Navtive CLI  방법이 있다.Expo CLI장점Expo는 복잡한 환경 설정 없이 빠르게 앱을 시작할 수 있다.Expo Go 앱을 통해 디바이스에서 바로 실행 및 테스트 가능Expo는 카메라, 위치 서비스, 푸시 알림 등 다양한 API를 기본으로 제공별도의 네이티브 설정 없이 다양한 기능 사용 가능iOS와 Android 환경 간 차이를 많이 처리해 주므로 코드를 공유하기 쉬움OTA 업데이트 지원, 앱스토어를 거치지 않고 코드 수정 사항을 즉시 배포 가능Expo SDK는 버전 관리를 제공하여 안정성과 호환성을 유지단점 네이티브 코드 수정 불가, ..

이번에 사이드프로젝트를 하며 Next.js에서 Tanstack Query v5 버전을 사용하여 서버에서 데이터를 prefetch(데이터 미리 가져오기) 하여 빠르게 ui표시할 수 있도록 해보았다. 클라이언트 렌더링 vs 서버 렌더링클라이언트 렌더링에서는 다음과 같은 단계를 거친다고 한다.서버에서 빈 HTML 마크업을 보냅니다 (콘텐츠 없이 기본 구조만 있음).브라우저가 자바스크립트 파일을 다운로드 및 실행하여 애플리케이션을 실행시킵니다.자바스크립트가 API 요청을 통해 데이터를 가져오고, 콘텐츠가 화면에 렌더링 됩니다.사용자가 페이지를 처음 요청하면 빈 마크업만 받아서 화면이 비어 보이고, 자바스크립트와 데이터 요청이 모두 완료될 때까지 기다려야 한다이렇게 최소 3번의 서버 요청이 이루어지며 그 후에야 ..

명령형 프로그래밍 (Imperative Programming)프로그램의 상태를 변경하는 명령문의 시퀀스로 구성된다.어떻게(How) 구성할지에 초점을 맞추어 목표를 달성하기 위한 각 단계를 기술한다.C, Java의 절차적 부분, 저수준코드고수준 언어(High-Level Language): 고수준 언어는 프로그래밍 언어가 영어와 한국어와 같은 인간의 언어에 가깝게 작성되어, 사람이 이해하기 쉬운 형태로 구성됩니다.Python, JAVA, JavaScript와 같은 언어가 고수준 언어에 해당합니다.저수준 언어(Low-Level Language): 저수준 언어는 컴퓨터가 직접 이해하는 더 기술적인 언어를 뜻함 저수준 언어는 기계어(컴퓨터의 언어)와 매우 유사하며,컴퓨터의 메모리와 프로세서를 직접 제어한다.어셈블..

디자인 패턴(Design Pattern)이란?개발하면서 발생하는 반복적인 문제들을 어떻게 해결할 것인지에 대한 해결 방안으로 소프트웨어 개발에서 자주 발생하는 문제에 대해 검증된 해결 방법을 제공하는 재사용 가능한 설계를 의미한다.합성 컴포넌트란?합성 컴포넌트란 소프트웨어 개발에서 재사용이 가능한 구성 요소를 만들기 위해 여러 개의 다른 컴포넌트를 조합하는 디자인 패턴이다. 부모 컴포넌트와 자식 컴포넌트가 독립적으로 동작하면서도 공통 상태나 기능을 공유하게 되며복잡한 UI를 더 모듈화 하고 재사용 가능하게 만드는 데 도움을 줍니다.  카카오 FE합성 컴포넌트 디자인 패턴에 대해 글을 보고 참고하여 이미지에 사용된 사용자 채팅UI를 합성 컴포넌트 방식으로 최대한! 설계해 보았다.카카오 FE 합성컴포넌트 참..

이번에 AWS EC2 를 활용해서 직접 https로 서버를 배포해 보았다.https://woojin.tistory.com/94 1편) 도메인 구매하고 ACM 인증서 발급하기 (링크) (도메인 구매 --> 도메인 인증 --> ACM 인증서 발급 --> Target Group 생성 --> Load Balancer 생성 --> 규칙 수정 --> Health check 성공) 2편) 로드 밸런서 사용하" data-og-host="woojin.tistory.com" data-og-source-url="https://woojin.tistory.com/94" data-og-url="https://woojin.tistory.com/94" data-og-image="https://scrap.kakaocdn.net/dn/..

layout.js layout 은 라우트 간에 공유되는 UI이다 즉  하위 경로로 공유되는 파일로써여러 경로에서 공유되기 때문에 한 번 마운트 되고 나면 해당 레이아웃이정의된 경로를 벗어나지 않는 한 UnMount 되지 않는다.그렇기 때문에 Layout 컴포넌트는 상태를 저장하여 하위 컴포넌트들에게 전달하는 역할도 한다.children (필수)레이아웃 컴포넌트는 children prop을 받아서 사용해야 합니다. 렌더링 시 children에는 레이아웃이 감싸고 있는 라우트 세그먼트들이 채워지며,주로 자식 레이아웃 이나 페이지의 컴포넌트가 들어가지만, 상황에 따라 Loading 또는 Error와 같은 다른 특수 파일들이 포함될 수 있다. params (선택 사항)루트 세그먼트부터 해당 레이아웃까지의 동적 ..

Routing(라우팅)네트워크 용어로써 주소에 연결되어 있는 주소에 연결되어 있는 데이터를 사용하는 일련의 과정을 의미한다.(데이터 패킷이 출발지에서 목적지까지 전달되는 경로를 결정하는 과정)데이터 패킷(Data Packet)은 네트워크에서 데이터를 전송할 때 나누는 데이터 단위쉽게  URL구성하고 조직하는 행위 자체를 Routing이라고 한다.Next에서는 파일 시스템 기반으로 Routing시스템을 도입했다. Navigation(내비게이션)네트워크 용어에서  사용자가 페이지 간 이동을 할 수 있도록 돕는다양한 UI 요소와 시스템을 의미한다.Next에서는 Link 태그와 useRouter를 사용해서 페이지 이동이 가능 Code spliting(코드 스플리팅) 애플리케이션의 JavaScript 코드를 더..

타입스크립트 공부 중 Record Type이라는 타입을 알게 되어서 정리를 해보려고 한다.  Record 키가 Key 타입이고 값이 Value인 객체 타입 Key: 객체의 키로 사용할 수 있는 문자열, 숫자, 심볼 등의 타입일반적으로 문자열 리터럴 타입이나 유니언 타입을 사용합니다.Type: 해당 키에 매핑될 값의 타입을 정의합니다. Idex Signature(인덱스 시그니쳐)Record타입에 사용 방법은 IdexSignature 방법과 유사한데Idex Signature는  객체의 키와 값의 타입을 정의하는 데 되며 객체의 모든 키가 동일한 타입을 가지며, 그에 대응하는 값도 특정 타입을 가져야 할 때 사용typ Scores { [key: string]: number;}const scores: Scor..

블로그글들을 찾아보다 Supbase를 사용할 때 Prisma와 사용한다는 글을 많이 보게 되어서  이번에 Prisma와 같이 Supbase를 사용해보려고 한다.https://zoon-bloom.tistory.com/114 Prisma 랑 친해지기Next 강의를 들으면서 Prisma를 사용하게 되었다 백엔드 쪽까지 손을 보기로 작정을 하고! 이 Prisma는 무엇인지 알아보기로 했다. Prisma 공식문서 : https://www.prisma.io/docs/concepts/overview/what-is-prisma What iszoon-bloom.tistory.com 해당 블로그에서 prisma 사용법이 자세히 나와있어 따라 해보았다.참고블로그 : https://www.heropy.dev/p/bCffI2 ..

Next 팀프로젝트를 하며 로그인/회원가입 부분을 맡아 기능을 구현하면서 supabase를 사용하게 되었는데Supbase는 OAuth2.0의 PKCE 플로우를 사용한다는 글을 보게 되었다.그래서 이번에 OAuth2.0과 PKCE 플로우에 대해서 정리해보려고 한다! https://supabase.com/docs/guides/auth/sessions/pkce-flow PKCE flow | Supabase DocsAbout authenticating with PKCE flow.supabase.comOAuthOpen Authorization의 약자로 인터넷 사용자들이 비밀번호를 제공하지 않고, 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근권한을 부여할 수 있는 공통적인 수단으로 사용되는..