개발 환경

Frontend : Next.js 15 (React 19, React-dom 19), Next-Auth Backend : Spring Boot 3.x.x, Spring Security

의존성 추가 (build.gradle)

build.gradle.kts

dependencies {
    // Spring Security
    implementation 'org.springframework.boot:spring-boot-starter-security'

    // Spring Web
    implementation 'org.springframework.boot:spring-boot-starter-web'

    // JPA (데이터베이스 연동 - 필요에 따라)
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'

    // OAuth 2.0 Client
    implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'

    // Lombok (선택 사항, 코드 간결화)
    compileOnly 'org.projectlombok:lombok'
    annotationProcessor 'org.projectlombok:lombok'

    // JSON Web Token (JWT)
    implementation 'io.jsonwebtoken:jjwt-api:0.11.5'
    implementation 'io.jsonwebtoken:jjwt-impl:0.11.5'
    implementation 'io.jsonwebtoken:jjwt-jackson:0.11.5'

    // Google Client Libraries
    implementation 'com.google.api-client:google-api-client:1.32.1'
    implementation 'com.google.oauth-client:google-oauth-client:1.34.1'

    // 데이터베이스 드라이버 (예: H2, MySQL, PostgreSQL)
    runtimeOnly 'com.h2database:h2' // 예시로 H2 데이터베이스 사용
}

User 엔티티 생성

package com.example.demo.entity;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import javax.persistence.*;
import java.util.List;

@Data
@Entity
@Builder
@NoArgsConstructor
@AllArgsConstructor
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String email;
    private String password;
    private String provider; // 인증 제공자 (google, local 등)
    private String providerId; // provider 에서 제공하는 고유 id
    @ElementCollection(fetch = FetchType.EAGER)
    private List<String> roles; // 사용자 역할
}

UserRepository 생성

package com.example.auth.repository;

import com.example.auth.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.Optional;

public interface UserRepository extends JpaRepository<User, Long> {
    Optional<User> findByEmail(String email);
    Optional<User> findByProviderAndProviderId(String provider, String providerId);

}

SecurityConfig 설정

// SecurityConfig.java
package com.example.auth.config;

import com.example.auth.security.JwtAuthenticationFilter;
import com.example.auth.security.JwtTokenProvider;
import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.util.List;


@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig {
    private final JwtTokenProvider jwtTokenProvider;

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder(); // BCryptPasswordEncoder 사용
    }

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .cors(cors -> cors.configurationSource(corsConfigurationSource()))
            // CSRF 비활성화 (JWT 사용 시 불필요)
            .csrf((csrf) -> csrf.disable())
            // 세션 사용 안함
            .sessionManagement(session -> session
                    .sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .authorizeHttpRequests((auth) -> auth
                    .requestMatchers("/auth/register", "/auth/login", "/auth/google", "/auth/google/callback").permitAll()  // 모든 사용자 허용
                    .anyRequest().authenticated()  // 나머지 요청은 인증 필요
            )
            .addFilterBefore(new JwtAuthenticationFilter(jwtTokenProvider), UsernamePasswordAuthenticationFilter.class);

        return http.build();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();

        // CORS 설정
        config.setAllowedOrigins(List.of("http://localhost:3000")); // 허용할 오리진
        config.setAllowedMethods(List.of("GET","POST", "PUT", "DELETE", "PATCH", "OPTIONS")); // 허용할 HTTP 메서드
        config.setAllowedHeaders(List.of("*")); // 허용할 헤더
        config.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return source;
    }
}

JwtTokenProvider 클래스

package com.example.auth.security;

import io.jsonwebtoken.*;
import io.jsonwebtoken.security.Keys;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.stereotype.Component;

import javax.annotation.PostConstruct;
import javax.crypto.SecretKey;
import java.nio.charset.StandardCharsets;
import java.util.Collections;
import java.util.Date;
import java.util.List;

@Component
public class JwtTokenProvider {
    @Value("${jwt.secret}")
    private String secretKey;

    @Value("${jwt.expiration}")
    private long tokenValidTime;

    private SecretKey key;

    @PostConstruct
    public void init(){
        this.key = Keys.hmacShaKeyFor(secretKey.getBytes(StandardCharsets.UTF_8));
    }

    // JWT 토큰 생성
    public String createToken(String email, List<String> roles) {
        Claims claims = Jwts.claims().setSubject(email);
        claims.put("roles", roles);

        Date now = new Date();
        return Jwts.builder()
                .setClaims(claims)
                .setIssuedAt(now)
                .setExpiration(new Date(now.getTime() + tokenValidTime))
                .signWith(key, SignatureAlgorithm.HS256)
                .compact();
    }

    // JWT 토큰에서 인증 정보 조회
    public Authentication getAuthentication(String token) {
        Claims claims = Jwts.parserBuilder()
                            .setSigningKey(key)
                            .build()
                            .parseClaimsJws(token)
                            .getBody();
        String email = claims.getSubject();
        List<String> roles = (List<String>)claims.get("roles");
        List<SimpleGrantedAuthority> authorities = roles.stream().map(SimpleGrantedAuthority::new).toList();

        return new UsernamePasswordAuthenticationToken(email, "", authorities);
    }


    // 토큰에서 이메일 추출
    public String getEmailFromToken(String token) {
         return Jwts.parserBuilder()
                 .setSigningKey(key)
                 .build()
                 .parseClaimsJws(token)
                 .getBody()
                 .getSubject();
    }


    // JWT 토큰 유효성 확인
    public boolean validateToken(String token) {
        try {
            Jws<Claims> claims = Jwts.parserBuilder()
                                        .setSigningKey(key)
                                        .build()
                                        .parseClaimsJws(token);
            return !claims.getBody().getExpiration().before(new Date());
        } catch (JwtException | IllegalArgumentException e) {
            return false;
        }
    }
}

JwtAuthenticationFilter 클래스

package com.example.auth.security;

import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Component;
import org.springframework.util.StringUtils;
import org.springframework.web.filter.OncePerRequestFilter;

import java.io.IOException;

@RequiredArgsConstructor
public class JwtAuthenticationFilter extends OncePerRequestFilter {

    private final JwtTokenProvider jwtTokenProvider;

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        String token = resolveToken(request);

        if (token != null && jwtTokenProvider.validateToken(token)) {
            Authentication authentication = jwtTokenProvider.getAuthentication(token);
            SecurityContextHolder.getContext().setAuthentication(authentication);
        }

        filterChain.doFilter(request, response);
    }

    // 헤더에서 토큰 추출
    private String resolveToken(HttpServletRequest request) {
         String bearerToken = request.getHeader("Authorization");
        if(StringUtils.hasText(bearerToken) && bearerToken.startsWith("Bearer ")) {
            return bearerToken.substring(7);
        }
        return null;
    }
}

AuthController

package com.example.auth.controller;

import com.example.auth.dto.LoginDto;
import com.example.auth.dto.RegisterDto;
import com.example.auth.entity.User;
import com.example.auth.security.JwtTokenProvider;
import com.example.auth.service.UserService;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.util.UriComponentsBuilder;

import java.io.IOException;
import java.util.List;

@RestController
@RequiredArgsConstructor
@RequestMapping("/auth")
public class AuthenticationController {

    private final UserService userService;
    private final PasswordEncoder passwordEncoder;
    private final JwtTokenProvider jwtTokenProvider;

    @Value("${google.client-id}")
    private String googleClientId;
    @Value("${google.client-secret}")
    private String googleClientSecret;
    @Value("${google.redirect-uri}")
    private String googleRedirectUri;

    @PostMapping("/register")
    public ResponseEntity<String> register(@RequestBody RegisterDto registerDto) {
        User user = User.builder()
                .email(registerDto.getEmail())
                .password(passwordEncoder.encode(registerDto.getPassword()))
                .roles(List.of("ROLE_USER"))
                .provider("local")
                .build();
        userService.register(user);
        return new ResponseEntity<>("User registered successfully", HttpStatus.CREATED);
    }

    @PostMapping("/login")
    public ResponseEntity<String> login(@RequestBody LoginDto loginDto) {
        User user = userService.getUserByEmail(loginDto.getEmail()).orElseThrow(()->new IllegalArgumentException("등록되지 않은 유저입니다."));
        if (!passwordEncoder.matches(loginDto.getPassword(), user.getPassword())) {
            throw new IllegalArgumentException("비밀번호가 일치하지 않습니다.");
        }
        String token = jwtTokenProvider.createToken(user.getEmail(), user.getRoles());
        return new ResponseEntity<>(token, HttpStatus.OK);
    }

    @GetMapping("/google")
    public void googleLogin(HttpServletResponse response) throws IOException {

        String reqUrl = UriComponentsBuilder.fromUriString("https://accounts.google.com/o/oauth2/v2/auth")
            .queryParam("client_id", googleClientId)
            .queryParam("redirect_uri", googleRedirectUri)
            .queryParam("response_type", "code")
            .queryParam("scope", "email profile")
            .build()
            .toUriString();

        response.sendRedirect(reqUrl);
    }

    @GetMapping("/google/callback")
    public ResponseEntity<String> googleCallback(@RequestParam String code) throws IOException {
        RestTemplate restTemplate = new RestTemplate();
        String tokenUrl = UriComponentsBuilder.fromUriString("https://oauth2.googleapis.com/token")
            .queryParam("code", code)
            .queryParam("client_id", googleClientId)
            .queryParam("client_secret", googleClientSecret)
            .queryParam("redirect_uri", googleRedirectUri)
            .queryParam("grant_type", "authorization_code")
            .build()
            .toUriString();

        ResponseEntity<String> tokenResponse = restTemplate.postForEntity(tokenUrl, null, String.class);

        ObjectMapper objectMapper = new ObjectMapper();
        JsonNode tokenJson = objectMapper.readTree(tokenResponse.getBody());
        String accessToken = tokenJson.get("access_token").asText();

        String userInfoUrl = UriComponentsBuilder.fromUriString("https://www.googleapis.com/oauth2/v2/userinfo")
            .queryParam("access_token", accessToken)
            .build()
            .toUriString();

        ResponseEntity<String> userInfoResponse = restTemplate.getForEntity(userInfoUrl, String.class);

        JsonNode userInfoJson = objectMapper.readTree(userInfoResponse.getBody());
        String email = userInfoJson.get("email").asText();
        String googleId = userInfoJson.get("id").asText();

        User user = userService.getUserByProviderAndProviderId("google", googleId).orElse(null);

        if(user == null) {
            User newUser = User.builder()
                    .email(email)
                    .provider("google")
                    .providerId(googleId)
                    .roles(List.of("ROLE_USER"))
                    .build();
            userService.register(newUser);
             return new ResponseEntity<>(jwtTokenProvider.createToken(email, newUser.getRoles()), HttpStatus.OK);
        }
         return new ResponseEntity<>(jwtTokenProvider.createToken(user.getEmail(), user.getRoles()), HttpStatus.OK);
    }
}

