전체 글 39

SwiftUI Modifier와 Custom Modifier

Modifier 설명 Modifier는 뷰를 입력으로 받아 그에 대한 수정을 수행하고, 수정이 적용된 새로운 뷰를 반환합니다. 이러한 작업을 체이닝을 통해 연속적으로 수행하여 원하는 모습의 뷰를 구성할 수 있습니다. Modifier 적용순서 modifer는 수정된 view를 계속 반환하는 체이닝구조이기 때문에 순서대로 적용됩니다. 그렇기 때문에 Modifier의 적용 순서에 주의해야 합니다. Modifier의 순서를 변경하면 뷰의 모양과 동작이 예상과 다를 수 있습니다. [ 예시코드 ] 첫 번째 Text는 .frame(maxWidth: .infinity)을 사용하여 최대 너비를 차지하도록 하고 .background(Color.yellow)를 사용하여 배경색을 노란색으로 설정하였습니다. 두번째 Text는 ..

swift 2023.05.18

SwiftUI @State와 @Binding 에 대해 알아보자

@State @State는 SwiftUI에서 사용되는 속성 래퍼(Wrapper)로, 값의 변경을 감지하고 뷰를 자동으로 업데이트하는 데에 사용됩니다. @State를 사용하면 값이 변경되면 해당 값에 의존하는 뷰가 자동으로 다시 렌더링되어 화면이 업데이트됩니다. [ 예시코드 ] struct ContentView: View { @State private var count = 0 var body: some View { VStack { Text("Count: \(count)") .font(.title) Button(action: { count += 1 }) { Text("Increment") .font(.headline) .padding() .background(Color.blue) .foregroundColo..

swift 2023.05.17

SwiftUI Splash(스플래시) 화면 구현하기

SplashView.swift 생성 [splashView.swift] import SwiftUI struct SplashView: View { var body: some View { ZStack { Color.blue .edgesIgnoringSafeArea(.all) VStack { Image(systemName: "star.fill") .font(.system(size: 100)) .foregroundColor(.white) Text("스플래시 화면") .font(.title) .foregroundColor(.white) } } } } 메인 화면(View)에서 SplashView를 초기 화면으로 사용 [contentview.swift] struct ContentView: View { @State pr..

swift 2023.05.17

swift ui 컨테이너 ( VStack , HStack , ZStack )

VStack 수직으로 정렬된 뷰의 컨테이너입니다. var body: some View { VStack( alignment: .leading, spacing: 10 ) { ForEach( 1...10, id: \.self ) { Text("Item \($0)") } } } 초기화 메서드(init) init(alignment: HorizontalAlignment, spacing: CGFloat?, content: () -> Content) alignment: 하위 뷰들의 수평 정렬을 결정합니다. 기본값은 .center입니다. spacing: 하위 뷰들 사이의 간격을 결정합니다. 기본값은 nil입니다. 이 값이 nil인 경우 시스템에서 적절한 기본값을 사용합니다. content: 하위 뷰들을 포함하는 클로저입..

swift 2023.04.18

SwiftUI LifeCycle(라이프사이클)에 대해 알아보자

주로 사용하는 라이프사이클 SwiftUI는 UIKit의 라이프사이클과는 다소 다른 라이프사이클을 가지고 있습니다. SwiftUI의 주요 라이프사이클 이벤트는 다음과 같습니다 onAppear: 뷰가 화면에 나타날 때 호출됩니다. 일반적으로 데이터를 로드하거나 초기화하는 데 사용됩니다. onDisappear: 뷰가 화면에서 사라질 때 호출됩니다. 뷰가 메모리에서 해제되기 전에 정리 작업을 수행하는 데 사용됩니다. onChange: 특정 상태 속성이 변경될 때 호출됩니다. 변경된 값에 따라 특정 동작을 수행하는 데 사용됩니다. onAppear 뷰가 화면에 나타날 때 호출됩니다. 주로 초기 데이터 로드 및 초기화 작업에 사용됩니다. 예를 들어, 네트워크 요청을 통해 데이터를 가져오거나, 데이터베이스에서 데이터를..

swift 2023.04.18

swift - 기본문법

상수와 변수 [ 상수 ] 상수(constant)는 값을 한 번 할당한 후 변경할 수 없습니다. let 키워드를 사용하여 선언합니다 let name = "John" [ 변수 ] 변수(variable)는 값을 할당한 후 변경할 수 있습니다. var 키워드를 사용하여 선언합니다. var age = 30 age = 31 // 값을 변경할 수 있습니다. 기본데이터 타입 Int: 정수 값을 나타냅니다. Int8, Int16, Int32, Int64 등의 다양한 크기의 정수 타입도 있습니다. UInt: 부호 없는 정수 값을 나타냅니다. UInt8, UInt16, UInt32, UInt64 등의 다양한 크기의 부호 없는 정수 타입도 있습니다. Float: 단정밀도 부동 소수점 값을 나타냅니다. Double: 배정밀도 ..

swift 2023.04.17

NestJs JWT 토큰 생성 / 토큰 인증(Guard)

이전에 로그인 / 로그아웃을 구현하지 않으셨다면 아래의 포스팅을 봐주세요! https://develop-const.tistory.com/22 NestJs 회원가입(비밀번호 암호화), 로그인 구현하기 인증관련부분은 다음시간에 구현하고, 먼저 회원가입과 로그인기능에 대해 구현해보겠습니다. auth와 user 파일을 간단하게 생성 nest g resource auth nest g resource user user [ user/entities/user.entitiy.ts ] impor develop-const.tistory.com 토큰을 사용해 api 호출하는 흐름 1. 클라이언트는 서버에 로그인 요청을 합니다. 2. email과 password가 맞는지 검증한후 맞다면 access 토큰을 발급해 전달합니다 3..

nest js 2023.04.14

NestJs 회원가입(비밀번호 암호화), 로그인 구현하기

인증관련부분은 다음시간에 구현하고, 먼저 회원가입과 로그인기능에 대해 구현해보겠습니다. auth와 user 파일을 간단하게 생성 nest g resource auth nest g resource user user [ user/entities/user.entitiy.ts ] import { BeforeInsert, Column, CreateDateColumn, DeleteDateColumn, Entity, PrimaryGeneratedColumn, UpdateDateColumn, } from 'typeorm'; import * as bcrypt from 'bcrypt'; @Entity({ name: 'user' }) export class UserEntity { @PrimaryGeneratedColumn(..

nest js 2023.04.14

NestJs에서 환경변수

환경변수 분리하기 환경변수는 보안상 중요한 정보(예: 데이터베이스 비밀번호)를 포함할 수 있기 때문에, 애플리케이션 코드와 분리하여 관리하는 것이 좋습니다. 이를 통해 코드를 외부에 노출하지 않고 보안성을 높일 수 있습니다 1. @nestjs/config 패키지 설치하기 @nestjs/config는 Nest.js에서 환경 변수를 쉽게 처리할 수 있도록 도와주는 패키지입니다. 이 패키지를 사용하면 .env 파일 이외에도, CLI 인자, 환경변수, JSON 파일, YAML 파일, JS 파일 등 다양한 방법으로 설정값을 제공할 수 있습니다. npm i @nestjs/config 2. env 파일작성하기 # Database DB_HOST='localhost' DB_PORT=3306 DB_USERNAME='roo..

nest js 2023.04.13