꾸준히 개발하기

백준 기본 입출력 예제

백준 : 2557, 1000, 2558, 10950, 10951, 10952, 10953, 11021, 11022, 11718, 11719, 11720, 11721, 2741, 2742, 2739, 1924, 8393, 10818, 2438, 2439, 2440, 2441, 2442, 2445, 2522, 2446, 10991, 10992)

백준 10951

문제를 풀다보니 기억할 문법이 있어 적는다. 몇 개의 테스트케이스가 주어지는지 모르기 때문에 숫자 외의 다른 것이 입력되거나 수가 입력되지 않아 에러가 발생하면 그를 처리해줘야 한다. -> try - except 구문

while True:
    try:
        a, b= map(int, input().split())
    except:
        break
    print(a+b)

백준 별찍기 시리즈

하다보니 1시간이나 지났다 그래.. 1~2학년때 별찍기 한문제에 1시간 걸렸던거 생각하면,,^^

# 2445
n = int(input())

for i in range(1, n + 1):
    print("*" * i + " " * 2 * (n - i) + "*" * i)

for i in range(n - 1, 0, -1):
    print("*" * i + " " * 2 * (n - i) + "*" * i)

# 2522
n = int(input())

for i in range(1, n + 1):
    print(" " * (n - i) + "*" * i)
for i in range(n - 1, 0, -1):
    print(" " * (n - i) + "*" * i)

# 2446
n = int(input())

for i in range(1, n + 1):
    print(" " * (i - 1) + "*" * (1 + 2 * (n - i)))

for i in range(n - 1, 0, -1):
    print(" " * (i - 1) + "*" * (1 + 2 * (n - i)))

# 10991
n = int(input())

for i in range(1, n + 1):
    print(" " * (n - i) + "*" + " *" * (i - 1))

# 10992
n = int(input())

for i in range(1, n + 1):
    if i == 1:
        print(" " * (n - i) + "*")
    elif i == n:
        print("*" * (1 + 2 * (n - 1)))
    else:
        print(" " * (n - i) + "*" + " " * (1 + 2 * (i - 2)) + "*")

추가로 week 1 의 이 문제들도 풀었다.

깃에서 클론 받아와서 VS code로 열어 작업을 시작하자마자 빨간줄이 그어지며 뜬 에러 메세지였다. 자주 발생하는 에러여서 한번 블로그에 정리해두려고 한다.

먼저 해결 방법은 프로젝트 내 .prettierrc.js 내용에 마지막 줄을 추가하여 해결해줄 수 있다. 

module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: true,
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: 'all',
  endOfLine: auto,
};

윈도우를 사용한다면, endOfLine은 git 구성을 기반으로 CRLF가 될 수 있다고 한다. Linux 기반의 운영체제는 줄바꿈을 위해 LF값을 사용한다. prettier 2.0 이상 버전에서는 줄 바꿈 값으로 LF를 사용하는데 윈도우는 엔터키를 누를 경우 CRLF 방식으로 줄 바꿈이 이루어지기 때문에 CR을 제거한 후 LF를 사용하라는 에러가 나타나는 것이다.  따라서 endOfLine이라는 에러가 발생했을 때 운영체제 별로 서정된 값을 알아서 사용하라는 

endofLine : auto,

 구문을 설정에 추가해주면 된다.

* CRLF : CR + LF가 합쳐진 것

- CR (Carriage Return) : 현재 라인에 커서를 뒀다가 맨 앞으로 옮기는 것 (\r)

- LF (Line Feed) : 커서의 위치는 그대로 두고 한 라인을 위로 올리는 것 (\n)

https://prettier.io/docs/en/options.html#end-of-line

어디까지나 개발자지만, 기본적으로 피그마를 다룰 줄 알면 더 좋을 것 같아서 이번 기회에 다뤄보았다. 다뤄보는 김에 기록하기.

기본적인 프레임은 아이폰 11 Pro (375) / Android (360) 을 잡아두고 진행하되, 메인으로 한 os를 잡고 가는 것이 수월하다.동시에 2개를 구현하는 것도 좋지만,, 일이 2배니까! 디자인적 측면에서는 아이폰이 홍보 이미지를 만들 때 더 예뼈보여서 선호한다고는 하던데, 나는 일단 안드로이드를 기반으로 작업하려고 한다.

폰트 사이즈는 기본 사이즈를 14정도, 조금 큰 요소를 16정도로 잡는다. 10씩 값을 이동할 때 shift 키 누르면 수월. 

한 요소를 component로 만들어줄 때는 ctrl+shift+k로 묶어줄 수 있다. 

프로토타입 기능을 사용해서 실제로 어떻게 서비스되는지 동적으로도 보여줄 수 있음.

auto layout 기능도 잘 쓰면 유용할 듯 함 :)

inspect 란에서 개발 환경을 살펴볼 수 있음. 이미지 추출 역시 Export를 사용하면 됨.

협업시에는 comment 기능을 통해 이슈를 바로바로 기록해둘 수도 있음!

탭 내에서 페이지 이동이 필요한 경우 스택 네이게이션을 통해 페이지를 이동해주면 된다.

하단 버튼(탭)을 통해 화면을 전환하는 것을 구현하려고 봤더니 라이브러리가 필수였다. 

https://www.npmjs.com/package/@react-navigation/bottom-tabs

npm i @react-navigation/bottom-tabs