UserService 인터페이스 및 구현

UserService.java

package com.example.auth.service;

import com.example.auth.entity.User;

import java.util.Optional;

public interface UserService {
    void register(User user);
    Optional<User> getUserByEmail(String email);
    Optional<User> getUserByProviderAndProviderId(String provider, String providerId);

}

UserServiceImpl.java

// UserServiceImpl.java
package com.example.auth.service;

import com.example.auth.entity.User;
import com.example.auth.repository.UserRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

import java.util.Optional;

@Service
@RequiredArgsConstructor
public class UserServiceImpl implements UserService {
    private final UserRepository userRepository;
    @Override
    public void register(User user) {
        userRepository.save(user);
    }

    @Override
    public Optional<User> getUserByEmail(String email) {
        return userRepository.findByEmail(email);
    }

    @Override
    public Optional<User> getUserByProviderAndProviderId(String provider, String providerId) {
        return userRepository.findByProviderAndProviderId(provider,providerId);
    }
}

DTO

SignupDto.java

package com.example.demo.dto;

import lombok.Data;

@Data
public class SignupDto {
    private String email;
    private String password;
}

SigninDto.java

package com.example.demo.dto;

import lombok.Data;

@Data
public class SigninDto {
    private String email;
    private String password;
}

[ react-native-bootsplash 공식문서 ]

모바일 애플리케이션에 스플래시 화면과 앱 아이콘을 추가하기 위한 훌륭한 옵션입니다.

그것은 즉시 스플래시 화면과 앱 아이콘을 생성하는 데 활용할 수 있는 CLI와 함께 제공됩니다.

자세히 살펴봅시다.

S.W. ( vs. react-native-splash-screen )

Strong

• CLI assets generator 와 함께 제공된다.
• assets generator를 사용하여 다양한 크기의 앱 아이콘을 생성할 수 있다.
• assets generator를 사용하여 적절한 크기의 splash screen을 생성하고, CLI의 명령으로 splash screen을 사용자 정의할 수 있다.
• CLI는 자동으로 Android Drawable XML 파일을 자동으로 생성한다.
• 사용자가 splash screen의 화면 지속 시간을 지정할 수 있다.
• API를 사용하면 Jest와 같은 라이브러리를 사용하여 쉽게 테스트 할 수 있다.
• 132kB의 비교적 작은 번들 크기를 가지고 있다.

Weak

• 라이브러리가 단독 개발자에 의해 개발되고 기여자가 상대적으로 적다.
• 사용자는 Android 및 iOS용 splash screen을 구성해야 한다.
• 구성이 길고 iOS 용 Xcode를 사용해야 한다.
• .gif 확장자 파일과 애니메이션을 허용하지 않는다.
• Expo CLI 환경은 지원하지 않는다.

Supplies

Splash Screen에 사용할 4096px x 4096px 로고 이미지 ( .png, .svg ) 파일

Setup

Installation

$ npm install react-native-bootsplash

+ cd ios && pod install

# --- or ---

$ yarn add react-native-bootsplash

+ cd ios && pod install

Assets Generation

$ npx react-native generate-bootsplash [Logo_path] \ [options]

+ cd ios && pod install

# --- or ---

$ yarn react-native generate-bootsplash [Logo_path] \ [options]

+ cd ios && pod install

Logo_path :

Project Root 로부터 Logo 파일 위치

예시 ) . / assets / images / logo_ss.png

Options :

--platforms <list>          Platforms to generate for, separated by a comma (default: "android,ios,web")
--background <string>       Background color (in hexadecimal format) (default: "#fff")
--logo-width <number>       Logo width at @1x (in dp - we recommend approximately ~100) (default: 100)
--assets-output <string>    Assets output directory path
--flavor <string>           Android flavor build variant (where your resource directory is) (default: "main")
--html <string>             HTML template file path (your web app entry point) (default: "index.html")
--license-key <string>      License key to enable brand and dark mode assets generation
--brand <string>            Brand file path (PNG or SVG)
--brand-width <number>      Brand width at @1x (in dp - we recommend approximately ~80) (default: 80)
--dark-background <string>  [dark mode] Background color (in hexadecimal format)
--dark-logo <string>        [dark mode] Logo file path (PNG or SVG)
--dark-brand <string>       [dark mode] Brand file path (PNG or SVG)
-h, --help                  display help for command

Example :

yarn react-native generate-bootsplash svgs/light_logo.svg \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets \
  --flavor=main \
  --html=index.html \
  --license-key=xxxxx \
  --brand=svgs/light_brand.svg \
  --brand-width=80 \
  --dark-background=00090A \
  --dark-logo=svgs/dark_logo.svg \
  --dark-brand=svgs/dark_brand.svg

>> Android 

android/app/src/main/res/values/colors.xml
android/app/src/main/res/drawable-hdpi/bootsplash_logo.png
android/app/src/main/res/drawable-mdpi/bootsplash_logo.png
android/app/src/main/res/drawable-xhdpi/bootsplash_logo.png
android/app/src/main/res/drawable-xxhdpi/bootsplash_logo.png
android/app/src/main/res/drawable-xxxhdpi/bootsplash_logo.png

>> iOS

ios/RNBootSplashExample/BootSplash.storyboard
ios/RNBootSplashExample.xcodeproj/project.pbxproj
ios/RNBootSplashExample/Info.plist
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/Contents.json
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo-<hash>.png
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo-<hash>@2x.png
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo-<hash>@3x.png

>> Web

index.html

>> Assets
assets/bootsplash.manifest.json
assets/bootsplash.logo.png
assets/bootsplash.logo@1.5x.png
assets/bootsplash.logo@2x.png
assets/bootsplash.logo@3x.png
assets/bootsplash.logo@4x.png

>> With licence key
{...}


# Thanks for using react-native-bootsplash
# Done in 2.75s.

Android

styles.xml 수정

android/app/src/main/res/values/styles.xml

<resources>

  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <!-- Your base theme customization -->
  </style>

  <!-- BootTheme should inherit from Theme.BootSplash or Theme.BootSplash.EdgeToEdge -->
  <style name="BootTheme" parent="Theme.BootSplash">
    <item name="bootSplashBackground">@color/bootsplash_background</item>
    <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
    <item name="bootSplashBrand">@drawable/bootsplash_brand</item> <!-- Only if you have a brand image -->
    <item name="postBootSplashTheme">@style/AppTheme</item>
  </style>

</resources>

AndroidManifest.xml 수정

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <!-- … -->

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme"> <!-- Apply @style/AppTheme on .MainApplication -->
    <activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustResize"
      android:exported="true"
      android:theme="@style/BootTheme"> <!-- Apply @style/BootTheme on .MainActivity -->
      <!-- … -->
    </activity>
  </application>
</manifest>

MainActivity.{java,kt} 수정

android/app/src/main/java/com/yourprojectname/MainActivity.{java,kt}

MainActivity.java (react-native < 0.73)

// …

// add these required imports:
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  // …

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this, R.style.BootTheme); // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState); // super.onCreate(null) with react-native-screens
  }
}

MainActivity.kt (react-native >= 0.73)

// …

// add these required imports:
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() {

  // …

  override fun onCreate(savedInstanceState: Bundle?) {
    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState) // super.onCreate(null) with react-native-screens
  }
}

iOS

AppDelegate.mm 수정

ios / [ ProjectName ] / AppDelegate.mm

#import "AppDelegate.h"
#import "RNBootSplash.h" // ⬅️ add the header import

// …

@implementation AppDelegate

// …

// ⬇️ Add this before file @end (for react-native 0.74+)
- (void)customizeRootView:(RCTRootView *)rootView {
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen
}

// OR

