Posts by Dahna
Authentication, deployment of AWS EC2 and RDS, ERD, and performance testing
Authentication, deployment of AWS EC2 and RDS, ERD, and performance testingimport express from "express"; import jwt from "jsonwebtoken"; const app = express(); app.use(express.j...
In Express, AWS, Dec 05, 2024
Express with Database
AWS RDS와 MySQL연결보안상 Primary Key로 UUID 사용하기를 권장 저장 공간과 속도를 위해 UUID_TO_BIN() 및 BIN_TO_UUID() 사용 저장 공간 비교 VARCHAR(36) (텍스트 UUID) : 각 문자마다 1바이트를 사용하므로 총 36바이트 필요가독성은 높지만, 저장 공간과 비교 속도에서...
In Express, AWS, Dec 03, 2024
Express with AWS
Express 설치 npm install express --save 로컬환경에서 쓸 경우 npx express-generator 기본 라우팅 https://expressjs.com/en/starter/basic-routing.html ReqBin https://reqbin.com : 온라인 API 테스트 도구주요 HTT...
In Express, AWS, Dec 02, 2024
Transaction and Migration
TransactionTransaction이란?Transaction(트랜잭션)은 데이터베이스에서 하나의 논리적 작업 단위를 말하며, 일련의 작업이 모두 성공하거나 모두 실패해야 하는 것을 보장합니다. PostgreSQL에서 트랜잭션은 데이터 무결성과 일관성을 유지하기 위해 사용됩니다.트랜잭션의 주요 특징 (ACID) Atomi...
In PostgreSQL, Nov 18, 2024
Performance Optimization and Data Exploration Tools
INDEXPostgreSQL의 INDEX(인덱스)는 데이터베이스의 성능을 향상시키기 위한 중요한 구조로, 테이블에 저장된 데이터를 효율적으로 검색할 수 있도록 돕습니다. 인덱스를 활용하면 쿼리의 검색 속도를 크게 개선할 수 있지만, 인덱스를 잘못 설계하거나 남용하면 오히려 성능에 부정적인 영향을 미칠 수 있습니다.1. INDE...
In PostgreSQL, Nov 15, 2024
Schema Design
SQL Schema Designers dbdiagram.io drawsql.app sqldbm.com quickdatabasediagrams.com ondras.zarovi.cz/sql/demoHow to Build a ‘Like’ System이를 구현하기 위한 데이터베이스 테이블 구조는 일반적으로 다대다(Many-t...
In PostgreSQL, Nov 14, 2024
Learning Data Types, Functions, Installation, and Management Tools
Selecting Distinct RecordsDISTINCT는 SQL에서 중복된 값을 제거하고 고유한 값만을 반환하는 데 사용되는 키워드입니다. SELECT 구문에서 특정 컬럼이나 전체 행에 대해 중복을 없애고자 할 때 DISTINCT를 사용합니다.기본 문법SELECT DISTINCT 컬럼명1, 컬럼명2, ... FROM ...
In PostgreSQL, Nov 12, 2024
SQL Query Techniques: GROUP BY, Subqueries, and More
Aggregation of RecordsGROUP BY는 SQL에서 데이터를 그룹화하여 요약 정보를 계산할 때 사용하는 절입니다. 여러 행을 특정 기준에 따라 그룹으로 묶고, 그룹별로 집계 함수(예: COUNT, SUM, AVG, MAX, MIN)를 적용할 수 있습니다.GROUP BY의 기본 구조SELECT 컬럼명1, 컬럼명2...
In PostgreSQL, Nov 08, 2024
Foreign Key, Joins and Constraints Around Deletion
Working with Tables Primary Key : 테이블의 각 행을 고유하게 식별하는 컬럼(또는 컬럼의 조합)기본 키는 중복될 수 없고 NULL 값을 가질 수 없다.Primary Key를 설정하면 데이터베이스는 자동으로 인덱스를 생성하여 검색 성능을 향상시킨다. Foreign Key : 한 테이...
In PostgreSQL, Nov 06, 2024
SQL Statements
SQL StatementsChallenges of Postgres 데이터베이스에서 정보를 검색하기 위한 효율적인 쿼리를 작성하는 방법 데이터베이스의 스키마나 구조를 어떻게 디자인할 것인가 고급 기능들을 언제 사용할지 이해하기 프로덕션 환경에서 데이터베이스 관리하기
In PostgreSQL, Nov 05, 2024
Reference Note
reference note리렌더링에 값 유지하기 일반변수(const, let) : 컴포넌트가 리렌더링될 때마다 새로운 값으로 초기화 useState : 리렌더링이 발생해도 상태 값이 유지되지만, 값이 변경되면 컴포넌트가 다시 리렌더링(예시 : 사용자가 폼에 입력한 값이 수정할 때 지워지지 않고 남아있다) useRef : ...
In React Native, Oct 29, 2024
Push Notifications
Push NotificationsLacal Notifications 로컬 알림 : 앱이 설치된 기기에서 설치된 앱이 트리거하는 알림앱 내부에서 간단히 알림 일정을 설정하고 전송을 구성하고 기기에서 알림을 수신했을 때 동작을 설정할 수 있다. (ex : 알림, 알람 등) Expo Notification을 사용. s...
In React Native, Sep 13, 2024
Publishing React Native Apps
Publishing React Native Apps Expo로 관리된 앱과 Expo를 사용하지 않는 앱 구분 Expo를 사용하면 Expo가 제공하는 서버로 빌드 프로세스를 아웃소싱할 수 있음 Expo클라우드 서비스를 사용해서 iOS, Android 각각의 환경에 맞게 빌드 Expo를 사용하지 않을 경우 : 앱...
In React Native, Sep 11, 2024
React Native Without Expo
React Native Without ExpoExpo 애뮬레이터에 설치해서 개발 과정을 미리 볼 수 있는 장점이 있음 하지만 실제 실행 가능한 앱이 아님독립형 앱을 개발하고 퍼블리싱 하는 방법도 있음Expo "Managed Workflow" : Expo Go사용, 앱에 내장된 요소가 많아서 네이티브 기기 기능 등 특정 기능...
In React Native, Sep 10, 2024
Using Native Device Features
Using Native Device Featuresnative-features 프로젝트, 주석 참조npm install @react-navigation/native expo install @react-navigation/native-stack카메라 npx expo install expo-image-pickerapp.json ...
In React Native, Sep 07, 2024
User Authentication
User Authentication 인증원리 : 사용자가 인증 양식을 작성하고 제출하면 크리덴셜이 HTTP요청과 함께 백엔드 API로 전송되고 백엔드에서 해당 크리덴셜의 유효성이 검사됨백엔드에서 크리덴셜이 바른 것으로 확인되면 인증 토큰 생성 후 모바일 기기로 다시 전송 백엔드 앱 -> Node.js 강의 참조...
In React Native, Aug 27, 2024
Expense Tracking App
Expense Tracking App🛠️error fix Expo를 사용하면 React Native 프로젝트에서 모듈을 설치하고 구성하는 데 필요한 작업이 자동으로 처리된다. expo가 환경을 설정하고 필요한 네이티브 종속성을 관리할 수 있게 실행한 채로 설치 명령어를 실행해야 누락되지 않고 안정적으로 작동한다.Xcode si...
In React Native, Aug 23, 2024
Redux & Context API
Managing App-Wide State with Redux & Context APIReact Native에서 Redux와 React의 Context API는 상태 관리에 사용되는 도구로, 둘 다 글로벌 상태를 다루는 데 유용하다.Redux애플리케이션의 상태를 관리하기 위한 예측 가능한 상태 컨테이너. 주로 대규모 애...
In React Native, Aug 19, 2024
Navigation
React Native Apps & Navigation내비게이션 방식웹 브라우저 :웹 브라우저에서는 주소(URL)을 통해 페이지를 이동 사용자는 브라우저의 뒤로 가기 버튼을 눌러 이전 페이지로 돌아갈 수 있으며, 브라우저의 주소창에 새로운 URL을 입력하거나 링크를 클릭하면 다른 페이지로 이동URL이 페이지의 주요 상태...
In React Native, Aug 16, 2024
Adaptive & Responsive UIs
Adaptive & Responsive UIs (Building Cross-Platform & Device User Interfaces)동적 너비 설정하기 maxWidth, minWidth 등을 사용해서 크기에 따라 반응하도록 설정(부모 컨테이너가 기준)Dimensions API import해서 react-n...
In React Native, Aug 13, 2024
Deep Dive Real App
Deep Dive Real App그림자 설정 React Native에는 boxShadow가 없음 Android : elevation iOS : shadowColor, shadowOffset, shadowOpacity, shadowRadius
In React Native, Aug 08, 2024
Debugging
Debugging 터미널, 애뮬레이터 확인 console.log 추가하기(함수를 넣으면 값이 출력되거나 변수나 상태의 값이 출력됨) 터미널에 m누르면 애뮬레이터에 메뉴가 뜸 Open JS Debugger 활용 sudo npm install -g react-devtools : React 개발자 도구의 독립된 버전 re...
In React Native, Aug 07, 2024
React Native Basics3
React Native Basics3Handle Taps with Pressable Pressable 컴포넌트 : 아이템을 터치할 수 있게 인식시켜줌(Touchable, TouchavleHighlight, TouchableNativeFeedback, TouchableOpacity등 다양한 컴포넌트가 있으나 Touchable ...
In React Native, Aug 06, 2024
React Native Basics2
React Native Basics2iOS & Android 스타일링의 차이점-React Native는 Text 컴포넌트를 해당하는 네이티브 위젯 즉 네이티브 UI요소로 전환하는데 Android에서는 전환된 후 둥근 모서리로 나타나지만 iOS에서는 기본 네이티브 텍스트 출력 요소가 둥근 모서리를 지원하지 않음 =>...
In React Native, Aug 05, 2024
React Native Basics
React Native Basicsnpm install : 프로젝트에 필요한 의존성 설치index.tsx패턴과 App.js패턴 차이 진입점(Entry Point) 및 라우팅 방식:App.js 패턴:기존의 리액트 네이티브 앱에서는 App.js가 기본 진입점(entry point)으로 사용되었습니다. 이 파일에서 앱의 모...
In React Native, Aug 02, 2024
Setup
React Native란리액트 네이티브(React Native)는 Facebook에서 개발한 오픈 소스 프레임워크로, 자바스크립트를 사용하여 모바일 애플리케이션을 개발할 수 있도록 해줍니다. 리액트 네이티브는 웹 개발에서 사용되는 리액트(React) 라이브러리를 기반으로 하며, iOS와 Android와 같은 다양한 모바일 플랫...
In React Native, Aug 01, 2024
Review
함수 선언(function)과 함수 표현식(const를 사용한 방법)의 차이 호이스팅함수 선언: 함수 선언은 호이스팅됩니다. 즉, 함수 선언문은 코드의 어느 부분에서든 호출할 수 있습니다. console.log(greet("Alice")); // "Hello, Alice!" function greet(name) { ...
In Clone Coding, Jul 24, 2024
Deployment
DeploymentIntroduction Vercel에 배포 PostgreSQL 데이터베이스를 포함하는 serverless 스토리지 서비스를 사용할 예정 무료 배포 가능 준비 : Vercel 가입하기, GitHub에 코드 push
In Clone Coding, Jul 17, 2024
NextJS Extras
Live Streaming 16강 참고NextJS Extras 프로젝트에서 다루지 않은 NextJS의 부차적인 기능들을 다룸Fonts 대부분 구글 폰트를 사용함
In Clone Coding, Jul 16, 2024
Realtime Chat
Realtime ChatSupabase는 Realtime Chat 애플리케이션에서 실시간 데이터 동기화 및 브로드캐스트 기능을 제공하여 사용자들이 실시간으로 메시지를 주고받을 수 있도록 한다. 데이터베이스 관리Supabase는 PostgreSQL을 기반으로 한 관리형 데이터베이스를 제공한다. 이 데이터베이스는 애플리케이션의 ...
In Clone Coding, Jul 15, 2024
Optimistic Updates
Optimistic UpdatesOptimistic Updates는 사용자가 인터페이스에서 어떤 작업을 수행했을 때, 서버의 실제 응답을 기다리지 않고 먼저 사용자 인터페이스를 업데이트하는 기법이다. 이 방법을 사용하면 사용자 경험이 훨씬 더 빠르고 원활하게 느껴진다. 서버와의 통신이 완료되기를 기다리는 동안 생길 수 있는 지...
In Clone Coding, Jul 12, 2024
Caching
Caching 캐싱 전략은 웹 애플리케이션의 성능을 향상시키고 서버 부하를 줄이며 사용자 경험을 개선하는 데 매우 중요하다. 매번 데이터베이스와 상호작용하는 횟수를 줄여 효율적인 관리가 가능함(ex: metadata..)nextCache변경파일 app/(tabs)/home/page.tsx app/products/[id]...
In Clone Coding, Jul 11, 2024
Modals
ModalsIntercepting Routes변경파일 app/(tabs)/home/(..)products/[id]/page.tsx 파일 이동 app/(tabs)/products/actions.ts → app/(tabs)/home/actions.ts, /loading.tsx, /page.tsx app/products/[id...
In Clone Coding, Jul 10, 2024
Product Upload
Product Upload변경파일 app/(tabs)/products/page.tsx app/products/add/page.tsx components/product-list.tsxForm Action변경파일 app/products/add/actions.ts app/products/add/page.tsxURL.crea...
In Clone Coding, Jul 09, 2024
Products
ProductTab Bar(auth), (tabs)폴더 괄호(parenthess)를 사용한 네이밍은 URL에 영향이 없다. route를 URL변경없이 grouping할 수 있음 아이콘 사이트 : heroicons layout을 다른 그룹의 영향을 받지 않고 적용할 수 있다.변경파일 app/(auth)/create-ac...
In Clone Coding, Jul 03, 2024
Social Authentication2
Social Authentication2"use server"; import twilio from "twilio"; import crypto from "crypto"; import { z } from "zod"; import validator from "validator"; import { redirect } fr...
In Clone Coding, Jul 02, 2024
Social Authentication
Social AuthenticationGithub Authentication 많은 곳들이 OAuth 표준 방식을 많이 사용함 (카카오, 네이버, Facebook, Instagram, Apple login, Twitter(X) Login…) GitHub계정에서 OAuth Application등록(https://gith...
In Clone Coding, Jul 01, 2024
Authentication2
Authentication2MiddlewareMiddleware는 요청과 응답 사이에서 동작하는 코드 또는 소프트웨어의 한 부분으로, 요청이 최종 목적지(예: 컨트롤러, 서비스 등)에 도달하기 전에 중간에서 여러 작업을 수행한다. 이를 통해 요청을 필터링하거나, 요청에 대한 추가 처리를 수행하고, 라우팅 결정을 내리거나, 인증...
In Clone Coding, Jun 28, 2024
Authentication
AuthenticationDatabase Validation async, await : async 함수는 비동기 작업을 처리하는 데 사용된다. async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환한다. 또한, await 키워드를 사용하여 Promise가 해결될 때까지 기다릴 수 있다. ...
In Clone Coding, Jun 27, 2024
Prisma
Prisma현대적인 데이터베이스 툴킷으로, 개발자들이 데이터베이스와 상호 작용할 때 효율성과 생산성을 높일 수 있도록 설계되었다. Prisma는 SQL과 같은 전통적인 데이터베이스 쿼리 언어 대신에 더 직관적이고 타입 안전한 방식으로 데이터베이스를 조작할 수 있게 해준다.Prisma의 주요 기능 Prisma Client:타입...
In Clone Coding, Jun 26, 2024
Validation2
Validation2Log In Validationasync : async 키워드는 함수 앞에 위치하며, 해당 함수가 비동기 함수임을 나타낸다. 비동기 함수는 내부에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있게 해준다. async 함수는 항상 Promise를 반환한다. 예를 들어, createAccoun...
In Clone Coding, Jun 25, 2024
Validation
ValidationIntroduction to Zod 설치 npm i zod주요 기능 스키마 선언 (Schema Declaration): Zod를 사용하여 데이터의 구조를 선언할 수 있다. 예를 들어, 객체, 배열, 문자열 등의 데이터 형식을 정의할 수 있음 유효성 검사 (Validation):...
In Clone Coding, Jun 24, 2024
Server Actions
Server ActionsRoute Handlers 기존 방식 : ReactJS에서 state를 사용해서 데이터를 처리하고 사용자가 로그인 버튼을 누르면 axios나 fetch 등을 사용해서 데이터를 전송webhook이나 React Native로 IOS나 Andriod 앱을 만들 때는 이 방법을 알고 있어야 함 ...
In Clone Coding, Jun 18, 2024
Authentication UI
Authentication UIHome screenlayout.tsx에서 템플릿 리터럴과 ${} 구문을 사용해서 문자열을 동적으로 생성<body className={inter.className}>{children}</body> 에서 아래로 변경 <body className={`${int...
In Clone Coding, Jun 17, 2024
Tailwind3
Tailwind3State Modifiershad 선택기has-[:invalid]: 기본적으로 부모 요소가 특정 상태(여기서는 :invalid)를 가진 자식 요소를 포함할 때 스타일을 적용하는 방법이다. has- 프리픽스는 부모 요소가 특정 조건을 만족하는 자식을 포함할 때 스타일을 적용한다.Lists and Animati...
In Clone Coding, Jun 13, 2024
Tailwind2
Tailwind2Modifiers 반응형 디자인 스타일을 조건부로 사용할 수 있게 해줌 modifier는 항상 끝에 : (colon)을 가지고 있음 조건이 참일 때 적용 transition : 애니메이션이 부드럽게 전환될 때 사용 두 가지 다크모드 전략 사용자의 기본 설정 따라가기 ...
In Clone Coding, Jun 12, 2024
Tailwind
TailwindIntroductionTailwind CSS : Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 다양한 스타일 클래스를 제공하여 HTML 요소에 쉽게 스타일을 적용할 수 있도록 한다. 이 프레임워크는 클래스를 조합하여 원하는 스타일을 만들 수 있기 때문에, 커스텀 CSS를 작성하는 것보다 빠르고 일...
In Clone Coding, Jun 11, 2024
Project Setup
Full Stack Clone CodingNext JS Quiz 정답 설명 라이브러리와 프레임워크의 주요 차이점 라이브러리 (Library): 라이브러리는 특정 기능을 수행하기 위해 사용할 수 있는 도구 모음 개발자는 필요한 기능을 수행하기 위해 라이브러리를 호출한다. 제어 흐름은 개발자의...
In Clone Coding, Jun 10, 2024
Setting Up Frontend Development Environment
Setting Up Frontend Development Environment Node.js 설치 리액트 프로젝트 생성 Create React App을 사용한 프로젝트 생성npx create-react-app 프로젝트명 프로젝트 폴더로 이동cd 프로젝트명 필요한 라이브러리 설...
In WebDev, Mar 28, 2024
Backend Documentation
Backend Documentation주요기능 초기 설정 및 라이브러리 임포트: Flask, Flask-RESTful, Flask-JWT-Extended 등 다양한 Flask 확장과 기타 필요한 라이브러리를 임포트하고, 애플리케이션과 API, CORS 설정을 초기화 로깅 설정: 애플리케이션 로깅을 위한 기본 설정을 구성. ...
In WebDev, Mar 27, 2024
Modify Sign-Up Router & Administrator Permission Configuration
Modify Sign-Up Router & Administrator Permission Configuration회원가입시 이메일 추가 데이터베이스 스키마 수정ALTER TABLE users ADD COLUMN email VARCHAR(255) UNIQUE NOT NULL; 백엔드 로직 업데이트 g...
In WebDev, Mar 12, 2024
Implement Data Modification, Deletion, and User Registration
데이터 수정수정 페이지 라우트 추가(main.py)~~~@app.route(‘/edit_artwork/', methods=['GET', 'POST'])def edit_artwork(artwork_id): if request.method == 'POST': title = request.form['title'] ...
In WebDev, Mar 11, 2024
Modify File Upload, Implement List and Detail Pages
Modify File Upload, Implement List and Detail Pages파일 업로드 데이터에 제목, 설명 기능 넣기sqlALTER TABLE images ADD COLUMN title VARCHAR(255), ADD COLUMN description TEXT;
In WebDev, Mar 04, 2024
Implementing File Upload
파일 업로드 구현 templates 디렉토리 생성 upload.html 작성 : 사용자가 파일을 업로드할 수 있도록 HTML 폼을 만듦 저장할 디렉토리 생성 파일 업로드를 처리할 Flask뷰 함수 작성app.config : Flask의 내장 객체로 애플리케이션의 구성을 위한 변수들을 저장하는 데 사용. 딕셔너...
In WebDev, Mar 01, 2024
Interpreter Settings
PyCharm 환경 설정setting - 프로젝트명 - Interpreter⭐️ 설치 리스트 Flask : 웹프레임워크. 설치하면 Jinja2템플릿 엔진도 같이 설치됨Python 코드와 함께 동적 웹 페이지를 쉽게 생성할 수 있음 MySQL : 데이터베이스 WTForms : 사용자 입력처리 Flask-Login : ...
In WebDev, Feb 29, 2024
Project Planning
웹사이트 구축 단계 프로젝트 요구사항 정의웹사이트의 목적과 기능타겟 사용자기대되는 트래픽 양과 확장성 요구사항 기술 스택 선택프론트엔드: HTML, CSS, JavaScript (프레임워크 예: React, Vue.js)백엔드: Node.js, Django, Flask, Ruby on Rails 등데이터베...
In WebDev, Feb 26, 2024