위 명령어를 통해 설치해주고 추가로 필요한 요소들을 공식문서를 보면서 함께 설치해주었다. 공식문서는 여기(https://reactnavigation.org/docs/getting-started)

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

기본적으로 하단에 탭을 생성하려면 다음과 같이 컴포넌트를 생성해주면 된다. (코드는 공식문서 예제)

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

나는 App.js에서 Tab 만드는 것까지 해주었다. 

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React from 'react';
import AlarmPage from './pages/screens/AlarmPage';
import Home from './pages/screens/Home';
import {NavigationContainer} from '@react-navigation/native';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Alarms" component={AlarmPage} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

이렇게 해줬더니 상단에 탭 이름이 표시되어 옵션을 추가로 주었다.

공식문서의 이 부분(https://reactnavigation.org/docs/bottom-tab-navigator/#header-related-options)을 참고했다.

<Tab.Screen
          name="Home"
          component={Home}
          options={{headerShown: false}}
/>

이 옵션과 함께 알람이 몇개 왔는지 배지로 보여줄 수 있는 옵션 역시 임시 값(5)를 주어 추가했다.

        <Tab.Screen
          name="Alarms"
          component={AlarmPage}
          options={{headerShown: false, tabBarBadge: 5}}
        />

Native의 고유한 규칙들

• div 대신 View 사용
• 모든 텍스트는 Text 컴포넌트 안에 넣어주기 (그러려면 react-native 라이브러리에서 import를 해줘야 한다)
• 모든 CSS 속성을 RN에서 다 쓸 수는 없지만 98%정도는 쓸 수 있다.
• 자동완성 기능을 이용하기 위해 StyleSheet.create기능을 사용하여 스타일 object를 만들어 직접 style 속성으로 넘겨줄 수 있다. 
• 브라우저가 아니기 때문에, Status-bar와 같은 일부 컴포넌트는 무조건 화면에 렌더링되는 것이 아니라, 운영체제와 통신하기 위한 컴포넌트로 존재한다! (무조건 return해준다고 화면에 다 차례대로 표시되는 것은 아니다. 브라우저랑 다른 것을 명심하자)

React Native Package들

과거에 React Native에서 제공했던 컴포넌트, API들이 현재는 제공되지 않는 경우가 많다. 버그도 많고 모든 컴포넌트를 제공하는 것이 어렵다고 판단되어 지원범위를 줄였고 현재 공식 문서를 보면 core component의 개수가 그렇게 많지 않다.  

Component와 API의 차이

• Component : 화면에 렌더링할 요소 (return 태그 안에 넣을 것)
• API : JS 코드. 운영체제와 소통하는 요소들

Third Party Package

RN 팀에서 공식적으로 지원하지 않는 기능들은 이제 유저들이 개발한 Community에서 직접 가져와 사용해야 한다. 유지보수를 유저에게 맡겨야 한다는 단점이 있기에, Expo 팀에서 개발해둔 많은 컴포넌트를 Expo SDK에서 가져다 쓸 수도 있다.

Layout System

기본적으로 모든  View 컴포넌트는 웹에서 사용하던 flexbox방식을 따른다. grid나 block 방식은 없다. flexbox 방식을 기본적으로 따르고, 디폴트 flex-direction은 column이다. (웹은 row였다)

그리고, 대부분의 경우 너비, 높이에 기반하여 레이아웃을 구성하지 않는다. 반응형 디자인을 고려할 때, width, height 속성은 레이아웃을 잡을 때 쓰지 않는다. RN 방식으로는, flex size를 줘서  지정한다. (비율 시스템)

부모에게 flex 값을 주고, 자식에게 얼마만큼의 비율을 차지할 것인지 알려주면 된다. (style 속성)

ScrollView

브라우저와 다르게 앱은 컴포넌트가 많다고 자동 스크롤이 되지 않는다. 스크롤이 되도록 하는 View를 RN에서 제공하는데 바로 ScrollView다. (https://reactnative.dev/docs/scrollview) 

공식 문서를 정말 열심히 뜯어보면서 사용하면 된다. 일단 flex:1은 필요가 없다. 얘는 화면 전체를 먹어야 하니까. 친절하게 나와있는 공식문서 설명을 보면서 따라가보자. 많이 사용할법한 속성으로는 하나하나의 요소를 page단위로 만드는 pagingEnable도 있고, style 속성이 먹지 않기 때문에 스크롤뷰에서만 가능한 contentContainerStyle prop이 있을 것이다. 그리고 현재 기기의 가로 크기를 받아오려면 Dimensions과 관련된 API를 사용하면 된다.

Touchable

버튼이 눌렸음을 가시적으로 보여줄 수 있도록 유저가 터치했을 때 피드백을 주는 요소들이 몇가지 있다.

• TouchableOpacity : 클릭했을 때 약간 투명해짐
• TouchableHighlight : 클릭했을 때 배경색을 변경
• TouchableWithoutFeedback : 클릭한 여부만 받아오고 UI의 변화는 없음

이 중 버튼에 관련된 부분은 투명도를 건드리는 컴포넌트로 감싸주는 것이 대부분이다. 공식 문서를 살펴보면 이 컴포넌트보다 더 나은 요소를 pressable로 소개하는데 조금 더 세분화된 속성을 제공한다. 가령 hitSlope 옵션을 사용하여 더 넓은 영역까지 클릭이 되도록 설정해줄 수도 있다. (기존 웹에서는 버튼에 padding을 넣어서 해결했듯이)