// ⬇️ Add this before file @end (for react-native < 0.74)
- (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
                          moduleName:(NSString *)moduleName
                           initProps:(NSDictionary *)initProps {
  UIView *rootView = [super createRootViewWithBridge:bridge moduleName:moduleName initProps:initProps];
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen
  return rootView;
}

@end

Usage

import { useEffect } from "react";
import { Text } from "react-native";
import BootSplash from "react-native-bootsplash";

type hide = (config?: { fade?: boolean }) => Promise<void>;

const App = () => {
  useEffect(() => {
    const init = async () => {
      // …do multiple sync or async tasks
    };

    init().finally(async () => {
      await BootSplash.hide({ fade: true });
      console.log("BootSplash has been hidden successfully");
    });
  }, []);

  return <Text>My awesome app</Text>;
};


------- 사용법 -------


import BootSplash from "react-native-bootsplash";

type isVisible = () => Promise<boolean>;

BootSplash.isVisible().then((value) => console.log(value));

With React Navigation

import { NavigationContainer } from "@react-navigation/native";
import BootSplash from "react-native-bootsplash";

const App = () => (
  <NavigationContainer
    onReady={() => {
      BootSplash.hide();
    }}
  >
    {/* content */}
  </NavigationContainer>
);

Test With Jest

jest/setup.js (or any other file name)

jest.mock("react-native-bootsplash", () => {
  return {
    hide: jest.fn().mockResolvedValue(),
    isVisible: jest.fn().mockResolvedValue(false),
    useHideAnimation: jest.fn().mockReturnValue({
      container: {},
      logo: { source: 0 },
      brand: { source: 0 },
    }),
  };
});

jest.config

{
  "setupFiles": ["<rootDir>/jest/setup.js"]
}

Status Bar Transparent

values.styles.xml

- <resources>
+ <resources xmlns:tools="http://schemas.android.com/tools">

  <style name="BootTheme" parent="Theme.BootSplash">
    <!-- … -->

+   <!-- Apply color + style to the status bar (true = dark-content, false = light-content) -->
+   <item name="android:statusBarColor" tools:targetApi="m">@color/bootsplash_background</item>
+   <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
  </style>

edge-to-edge layout

values.styles.xml

- <style name="BootTheme" parent="Theme.BootSplash">
+ <style name="BootTheme" parent="Theme.BootSplash.EdgeToEdge">

[ SpringBoot OAuth2 소셜로그인에 대해 알아보자. ]

Others ...

[ 소셜로그인 (OAuth2) - Google ] [ 소셜로그인 (OAuth2) - Kakao ]

Naver Developer Center

애플리케이션 등록

1. 네이버 개발자 센터 접속 후 로그인
2. Application -> 애플리케이션 등록
3. 애플리케이션 이름 지정 후 사용 API는 네이버 로그인 선택
4. 필요한 정보 선택
5. 로그인 오픈 API 서비스 환경에서 PC 웹 선택 후 URL 지정 서비스 URL : http://localhost:8080 Callback URL : http://localhost:8080/login/oauth2/code/naver
6. Client ID와 Client Secret을 저장

GetAttributes 전달 객체

<naver>
{
    resultcode=00, 
    message=success, 
    response = {
        id=pvdq1FSG3VZlD7Cp3JuWfAFi-3xir6A-WPlP5f8kXIo, email=chb20050@gmail.com, 
        name=안창범
    }
}

google과 facebook과는 달리 ...

kakao 와 naver 에서 받아온 정보는 객체 안에 객체가 있는 형식이라 추출할 때, 다른 처리 방식이 필요함

데이터 변환

위에서 확인한 값들을 우리가 만든 User 엔티티에 맞게끔 변환해서 가입을 시켜줘야 한다.

• provider = "google", "kakao", "naver", "facebook"
• providerId = google의 sub값, kakao와 facebook의 id값, naver의 response의 id 값
• loginId = provider_providerId 로 설정
• nickname = 각 사이트에 등록한 이름으로 설정
• email = google과 facebook의 email값, kakao의 kakao_account의 email값, naver의 response의 email값

구현 예제

application.yml

spring:
  # OAuth 로그인
  security:
    oauth2:
      client:
        registration:
          google:
            client-id: 발급받은 클라이언트 ID
            client-secret: 발급받은 클라이언트 보안 비밀번호
            scope:
              - email
              - profile

          kakao:
            client-id: 발급받은 REST API 키
            client-secret: 발급받은 Client Secret 코드
            scope:
              - account_email
              - profile_nickname
            authorization-grant-type: authorization_code
            redirect-uri: http://localhost:8080/login/oauth2/code/kakao
            client-name: Kakao
            client-authentication-method: POST

          naver:
            client-id: 발급받은 Client ID
            client-secret: 발급받은 Client Secret
            scope:
              - name
              - email
            client-name: Naver
            authorization-grant-type: authorization_code
            redirect-uri: http://localhost:8080/login/oauth2/code/naver

          facebook:
            client-id: 발급받은 앱 ID
            client-secret: 발급받은 앱 시크릿 코드
            scope:
              - email
              - public_profile

        provider:
          kakao:
            authorization-uri: https://kauth.kakao.com/oauth/authorize
            token-uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user-name-attribute: id

          naver:
            authorization-uri: https://nid.naver.com/oauth2.0/authorize
            token-uri: https://nid.naver.com/oauth2.0/token
            user-info-uri: https://openapi.naver.com/v1/nid/me
            user-name-attribute: response

OAuth2UserInfo

사이트별로 값을 추출하는 방식은 다르지만 추출해야 하는 값은 같기 때문에 통일성을 위해 interface 생성

OAuth2UserInfo.java

public interface OAuth2UserInfo {
    String getProviderId();
    String getProvider();
    String getEmail();
    String getName();
}

NaverUserInfo.java

@AllArgsConstructor
public class NaverUserInfo implements OAuth2UserInfo{

    private Map<String, Object> attributes;

    @Override
    public String getProviderId() {
        return (String) attributes.get("id");
    }

    @Override
    public String getProvider() {
        return "naver";
    }

    @Override
    public String getEmail() {
        return (String) attributes.get("email");
    }

    @Override
    public String getName() {
        return (String) attributes.get("name");
    }
}

OAuth2UserService

OAuth2UserService.java

@Service
@RequiredArgsConstructor
@Slf4j
public class PrincipalOauth2UserService extends DefaultOAuth2UserService {

    private final UserRepository userRepository;
    private final BCryptPasswordEncoder encoder;

    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User oAuth2User = super.loadUser(userRequest);
        log.info("getAttributes : {}", oAuth2User.getAttributes());

        OAuth2UserInfo oAuth2UserInfo = null;

        String provider = userRequest.getClientRegistration().getRegistrationId();

        if(provider.equals("google")) {
            log.info("구글 로그인 요청");
            oAuth2UserInfo = new GoogleUserInfo( oAuth2User.getAttributes() );
        } else if(provider.equals("kakao")) {
            log.info("카카오 로그인 요청");
            oAuth2UserInfo = new KakaoUserInfo( (Map)oAuth2User.getAttributes() );
        } else if(provider.equals("naver")) {
            log.info("네이버 로그인 요청");
            oAuth2UserInfo = new NaverUserInfo( (Map)oAuth2User.getAttributes().get("response") );
        } else if(provider.equals("facebook")) {
            log.info("페이스북 로그인 요청");
            oAuth2UserInfo = new FacebookUserInfo( oAuth2User.getAttributes() );
        }

        String providerId = oAuth2UserInfo.getProviderId();
        String email = oAuth2UserInfo.getEmail();
        String loginId = provider + "_" + providerId;
        String nickname = oAuth2UserInfo.getName();


        Optional<User> optionalUser = userRepository.findByLoginId(loginId);
        User user = null;

        if(optionalUser.isEmpty()) {
            user = User.builder()
                    .loginId(loginId)
                    .nickname(nickname)
                    .provider(provider)
                    .providerId(providerId)
                    .role(UserRole.USER)
                    .build();
            userRepository.save(user);
        } else {
            user = optionalUser.get();
        }

        return new PrincipalDetails(user, oAuth2User.getAttributes());
    }
}

결과

참조

https://chb2005.tistory.com/183

[ SpringBoot OAuth2 소셜로그인에 대해 알아보자. ]

Others ...

[ 소셜로그인 (OAuth2) - Google ] [ 소셜로그인 (OAuth2) - Naver ]

Kakao Developer Console

애플리케이션 등록

1. 카카오 개발자 페이지 접속 후 로그인
2. 내 어플리케이션 클릭
3. 애플리케이션 추가하기
4. 앱 아이콘, 앱 이름, 사업자명 작성
5. 앱 키 -> REST API 키 저장
6. 보안 -> Client Secret 생성 후 코드도 저장 + 활성화
7. 카카오 로그인 -> 활성화 설정 둘 다 ON으로 변경 + Redirect URI 설정 Redirect URI는 http://localhost:8080/login/oauth2/code/kakao로 지정
8. 플랫폼 -> Web 플랫폼 등록 -> http://localhost:8080 설정
9. 동의항목 -> 가져올 정보값 선택 (일부 항목은 검수를 해야 필수 동의 설정 가능) 닉네임, 이메일만 선택하고 진행해 봄

GetAttributes 전달 객체

<kakao>
{
    id=2632890179, 
    connected_at=2023-01-22T08:17:54Z, 
    properties = {nickname=안창범}, 
    kakao_account = {
        profile_nickname_needs_agreement=false, 
        profile={nickname=안창범}, 
        has_email=true, 
        email_needs_agreement=false, 
        is_email_valid=true, 
        is_email_verified=true, 
        email=chb2005@naver.com
    }
}

google과 facebook과는 달리 ...

kakao 와 naver 에서 받아온 정보는 객체 안에 객체가 있는 형식이라 추출할 때, 다른 처리 방식이 필요함

데이터 변환

위에서 확인한 값들을 우리가 만든 User 엔티티에 맞게끔 변환해서 가입을 시켜줘야 한다.

• provider = "google", "kakao", "naver", "facebook"
• providerId = google의 sub값, kakao와 facebook의 id값, naver의 response의 id 값
• loginId = provider_providerId 로 설정
• nickname = 각 사이트에 등록한 이름으로 설정
• email = google과 facebook의 email값, kakao의 kakao_account의 email값, naver의 response의 email값

구현 예제

application.yml

spring:
  # OAuth 로그인
  security:
    oauth2:
      client:
        registration:
          google:
            client-id: 발급받은 클라이언트 ID
            client-secret: 발급받은 클라이언트 보안 비밀번호
            scope:
              - email
              - profile

          kakao:
            client-id: 발급받은 REST API 키
            client-secret: 발급받은 Client Secret 코드
            scope:
              - account_email
              - profile_nickname
            authorization-grant-type: authorization_code
            redirect-uri: http://localhost:8080/login/oauth2/code/kakao
            client-name: Kakao
            client-authentication-method: POST

          naver:
            client-id: 발급받은 Client ID
            client-secret: 발급받은 Client Secret
            scope:
              - name
              - email
            client-name: Naver
            authorization-grant-type: authorization_code
            redirect-uri: http://localhost:8080/login/oauth2/code/naver

          facebook:
            client-id: 발급받은 앱 ID
            client-secret: 발급받은 앱 시크릿 코드
            scope:
              - email
              - public_profile

        provider:
          kakao:
            authorization-uri: https://kauth.kakao.com/oauth/authorize
            token-uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user-name-attribute: id

          naver:
            authorization-uri: https://nid.naver.com/oauth2.0/authorize
            token-uri: https://nid.naver.com/oauth2.0/token
            user-info-uri: https://openapi.naver.com/v1/nid/me
            user-name-attribute: response

OAuth2UserInfo

사이트별로 값을 추출하는 방식은 다르지만 추출해야 하는 값은 같기 때문에 통일성을 위해 interface 생성

OAuth2UserInfo.java

public interface OAuth2UserInfo {
    String getProviderId();
    String getProvider();
    String getEmail();
    String getName();
}

KakaoUserInfo.java

@AllArgsConstructor
public class KakaoUserInfo implements OAuth2UserInfo{

    private Map<String, Object> attributes;

    @Override
    public String getProviderId() {
        // Long 타입이기 때문에 toString으로 변호나
        return attributes.get("id").toString();
    }

    @Override
    public String getProvider() {
        return "kakao";
    }

    @Override
    public String getEmail() {
        // kakao_account라는 Map에서 추출
        return (String) ((Map) attributes.get("kakao_account")).get("email");
    }

    @Override
    public String getName() {
        // kakao_account라는 Map에서 추출
        return (String) ((Map) attributes.get("properties")).get("nickname");
    }
}

OAuth2UserService

OAuth2UserService.java

@Service
@RequiredArgsConstructor
@Slf4j
public class PrincipalOauth2UserService extends DefaultOAuth2UserService {

    private final UserRepository userRepository;
    private final BCryptPasswordEncoder encoder;

    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User oAuth2User = super.loadUser(userRequest);
        log.info("getAttributes : {}", oAuth2User.getAttributes());

        OAuth2UserInfo oAuth2UserInfo = null;

        String provider = userRequest.getClientRegistration().getRegistrationId();

        if(provider.equals("google")) {
            log.info("구글 로그인 요청");
            oAuth2UserInfo = new GoogleUserInfo( oAuth2User.getAttributes() );
        } else if(provider.equals("kakao")) {
            log.info("카카오 로그인 요청");
            oAuth2UserInfo = new KakaoUserInfo( (Map)oAuth2User.getAttributes() );
        } else if(provider.equals("naver")) {
            log.info("네이버 로그인 요청");
            oAuth2UserInfo = new NaverUserInfo( (Map)oAuth2User.getAttributes().get("response") );
        } else if(provider.equals("facebook")) {
            log.info("페이스북 로그인 요청");
            oAuth2UserInfo = new FacebookUserInfo( oAuth2User.getAttributes() );
        }

        String providerId = oAuth2UserInfo.getProviderId();
        String email = oAuth2UserInfo.getEmail();
        String loginId = provider + "_" + providerId;
        String nickname = oAuth2UserInfo.getName();


        Optional<User> optionalUser = userRepository.findByLoginId(loginId);
        User user = null;

        if(optionalUser.isEmpty()) {
            user = User.builder()
                    .loginId(loginId)
                    .nickname(nickname)
                    .provider(provider)
                    .providerId(providerId)
                    .role(UserRole.USER)
                    .build();
            userRepository.save(user);
        } else {
            user = optionalUser.get();
        }

        return new PrincipalDetails(user, oAuth2User.getAttributes());
    }
}

결과

참조

https://chb2005.tistory.com/183

Before ...

[ SpringBoot OAuth2 소셜로그인에 대해 알아보자. ]

Google Console

프로젝트 생성

1. 구글 API 콘솔 접속
2. 새 프로젝트 생성
3. OAuth 동의 화면 탭으로 이동
4. 외부 선택 후 만들기 클릭
5. 앱 이름, 사용자 지원 이메일 등 필수 칸 입력 후 저장
6. 생성 완료
7. 사용자 인증 정보 탭으로 이동
8. 사용자 인증 정보 만들기 클릭
9. OAuth Client ID 클릭
10. 원하는 애플리케이션 유형 선택 후 이름은 자유롭게 설정
11. 승인된 리다이렉션 URI 입력

로컬 : ( http://localhost:8080/login/oauth2/code/google ) 배포 : ( http://Project_URL/login/oauth2/code/google ) 12. 생성이 완료되면 다음과 같이 클라이언트 ID와 클라이언트 보안 비밀번호를 다운받을 수 있음.

구현 예제

라이브러리 추가

implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'

application.yml

spring:
  security:
    oauth2:
      client:
        registration:
          google:
            client-id: 생성된 클라이언트 ID
            client-secret: 생성된 보안 비밀번호
            scope:
              - email
              - profile

보안을 위해 application.yml에 적어주지 않고 환경변수로 등록하여 사용할 수도 있음.

Memeber Entity에 Column 추가

Member.java

private String provider;
private String providerId;

Principal Details 수정

OAuth2UserDetails.java

public class OAuth2UserDetails implements UserDetails, OAuth2User { 

    ... 

    private Map<String, Object> attributes;

    ...

    public PrincipalDetails(User user, Map<String, Object> attributes) {
        this.user = user;
        this.attributes = attributes;
    }

    ...

    @Override
    public Map<String, Object> getAttributes() {
        return attributes;
    }
}

OAuth2UserDetails.java

@Service
@RequiredArgsConstructor
@Slf4j
public class Oauth2UserService extends DefaultOAuth2UserService {

    private final UserRepository userRepository;
    private final BCryptPasswordEncoder encoder;

    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User oAuth2User = super.loadUser(userRequest);
        log.info("getAttributes : {}", oAuth2User.getAttributes());

        String provider = userRequest.getClientRegistration().getRegistrationId();
        String providerId = oAuth2User.getAttribute("sub");
        String loginId = provider + "_" +providerId;

        Optional<User> optionalUser = userRepository.findByLoginId(loginId);
        User user;

        if(optionalUser.isEmpty()) {
            user = User.builder()
                    .loginId(loginId)
                    .nickname(oAuth2User.getAttribute("name"))
                    .provider(provider)
                    .providerId(providerId)
                    .role(UserRole.USER)
                    .build();
            userRepository.save(user);
        } else {
            user = optionalUser.get();
        }

        return new PrincipalDetails(user, oAuth2User.getAttributes());
    }
}

SecurityConfig 수정

SecurityConfig.java

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    private final PrincipalOauth2UserService principalOauth2UserService;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
                .authorizeRequests()
                // 인증
                .antMatchers("/security-login/info").authenticated()
                // 인가
                .antMatchers("/security-login/admin/**").hasAuthority(UserRole.ADMIN.name())
                .anyRequest().permitAll()
                .and()
                // Form Login 방식 적용
                .formLogin()
                // 로그인 할 때 사용할 파라미터들
                .usernameParameter("loginId")
                .passwordParameter("password")
                .loginPage("/security-login/login")     // 로그인 페이지 URL
                .defaultSuccessUrl("/security-login")   // 로그인 성공 시 이동할 URL
                .failureUrl("/security-login/login")    // 로그인 실패 시 이동할 URL
                .and()
                .logout()
                .logoutUrl("/security-login/logout")
                .invalidateHttpSession(true).deleteCookies("JSESSIONID")
                // OAuth 로그인
                .and()
                .oauth2Login()
                .loginPage("/security-login/login")
                .defaultSuccessUrl("/security-login")
                .userInfoEndpoint()
                .userService(principalOauth2UserService)
        ;
        http
                .exceptionHandling()
                .authenticationEntryPoint(new MyAuthenticationEntryPoint())
                .accessDeniedHandler(new MyAccessDeniedHandler());
    }
}

[ AWS S3 Bucket 생성 및 설정 ] 이 완료되었다면 ...?!

AWS S3 - FILE UPLOAD

Build.gradle

implementation 'org.springframework.cloud:spring-cloud-starter-aws:2.2.6.RELEASE'

application.yml

cloud:
  aws:
    s3:
      bucket: <S3 버킷 이름>
    credentials:
      access-key: <저장해놓은 액세스 키>
      secret-key: <저장해놓은 비밀 액세스 키>
    region:
      static: ap-northeast-2
      auto: false
    stack:
      auto: false

AWS S3 Configuration 생성

S3Config.java

@Configuration
public class S3Config {

    @Value("${cloud.aws.credentials.access-key}")
    private String accessKey;

    @Value("${cloud.aws.credentials.secret-key}")
    private String secretKey;

    @Value("${cloud.aws.region.static}")
    private String region;

    @Bean
    public AmazonS3Client amazonS3Client() {
        BasicAWSCredentials credentials = new BasicAWSCredentials(accessKey, secretKey);

        return (AmazonS3Client) AmazonS3ClientBuilder
                .standard()
                .withRegion(region)
                .withCredentials(new AWSStaticCredentialsProvider(credentials))
                .build();
    }
}

파일 업로드 구현

S3Service.java

@Service
@RequiredArgsConstructor
public class S3UploadService {

    private final AmazonS3 amazonS3;

    @Value("${cloud.aws.s3.bucket}")
    private String bucket;

    public String saveFile(MultipartFile multipartFile) throws IOException {
        String originalFilename = multipartFile.getOriginalFilename();

        ObjectMetadata metadata = new ObjectMetadata();
        metadata.setContentLength(multipartFile.getSize());
        metadata.setContentType(multipartFile.getContentType());

        amazonS3.putObject(bucket, originalFilename, multipartFile.getInputStream(), metadata);
        return amazonS3.getUrl(bucket, originalFilename).toString();
    }
}

파일 다운로드 구현

S3Service.java

@Service
@RequiredArgsConstructor
public class S3UploadService {

    private final AmazonS3 amazonS3;

    @Value("${cloud.aws.s3.bucket}")
    private String bucket;

    ...

    public ResponseEntity<UrlResource> downloadImage(String originalFilename) {
    UrlResource urlResource = new UrlResource(amazonS3.getUrl(bucket, originalFilename));

    String contentDisposition = "attachment; filename=\"" +  originalFilename + "\"";

    // header에 CONTENT_DISPOSITION 설정을 통해 클릭 시 다운로드 진행
    return ResponseEntity.ok()
            .header(HttpHeaders.CONTENT_DISPOSITION, contentDisposition)
            .body(urlResource);

    }
}

파일 삭제 구현

S3Service.java

@Service
@RequiredArgsConstructor
public class S3UploadService {

    private final AmazonS3 amazonS3;

    @Value("${cloud.aws.s3.bucket}")
    private String bucket;

    ...

    public void deleteImage(String originalFilename)  {
        amazonS3.deleteObject(bucket, originalFilename);
    }    
}

AWS S3

AWS Simple Storage Service의 줄임말로 파일 서버의 역할을 하는 서비스

S3의 장점

• 무제한 용량 (하나의 파일에 대한 용량은 있지만, 전체 용량은 무제한)
• 파일 저장에 최적화 (개발자가 따로 용량을 추가하거나 성능을 높이는 작업을 하지 않아도 됨)
• 높은 내구도 (파일이 유실될 가능성이 낮음)
• 이 외에도 다소 저렴한 비용, 높은 객체 가용성, 뛰어난 보안성 등의 장점이 있음

ASW S3 생성

객체(Object) : 파일과 파일정보로 구성된 저장단위 버킷(Bucket) : 저장된 객체 대한 컨테이너

버킷은 최대 100개 생성 가능하며, 버킷에 저장할 수 있는 객체수는 제한 없음.

Bucket 생성

1. AWS Console 접속 후 S3 서비스 선택
2. 버킷 만들기 클릭!
3. 원하는 버킷 이름 입력
4. AWS Region 선택 (ap-northeast-2)
5. 객체 소유권 선택 (ACL 비활성화)
6. 모든 퍼블릭 엑세스 차단 해제
7. 나머지는 Default로 설정

사용자 생성

1. AWS Console 접속 후 IAM 서비스 선택
2. 액세스 관리 -> 사용자 -> 사용자 추가
3. 원하는 버킷 이름 입력
4. 직접 정책 연결 -> AmazonS3FullAccess 선택
5. 사용자 생성

Access Key 생성

1. 방금 생성한 사용자 선택 후 보안 자격 증명 탭 클릭
2. 액세스 키 만들기 클릭
3. 기타 선택 후 다음
4. 원하는 설명 태그 입력 후 액세스 키 만들기
5. 액세스 키를 만들면 아래와 같이 액세스 키와 비밀 액세스 키를 확인할 수 있는데, 이 값들을 저장후 완료

버킷 정책 변경

1. AWS Console에서 생성한 버킷으로 이동
2. 권한 -> 버킷 정책 -> 편집
3. 정책이 비어있으면 '+ 새 문 추가' 클릭
4. 정책 내용을 아래와 같이 변경

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Principal": "*",
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::<버킷 이름>/*"
        }
    ]
}

[공식문서] https://github.com/oblador/react-native-vector-icons

[디렉토리] https://oblador.github.io/react-native-vector-icons/

설치

npm install --save react-native-vector-icons

yarn add react-native-vector-icons

--------

>> For TypeScript <<

npm install --save-dev @types/react-native-vector-icons

yarn add -D @types/react-native-vector-icons

Android

android/app/build.gradle

apply from: file ("../../node_modules/react-native-vector-icons/fonts.gradle") // add this line


------- OR -------


To customize the fonts being copied, use:


project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // 사용하고자하는 폰트
]

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

node_modules/react-native-vector-icons/Fonts/ 하위에 원하는 폰트 파일들을 COPY

android/app/src/main/assets/fonts 폴더에 PASTE. (ensure the folder name is lowercase, i.e., fonts).

( assets/fonts 폴더가 없다면 폴더를 생성해주자. )

** 직접 Android Studio를 열어도 무관 **

<< Open Android Studio Command >>

$ open -a /Applications/Android\\ Studio.app ./android 

마지막으로 Android Studio를 열고 자동으로 Gradle Sync 되는 것을 기다린다.

iOS

ios/[project].xcworkspace

을 선택해여 Xcode를 실행해준다.

Xcode가 실행되면 위와 같이 프로젝트를 우클릭한 후 New Group 메뉴를 선택하고 Fonts 그룹을 만들어준다.

node_modules/react-native-vector-icons/Fonts/ 의 원하는 폰트 파일들을 COPY

위에 만든 Fonts 그룹에 PASTE

위와 같은 창이 뜰텐데...

"Copy items if needed" 가 체크된 상태에서 오른쪽 하단의 Finish 버튼을 선택

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
  <key>UIViewControllerBasedStatusBarAppearance</key>
  <false/>
  <key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
    <string>Fontisto.ttf</string>
  </array>
</dict>

ios/[project]/Info.plist 파일을 열고 위의 내용을 추가 후

( 물론... 원하는 폰트만 적용할 것. )

마지막으로, Xcode 에서 cmd + shift + k를 눌러 Clean Build Folder를 실행하면 iOS 설정 끝...

사용법

import Icon from 'react-native-vector-icons/FontAwesome';

export default class Home extends React.Component<Props, State> {
    render() {
        return (
            <View>
                <Icon name="home" size={24} color="#ffffff" />
            </View>
        );
    }
}

Reference

https://deku.posstree.com/ko/react-native/react-native-vector-icons/

React Native 앱에서 권한을 요청하고 처리하는 라이브러리.

[react-native-permissions 공식문서] https://github.com/zoontek/react-native-permissions

설명

• 사용자가 앱에서 필요로 하는 권한을 요청하면 사용자에게 해당 권한을 요청하는 대화상자를 보여준다.

• 사용자가 권한을 허용하면 이를 처리하고, 거부하면 사용자에게 알림을 보낸다.

• iOS - 사용자가 권한을 승일할 때마다 대화 상자에 표시된다.

• Android - 일부 권한은 앱 설치 시점에 사용자에게 요청되고 다른 권한은 앱이 실행되는 동안 사용자에게 요청된다.

설치

$ npm install --save react-native-permissions

$ yarn add react-native-permissions 

iOS 추가설정

ios / Podfile

1. 아래 ( - ) 부분을 삭제를 해준다.

# Transform this into a `node_require` generic function:

- # Resolve react_native_pods.rb with node to allow for hoisting
- require Pod::Executable.execute_command('node', ['-p',
-   'require.resolve(
-     "react-native/scripts/react_native_pods.rb",
-     {paths: [process.argv[1]]},
-   )', __dir__]).strip

*2. 아래 부분 (코드) 을 추가해준다. *

( + ) 기호를 당연히 제외하고 ... 겠죠?

+ def node_require(script)
+   # Resolve script with node to allow for hoisting
+   require Pod::Executable.execute_command('node', ['-p',
+     "require.resolve(
+       '#{script}',
+       {paths: [process.argv[1]]},
+     )", __dir__]).strip
+ end

# Use it to require both react-native's and this package's scripts:

+ node_require('react-native/scripts/react_native_pods.rb')
+ node_require('react-native-permissions/scripts/setup.rb')

3. cd ios ------> pod install

Permissions 의 종류

필요한 권한만 놔두고 나머지는 주석 처리하여 사용하면 된다.

물론, 지워도 무방하다.

Android

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <!-- 🚨 Keep only the permissions used in your app 🚨 -->

  <uses-permission android:name="android.permission.ACCEPT_HANDOVER" />
  <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION" />
  <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
  <uses-permission android:name="com.android.voicemail.permission.ADD_VOICEMAIL" />
  <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />
  <uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />
  <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
  <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
  <uses-permission android:name="android.permission.BODY_SENSORS" />
  <uses-permission android:name="android.permission.BODY_SENSORS_BACKGROUND" />
  <uses-permission android:name="android.permission.CALL_PHONE" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.GET_ACCOUNTS" />
  <uses-permission android:name="android.permission.NEARBY_WIFI_DEVICES" />
  <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
  <uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" />
  <uses-permission android:name="android.permission.READ_CALENDAR" />
  <uses-permission android:name="android.permission.READ_CALL_LOG" />
  <uses-permission android:name="android.permission.READ_CONTACTS" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.READ_PHONE_NUMBERS" />
  <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  <uses-permission android:name="android.permission.READ_SMS" />
  <uses-permission android:name="android.permission.RECEIVE_MMS" />
  <uses-permission android:name="android.permission.RECEIVE_SMS" />
  <uses-permission android:name="android.permission.RECEIVE_WAP_PUSH" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.SEND_SMS" />
  <uses-permission android:name="android.permission.USE_SIP" />
  <uses-permission android:name="android.permission.UWB_RANGING" />
  <uses-permission android:name="android.permission.WRITE_CALENDAR" />
  <uses-permission android:name="android.permission.WRITE_CALL_LOG" />
  <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

  <!-- … -->

</manifest>

iOS

ios/Podfile

handler 추가하기 ( 물론 ... 필요한 권한만 )

 permissions_path = '../node_modules/react-native-permissions/ios'

  pod 'Permission-AppTrackingTransparency', :path => "#{permissions_path}/AppTrackingTransparency"
  pod 'Permission-BluetoothPeripheral', :path => "#{permissions_path}/BluetoothPeripheral"
  pod 'Permission-Calendars', :path => "#{permissions_path}/Calendars"
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-Contacts', :path => "#{permissions_path}/Contacts"
  pod 'Permission-FaceID', :path => "#{permissions_path}/FaceID"
  pod 'Permission-LocationAccuracy', :path => "#{permissions_path}/LocationAccuracy"
  pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways"
  pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"
  pod 'Permission-MediaLibrary', :path => "#{permissions_path}/MediaLibrary"
  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"
  pod 'Permission-Motion', :path => "#{permissions_path}/Motion"
  pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
  pod 'Permission-PhotoLibraryAddOnly', :path => "#{permissions_path}/PhotoLibraryAddOnly"
  pod 'Permission-Reminders', :path => "#{permissions_path}/Reminders"
  pod 'Permission-Siri', :path => "#{permissions_path}/Siri"
  pod 'Permission-SpeechRecognition', :path => "#{permissions_path}/SpeechRecognition"
  pod 'Permission-StoreKit', :path => "#{permissions_path}/StoreKit"

ios/Info.plist

iOS 의 경우, 아래 [ YOUR TEXT ] 부분에 권한 사용 목적을 입력해야되는데,

AppStore 승인 허가를 위해서 최대한 자세히 적는 것 을 권장한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>

  <!-- 🚨 Keep only the permissions used in your app 🚨 -->

  <key>NSAppleMusicUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSBluetoothAlwaysUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSBluetoothPeripheralUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSCalendarsUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSCameraUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSContactsUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSFaceIDUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSLocationTemporaryUsageDescriptionDictionary</key>
  <dict>
    <key>YOUR-PURPOSE-KEY</key>
    <string>YOUR TEXT</string>
  </dict>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSMotionUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSRemindersUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSSpeechRecognitionUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSSiriUsageDescription</key>
  <string>YOUR TEXT</string>
  <key>NSUserTrackingUsageDescription</key>
  <string>YOUR TEXT</string>

  <!-- … -->

</dict>
</plist>

사용법 예시

  import {PERMISSIONS, RESULTS, request} from 'react-native-permissions';

  const askPermission = async () => {
    try {
      const result = await request(PERMISSIONS.IOS.PHOTO_LIBRARY);
      if (result === RESULTS.GRANTED) {
        // do something
      }
    } catch (error) {
      console.log('askPermission', error);
    }
  };

React Native 애플리케이션에서 .env 파일을 활용할 수 있도록 도와주는 라이브러리

설치

npm install -D react-native-dotenv
npm insall @types/react-native-dotenv // typescript

-------

yarn add -D react-native-dotenv
yarn add @types/react-native-dotenv // typescript

사용법

babel.config.js

프로젝트 내의 .env.local 파일을 불러올 수 있도록 구성

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        // react-native-dotenv
        [
            'module:react-native-dotenv',
            {
                "envName": "APP_ENV",
                "moduleName": "@env", // import 해올 때 react-native-env -> @env 가능.
                "path": ".env",
                "blocklist": null,
                "allowlist": null,
                "blacklist": null, 
                "whitelist": null, 
                "safe": false, // .env 파일에 정의된 환경 변수만 허용
                "allowUndefined": true, // 정의되지 않은 변수 가져오기를 허용
                "verbose": false
            },
        ],
    ]
}

.env

프로젝트의 루트 경로에 파일을 생성

API_URL = https://velog.io/....

.env.d.ts

타입스크립트 환경에서는 env.d.ts 파일을 생성하고 사용하고자 하는 환경 변수 타입을 지정 해야한다. 추가를 안 할 시, 환경 변수를 사용하려 할 때 해당 변수를 찾을 수 없다고 오류가 발생하게 된다.

declare module '@env' {
    export const API_URL: string;
      // ... export const 환경변수 이름: string;
}

Import

import {API_URL} from "@env"
// 또는
// import {API_URL, API_TOKEN} from "react-native-dotenv"

fetch(`${API_URL}/users`, {
  headers: {
    'Authorization': `Bearer ${API_TOKEN}`
  }
});

Babel Plugin Module Resolver

[Babel_Plugin_Module_Resolver 공식문서] https://www.npmjs.com/package/babel-plugin-module-resolver

npm install -D babel-plugin-module-resolver

yarn add babel-plugin-module-resolver

babel.config.js

Alias 설정하기

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '~': './src',
          '@components': './src/components',
          '@screens': './src/screens',
          '@assets': './src/assets',
          '@query': './src/query',
          ...
        },
      },
    ],
  ],
};

tsconfig( .js / .json )

TypeScript 사용시...

tsconfig.js 기본적으로 다음과 같이 구성되어있다.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["es2017"],                        /* Specify library files to be included in the compilation. */
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true,                /* Do not emit comments to output. */
    "noEmit": true,                           /* Do not emit outputs. */
    // "incremental": true,                   /* Enable incremental compilation */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    "skipLibCheck": false,                    /* Skip type checking of declaration files. */
    "resolveJsonModule": true                 /* Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. */

    /* Source Map Options */
    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

아래의 코드를 추가해준다. baseUrl을 기준으로 각각의 폴더의 하위 모든 파일들을 '@' 를 이용한 경로로 치환하는 설정

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "~/*": ["./*"],
      "@components/*": ["components/*"],
      "@screens/*": ["screens/*"],
      "@assets/*": ["assets/*"],
      "@query/*": ["query/*"]
    },
    ...
  }  
}

이미지 준비하기

LOGO 는 1024x1024 사이즈 하나만 준비

App_Icon 에서 아이콘으로 사용할 이미지를 드래그해서 넣고 Generate 눌러서 다운

아래와 같이 Android에서 사용할 이미지와 AppIcon Asset이 다운받아진다. Android에서는 추가적으로 round와 square 모양의 이미지가 필요하다. round 이미지는 Android_Asset_Studio 에서 추출하면 된다.

Android_Asset_Studio

아래와 같이 Circle을 선택하고 name은 ic_launcher_round로 바꿔준다.

다운받으면 아래와 같은 이미지들이 나온다. res/mipmap 폴더에 있는 이미지들을 사용하면 된다.

Ios

ios 앱아이콘 수정은 Xcode에서 한다. 프로젝트 루트에서 아래 명령어로 Xcode를 실행

>> $ xed ./ios

[프로젝트명]/Images.scassets 로 들어가서 AppIcon을 누르면 아래와 같이 등록창이 나온다.

위에서 다운 받은 앱아이콘들을 사이즈에 맞게 넣어주면 끝.

Android

[프로젝트명]/android/app/src/main/res

폴더 안에 들어있는 이미지들을 위에 만든 이미지들로 Replace

• ic_launcher.png -> 다운받은 앱 아이콘의 안드로이드 이미지
• ic_launcher_round.png -> round 이미지만 별도로 다운받은 이미지

>> 아래와 같은 구조로 이미지들을 대체 <<

 res/
      mipmap-xxxhdpi/
        ic_launcher.png
        ic_launcher_round.png
      mipmap-xxhdpi/
        ic_launcher.png
        ic_launcher_round.png
      mipmap-xhdpi/
        ic_launcher.png
        ic_launcher_round.png
      mipmap-hdpi/
        ic_launcher.png
        ic_launcher_round.png
      mipmap-mdpi/
        ic_launcher.png
        ic_launcher_round.png

일반적으로 애플리케이션 실행 시 페이지의 컨텐츠가 로딩되기 전까지 일시적으로 보여주는 화면

설치

npm install --save react-native-splash-screen

yarn add react-native-splash-screen

사용법

App.tsx

import SplashScreen from "react-native-splash-screen";

useEffect(() => {
  setTimeout(() => {
    SplashScreen.hide();
  }, 1000);
});

--------

>> 스플래쉬 스크린 보이기
SplashScreen.show();

>> 스플래쉬 스크린 숨기기
SplashScreen.hide();

Android

Icon 추가

안드로이드에서는 android/app/src/main/res 에서 다음과 같이 디렉토리에 따라 파일을 추가한다.

• mipmap-mdpi -> splash_icon.png
• mipmap-hdpi -> splash_icon@2x.png
• mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi -> splash_icon@3x.png

추가 후, 모든 파일이름은 splash_icon.png로 수정한다.

android/settings.gradle

include ':app'
includeBuild('../node_modules/react-native-gradle-plugin')

include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

android/app/build.gradle

dependencies {
  // ...
  implementation project(':react-native-splash-screen')
}

android/app/src/main/res/layout/launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

android/app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

MainActivity.java

import org.devio.rn.splashscreen.SplashScreen;

// ...
@Override
protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this);
  super.onCreate(savedInstanceState);
}

android/app/src/main/res/drawable/launch_screen.png

Splash Screen으로 사용할 이미지 (launch_screen.png) 를 넣어준다.

IOS

CocoaPod 실행

cd ios
pod insall

1. 루트에서 open ios/[project_name].xcworkspace을 실행하여 Xcode를 실행한다.

2. [project_name] > [project_name] > Imagex.xcassets 에서 + 를 누르고 Image Set 을 클릭하여 SplashIcon 을 입력한다.

세가지 사이즈(300px, 600px @x2, 900px @x3)의 png 파일을 끌어넣을 수 있다.

background 설정

LaunchScreen.storyBoard 에서 기본적으로 설정되어있는 프로젝트 네임과 Powered by React Native 를 지우고 Background > custom 에서 색상을 변경한다. 두번째 탭에서 코드로 변경할 수 있다.

Icon 추가

상단의 + (Library) 를 클릭하고 Image를 검색하여 Image View를 추가한다.

SplashIcon를 입력하여 이미지를 선택하고 Content Mode 옵션은 Aspect Fit로 설정한다.

중앙정렬

디바이스에 상관없이 중앙 정렬하려면 Align 에서 Horizontally in container와 Vertically in container를 체크하여 추가한다.

AppDelegate.m

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // 추가

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // 추가
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

[React Query 공식문서] https://tanstack.com/query/latest/docs/framework/react/overview

설치

npm install @tanstack/react-query

yarn add @tanstack/react-query

데이터를 가져오는 과정에는 일반적으로 많은 코드가 필요하다. React Query를 사용하면 네트워크 요청을 할 때 작성하는 코드의 양을 줄일 수 있다. 훅을 사용하여 useQuery 이전에 작성해야 했던 모든 코드를 대체할 수 있다. 상태 변수를 선언하지 않고도 필요한 모든 데이터를 제공한다. 그럼에도 불구하고 데이터 검색을 더 쉽게 만드는 것은 React Query가 하는 일의 작은 부분만을 다루고 있다. 그 엄청난 힘은 우리가 만드는 요청을 캐시하는 능력에 있다. 결과적으로 이미 요청한 항목이 있으면 별도의 요청을 하지 않고 캐시에서 읽어오기만 하면 되는 경우가 많다. 이는 코드의 반복을 줄이고 API에 가해지는 부하를 줄이며 애플리케이션 관리를 간소화하기 때문에 매우 유용하다.

Zustand

[Zustand 공식문서] https://zustand-demo.pmnd.rs/

설치

npm install zustand

yarn add zustand

Zustand는 독일어로 '상태'라는 뜻을 가졌고, 간결한 플럭스 원칙을 바탕으로 작고 빠르게 확장 가능한 상태 관리 라이브러리다.

사용방법이 굉장히 간결하고 배우기 싶다.

React Hook Form

[React Hook Form 공식문서] https://react-hook-form.com/

설치

npm install react-hook-form

yarn add react-hook-form

React Hook Form은 간단한 데이터 유효성 검사를 허용하는 간단한 후크 기반 라이브러리이다. 벤치마크에 따르면 다른 대안보다 훨씬 빠르다. Typescript로 작성되어 양식 값을 지원하기 위해 양식 데이터 유형을 작성하는데 도움이 된다. 이 라이브러리를 사용하면 양식에 오류가 없어져 렌더딩 시간이 영구적으로 단축된다. 또한 React의 상태 관리 라이브러리와 통합하여 사용가능하다.

[Async_Storage 공식문서] https://react-native-async-storage.github.io/async-storage/

설치

npm install @react-native-async-storage/async-storage

yarn add @react-native-async-storage/async-storage

앱을 종류 후 다시 실행하였을 때, 데이터가 남아있지 않는 문제가 있을 수 있다. 이때, LocalStorage처럼 key-value 기반으로 로컬에 데이터를 저장할 수 있게 해주는 라이브러리를 사용한다. LocalStorage와 마찬가지로, 문자열 데이터만 사용이 가능하다. 따라서, JSON.Stringfy 메서드와 JSON.parse 메서드의 사용이 필요하다. 하지만, AsyncStorage는 LocalStorage와는 다르게 비동기 처리가 필요하다.

사용법

>> 1. Storing String Value

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('my-key', value);
  } catch (e) {
    // saving error
  }
};

>> 2. Storing Object Value

const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value);
    await AsyncStorage.setItem('my-key', jsonValue);
  } catch (e) {
    // saving error
  }
};

>> 3. Reading String Value

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('my-key');
    if (value !== null) {
      // value previously stored
    }
  } catch (e) {
    // error reading value
  }
};

>> 4. Reading Object Value

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('my-key');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    // error reading value
  }
};

MMKV Storage

High Performant LocalStorage & In-Memory Storage

[MMKV 공식문서] https://github.com/mrousavy/react-native-mmkv

설치

yarn add react-native-mmkv
cd ios && pod install

사용법

>> 1. Create a new Instance

import { MMKV } from 'react-native-mmkv'

// customize
export const storage = new MMKV({
  id: `user-${userId}-storage`,
  path: `${USER_DIRECTORY}/storage`,
  encryptionKey: 'hunter2'
})

>> 2. GET

const username = storage.getString('user.name') // 'Marc'
const age = storage.getNumber('user.age') // 21
const isMmkvFastAsf = storage.getBoolean('is-mmkv-fast-asf') // true

>> 3. SET

storage.set('user.name', 'Marc')
storage.set('user.age', 21)
storage.set('is-mmkv-fast-asf', true)

>> 4. Keys

// checking if a specific key exists
const hasUsername = storage.contains('user.name')

// getting all keys
const keys = storage.getAllKeys() // ['user.name', 'user.age', 'is-mmkv-fast-asf']

// delete a specific key + value
storage.delete('user.name')

// delete all keys
storage.clearAll()

>> 5. Objects

const user = {
  username: 'Marc',
  age: 21
}

// Serialize the object into a JSON string
storage.set('user', JSON.stringify(user))

// Deserialize the JSON string into an object
const jsonUser = storage.getString('user') // { 'username': 'Marc', 'age': 21 }
const userObject = JSON.parse(jsonUser)

>> 6. Encryption

// encrypt all data with a private key
storage.recrypt('hunter2')

// remove encryption
storage.recrypt(undefined)

>> 7. Buffers

storage.set('someToken', new Uint8Array([1, 100, 255]))
const buffer = storage.getBuffer('someToken')
console.log(buffer) // [1, 100, 255]

Encrypted Storage

[Encrypted_Storage 공식문서] https://www.npmjs.com/package/react-native-encrypted-storage

설치

npm install react-native-encrypted-storage

yarn add react-native-encrypted-storage

일반적으로 사용하는 LocalStorage인 AsyncStorage 는 엑세스 토큰, 결제 정보 등 민감한 데이터를 저장하기엔 보안상 이상적이지 못하다. 따라서, 위의 문제를 해결하기 위해 보안적으로 개선된 Encryted Storage를 따로 사용하는 것을 권장한다.

사용법

import EncryptedStorage from 'react-native-encrypted-storage';

>> 1. Storing Value

async function storeUserSession() {
    try {
        await EncryptedStorage.setItem(
            "user_session",
            JSON.stringify({
                age : 21,
                token : "ACCESS_TOKEN",
                username : "emeraldsanto",
                languages : ["fr", "en", "de"]
            })
        );

        // Congrats! You've just stored your first value!
    } catch (error) {
        // There was an error on the native side
    }
}

>> 2. Retrieving a Value

async function retrieveUserSession() {
    try {   
        const session = await EncryptedStorage.getItem("user_session");

        if (session !== undefined) {
            // Congrats! You've just retrieved your first value!
        }
    } catch (error) {
        // There was an error on the native side
    }
}

>> 3. Removing a Value

async function removeUserSession() {
    try {
        await EncryptedStorage.removeItem("user_session");
        // Congrats! You've just removed your first value!
    } catch (error) {
        // There was an error on the native side
    }
}

>> 4. Clearing All Previously Saved Values

async function clearStorage() {
    try {
        await EncryptedStorage.clear();
        // Congrats! You've just cleared the device storage!
    } catch (error) {
        // There was an error on the native side
    }
}

>> 5. Error Handling

async function removeUserSession() {
    try {
        await EncryptedStorage.removeItem("user_session");
    } catch (error) {
        // There was an error on the native side
        // You can find out more about this error by using the `error.code` property
        console.log(error.code); // ex: -25300 (errSecItemNotFound)
    }
}

FlashList

Fast & Performant React Native List

[FlashList 공식문서] https://shopify.github.io/flash-list/

(React-Native FlatList > 성능 개선)

yarn add @shopify/flash-list
cd ios && pod install

사용법

import React from "react";
import { View, Text, StatusBar } from "react-native";
import { FlashList } from "@shopify/flash-list";

const DATA = [
  {
    title: "First Item",
  },
  {
    title: "Second Item",
  },
];

const MyList = () => {
  return (
    <FlashList
      data={DATA}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
    />
  );
};

DropDown Picker

[DropDown_Picker 공식문서] https://github.com/hossein-zare/react-native-dropdown-picker https://hossein-zare.github.io/react-native-dropdown-picker-website/

설치

npm install react-native-dropdown-picker

yarn add react-native-dropdown-picker

React Native에서 DropDown을 구현할 때, 일반적으로 플랫폼 별로 제공하는 네이티브 Picker를 사용하는 경우가 많다보니, 크로스 플랫폼 개발 시에 UI의 통일성이 떨어지고, 디자인이 마음에 들지 않는 경우가 많다. 그렇다고 Picker를 직접 개발하거나 이를 위해 다른 UI 프레임워크를 적용하기에는 다소 부담이 있다.

스타일 커스터마이징도 자유롭고 다중 선택이나, 다크모드, 카테고리, 검색 등도 지원하고 있다. 또한 IOS와 Android 모두 거의 동일한 스타일과 결과물을 보이는 점이 마음에 든다.

사용법

import DropDownPicker from 'react-native-dropdown-picker';

function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
  );
}

Bottom Sheet Modal

[Bottom Sheet 공식문서] https://github.com/gorhom/react-native-bottom-sheet https://ui.gorhom.dev/components/bottom-sheet/

설치

>> Dependencies

yarn add react-native-reanimated react-native-gesture-handler

>> Installation

yarn add @gorhom/bottom-sheet@^4

사용법

import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <View>
      <BottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}
      >
        <View>
          <Text>Awesome 🎉</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

export default App;

가장 기본적인 BottomSheet를 가지고 안의 View를 직접 구현해도 되지만, 다음과 같은 여러 컴포넌트를 제공하므로 활용해보시는 것도 좋을 것 같습니다.

• BottomSheetView
• BottomSheetScrollView
• BottomSheetFlatList
• BottomSheetSectionList
• BottomSheetVirtualizedList
• BottomSheetBackdrop
• BottomSheetFooter
• BottomSheetTextInput

>> BottomSheet처럼 지속적으로 동작하는 것이 아닌 Modal형태가 필요한 경우
>> BottomSheetModal 사용

import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
} from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <BottomSheetModalProvider>
      <View>
        <Button
          onPress={handlePresentModalPress}
          title="Present Modal"
          color="black"
        />
        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}
        >
          <View>
            <Text>Awesome 🎉</Text>
          </View>
        </BottomSheetModal>
      </View>
    </BottomSheetModalProvider>
  );
};

export default App;

Toast Message

[Toast Message 공식문서]  https://github.com/calintamas/react-native-toast-message

설치

npm install -save react-native-toast-message

yarn add react-native-toast-message

Toast Message는 앱 내에서 사용자들에게 이벤트의 발생과 그 내용을 알려줄 수 있는 직관적인 UI 요소로 많은 앱에서 사용된다. 물론 구현 난이도 자체는 높지 않기 때문에 직접 구현하는 것도 좋은 방법이지만, 서비스의 핵심적인 기능은 아니다보니 적당한 라이브러리를 활용하면 시간을 절약할 수 있다.

사용법

>> App.tsx에서 아래와 같은 구조로 <Toast />를 추가

import Toast from 'react-native-toast-message';

export function App(props) {
  return (
    <>
      {/* ... React Navigation 등 */}
      <Toast />
    </>
  );
}

>>  Toast Message를 보여주는 방법

import Toast from 'react-native-toast-message';
import { Button } from 'react-native'

export function Foo(props) {
  const showToast = () => {
    Toast.show({
      type: 'success',
      text1: 'Hello',
      text2: 'This is some something 👋'
    });
  }

  return (
    <Button
      title='Show toast'
      onPress={showToast}
    />
  )
}

Magical Modal

[Magical Modal 공식문서]  https://github.com/GSTJ/react-native-magic-modal

설치

npm install -save react-native-magic-modal

yarn add react-native-magic-modal

아주 디테일한 부분까지 모달을 컨트롤 해야 하는 경우가 아니라면, 거의 이 라이브러리를 계속 활용하게 될 것 같다.

사용법

>> Modal을 관리해 줄 Provider를 상위 컴포넌트에 아래와 같은 형태로 추가 <<

import { MagicModalPortal } from 'react-native-magic-modal';

export default function App() {
  return (
    <SomeRandomProvider>
      <MagicModalPortal />  // <-- On the top of the app component hierarchy
      <Router /> // Your app router or something could follow below
    </SomeRandomProvider>
  );
}

>> magicModal.show() && magicModal.hide() <<

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { MagicModalPortal, magicModal } from 'react-native-magic-modal';

const ConfirmationModal = () => (
  <View>
    <TouchableOpacity onPress={() => magicModal.hide({ success: true })}>
      <Text>Click here to confirm</Text>
    </TouchableOpacity>
  </View>
);

const handleConfirmationFlow = async () => {
  const result = await magicModal.show(ConfirmationModal);
};

export const MainScreen = () => {
  return (
    <View>
      <TouchableOpacity onPress={handleConfirmationFlow}>
        <Text>Start the modal flow!</Text>
      </TouchableOpacity>
    </View>
  );
};

Splash Screen

[Splash Screen 공식문서] https://github.com/crazycodeboy/react-native-splash-screen

설치

npm install -save react-native-splash-screen

yarn add react-native-splash-screen

RN는 기본적으로 Splash 스크린을 제공한다. 하지만 실제 앱을 구동하면 Splash 스크린이 너무 빨리 종료된다. 보통의 앱에서는 Splash 스크린을 표시하고 뒤에서 필요한 정보를 API를 통해 받아 온 후 Splash 스크린을 종료하여 자연스러운 사용자 경험을 제공하지만 RN에서 기본으로 제공하는 Splash 스크린은 스런 사용자 경험을 제공하기 어렵다.

사용법 (ANDROID)

>> MainActivity.java(kt) 파일을 열고 아래와 같이 수정 <<

...
import android.os.Bundle; // 추가
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // 추가
...
public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }
    ...
}

>> Android에서 사용할 Splash Screen 추가 <<
>> android/app/src/main/res/layout/launch_screen.xml 파일을 생성하고 아래 코드를 추가

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" 
               android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

준비된 splash 이미지들을 /android/app/src/main/res 폴더 안에 아래와 같이 넣는다. 생성된 이미지 파일을 res/의 적절한 하위 디렉터리에 배치하면 시스템에서 앱이 실행되는 기기의 픽셀 밀도에 따라 자동으로 알맞은 크기를 선택한다.

1. Stream 업로드
2. Multipart 업로드
3. AWS Multipart 업로드

기본 세팅

dependencies {
    ...
    implementation("com.amazonaws:aws-java-sdk-s3:1.12.174")}

AWS SDK에서 제공하는 S3 업로드 인터페이스를 빈으로 등록

@Configuration
class S3Config(
    @Value("\${aws.s3.accessKey}")
    private val accessKey: String,
    @Value("\${aws.s3.secretKey}")
    private val secretKey: String,
) {
    @Bean
    fun amazonS3Client(): AmazonS3 {
        return AmazonS3ClientBuilder.standard()
            .withCredentials(
                AWSStaticCredentialsProvider(BasicAWSCredentials(accessKey, secretKey))
            )
            .withRegion(Regions.AP_NORTHEAST_2)
            .build()
    }
}

사용되는 모든 AWS S3Client는 위에 정의된 빈으로 사용된다.

Stream 업로드

"Stream 업로드" 란?

HttpServletRequest의 InputStream을 이용하여 AWS S3에 다이렉트로 파일을 전송하는 방식

특징

• 모든 바이너리를 메모리에 로드하지 않는 이상 이미지 리사이징과 같은 전처리가 불가능하다.
• 업로드할 파일의 바이너리 전체를 Springboot을 실행하고 있는 서버의 디스크나 힙 메모리에 저장하지 않는다는 점이다.
• 1회 API 호출에 1개의 파일만을 업로드할 수 있다.

사용 전 고려사항

1. 클라이언트 네트워크 환경, 클라우드 인스턴스 유형에 따라 업로드 속도 편차가 크기 때문에 운영환경과 동일한 인프라로 충분한 속도 테스트가 필요하다.
2. 구조적으로 클라이언트에게 업로드 현황을 제공할 수 없다. 따라서 클라이언트가 기다릴 수 있을만큼 적당한 파일사이즈 제한이 필요하다.
3. 대용량 파일을 업로드 중 오류가 발생하였을 때 전체 파일을 처음부터 다시 업로드해야하기 때문에 시간과 대역폭이 낭비될 수 있다.

EX. 약 1GB 크기의 파일을 업로드

결과

• 메모리 사용량은 거의 없었다.
• 937MB 파일을 업로드하는데 16분정도 소요

Stream 업로드 방식은 서버의 리소스가 한정적이고 작은 용량의 파일을 업로드할 때 효과적

만약 프로덕트에서 Stream 업로드 방식을 채택한다면, 위에서 이야기한 것처럼 운영 환경과 동일한 인프라로 충분한 업로드 속도 테스트가 필요하다.

MultipartFile 업로드

MultipartFile 업로드

Spring에서 제공하는 MultipartFile Interface를 이용하여 파일을 업로드하는 방식

MultipartFile 사용 전 설정

spring:
  servlet:
    multipart:
      enabled: true # 멀티파트 업로드 지원여부 (default: true)
      file-size-threshold: 0B # 파일을 디스크에 저장하지 않고 메모리에 저장하는 최소 크기 (default: 0B)
      location: /users/charming/temp # 업로드된 파일이 임시로 저장되는 디스크 위치 (default: WAS가 결정)
      max-file-size: 100MB # 한개 파일의 최대 사이즈 (default: 1MB)
      max-request-size: 100MB # 한개 요청의 최대 사이즈 (default: 10MB)

클라이언트가 파일을 업로드했을 때 WAS(Tomcat)가 해당 파일을 임시 디렉터리에 저장한다. 여기서 임시 디렉터리에 저장된 파일은 힙 메모리가 아닌 Servlet Container Disk에 저장 요청 처리가 끝나면 임시 저장된 파일이 삭제

업로드된 파일의 크기가 file-size-threshold 값 이하라면 WAS가 임시파일을 생성하지 않고 파일 바이너리를 메모리에 다이렉트로 할당

파일 처리 속도는 더 빠르겠지만, 스레드가 작업을 수행하는 동안 부담이 될 수 있기 때문에 충분한 검토가 필요하다.

Stream 업로드 및 MultipartFile 업로드 방식을 사용할 때 다수의 사용자로부터 동시에 요청이 들어올 경우, 서버의 스레드가 빠르게 소진될 위험이 있다. 이에 따라 스레드 풀 설정이 적절하지 않으면 스레드 고갈로 인해 타임아웃이 발생할 위험이 있다.

이러한 문제를 대비해 resilience4j의 bulkhead 패턴을 활용하여 동시에 처리될 수 있는 작업의 최대 수를 제한하고, 별도의 스레드 풀을 사용함으로써 다른 비즈니스 로직에 영향을 주지 않도록 방지할 수 있습니다. 또한 파일 업로드를 전담하는 서버를 별도로 분리하는 전략도 고려해볼 수 있습니다.

AWS Multipart

AWS Multipart

AWS S3에서 제공하는 파일 업로드 방식 업로드할 파일을 작은 part로 나누어 각 부분을 개별적으로 업로드한다. 파일의 바이너리가 Springboot를 거치지 않고 AWS S3에 다이렉트로 업로드되기 때문에 서버의 부하를 고려하지 않아도 된다는 큰 장점이 있다. 만약 모든 part가 업로드 되었을 경우 AWS에서 하나의 객체로 조립하여 저장한다. 몇 개의 파트가 업로드되었는지 확인하여 위와 같이 사용자에게 업로드 진행사항을 제공할 수 있다.

1. Multipart 업로드 시작

멀티파트 업로드 시작(initiate-upload)을 요청하면 서버는 멀티파트 업로드에 대한 고유 식별자인 Upload ID를 응답합니다. 부분 업로드, 업로드 완료 또는 업로드 중단 요청 시 항상 Upload ID를 포함해야 하기 때문에 클라이언트는 이 값을 잘 저장해야 합니다.

처리하고자 하는 문제를 분석하여 국제표준기구(ISO : International Standardization Organization)에서 지정한 기호와 흐름선을 활용, 프로세스의 처리 순서를 포함한 단계 간의 상호관계를 알기 쉽게 나타낸 그림

• 원고의 초안, 건축의 설계도와 같은 프로그래밍의 기초가 된다.
• 타인에게 전달, 크로스랭귀징, 유지보수 등에 기반이 되는 중요한 요소

논리의 흐름을 특정한 순서도 기호 (flow chart symbol) 를 사용하여 도식적으로 표현한 것

2. 순서도 차트의 종류

1) 시스템 순서도

• 어떤 작업을 하는지 알려주는 순서도로 자료가 정보로 변환되는 과정을 컴퓨터가 처리하는 과정, 데이터의 흐름을 중심으로 도식화한 것
• 데이터 흐름을 중심으로 작성하는 특징으로 인해 데이터가 처리되는 작업 단위로 나타내고 데이터가 변환되는 매체들을 표현하며 프로그램 논리는 작성하지 않는다.
• 작업 내용을 총괄적으로 검토하고 프로그래밍 작업과 연결해줄 때, 사용하는 순서도이다.

2) 프로그램 순서도

• 프로그램 순서도는 작업을 어떤 식으로 하는지 표시해 주는 순서도로 처리 단위 하나하나 단위로 작성하게 되며 순서도 설명의 세밀도에 따라 개략 순서도와 상세 순서도로 나뉜다
• 프로그램을 작성할 때 일반적으로 쓰는 순서도이다.

2-1) 일반 순서도

• 하나의 업무를 전체적, 종합적으로 나타낸 순서도로 해당 직업의 진행 순서를 표시한다.
• 프로그램 작성 시 개략 순서도를 작성하고 논리적으로 이상이 없는지 검토하게 되면 이어서 상세 순서도를 작성한다.

2-2) 상세 순서도

• 프로그램 내부를 상세히 나타내는 순서도로 컴퓨터의 모든 조작과 자료의 이동 과정을 순서대로 나타내 그대로 코딩할 수 있도록 상세하게 작성한 순서도
• 프로그램 작성 시 최종 검토 자료로 쓰게 됨

기호 설명

3. 순서도 작성 시 주의점

• 기호 내에는 최대한 간략하게 내용을 기재하여 **가독성을 향상**시킨다
• 비교/판단 기호 사용 시 입/출력은 반드시 하나여야 하며, 결과는 Yes or No여야 한다.