choi-ss-choco.log

[처음부터 배우는 리액트 네이티브] -2. 로그인/회원가입 구현하기

Fri, 12 Dec 2025 13:47:37 GMT

깃허브 레포지토리이다. https://github.com/choi-day/react-native-simple-chat

프로젝트 준비

라이브러리

styled-component: 스타일 작성을 위한 라이브러리
```
  npm install styled-components
```
pro-types: 타입 확인을 위한 라이브러리
```
  npm install styled-components prop-types
```
expo-image-picker: 기기의 사진이나 영상을 가져올 수 있도록 도움
moment: 시간과 관련된 많은 기능을 제공
react-naitive-keyboard-aware-scroll-view: 키보드가 화면을 가리면서 생기는 불편한 점을 해결하기 위해 사용되는 라이브러리
react-naitive-gifted-chat: 메세지를 주고받는 채팅 화면을 쉽게 구현할 수 있도록 돕는 라이브러리

프로젝트 구조

react-native-simple-chat
│
├── assets
│   ├── icon.png
│   └── splash.png
│
├── src
│   ├── components
│   │
│   ├── contexts
│   │
│   ├── navigations
│   │
│   ├── screens
│   │
│   ├── utils
│   │
│   ├── App.js
│   └── theme.js
│
└── App.js

components: 컴포넌트 파일 관리
contexts: Context API 파일 관리
navigations: 내비게이션 파일 관리
screens: 화면 파일 관리
utils: 프로젝트에서 이용할 기타 기능 관리

theme.js - 공통으로 사용할 색을 정의하고 배경색과 글자색을 미리 정의했다.

const colors = {
  white: '#ffffff',
  black: '#000000',
  grey_0: '#d5d5d5',
  grey_1: '#a6a6a6',
  red: '#e84118',
  blue: '#3679fe',
};

export const theme = {
  background: colors.white,
  text: colors.black
}

src/App.js - 컴포넌트에 정의된 theme를 사용할 수 있도록 한다.

import React from 'react';
import { StatusBar } from 'react-native';
import { ThemeProvider } from 'styled-components/native';
import { theme } from './theme';

const App = () => {
    return (
        
        
        
    );
};

export default App;

App.js - App컴포넌트가 메인 파일이 되도록 한다

import App from './src/App';

export default App;

이 프로젝트에서는 서버 대신 파이어베이스를 이용한다. 설정과 관련된 부분은 아래 글을 참고하자.

파이어베이스 설정

앱 아이콘과 로딩화면

src/App.js

import React, { useState } from 'react';
import { StatusBar, Image } from 'react-native';
import AppLoading from 'expo-app-loading';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import { ThemeProvider } from 'styled-components/native';
import { theme } from './theme';

const cacheImages = images => {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
};

const cacheFonts = fonts => {
  return fonts.map(font => Font.loadAsync(font));
};

const App = () => {
  const [isReady, setIsReady] = useState(false);

  const _loadAssets = async () => {
    const imageAssets = cacheImages([require('../assets/splash.png')]);
    const fontAssets = cacheFonts([]);

    await Promise.all([...imageAssets, ...fontAssets]);
  };

  return isReady ? (
    <>
      
        
      
    
  ) : (
     setIsReady(true)}
      onError={console.warn}
    />
  );
};

export default App;

_loadAssets함수

: 이미지나 폰트를 미리 불러와 느리게 적용되는 문제를 개선 유저 경험 개선에 큰 도움을 준다
- 스플래시 이미지 로딩
- (필요하다면) 폰트 로딩
- Promise.all로 모든 로딩이 끝날 때까지 기다림
  
  로딩이 끝나야 실제 화면이 렌더링된다.
cacheImages 함수

이미지를 미리 불러오는 함수이다.
- URL 형태의 문자열 → Image.prefetch
- require로 불러오는 로컬 이미지 → Asset.fromModule().downloadAsync()
  
  둘 다 Promise를 반환하기 때문에 나중에 Promise.all()로 처리할 수 있다.
cacheFonts

폰트도 배열로 받아서 Promise 배열로 만들어 준다. 필요한 폰트가 있다면 여기에 추가해서 로딩하면 된다.

책에서는 expo에서 AppLoading을 import 하고 있으나 Expo SDK 45 이후로 AppLoading은 expo에서 제거되었다.

npm install expo-app-loading

위와 같이 설치 후 'expo-app-loading’으로 바꿔주면 정상적으로 스플래쉬 화면이 뜬다

인증화면

로그인 및 회원가입 기능을 구현한다. 로그인 화면에서 이메일과 비밀번호를 입력받고 회원가입시 서비스에서 이용할 이름과 프로필 사진을 받는다.

네비게이션

로그인 화면과 회원가입 화면을 구현한다

screens/Login.js

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

const Container = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: ${({ theme }) => theme.background};
`;

const Login = ({ navigation }) => {
    return (
        
            Login Screen

screens/Signup.js

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

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${({ theme }) => theme.background};
`;

const Signup = () => {
  return (
    
      Signup Screen
    
  );
};

export default Signup;

screens/index.js

import Login from './Login';
import Signup from './Signup';

export { Login, Signup};

화면을 한 곳에서 관리하기 위해 필요한 파일이다.

navigationsAuthStack.js

import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Login, Signup } from '../screens';

const Stack = createStackNavigator();

const AuthStack = () => {
  const theme = useContext(ThemeContext);
  return (
    
      
      
    
  );
};

export default AuthStack;

navigations/index.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AuthStack from './AuthStack';

const Navigation = () => {
  return (
    
      
    
  );
};

export default Navigation;

로그인화면

components/Image.js

import React from 'react';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';

const Container = styled.View`
  align-self: center;
  margin-bottom: 30px;
`;

const StyledImage = styled.Image`
  background-color: ${({ theme }) => theme.imageBackground};
  width: 100px;
  height: 100px;
`;

const Image = ({ uri, imageStyle }) => {
  return (
    
      
    
  );
};

Image.propTypes = {
  uri: PropTypes.string,
  imageStyle: PropTypes.object,
};

export default Image;

components/Image.js

import Image from './Image'

export {Image}

파이어베이스 Storage에 logo 파일을 업로드한다.

이름을 클릭하면 이미지파일 링크를 얻을 수 있다.

service firebase.storage {
  match /b/{bucket}/o {
    match /logo.png {
      allow read;
    }
  }
}

규칙 또는 Rules탭으로 들어가 로그인하지 않아도 이미지에 접근할 수 있도록 수정한다.

잘 받아와지는지 궁금하다면 이미지 파일 링크를 외부에서 접속해본다. 이미지가 잘 뜬다면 적용이 된것이다.

utils/image.js

const prefix = 'https://firebasestorage.googleapis.com/v0/b/react-native-simple-chat-469fb.firebasestorage.app/o';

export const images = {
    logo: `${prefix}/logo.png?alt=media`,
};

이미지를 불러오는 코드이다

App.js

const _loadAssets = async () => {
    const imageAssets = cacheImages([require('../assets/splash.png'),
        ...Object.values(images),
    ]);
    const fontAssets = cacheFonts([]);

파이어베이스의 이미지 파일도 함께 불러오도록 수정한다

const Login = ({ navigation }) => {
    return (
        
            
            Login Screen

이미지를 로그인화면에 삽입한다.

theme.js

label: colors.grey_1,
inputPlaceholder: colors.grey_1,
inputBorder: colors.grey_1,

input에 들어갈 색상을 정의해준다

compoenets/Input.js

import React, { useState } from 'react';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';

const Container = styled.View`
  flex-direction: column;
  width: 100%;
  margin: 10px 0;
`;

const Label = styled.Text`
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: ${({ theme, isFocused }) => (isFocused ? theme.text : theme.label)};
`;

const StyledTextInput = styled.TextInput.attrs(({ theme }) => ({
  placeholderTextColor: theme.inputPlaceholder,
}))`
  background-color: ${({ theme }) => theme.background};
  color: ${({ theme }) => theme.text};
  padding: 20px 10px;
  font-size: 16px;
  border: 1px solid
    ${({ theme, isFocused }) => (isFocused ? theme.text : theme.inputBorder)};
  border-radius: 4px;
`;

const Input = ({
  label,
  value,
  onChangeText,
  onSubmitEditing,
  onBlur,
  placeholder,
  isPassword,
  returnKeyType,
  maxLength,
}) => {
  const [isFocused, setIsFocused] = useState(false);

  return (
    
      {label}
       setIsFocused(true)}
        onBlur={() => {
          setIsFocused(false);
          onBlur();
        }}
        placeholder={placeholder}
        secureTextEntry={isPassword}
        returnKeyType={returnKeyType}
        maxLength={maxLength}
        autoCapitalize="none"
        autoCorrect={false}
        textContentType="none" // iOS only
        underlineColorAndroid="transparent" // Android only
      />
    
  );
};

Input.defaultProps = {
  onBlur: () => {},
};

Input.propTypes = {
  label: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  onChangeText: PropTypes.func.isRequired,
  onSubmitEditing: PropTypes.func.isRequired,
  onBlur: PropTypes.func,
  placeholder: PropTypes.string,
  isPassword: PropTypes.bool,
  returnKeyType: PropTypes.oneOf(['done', 'next']),
  maxLength: PropTypes.number,
};

export default Input;

const Login = ({ navigation }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    
      
       setEmail(text)}
        onSubmitEditing={() => {}}
        placeholder="Email"
        returnKeyType="next"
      />
       setPassword(text)}
        onSubmitEditing={() => {}}
        placeholder="Password"
        returnKeyType="done"
        isPassword
      />
    
  );
};

...

const passwordRef = useRef();

...

  return (
    
      
       setEmail(text)}
        onSubmitEditing={() => passwordRef.current.focus()}
        placeholder="Email"
        returnKeyType="next"
      />

...




📝 수정된 동작 요약

useRef()로 passwordRef를 만들고, Password 에 ref={passwordRef}로 연결한다.
Email 입력칸에서 enter를 입력하면 passwordRef.current.focus()를 호출해서 자동으로 Password 입력칸으로 커서가 이동한다.



Input.js
...
onBlur={() => {
  setIsFocused(false);
  if (typeof onBlur === 'function') {
    onBlur();
  }
}}
...
갑자기 onBlur();가 작동하지 않아 에러가 떴다. onBlur prop이 없거나(undefined), 함수가 아닐 때도 크래시가 나지 않도록 방어 코드를 추가했다.
비밀번호를 입력할 때 키보드에 가려 보이지 않는다. 키보드 스크롤 뷰를 이용하여 사용성을 개선한다.
npm install react-native-keyboard-aware-scroll-view
react-native-keyboard-aware-scroll-view 를 설치한다
Login.js
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

...

return (
  
    
      ...
    
  
);


📝 수정된 동작 요약

KeyboardAwareScrollView를 사용해 키보드가 올라올 때 화면이 자동으로 스크롤되도록 수정함
입력창(Input)이 키보드에 가려지지 않고 항상 화면에 보이도록 UX 개선
extraScrollHeight 옵션을 통해 키보드와 입력창 사이 여유 공간을 추가함
로그인/회원가입 화면에서 키보드 대응 로직을 컴포넌트 외부가 아닌 레이아웃 레벨에서 처리하도록 구조 정리



사용자가 이메일을 틀린 형식으로 입력했다면 이메일을 다시 입력하라는 경고를 띄워야 한다. 
theme.js
 errorText: colors.red,
오류 메세지 색상을 정의한다
utils/common.js
export const validateEmail = email => {
    const regex = /^[0-9?A-z0-9?]+(\.[0-9?A-z0-9?]+)*@[0-9?A-z]+\.[A-z]{2,}(\.[A-z]{0,3})?$/;
    return regex.test(email);
};

export const removeWhitespace = text => {
    const regex = /\s/g;
    return text.replace(regex, '');
};


📝 이메일 유효성 검사 추가 동작 요약

이메일 형식 검증 로직 추가
정규표현식을 사용해 이메일 문자열이 올바른 형식인지 검사하는 validateEmail 함수가 새로 구현됨
입력된 이메일이 example@domain.com 과 같은 형태인지 boolean 값으로 판단 가능


입력값 공백 제거 유틸 함수 추가
문자열 내 모든 공백을 제거하는 removeWhitespace 함수가 추가됨
이메일·비밀번호 입력 시 의도치 않은 공백으로 인한 오류를 사전에 방지





Login.js
...
import { Image, Input } from '../components';
import { images } from '../utils/images';
import { validateEmail, removeWhitespace } from '../utils/common';

...

const ErrorText = styled.Text`
  align-self: flex-start;
  width: 100%;
  height: 20px;
  margin-bottom: 10px;
  line-height: 20px;
  color: ${({ theme }) => theme.errorText};
`;

const Login = ({ navigation }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const passwordRef = useRef(null);

  const _handleEmailChange = email => {
    const changedEmail = removeWhitespace(email);
    setEmail(changedEmail);
    setErrorMessage(validateEmail(changedEmail) ? '' : 'Please verify your email.');
  };

  const _handlePasswordChange = password => {
    setPassword(removeWhitespace(password));
  };

  return (
    
      
        

         passwordRef.current?.focus()}
          placeholder="Email"
          returnKeyType="next"
        />

         {}}
          placeholder="Password"
          returnKeyType="done"
          isPassword
        />

        {errorMessage}
      
    
  );
};
...


📝 수정된 동작 요약

이메일 입력값이 바뀔 때마다 removeWhitespace()로 공백을 제거한 뒤 setEmail()로 상태를 갱신한다.
공백 제거된 이메일을 validateEmail()로 검사해서, 올바르면 errorMessage를 ''로 비우고 아니면 "Please verify your email."을 세팅한다.
비밀번호도 입력 시 removeWhitespace()로 공백을 제거해서 setPassword()에 저장한다.
화면 하단에 {errorMessage}를 추가해서, 이메일 형식이 틀리면 즉시 빨간 안내문이 보이도록 한다.



로그인 버튼을 구현해보자
theme.js
  buttonBackground: colors.blue,
  buttonTitle: colors.white,
  buttonUnfilledTitle: colors.blue,
버튼과 관련된 색상을 정의한다
components/Button.js
import React from 'react';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';

const TRANSPARENT = 'transparent';

const Container = styled.TouchableOpacity`
  background-color: ${({ theme, isFilled }) =>
    isFilled ? theme.buttonBackground : TRANSPARENT};
  align-items: center;
  border-radius: 4px;
  width: 100%;
  padding: 10px;
`;

const Title = styled.Text`
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: ${({ theme, isFilled }) =>
    isFilled ? theme.buttonTitle : theme.buttonUnfilledTitle};
`;

const Button = ({ containerStyle, title, onPress, isFilled }) => {
  return (
    
      {title}
    
  );
};

Button.defaultProps = {
  isFilled: true,
};

Button.propTypes = {
  containerStyle: PropTypes.object,
  title: PropTypes.string,
  onPress: PropTypes.func.isRequired,
  isFilled: PropTypes.bool,
};

export default Button;


📝 수정된 동작 요약

styled-components를 활용해 isFilled 속성에 따라 배경색을 채울지 투명하게 할지 결정하는 동적 스타일링을 적용
Title 텍스트 색상 또한 isFilled 속성에 따라 테마에 맞춰 자동으로 변경되도록 설정함
defaultProps를 통해 isFilled 값을 별도로 지정하지 않으면 기본적으로 채워진 버튼(true)으로 렌더링되도록 처리함



버튼 컴포넌트를 컴포넌트의 index.js에 추가하고 로그인 화면에 적용한다
Login.js
import { Image, Input, Button } from '../components';

...

  const _handleLoginButtonPress = () => {};

  return (
    
      
        ...
        

        {errorMessage}
        


📝 수정된 동작 요약

커스텀 Button 컴포넌트를 import하여 로그인과 회원가입 버튼을 화면에 추가함
로그인 버튼을 눌렀을 때 실행될 이벤트 핸들러 함수를 정의하고 버튼 onPress 이벤트에 연결함
비밀번호 입력창에서 작성을 마치고 키보드의 완료 버튼을 누를 때도 로그인 함수가 실행되도록 연결함
회원가입 버튼을 누르면 Signup 화면으로 이동하는 내비게이션 로직을 작성함
isFilled 속성을 false로 설정하여 회원가입 버튼이 배경색 없이 테두리만 있는 스타일로 렌더링되도록 함



Login.js
import React, { useState, useRef, useEffect } from 'react';

...

  const [disabled, setDisabled] = useState(true);

  useEffect(() => {
    setDisabled(!(email && password && !errorMessage));
  }, [email, password, errorMessage]);

...

        {errorMessage}
        


📝 수정된 동작 요약

disabled 상태 변수를 추가하여 버튼의 활성화/비활성화 상태를 관리함
useEffect 훅을 사용하여 이메일(email), 비밀번호(password) 입력 여부와 에러 메시지(errorMessage) 존재 여부를 감시함
이메일과 비밀번호가 모두 입력되고 에러 메시지가 없을 때만 버튼이 활성화되도록 로직을 구현함
로그인 버튼 컴포넌트에 disabled props를 전달하여 조건 불충족 시 버튼을 누를 수 없도록 처리함



Button.js
...

const Container = styled.TouchableOpacity`
  ...
  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
`;

...

const Button = ({
  containerStyle,
  title,
  onPress,
  isFilled,
  disabled,
}) => {
  return (
    
      {title}
    
  );
};

Button.defaultProps = {
  isFilled: true,
  disabled: false,
};

Button.propTypes = {
  ...
  disabled: PropTypes.bool,
};

export default Button;


📝 수정된 동작 요약

Button 컴포넌트에 disabled 속성을 처리하는 스타일과 로직을 추가함
disabled 상태가 true일 경우 버튼의 투명도(opacity)를 0.5로 설정하여 비활성화된 시각적 효과를 줌
TouchableOpacity의 disabled 속성에 값을 전달하여 클릭 이벤트가 발생하지 않도록 막음
PropTypes에 disabled 타입을 boolean으로 정의하고 기본값을 false로 설정함



스택 네비게이션을 사용하기때문에 헤더가 있어야 한다.(이전 화면으로 돌아가기 위함)
theme.js
headerTintColor: colors.black,
헤더에서 사용할 색상을 정의한다
AuthStack.js
...

    
      
      
    

...


📝 수정된 동작 요약

Login 화면의 옵션에 headerShown 속성을 false로 설정하여 헤더를 숨김
내비게이션 스택에서 로그인 화면만 상단 헤더가 보이지 않도록 UI를 수정함
나머지 화면(예: Signup)은 기존대로 헤더가 유지됨



AuthStack.js
...

    
      
      
    

...


📝 수정된 동작 요약

AuthStack 내비게이션의 공통 옵션에 headerTintColor를 설정하여 헤더 아이콘 및 텍스트 색상을 테마에 맞춤
Signup 화면의 옵션에 headerBackTitleVisible을 false로 설정하여 뒤로가기 버튼 옆의 타이틀(이전 화면 이름)을 숨김
기존에는 한 줄로 작성되어 있던 Signup 화면 설정을 가독성을 위해 여러 줄로 분리하여 옵션을 명확히 함



아이폰의 노치디자인에 가려 헤더가 안 보일 수 있다. UI를 개선해보자.
Login.js
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const Container = styled.View`
  ...
  padding: 0 20px;
  padding-top: ${({ insets: { top } }) => top}px;
  padding-bottom: ${({ insets: { bottom } }) => bottom}px;
`;

...

const Login = ({ navigation }) => {
  const insets = useSafeAreaInsets();
  ...
  return (
    
      
        ...
      
    
  );
};


📝 수정된 동작 요약

react-native-safe-area-context의 useSafeAreaInsets 훅을 도입하여 노치 디자인이나 홈바 영역의 안전한 여백 값을 가져옴
기존의 고정된 padding 값을 제거하고 상단(Top)과 하단(Bottom)에 디바이스별 안전 영역(Inset)만큼의 패딩을 동적으로 부여함
Container 컴포넌트에 insets 값을 props로 전달하여 스타일 내부에서 해당 값을 계산하도록 수정함



회원가입시 이미지를 원형으로 보이게 할 예정이다.
Image.js
const StyledImage = styled.Image`
  background-color: ${({ theme }) => theme.imageBackground};
  width: 100px;
  height: 100px;
  border-radius: ${({ rounded }) => (rounded ? 50 : 0)}px;
`;

const Image = ({ uri, imageStyle, rounded }) => {
  return (
    
      
    
  );
};

Image.defaultProps = {
  rounded: false,
};

Image.propTypes = {
  uri: PropTypes.string,
  imageStyle: PropTypes.object,
  rounded: PropTypes.bool,
};

export default Image;


📝 수정된 동작 요약

Image 컴포넌트에 rounded 속성을 추가하여 이미지를 원형으로 렌더링할 수 있는 기능을 구현함
StyledImage 스타일 정의에서 rounded 값이 true일 경우 border-radius를 50px로 설정하여 100x100 크기의 이미지를 완벽한 원형으로 만듦
컴포넌트의 props로 rounded를 받아 하위 스타일 컴포넌트에 전달하도록 수정함
defaultProps를 통해 rounded 속성의 기본값을 false로 설정하여, 별도 지정이 없으면 사각형 이미지가 출력되도록 함
PropTypes에 rounded 속성을 boolean 타입으로 정의하여 타입 안정성을 확보함



Signup.js
import React, { useState, useRef, useEffect } from 'react';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { Image, Input, Button } from '../components';
import { validateEmail, removeWhitespace } from '../utils/common';

const ErrorText = styled.Text`
  align-items: flex-start;
  width: 100%;
  height: 20px;
  margin-bottom: 10px;
  line-height: 20px;
  color: ${({ theme }) => theme.errorText};
`;

const Signup = ({ navigation }) => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [passwordConfirm, setPasswordConfirm] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [disabled, setDisabled] = useState(true);

  const emailRef = useRef(null);
  const passwordRef = useRef(null);
  const passwordConfirmRef = useRef(null);

  useEffect(() => {
    let _errorMessage = '';
    if (!name) {
      _errorMessage = 'Please enter your name.';
    } else if (!validateEmail(email)) {
      _errorMessage = 'Please verify your email.';
    } else if (password.length < 6) {
      _errorMessage = 'The password must contain 6 characters at least.';
    } else if (password !== passwordConfirm) {
      _errorMessage = 'Passwords need to match.';
    } else {
      _errorMessage = '';
    }
    setErrorMessage(_errorMessage);
  }, [name, email, password, passwordConfirm]);

  useEffect(() => {
    setDisabled(!(name && email && password && passwordConfirm && !errorMessage));
  }, [name, email, password, passwordConfirm, errorMessage]);

  const _handleSignupButtonPress = () => {
    // TODO: signup logic
  };

  return (
    
      
        
        
        
        
        

        {errorMessage}
        


📝 수정된 동작 요약

회원가입 화면(Signup.js)의 전체 UI와 유효성 검사 로직을 구현함
이름, 이메일, 비밀번호, 비밀번호 확인을 입력받기 위한 상태(State)와 Input 컴포넌트들을 배치함
useEffect를 사용하여 입력값이 변경될 때마다 실시간으로 유효성 검사를 수행하고 에러 메시지를 업데이트함
모든 필드가 유효하고 에러 메시지가 없을 경우에만 회원가입 버튼이 활성화되도록 disabled 상태를 관리함
useRef를 활용하여 엔터키 입력 시 다음 입력창으로 포커스가 자동으로 이동하도록 사용자 경험(UX)을 개선함



Signup.js
...
  const didMountRef = useRef();

  useEffect(() => {
    if (didMountRef.current) {
      let _errorMessage = '';

      if (!name) {
        _errorMessage = 'Please enter your name.';
      } else if (!validateEmail(email)) {
        _errorMessage = 'Please verify your email.';
      } else if (password.length < 6) {
        _errorMessage = 'The password must contain 6 characters at least.';
      } else if (password !== passwordConfirm) {
        _errorMessage = 'Passwords need to match.';
      } else {
        _errorMessage = '';
      }
      setErrorMessage(_errorMessage);
    } else {
      didMountRef.current = true;
    }
  }, [name, email, password, passwordConfirm]);
...


📝 수정된 동작 요약

useRef를 사용하여 컴포넌트 마운트 여부를 추적하는 didMountRef 변수를 추가함
useEffect 내부에서 didMountRef.current 값을 확인하여 초기 렌더링 시에는 유효성 검사 로직이 실행되지 않도록 수정함
사용자가 입력을 시작한 이후(update 시점)부터 유효성 검사를 수행하여 초기 화면 진입 시 불필요한 에러 메시지가 노출되는 문제를 해결함
Signup 화면의 패딩 값을 0 20px에서 40px 20px로 수정하여 상하 여백을 확보함



utils/image.js
photo: `${prefix}/photo.png?alt=media`,
회원가입 이미지를 파이어베이스에서 불러오도록 한다
Signup.js
import { images } from '../utils/images'

...

const Signup = ({ navigation }) => {
  const [photoUrl, setPhotoUrl] = useState(images.photo)
  ...
  return (
    ...
      
        
        ...
      
    ...
  );
};


📝 수정된 동작 요약

utils/images에서 정의한 기본 프로필 이미지를 불러오기 위해 images 객체를 import함
프로필 이미지 URL을 관리하기 위한 photoUrl 상태 변수를 선언하고 초기값을 images.photo로 설정함
Image 컴포넌트에 url 속성으로 photoUrl 상태값을 전달하여 화면에 기본 프로필 사진이 표시되도록 구현함



유저가 직접 갤러리에 있는 이미지를 삽입할 수 있도록 버튼을 만든다.
theme.js
  imageBackground: colors.grey_0,
  imageButtonBackground: colors.grey_1,
  imageButtonIcon: colors.white,
버튼에 들어갈 색상을 정의한다
image.js
import { MaterialIcons } from '@expo/vector-icons';

...

const ButtonContainer = styled.TouchableOpacity`
  background-color: ${({ theme }) => theme.imageButtonBackground};
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
`;

const ButtonIcon = styled(MaterialIcons).attrs({
  name: 'photo-camera',
  size: 22,
})`
  color: ${({ theme }) => theme.imageButtonIcon};
`;

const PhotoButton = ({ onPress }) => {
  return (
    
      
    
  );
};

...

const Image = ({ url, imageStyle, rounded, showButton, onPress }) => {
  return (
    
      
      {showButton && }
    
  );
};

...


📝 수정된 동작 요약

이미지 우측 하단에 카메라 아이콘 버튼을 표시하기 위해 PhotoButton, ButtonContainer, ButtonIcon 컴포넌트를 구현함
Image 컴포넌트의 props로 showButton을 전달받아 true일 경우에만 카메라 버튼이 렌더링되도록 조건부 렌더링을 적용함
showButton이 활성화된 경우 사용자가 버튼을 클릭하면 onPress 함수가 실행되도록 연결함
기존 uri prop의 이름을 url로 변경하고, Image 컴포넌트 사용처에서도 이를 반영하도록 수정함



Signup.js
...
  
    
    ...
  
...


📝 수정된 동작 요약

회원가입 화면(Signup)에서 Image 컴포넌트에 showButton 속성을 추가함
showButton 값을 true로 설정하여 프로필 이미지 우측 하단에 카메라 아이콘 버튼이 보이도록 활성화함



갤러리에 직접 접근하여 사진을 불러오도록 구현해보자
npm install expo-image-picker
expo-image-picker 설치
Image.js
import { Platform, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

...

const Image = ({ url, imageStyle, rounded, showButton, onChangeImage }) => {
  useEffect(() => {
    (async () => {
      try {
        if (Platform.OS === 'ios') {
          const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
          if (status !== 'granted') {
            Alert.alert(
              'Photo Permission',
              'Please turn on the camera roll permissions.'
            );
          }
        }
      } catch (e) {
        Alert.alert('Photo Permission Error', e.message);
      }
    })();
  }, []);

  const _handleEditButton = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        aspect: [1, 1],
        quality: 1,
      });

      if (!result.canceled) {
        onChangeImage(result.assets[0].uri);
      }
    } catch (e) {
      Alert.alert('Photo Error', e.message);
    }
  };

  return (
    
      
      {showButton && }
    
  );
};


📝 수정된 동작 요약

useEffect를 통해 컴포넌트 마운트 시, iOS 환경에서는 갤러리 접근 권한을 요청하고 거부될 경우 알림을 띄우도록 처리함
버튼 클릭 핸들러(_handleEditButton) 내부에서 launchImageLibraryAsync를 호출하여 이미지 라이브러리를 실행함
사용자가 이미지를 선택하고 편집(crop)을 마치면 onChangeImage 콜백 함수를 통해 선택된 이미지 URI를 부모 컴포넌트로 전달함
이미지 선택 과정에서 예외가 발생할 경우 Alert을 통해 에러 메시지를 사용자에게 알리도록 함



Signup.js
...
  
     setPhotoUrl(url)}
    />
    ...
  
...


📝 수정된 동작 요약

Signup 화면의 Image 컴포넌트에 onChangeImage props를 전달함
Image 컴포넌트 내부에서 이미지가 선택되면 호출되는 콜백 함수를 연결함
선택된 이미지의 URL을 받아 setPhotoUrl 상태 업데이트 함수를 실행하여 화면에 즉시 반영되도록 구현함



이제 파이어베이스에서 정보를 요청하고 전송, 인증받는 코드를 구현해보자
Login.js
import { Alert } from 'react-native';
import { login } from '../utils/firebase';

...

  const _handleLoginButtonPress = async () => {
    try {
      const user = await login({ email, password });
      Alert.alert('Login Success', user.email);
    } catch (e) {
      Alert.alert('Login Error', e.message);
    }
  };

...

        


📝 수정된 동작 요약

Firebase의 login 함수를 호출하여 이메일과 비밀번호로 로그인을 시도하는 비동기 함수 _handleLoginButtonPress를 구현함
로그인 성공 시 사용자 이메일을 포함한 성공 알림창을 띄우고, 실패 시 에러 메시지 알림창을 표시함
Login 버튼의 onPress 이벤트에 해당 로그인 핸들러 함수를 연결함
입력값 유효성에 따라 버튼 활성화 상태를 제어하는 disabled 속성을 Login 버튼에 적용함



Signup.js
import { Alert } from 'react-native';
import { signup } from '../utils/firebase';

...

  const _handleSignupButtonPress = async () => {
    try {
      if (disabled) return;

      const trimmedName = name.trim();
      const trimmedEmail = removeWhitespace(email);
      const trimmedPassword = removeWhitespace(password);

      // (중략: 유효성 검사 로직)

      const user = await signup({
        email: trimmedEmail,
        password: trimmedPassword,
        name: trimmedName,
        photoUrl,
      });

      Alert.alert('Signup Success', user?.email ?? trimmedEmail);
      navigation.navigate('Login');
    } catch (e) {
      Alert.alert('Signup Error', e?.message ?? 'Unknown error');
    }
  };

...


📝 수정된 동작 요약

Firebase의 signup 함수를 호출하여 회원가입 정보를 전송하는 비동기 함수 _handleSignupButtonPress를 구현함
회원가입 버튼 클릭 시 이름, 이메일, 비밀번호의 공백을 제거하고 최종 유효성 검사를 수행함
회원가입 성공 시 성공 알림창을 띄우고 로그인 화면(Login)으로 이동하도록 내비게이션 처리를 추가함
실패 시에는 catch 블록에서 에러 메시지를 알림창으로 표시하여 사용자에게 안내함



Signup.js
const _handleSignupButtonPress = async () => {
    try {
      const trimmedName = name.trim();
      const trimmedEmail = removeWhitespace(email);
      const trimmedPassword = removeWhitespace(password);
      const trimmedPasswordConfirm = removeWhitespace(passwordConfirm);

      const user = await signup({
        email: trimmedEmail,
        password: trimmedPassword,
        name: trimmedName,
        photoUrl,
      });

      console.log(user);
      Alert.alert('Signup Success', user.email);
    } catch (e) {
      Alert.alert('Signup Error', e.message);
    }
  };


📝 수정된 동작 요약

기존에 함수 내부에서 수행하던 중복된 유효성 검사 로직(if문들)을 제거하고 코드를 간소화함
이미 useEffect에서 disabled 상태를 관리하고 있으므로, 버튼 클릭 시에는 별도의 중복 검사 없이 바로 회원가입 요청을 보내도록 수정함
회원가입 성공 시 콘솔에 사용자 정보를 출력하는 디버깅용 코드를 추가하고, 알림창 메시지를 간결하게 변경함



로그인과 회원가입이 완전히 진행 되기 전 다른 버튼이 눌리지 않도록 대기시키는 스피너를 구현해보자
theme.js
  spinnerBackground: colors.black,
  spinnerIndicator: colors.white,
색상을 정의한다
Spinner.js
import React, { useContext } from 'react';
import { ActivityIndicator } from 'react-native';
import styled, { ThemeContext } from 'styled-components/native';

const Container = styled.View`
  position: absolute;
  z-index: 2;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  justify-content: center;
  background-color: ${({ theme }) => theme.spinnerBackground};
`;

const Spinner = () => {
  const theme = useContext(ThemeContext);

  return (
    
      
    
  );
};

export default Spinner;


📝 수정된 동작 요약

로딩 상태를 표시하기 위한 재사용 가능한 Spinner 컴포넌트를 새로 생성함
ActivityIndicator를 사용하여 기본 로딩 인디케이터를 화면 중앙에 배치함
styled-components를 활용해 화면 전체를 덮는 절대 위치(position: absolute)의 반투명 배경 컨테이너를 구현함
z-index를 2로 설정하여 다른 UI 요소들보다 위에 나타나도록 처리함
useContext로 현재 테마 정보를 가져와 인디케이터 색상(color)을 동적으로 설정함



Spinner.js 를 components의 index와 navigations의 index에 등록한다
contexts/Progress.js
import React, { useState, createContext } from 'react';

const ProgressContext = createContext({
  inProgress: false,
  spinner: () => {},
});

const ProgressProvider = ({ children }) => {
  const [inProgress, setInProgress] = useState(false);

  const spinner = {
    start: () => setInProgress(true),
    stop: () => setInProgress(false),
  };

  const value = { inProgress, spinner };

  return (
    
      {children}
    
  );
};

export { ProgressContext, ProgressProvider };


📝 수정된 동작 요약

앱 전역에서 로딩 상태(스피너)를 관리하기 위해 Context API를 활용한 ProgressContext와 ProgressProvider를 구현함
useState를 사용하여 로딩 중인지 여부를 나타내는 inProgress 상태 변수를 생성함
로딩 상태를 제어하기 위한 spinner 객체를 정의하고, start(로딩 시작)와 stop(로딩 종료) 함수를 구현함
Provider를 통해 하위 컴포넌트들이 inProgress 상태와 spinner 제어 함수에 접근할 수 있도록 value를 전달함



contexts/index.js
import { ProgressContext, ProgressProvider } from './Progress';

export { ProgressContext, ProgressProvider };
contexts/index.js에 Progress.js를 등록해준다. 파일을 더 쉽게 관리하기 위함이다.
App.js
import { ProgressProvider } from './contexts';

...

const App = () => {
  ...
  return isReady ? (
    
      
        
        
      
    
  ) : (
    ...
  );
};


📝 수정된 동작 요약

Navigation 컴포넌트를 ProgressProvider로 감싸 앱 전역에서 로딩 상태(스피너)를 사용할 수 있도록 설정함
이를 통해 하위 컴포넌트(로그인, 회원가입 등)에서 Context를 통해 스피너를 제어할 수 있게 됨



Login.js
import React, { useState, useRef, useEffect, useContext } from 'react';
import { ProgressContext } from '../contexts';

...

const Login = ({ navigation }) => {
  const { spinner } = useContext(ProgressContext);

  ...

  const _handleLoginButtonPress = async () => {
    try {
      spinner?.start?.();
      const user = await login({ email, password });
      Alert.alert('Login Success', user.email);
    } catch (e) {
      Alert.alert('Login Error', e.message);
    } finally {
      spinner?.stop?.();
    }
  };

  ...
};


📝 수정된 동작 요약

로그인 버튼 핸들러(_handleLoginButtonPress)의 시작 부분에서 spinner.start()를 호출하여 로딩 인디케이터를 화면에 표시함
비동기 로그인 작업(await login)이 완료되거나 에러가 발생하면, finally 블록에서 spinner.stop()을 호출하여 스피너를 숨김
이를 통해 사용자가 로그인 요청 중임을 시각적으로 인지할 수 있도록 UX를 개선함



Signup.js
import React, { useState, useRef, useEffect, useContext } from 'react';
import { ProgressContext } from '../contexts';

...

const Signup = ({ navigation }) => {
  const { spinner } = useContext(ProgressContext);

  ...

  const _handleSignupButtonPress = async () => {
    try {
      spinner.start();

      const trimmedName = name.trim();
      const trimmedEmail = removeWhitespace(email);
      const trimmedPassword = removeWhitespace(password);

      ...

      Alert.alert('Signup Success', user.email);
    } catch (e) {
      Alert.alert('Signup Error', e.message);
    } finally {
      spinner.stop();
    }
  };

  ...
};


📝 수정된 동작 요약

spinner 객체를 Context로부터 구조 분해 할당으로 받아옴
회원가입 버튼 핸들러(_handleSignupButtonPress) 시작 부분에 spinner.start()를 호출하여 로딩 화면을 표시함
비동기 작업 종료 시(finally 블록) spinner.stop()을 호출하여 스피너를 제거함으로써, 회원가입 진행 중임을 사용자에게 시각적으로 알리는 로직을 완성함





현재 파이어베이스에서 문제가 생겨 무한 로딩이 된다... 책과 달라진 부분이 많아 찾으면서 오류를 고치고 있는 중이다. 다 고쳐지면 글 수정해야지 ㅜ



[처음 배우는 리액트 네이티브] 채팅 어플리케이션 만들기 - 1. 파이어베이스 설정
Wed, 10 Dec 2025 03:14:00 GMT
채팅 어플리케이션을 만들기 위해 서버를 구현하지 않고 파이어베이스를 이용할 예정이다.
프로젝트 생성

새 프로젝트 만들기를 선택한다. 

가운데 앱 추가 버튼을 눌러 웹을 선택한다.

책과 달라진 부분이 있어 아래 블로그를 참고하였다.
https://gamza1013.tistory.com/30


적당한 닉네입을 입력 후 앱 등록을 한다.
SDK 설정 및 등록에서 npm 방식을 이용한다.
npm install --save @react-native-firebase/app
npm install @react-native-firebase/database
npm install @react-native-firebase/firestore
firebase를 설치해준다.
이후 프로젝트 src/utils에 firebase.js 파일을 생성하고 SDK 설정 및 구성에 뜬 코드를 붙여넣어준다. 외부에 유출되지 않도록 조심한다.
Authentication

로그인 구현을 위해 인증 탭으로 이동한다. 형식은 이메일-비밀번호를 사용할 예정이다.
시작하기를 누르고 이메일-비밀번호 사용을 활성화해준다.
Firestore Database
앱에서 생성되는 데이터를 관리하기 위해 데이터베이스를 사용해야 한다. 이 프로젝트에서는 파이어베이스에서 제공하는 파이어스토어를 이용할 예정이다.

왼쪽 메뉴에서 빌드>Firestore Database를 선택한다

개인 프로젝트이므로 Standard버전을 사용했다.
자신의 지역과 가까운 곳을 선택하는 것이 좋다고 한다.

위와 같이 선택하고 만들기를 눌러주었다.
Storage
가입한 사용자의 사진을 저장하고 불러오는 기능을 구현하기 위해 스토리지를 사용해야 한다.

왼쪽 메뉴바에서 스토리지를 선택한다.

돈을 내야 한다고 한다... 무료 크레딧을 받을 수 있다고 하여 시도했다.
(찾아보니 1GB까지는 무료로 사용할 수 있다고 한다. 초과 사용 내역에 대해서 요금이 청구되어 결제 수단을 등록해야 한다. 아래처럼 무료 크레딧을 받지 않더라도 요금 지불 없이 사용할 수 있는 것이다! 미리 알았다면 하지 않았을 것이다. 혹시 모를 추가 요금에 대비하여 미리 받아둘지 말지는 자신의 선택 사항일 것 같다)

자세히 알아보기 클릭

Check if you’re eligible for the Free Trial. 클릭

결제 프로필을 등록하라고 해서 봤더니 내가 선택하지 않는 이상 자동으로 요금 청구는 되지 않는다고 명시되어있다. 아래 주소와 번호 등의 개인정보를 입력했다.
다음으로 넘겨 카드 정보도 등록하였다.

90일 무료 크레딧을 얻었다ㅜㅜ

내 결제 계정을 선택한다. (저 평가판 결제 계정이 뭐지 했는데 예전에 동아리에서 크레딧을 준다 하여 신청했던... 무언가인 것 같다. 5달러의 크레딧이 있다. 그냥 저거 쓸 걸!)

무료 크레딧을 300달러 받았으니 예산금액으로 300을 적어준다. 일정 수준으로 사용하면 메일을 준다고 한다. 내가 받은 300 크레딧이 이 결제 계정에 등록되어있는 것인지 궁금하다면 계정보기>크레딧을 확인해본다.

이후 프로덕션 모드를 선택하고 스토리지를 생성했다.



데이터베이스 - CHAPTER 2. 관계 데이터 모델 (2)
Sun, 07 Dec 2025 09:28:54 GMT
무결성 제약조건
데이터 무결성(integrity)은 데이터베이스에 저장된 데이터의 일관성과 정확성을 지키는 것을 말한다. 
도메인 무결성 제약조건
도메인 제약(domain constraint)라고도 하며 릴레이션 내의 투플들이 각 속성의 도메인에 지정된 값만을 가져야 한다는 조건이다. 속성값과 관련된 무결성으로 SQL문에서 데이터 형식(type), null, default, chek 등을 사용하여 지정할 수 있다. 일반적으로 프로그래밍 언어의 변수형 선언과 개념이 유사하다.
개체 무결성 제약조건
기본키 제약(primary key constraint)라고도 한다. 릴레이션은 기본키를 지정하고 그에 따른 무결성 원칙, 즉 기본키는 NULL값을 가져서는 안 되며 릴레이션 내에 오직 하나의 값만 존재해야 한다는 조건이다.

삽입: 기본키 값이 같으면 삽입이 거부됨
수정: 기본키와 값이 같거나 NULL값이면 수정이 거부됨
삭제: 특별한 확인 없이 즉시 수행

참조 무결성 제약 조건
외래키 제약(foriegn key constraint)이라고도 한다. 릴레이션 간의 참조 관계를 선언하는 제약 조건이다. 일반적으로 참조되는 릴레이션을 부모(parent)릴레이션, 참조하는 릴레이션을 자식(child)릴레이션이라고 한다. 부모 릴레이션의 도메인과 다른 값으로 삽입/수정되거나 반대로 자식 릴레이션에서 참조하고 있는 값을 부모 릴레이션에서 삭제하거나 다른 값으로 변경할 경우 거부된다. 자식 릴레이션의 외래키는 부모 릴레이션의 기본키와 도메인이 같아야 한다. 

삽입
자식 릴레이션에서

도메인 무결성 제약조건, 개체 무결성 제약조건을 먼저 확인한다.
부모 릴레이션의 기본키에 존재하는지 확인한다.

부모 릴레이션에서
개체 무결성 제약 조건에 따르면 된다.

삭제

자식 릴레이션에서
바로 삭제 가능하다.
부모 릴레이션에서
자식 릴레이션이 참조하고 있는 경우 즉시 삭제가 불가능하며 다음 중 하나의 조치를 따른다.

즉시 작업 중지

자식 릴레이션의 관련 튜플을 삭제

초기에 설정된 다른 어떤 값으로 변경

NULL값으로 설정




수정
수정은 삭제와 삽입의 명령이 연속해서 수행된다고 보면 된다.

다음 표는 제약조건을 정리한 것이다.

관계대수
관계대수 (relational algebra)
릴레이션에서 원하는 결과를 얻기 위해 수학의 대수와 같은 연산을 이용하여 질의하는 방법을 기술하는 언어이다. 절차적 언어이다.
관계대수 연산자(operator)

관계대수식(relational algebra expression)
관계대수 연산을 수행하기 위한 식. 관계대수식은 대상이 되는 릴레이션과 연산자로 구성이 된다. 수학의 연산과 동일하게 괄호 안의 식이 우선하며 왼쪽에서 오른쪽으로 진행된다. 

셀렉션 (selection)
릴레이션의 튜플을 추출하기 위한 연산. 찾고자 하는 튜플의 조건을 명시하고 그 조건에 만족하는 튜플을 반환한다. 결과 릴레이션의 차수는 대상 릴레이션과 작거나 같다.

프로젝션 (projection)
릴레이션의 속성을 추출하기 위한 연산. 결과 릴레이션의 차수는 대상 릴레이션의 차수보다 작거나 같고 카디날리티는 동일하다. 

집합연산


집합연산은 두 개의 릴레이션을 대상으로 하는 이항 연산자이다. 카티션 프로덕트를 제외한 나머지 세 개의 연산에서는 두 릴레이션간 차수 및 도메인의 속성과 순서가 동일해야 한다. 이 조건을 합병가능(union compatible)이라고 한다. 속성 이름은 동일하지 않아도 되며 반환되는 릴레이션의 속성 이름은 첫 번째 릴레이션의 이름과 같다.





[처음부터 배우는 리액트 네이티브] 네비게이션
Sun, 23 Nov 2025 08:40:12 GMT
내비게이션
리액트 내비게이션
지원하는 내비게이션의 종류는 스택 내비게이션, 탭 내비게이션, 드로어 내비게이션이다.
책에서는 내비게이션 5버전으로 실습을 하는데, 찾아보니 현재 버전은 7이다!

Screen 컴포넌트는 화면으로 사용되는 컴포넌트로 name(화면 이름)과 component(화면으로 사용될 컴포넌트) 속성을 지정해야 한다. 화면으로 사용되는 컴포넌트에는 항상 navigation과 route가 props로 전달된다.
Navigator컴포넌트는 화면을 관리하는 중간 관리자 역할이다.
NavigationContainer컴포넌트는 내비게이션 계층 구조와 상태를 관리하는 컨테이너 역할을 한다. 모든 내비게이션 구성요소를 감싼 최상위 컴포넌트여야 한다.
부모의 설정은 자식에게도 적용되므로, 공통적으로 적용하고 싶은 속성의 경우에는 Navigator, 각 화면에 적용하고 싶은 속성은 Screen을 이용한다. 작은 범위의 설정일수록 우선순위가 높다.
폴더 구조는 다음과 같이 한다.
react-native-navigation
└── src
    ├── navigations
    ├── screens
    │── App.js
└── App.js
리액트 내비게이션 라이브러리를 설치한다.
npm install --save @react-navigation/native
필요한 종속성을 설치한다.
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
스택 내비게이션
스택 네비게이션에 필요한 라이브러리를 설치한다.
npm install greact-navigation/stack
스택 네비게이션은 일반적으로 가장 많이 사용되며 현재 화면 위에 다른 화면을 쌓으며 이동한다. 
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import Home from '../screens/Home';
import List from '../screens/List';
import Item from '../screens/Item';

const Stack = createStackNavigator();

const StackNavigation = () => {
  return (
    
      
      
      
    
  );
};

export default StackNavigation;
가장 먼저 Home 화면이 뜨고, 다른 화면으로 이동할 수 있으며, 뒤로가기 하면 이전 화면으로 돌아간다. 첫번째로 나오는 화면은 Navigator의 첫번째 자식이며 순서를 바꾸면 다른 화면이 첫 화면으로 나온다. 
‹Stack.Navigator initialRouteName=" Home">
혹은 initialRouteName 속성을 이용해 첫번째 화면을 지정한다.
const Home = ({ navigation }) => {
  return (
    
      Home
      
navigation함수를 이용해서 원하는 화면의 이름을 전달하면 해당 화면으로 이동한다. 전달되는 화면의 이름은 Screen컴포넌트의 name값 중 하나를 입력해야 한다.
//List.js
const List = ({ navigation }) => {
  const _onPress = item => {
    navigation.navigate('Detail', { id: item._id, name: item.name });
  };
//Item.js
const Item = ({ route }) => {
  return (
      
        Item
        ID: {route.params,id}
        Name: {route.params,name}
    
  );
 };
List에서 상세 Item화면으로 이동할 때, id와 name을 함께 전달한다. 전달된 내용은 컴포넌트의 props로 전달되는 route의 params를 통해 확인할 수 있다.

navigation이 화면 전체를 차지하고 있지 않아 내부는 스타일이 적용 안 될 수도 있다. 그 땐 cardStyle을 이용한다.
헤더의 타이틀은 Screen의 name속성을 기본값으로 한다. 하지만 name 속성을 이용하는 곳을 모두 찾아다니며 수정하는 것은 번거롭다.

headerTitle속성을 이용하면 name을 바꿀 필요 없이 헤더의 타이틀이 변경된다.
headerStyle: {
height: 110,
backgroundColor: '#95a5a6',
borderBottomWidth: 5,
borderBottomColor: '#34495e',
},
headerTitleStyle: { color: "#ffffff', fontSize: 24},
headerTitleAlign: 'center'
헤더의 스타일 변경은 headerStyle, headerTitleStyle, 정렬에는 headerTitleAlign 을 이용한다. headerTitleAlign은 center, left 두가지 만 값으로 설정할 수 있으며 ios는 center, andoird는 left가 기본 값이다.
headerTitle: ({ style )) => (
    
),
타이틀에 문자열이 아닌 다른 것을 이용하고 싶다면 headerTitle을 사용한다
이전 화면으로 이동할 때, 헤더 왼쪽에 뒤로가기 버튼이 생성되는데 ios는 이전 화면의 타이틀을 버튼의 타이틀로 보여주고, android는 그러지 않는다는 차이점이 있다. 
options= {{
headerTitle: "List Screen',
headerBackTitleVisible: true,
}}
headerBackTitleVisible를 사용하여 버튼 타이틀 렌더링 유무를 동일하게 설정할 수 있다.
헤더를 숨길 때엔 headerMode나 headerShown을 이용한다.  headerMode에는 다음 중 헤더 렌더링 방식을 선택할 수 있다 

float → iOS 스타일, 하나의 헤더 유지
screen → Android 스타일, 화면별 헤더 존재
none → 헤더 완전 제거

headerShown은 특정 화면 또는 전체 Navigator에서 헤더 표시 여부를 제어한다. 보통 첫 화면(Home)에서만 헤더 숨기기 등에서 headerShown을 활용한다.
탭 내비게이션
보통 화면 위나 아래에 위치하여 탭 버튼을 누르면 연결된 화면으로 이동하는 방식이다. 
npm install @react-navigation/bottom-tabs
라이브러리를 설치한다. 
//screens/TabScreens.js
import React from 'react';
import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #54b7f9;
`;
const StyledText = styled.Text`
  font-size: 30px;
`;

export const Mail = () => {
  return (
    
      Mail
    
  );
};

export const Meet = () => {
  return (
    
      Meet
    
  );
};

export const Settings = () => {
  return (
    
      Settings
    
  );
};
//navigations/Tab.js
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Mail, Meet, Settings } from '../screens/TabScreens';

const Tab = createBottomTabNavigator();

const TabNavigation = () => {
  return (
    
      
      
      
    
  );
};

export default TabNavigation;
스택 네비게이션과 동일하게 처음 보여지는 화면은 첫번째 자식이며 initialRouteName을 사용하여 첫 화면을 지정할 수도 있다. 
const TabIcon = ({ name, size, color }) => {
  return ;
};

...


      TabIcon({ ...props, name: 'email' }),
  }}
/>
tabBarIcon을 이용하여 탭바에 아이콘을 삽입할 수 있다.
const TabNavigation = () => {
  return (
     ({
        tabBarIcon: props => {
          let name = '';
          if (route.name === 'Mail') name = 'email';
          else if (route.name === 'Meet') name = 'video';
          else name = 'settings';
          return TabIcon({ ...props, name });
        },
      })}
    >
      
      
      
    
  );
};
각각 지정하지 않고 screenOptions을 이용해 한 곳에서 관리할 수도 있다. 

Screen에서 tabBarLabel값을 설정하여 탭 버튼의 라벨을 변경할 수 있다.

라벨을 아이콘 옆에 위치시키고 싶다면 labelPosition을 beside-icon으로 설정한다. showlabel을 false로 설정하면 라벨이 보이지 않는다. 



[처음 배우는 리액트 네이티브] Context API
Sat, 22 Nov 2025 05:04:28 GMT
Context API
전역 상태 관리
부모에게서 데이터를 전달 받을 때, 멀리 떨어져있어 여러 컴포넌트를 거쳐야한다면 상당히 번거롭다. 이 때 Context API를 사용하여 Context를 생성해 필요한 컴포넌트에서 데이터를 바로 받아올 수 있다.
Context API
Context를 생성하는 createContext함는 파라미터에 생성되는 Context의 기본값을 지정할 수 있다.
Consumer
생성된 Context 오브젝트는 입력된 기본값 외에도 Consumer컴포넌트와 Provider컴포넌트를 갖고 있다. Consumer 컴포넌트는 상위 컴포넌트 중 가장 가까운 곳에 있는 Provider컴포넌트가 전달하는 데이터를 이용한다. 상위에 Provider가 없다면 기본값을 사용한다. 
Consumer 컴포넌트의 자식은 반드시 리액트 컴포넌트를 반환하는 함수여야 하고, Context의 현재값을 파라미터로 전달받아 사용할 수 있다.
const User = () => {
  return (
    
      
        {value => Name: {value.name}}
      
    
  );
};
Provider
Context에 있는 Provider컴포넌트른 하위 컴포넌트에 변화를 알리는 역할을 한다. 하위 컴포넌트는 Provider의 값이 변경될때마다 렌더링을 다시 한다.
const App = () => {
  return (
    
      
        
      
    
  );
};
User 컴포넌트는 Provider로 감싸져 Context의 기본값을 사용하지 않는다. Provider 컴포넌트가 전달하는 데이터를 사용하며, 데이터가 없을 땐 Provider에 값을 직접 넣어준다.
Consumer 컴포넌트는 가장 가까운 Provider에서 값을 받으므로 중간에 다른 Provider가 있다면 그 아래 자식은 다른 Provider에서 값을 받아 사용한다.
Context 수정하기
import React, { useState, useContext } from 'react';
import styled from 'styled-components/native';
import UserContext, { UserConsumer } from '../contexts/User';

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

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

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

export default Input;
useContext(UserContext)로 현재 컨텍스트에서 dispatch를 꺼낸다. 사용자가 텍스트 입력하면 name 상태에 저장된다. 엔터(완료) 누르면 dispatch(name)을 호출해서 Context 안의 state를 변경한다. 그 후 setName('')으로 입력창을 비워준다.
useContext
Consumer 컴포넌트를 사용하지 않고 Context의 내용을 사용할 수 있게 해준다. 
...

  const { dispatch } = useContext(UserContext);

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



[처음부터 배우는 리액트 네이티브]Hooks
Fri, 21 Nov 2025 13:31:57 GMT
Hooks
이전에는 컴포넌트의 상태관리나 생명주기에 따라 작업을 수행할 때에는 클래스형 컴포넌트만 사용해야 했다. 그러나 Hooks이 등장하며 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.
useState
useState를 호출하면 변수와 그 변수를 수정할 수 있는 새터 함수를 배열로 반환한다. 관리해야 하는 상태의 수만큼 여러번 사용할 수 있다. 상태 관리 변수는 반드시 새터 함수를 이용해 값을 변경해야 한다.
새터 함수를 사용하는 방법은 두가지가 있다.

새터 함수에 변경될 상태의 값을 전달하기

새터 함수의 파라미터에 함수를 전달하기
 setState(prevState => {});
 새터 함수는 비동기로 동작하기 때문에 상태 변경이 여러번 일어나면 상태가 변경되기 전에 또다시 상태에 대한 업데이트가 실행되는 상황이 발생한다. 이럴 땐 새터함수에 함수를 인자로 전달하여 이전 상태값을 이용한다.




useEffect
컴포넌트가 렌더링될 때마다 원하는 작업이 실행되도록 설정할 수 있는 기능이다. useEffect의 첫번째 파라미터로 전달된 함수는 조건을 만족할 때마다 호출되고, 두번째 파라미터로 전달되는 배열로 호출되는 조건을 설정할 수 있다. 
useEffect(() => {
  console.log(`name: ${name}, email: ${email}\n`);
}, [email]);
//이메일이 변경될 때마다 실행된다
실행조건이 컴포넌트가 마운트 될 때로 설정한다면 아래와 같다
useEffect(() => {
  console.log('\n===== Form Component Mount =====\n');
, []);
언마운트 될 때 실행하려면 실행조건, 첫번째 파라미터를을 빈 배열로 만든다.
useEffect(() => {
  console.log('\n===== Form Component Mount =====\n');
  refName.current.focus();
  return () => console.log('\n===== Form Component Unmount =====\n');
}, []);
useRef
특정 컴포넌트를 선택해야 하는 경우 사용된다(ex. 포커스를 옮길 때)
useRef를 사용할 때 주의할 점이 있다.

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

return (
    <>
      Name: {name}
      Email: {email}
       setName(text)}
        placeholder="name"
        ref={refName}
        returnKeyType="next"
        onSubmitEditing={() => refEmail.current.focus()}
      />
       setEmail(text)}
        placeholder="email"
        ref={refEmail}
        returnKeyType="done"
      />
    
  );
};

export default Form;
useMemo
동일한 반복 수행을 제거하여 성능을 최적화시킨다. 첫번째 파라미터에는 함수를 전달하고 두번째 파라미터에는 함수 실행 조건을 배열로 전달한다.
import React, { useState, useMemo } from 'react';
import styled from 'styled-components/native';
import Button from './Button';

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

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

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

let idx = 0;
const Length = () => {
  const [text, setText] = useState(list[0]);

  const _onPress = () => {
    ++idx;
    if (idx < list.length) setText(list[idx]);
  };
  const length = useMemo(() => getLength(text), [text]);
    /*사용하지 않으면 값의 변경이 없더라도 계속 같은 문자열의 길이를 구한다.*/
  return (
    <>
      Text: {text}
      Length: {length}
      
커스텀 Hooks 만들기
특정 API에 GET요청을 보내고 응답을 받는 함수를 만들어보자. 이번에는 Fetch를 이용하여 uesFetch라는 이름의 Hook을 만들 것이다.
hooks/useFetch.js
import { useState, useEffect } from 'react';

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

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

  return { data, error, inProgress };
};

📝  실행 흐름 요약

컴포넌트가 처음 렌더링되면 useEffect가 실행된다.
fetchData 함수가 호출되고 inProgress가 true로 바뀐다.
fetch(url)을 실행하고 응답을 JSON으로 변환한다.
응답이 성공(res.ok)이라면 data에 결과를 저장하고 error를 null로 만든다.
응답이 실패하면 throw되어 catch로 넘어가고 error 상태에 저장된다.
try/catch가 끝나면 finally가 실행되어 inProgress가 false로 바뀐다.
최종적으로 훅은 data, error, inProgress 값을 반환한다.


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

const StyledImage = styled.Image`
  background-color: #7f8c8d;
  width: 300px;
  height: 300px;
`;
const ErrorMessage = styled.Text`
  font-size: 18px;
  color: #e74c3c;
`;
const LoadingMessage = styled.Text`
  font-size: 18px;
  color: #2ecc71;
`;

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

  return (
    <>
      {inProgress && (
        The API request is in progress
      )}
      
      {error?.message}
    
  );
};

export default Dog;

📝 실행 흐름 요약

Dog 컴포넌트가 렌더링되면 useFetch(URL)이 호출된다.
useFetch 내부의 useEffect가 실행되어 API 요청이 시작되고 inProgress가 true가 된다.
fetch로 강아지 랜덤 이미지 API를 호출하고 JSON 데이터를 받아온다.
요청이 성공하면 data에 응답이 저장되고 error는 null이 된다.
요청이 실패하면 error에 에러 정보가 저장된다.
요청이 끝나면 inProgress가 false로 바뀐다.
Dog 컴포넌트는 상태에 따라 다음을 렌더링한다:
inProgress가 true일 때 로딩 메시지를 표시한다.
data.message가 있으면 해당 url의 이미지를 StyledImage에 표시한다.
error가 있으면 ErrorMessage로 에러 메시지를 표시한다.







[처음부터 배우는 리액트 네이티브]할 일 관리 어플리케이션
Fri, 21 Nov 2025 13:30:48 GMT
할 일 관리 애플리케이션
📎 https://github.com/choi-day/react-native-todo
프로젝트 준비하기
프로젝트를 생성한다
expo init react-naitive-todo
스타일드 컴포넌트 라이브러리와 prop-types 라이브러리를 설치한다
npm install styled-components prop-types
src/App.js 작성
import React from "react";
import styled, {ThemeProvider} from 'styled-components/native'
import {theme} from './theme';

const Container = styled.View`
    flex: 1;
    background-color: ${({theme}) => theme.background};
    align-items: center;
    justify-content: center;
`;

export default function App() {
    return (
        
            
        
    )
}
App.js 수정
import App from './src/App'

export default App;

📝 현재 동작


App을 ThemeProvider로 감싼다.
theme 안에 정의된 값들이 모든 styled-component에 전달된다.
Container는 theme.background 색을 배경으로 사용한다.
flex 1로 화면 전체를 채우고, 자식을 중앙에 정렬한다.



타이틀 만들기
App.js 수정(title 삽입)
import React from "react";
import { StatusBar } from "react-native";
import styled, {ThemeProvider} from 'styled-components/native'
import {theme} from './theme';

const Container = styled.SafeAreaView`
    flex: 1;
    background-color: ${({theme}) => theme.background};
    align-items: center;
    justify-content: flex-start;
`;

const Title = styled.Text`
    font-size: 40px;
    font-weight: 600;
    color: ${({theme}) => theme.main};
    align-self: flex-start;
    margin: 20px;
`;

export default function App() {
    return (
        
            
                
                TODO List
            
        
    );
}

📝 현재 동작

화면은 SafeArea 위에서 시작됨 (노치/상단바 안 겹침)
StatusBar 텍스트는 흰색 (light-content)
Android에서는 StatusBar 배경도 theme.background 색으로 변경됨
배경은 theme.background 색
TODO List 제목은 왼쪽 상단에 크게 표시됨


Input 컴포넌트 만들기
component/input.js 작성
import React from 'react';
import styled from 'styled-components/native';
import { Dimensions, useWindowDimensions } from 'react-native';
import PropTypes from 'prop-types';
import { theme } from '../theme';

const StyledInput = styled.TextInput.attrs(({ theme }) => ({
    placeholderTextColor: theme.main,
}))`
    width: ${({ width }) => width-40}px;
    height: 60px;
    margin: 3px 0;
    padding: 15px 20px;
    border-radius: 10px;
    background-color: ${({theme}) => theme.itemBackground};
    font-size: 25px;
    color: ${({theme})=> theme.text};
`;

const Input = ({placeholder, value, onChangeText, onSubmitEditing,}) => {
    const width = useWindowDimensions().width

    return( 
        );
};

Input.propTypes = {
    placeholder: PropTypes.string,
    value: PropTypes.string.isRequired,
    onChangeText: PropTypes.func.isRequired,
    onSubmitEditing: PropTypes.func.isRequired,
  };

export default Input;

📝 Input 컴포넌트 동작

현재 화면 너비를 자동으로 가져옴 (useWindowDimensions) 
→ 기기 크기에 따라 입력창 너비 자동 조절
입력창 폭을 화면 너비 - 40px 로 설정
placeholder 색, 배경색, 글자색을 theme에서 가져와 적용
입력 이벤트를 외부에서 제어하도록 설정됨
value → 현재 입력값
onChangeText → 입력할 때마다 실행
onSubmitEditing → 엔터(완료) 눌렀을 때 실행


TextInput 공통 설정 적용됨
자동대문자 없음
자동완성/자동수정 꺼짐
returnKeyType=‘done’
iOS 다크 키보드 사용




App.js 수정
export default function App() {
    const [newTask, setNewTask] = useState('');

    const _addTask = () => {
        alert(`Add: ${newTask}`);
        setNewTask('');
    };

    const _handleTextChange = text => {
        setNewTask(text);
    }


...



📝 수정된 동작 요약

사용자가 입력창에 적는 텍스트가 newTask 에 저장됨.

입력창에서 글자 입력할 때
 → onChangeText → _handleTextChange 실행
 → newTask 값이 실시간 업데이트됨.

엔터(Submit) 키를 누르면
 → onSubmitEditing → _addTask 실행
 → 현재 입력된 newTask를 alert로 표시
 → 입력이 완료되면 newTask 값을 빈 문자열로 초기화(입력창 비워짐).

Input 컴포넌트는 newTask를 value로 받아 표시함
 → 상태 변화가 입력창에 실시간 반영됨.



할 일 목록 만들기
아이콘이 될 이미지를 assets/icons 아래 다운 받는다. 파일 명을 동일한 이름으로 사용하면서 뒤에 @2x, @3x 를 붙이면 자동으로 화면에 알맞은 이미지를 불러와 사용한다

src/images.js
import CheckBoxOutline from '../assets/icons/check_box_outline.png';
import CheckBox from '../assets/icons/check_box.png';
import DeleteForever from '../assets/icons/delete_forever.png';
import Edit from '../assets/icons/edit.png';

export const images = {
  uncompleted: CheckBoxOutline,
  completed: CheckBox,
  delete: DeleteForever,
  update: Edit,
};

📝 images.js 동작 요약

각 아이콘 이미지를 파일에서 불러온다.
체크박스 비활성
체크박스 활성
삭제 아이콘
수정 아이콘


불러온 이미지들을 하나의 객체(images)에 정리해서 저장한다.


components/IconButton.js
import React from 'react';
import { TouchableOpacity } from 'react-native';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';
import { images } from '../images';

const Icon = styled.Image`
  tint-color: ${({ theme, completed }) =>
    completed ? theme.done : theme.text};
  width: 30px;
  height: 30px;
  margin: 10px;
`;

const IconButton = ({ type, onPressOut}) => {
  return (
    
      
    
  );
};

IconButton.propTypes = {
  type: PropTypes.oneOf(Object.values(images)).isRequired,
  onPressOut: PropTypes.func,
};

export default IconButton;

📝 코드 동작 요약

IconButton은 TouchableOpacity 를 사용해 터치 가능한 버튼을 만든다.
버튼 안에는 type으로 전달된 아이콘 이미지(source) 를 표시한다.
아이콘은 styled-components로 스타일링되어 30×30 크기 + margin 10 으로 표시된다.
버튼을 떼는 순간(onPressOut) 전달된 함수가 실행된다.
type은 반드시 images 객체 안의 아이콘 중 하나여야 하고, PropTypes로 타입 검사를 한다.


components/task.js
import React, { useState } from 'react';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';
import IconButton from './IconButton';
import { images } from '../images';

const Container = styled.View`
    flex-direction: row;
    align-items: center;
    background-color: ${({ theme }) => theme.itemBackground};
    border-radius: 10px;
    padding: 5px;
    margin: 3px 0px;
`;

const Contents = styled.Text`
    flex: 1;
    font-size: 24px;
    color: ${({ theme }) => theme.text};
`;

const Task = ({ text }) => {
    return (
    
        
        {text}
        
        
    
    );
};

Task.propTypes = {
    text: PropTypes.string.isRequired
};

export default Task;

📝 Task 컴포넌트 동작 요약

Task는 한 줄짜리 할 일 아이템을 표시하는 컴포넌트이다.
왼쪽에는 완료 상태를 나타내기 위한 체크박스 아이콘이 배치된다.
가운데에는 text prop으로 전달된 할 일 내용이 표시되며, flex:1로 공간을 넓게 차지한다.
오른쪽에는 수정 아이콘과 삭제 아이콘이 각각 버튼 형태로 배치된다.
text는 반드시 문자열이어야 하고 PropTypes로 타입 검사를 한다.


기능 구현하기
할 일 추가하기
App.js 수정
export default function App() {
  const width = Dimensions.get('window').width;
  const [newTask, setNewTask] = useState('');
  const [tasks, setTasks] = useState({
    '1': { id: '1', text: 'Hanbit', completed: false },
    '2': { id: '2', text: 'React Native', completed: true },
    '3': { id: '3', text: 'React Native Sample', completed: false },
    '4': { id: '4', text: 'Edit TODO Item', completed: false },
  });

  const _addTask = () => {
    const ID = Date.now().toString();
    const newTaskObject = {
      [ID]: { id: ID, text: newTask, completed: false },
    };
    setNewTask('');
    setTasks({ ...tasks, ...newTaskObject });

    ...

   return (
    ...
    
      {Object.values(tasks)
        .reverse()
        .map(item => (
          
        ))}
    
    ...
  );
}

📝  ****추가 기능 동작 요약

기존 newTask만 관리하던 상태에 tasks라는 할 일 목록 상태 객체를 추가한다.
 → 각 할 일은 id, text, completed 필드를 가진다.

_addTask 함수는 Date.now().toString()으로 고유 ID를 생성하고,
 그 ID를 key로 갖는 새 할 일 객체(newTaskObject)를 만든다.

새로 만든 할 일을 기존 tasks와 합쳐서 상태를 갱신한다.
 → 입력창은 setNewTask('')로 비워져서 다시 입력할 수 있게 된다.

 영역에서는Object.values(tasks)로 상태에 있는 모든 할 일을 꺼내 동적 렌더링한다.

.reverse()를 사용해 가장 최근에 추가한 할 일일수록 위에 보이도록 목록 순서를 뒤집은 뒤 렌더링한다.



수정하기
App.js
const _deleteTask = id => {
  const currentTasks = Object.assign({}, tasks);
  delete currentTasks[id];
  setTasks(currentTasks);
};

...


Task.js

IconButton.js
const IconButton = ({ type, onPressOut, id }) => {
  const _onPressOut = () => {
    if (typeof onPressOut === 'function') onPressOut(id);
  };

  return (
    
      
    
  );
};

📝 삭제 기능 동작 요약

삭제 아이콘을 누르면 IconButton 내부에서 id를 포함한 onPressOut이 실행된다.
Task 컴포넌트는 deleteTask 함수에 해당 id를 전달한다.
App.js의 deleteTask 함수는 tasks 객체를 복사한 뒤 해당 id를 가진 항목을 삭제한다.
삭제된 tasks 객체를 setTasks로 다시 저장하여 화면이 갱신된다.
결과적으로 터치한 할 일 항목이 목록에서 사라진다.


완료 기능 구현
App.js
const _toggleTask = id => {
  const currentTasks = Object.assign({}, tasks);
  currentTasks[id]['completed'] = !currentTasks[id]['completed'];
  setTasks(currentTasks);
};

...


Task.js


...

{item.text}

...

const Contents = styled.Text`
  flex: 1;
  font-size: 24px;
  color: ${({ theme, completed }) => (completed ? theme.done : theme.text)};
  text-decoration-line: ${({ completed }) => 
    completed ? 'line-through' : 'none'};
`;
IconButton.js
const IconButton = ({ type, onPressOut, id, completed }) => {
  const _onPressOut = () => {
    if (typeof onPressOut === 'function') onPressOut(id);
  };

  return (
    
      
    
  );
};

📝 완료 기능 동작 요약

체크 아이콘을 누르면 IconButton 내부에서 id를 포함한 onPressOut 함수가 실행된다.
Task 컴포넌트는 전달받은 toggleTask 함수에 해당 id를 전달한다.
App.js의 toggleTask 함수는 tasks 객체에서 해당 id의 completed 값을 반전시킨다.
setTasks로 업데이트된 tasks를 저장하면 UI가 자동으로 다시 렌더링된다.
완료된 항목은 체크박스 이미지가 변경되고, 텍스트 색상과 스타일이 line-through로 바뀐다.


수정 기능 구현
App.js
const [isEditing, setIsEditing] = useState(false);
const [currentTask, setCurrentTask] = useState({});

...

const _startEditing = item => {
  setIsEditing(true);
  setCurrentTask(item);
};

...

const _updateTask = () => {
  const updatedTasks = Object.assign({}, tasks);
  updatedTasks[currentTask.id] = currentTask;
  saveTasks(updatedTasks);
  setIsEditing(false);
  setCurrentTask({});
};
Task.js
 startEditing(item)}
/>
Input.js

    isEditing
      ? setCurrentTask({ ...currentTask, text })
      : setNewTask(text)
  }
  onSubmitEditing={isEditing ? updateTask : addTask}
/>

📝 수정 기능 동작 요약

수정 기능을 위해 isEditing 상태와 현재 수정 중인 할 일을 저장하는 currentTask 상태를 추가한다.
수정 버튼을 누르면 startEditing이 실행되어 수정 모드로 전환되고, 입력창에는 해당 할 일의 텍스트가 채워진다.
입력창에서 텍스트를 변경하면 currentTask.text 값만 업데이트된다.
엔터(Submit)를 누르면 updateTask가 실행되어 해당 id의 할 일을 새로운 텍스트로 덮어쓴다.
수정 후에는 isEditing이 false가 되어 입력창이 다시 기본 입력 모드로 돌아간다.


부가기능
데이터 저장하고 불러오기
AsyncStorage를 이용해 로컬에 데이터를 저장하고 불러올 수 있다. 비동기로 동작하며 문자열로 된 키-값의 형태의 데이터를 기기에 저장하고 불러오는 기능을 제공한다. 
expo install @react-native-community/async-storage
const _saveTasks = async tasks => {
    try {
    await AsyncStorage.setItem('tasks', JSON.stringify(tasks));
    setTasks(tasks);
    } catch (e) {
    console.
    error(e);
    }
}
이후 setTasks를 _saveTasks로 바꿔준다

📝 데이터 저장 동작 요약

AsyncStorage에서 'tasks' 키로 저장된 데이터를 가져온다.
불러온 문자열 데이터를 JSON.parse 해서 tasks 상태에 넣고, 에러가 나면 콘솔에 출력한다.
할 일을 추가/삭제/완료 토글할 때마다 _saveTasks를 통해 tasks 상태를 업데이트하면서 동시에 AsyncStorage에 다시 JSON.stringify(tasks) 형태로 저장한다.


const _loadTasks = async () => {
    const loadedTasks = await AsyncStorage.getItem('tasks');
    setTasks(JSON.parse(loadedTasks || '{}'));
};

📝 데이터 불러오기 동작 요약

AsyncStorage에서 'tasks' 키로 저장된 데이터를 읽고, 없으면 빈 객체 {}를 기본값으로 사용한다.
가져온 문자열 데이터를 JSON.parse 후 tasks 상태에 넣어 화면에서 사용할 수 있게 만든다.




중간에 stylecomponents 오류가 나서 한참을 삽질하다가 아래 글을 참고하여 고쳤다... 버전때문에 오류가 많이 나는 듯 하다 
https://github.com/styled-components/styled-components/issues/5576



[처음부터 배우는 리액트 네이티브]스타일링
Thu, 13 Nov 2025 18:29:58 GMT
스타일링
스타일링
인라인 스타일링
컴포넌트에 직접 스타일을 입력하는 방식이다
    

어떤 스타일이 적용되는지 잘 보이지만 비슷한 역할을 하는 컴포넌트에 동일한 코드가 반복되고 어떤 스타일인지 명확하게 이해하기 힘들다.
클래스 스타일링
스타일시트에 정의된 스타일을 사용하는 방법이다.
const App = () => {
  return (
    
      
        Inline Styling - Text
      
      Inline Styling - Error
    
  );
};

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

export default App;
여러개의 스타일 적용

Inline Styling - Error
외부 스타일 이용하기
import React from 'react';
import { View, Text } from 'react-native';
import { viewStyles, textStyles } from './styles';

const App = () => {
  return (
    
      
        Inline Styling - Text
      
      
        Inline Styling - Error
      
    
  );
};

export default App;
리액트 네이티브 스타일
flex와 범위
다양한 크기의 기기에 대응하기 위해 이용한다. flex는 0을 받으면 설정된 width나 height값에 따라 크기가 결정되고 양수인 경우 flex에 비례하여 크기가 조정된다.
정렬

flexDirextion
column: 세로 방향 정렬
column-reverse: 세로 방향 역순 정렬
row: 가로 방향 정렬
row-reverse: 가로 방향 역순 정렬


justifyContent: flexDirextion에서 결정한 방향과 동일한 방향으로 정렬
flex-start : 시작점에서부터 정렬 (기본값)
flex-end : 끝에서부터 정렬
center : 중앙 정렬
space-between : 컴포넌트 사이의 공간을 동일하게 만들어서 정렬
space-around : 컴포넌트 각각의 주변 공간을 동일하게 만들어서 정렬
space-evenly : 컴포넌트 사이와 양 끝에 동일한 공간을 만들어서 정렬


alignItems: flexDirextion에서 결정한 방향과 수직이 되는 방향
flex-start: 시작점에서부터 정렬
flex-end: 끝에서부터 정렬
center: 중앙 정렬
stretch: alignItems방향으로 컴포넌트



그림자
iOS에서는 shadowColor, shadowOffset, shadowOpacity, shadowRadius 를 사용하여 그림자를 표현하고, 안드로이드에서는 elevation이라는 속성을 사용한다. 따라서 플랫폼마다 다른 코드를 작성해야 한다. Platform 모듈을 이용한다.
import React from 'react';
import { StyleSheet, View, Platform } from 'react-native';

export default () => {
  return ;
};

const styles = StyleSheet.create({
  shadow: {
    backgroundColor: '#fff',
    width: 200,
    height: 200,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {
          width: 10,
          height: 10,
        },
        shadowOpacity: 0.5,
        shadowRadius: 10,
      },
      android: {
        elevation: 20,
      },
    }),
  },
});
스타일드 컴포넌트
styled.컴포넌트 이름 형태 뒤에 백틱 ' 을 사용하여 만든 문자열을 붙이고 그 안에 스타일을 지정한다. 태그드 탬플릿 리터럴이라고 한다. 완성된 컴포넌트를 상속받아 이용하는 경우도 있다.
const StyledText = styled.Text`
  color: #000;
  font-size: 20px;
  margin: 10px;
  padding: 10px;
`;

const ErrorText = styled(StyledText)`
  font-weight: 600;
  color: red;
`;
스타일 적용하기
import React from 'react';
import { StyleSheet, TouchableOpacity, Text } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#9b59b6',
    borderRadius: 15,
    paddingVertical: 15,
    paddingHorizontal: 40,
    marginVertical: 10,
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: '600',
    color: '#fff',
  },
});

const Button = props => {
  return (
    
      {props.title}
    
  );
};

export default Button;
*/
import React from 'react';
import styled from 'styled-components/native';
import Button from './components/Button';

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

const App = () => {
  return (
      
        
props 사용하기
스타일이 props값에 따라 바뀌는 경우, 기존 방식으로는 스타일 시트 안에서 props에 접근할 수 있는 방법이 없다. 스타일 컴포넌트에서는 스타일을 작성하는 백틱 안에서 props에 접근할 수 있다.
const ButtonContainer = styled.TouchableOpacity`
  background-color: ${props =>
    props.title === 'Hanbit' ? props.theme.blue : props.theme.purple};
  border-radius: 15px;
  padding: 15px 40px;
  margin: 10px 0px;
  justify-content: center;
`;
const Title = styled.Text`
  font-size: 20px;
  font-weight: 600;
  color: ${props => props.theme.text};
`;

const Button = props => {
  return (
    
      {props.title}
    
  );
};

export default Button;
attrs사용하기
import React from 'react';
import styled from 'styled-components/native';

const StyledInput = styled.TextInput.attrs(props => ({
  placeholder: 'Enter a text...',
  placeholderTextColor: props.borderColor,
}))`
  width: 200px;
  height: 60px;
  margin: 5px;
  padding: 10px;
  border-radius: 10px;
  border: 2px;
  border-color: ${props => props.borderColor};
  font-size: 24px;
`;

const Input = props => {
  return ;
};

export default Input;
  return (
    
      
        
        
ThemeProvider
스타일 컴포넌트의 Context API를 활용해 애플리케이션 전체에서 스타일 컴포넌트를 이용할 때 미리 정의한 값들을 사용할 수 있도록 props로 전달한다. 
export const theme = {
  purple: '#9b59b6',
  blue: '#3498db',
};
import React, { useState } from 'react';
import { Switch } from 'react-native';
import styled, { ThemeProvider } from 'styled-components/native';
import Button from './components/Button';
import Input from './components/Input';
import { theme } from './theme';

...

const App = () => {
  return (
    
...
      
    
  );
};

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



[처음부터 배우는 리액트 네이티브]컴포넌트
Thu, 13 Nov 2025 18:27:47 GMT
컴포넌트
재사용할 수 있는 조립 블록. 화면에 나타나는 UI요소이다. 
JSX
객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능이다. 가독성이 높고, 작성하기 쉬우며 중첩 구조를 잘 나타낼 수 있다.
여러개의 요소를 표현할 경우 하나의 부모로 감싸야 한다.
  return (
    
      Open up App.js to start working on your app!
      
    
  );
여러개의 요소를 반환하고 있어 View태그로 묶어주었다. View는 div태그와 비슷한 역할을 한다. View는 화면에 보이는 레이아웃 요소이다. 단순히 여러개의 컴포넌트를 반환하고 싶은 경우 Fragment컴포넌트를 사용한다. 로 사용해도 되고 <>로 단축 문법을 사용해도 된다.
내부에서 자바스크립트 변수를 전달하여 이용
export default function App() {
  const name = 'Dayeon';
  return (
    
      My name is {name}
      
    
  );
}
자바스크립트 조건문
조건에 따라 나타나는 요소를 다르게 하고 싶을 때 JSX에서 조건문을 사용할 수 있다. 다만 제약 조건이 있어 밖에서 조건에 따른 값을 설정하고 JSX내부에서는 간단하게 작성하는 것이 깔끔하다.

if문
  const name = 'Dayeon';
  return (
    
      
        {(() => {
          if (name === 'Hanbit') return 'My name is Hanbit';
          else if (name === 'Dayeon') return 'My name is Dayeon';
          else return 'My name is React Native';
        })()}
      
      
    
  );

삼항연산자
  export default function App() {
    const name = 'Dayeon';
    return (
      
        
          My name is {name === 'Dayeon' ? 'Dayeon Choi' : 'React Native'}
        
        
      
    );
  }

AND, OR연산자
  export default function App() {
    const name = 'Dayeon';
    return (
      
        {name === 'Dayeon' && (
          My name is Dayeon
        )}
        {name !== 'Dayeon' && (
          My name is not Dayeon
        )}
        
      
    );
  }

null과 undefined
  null은 허용하지만 undefined는 허용하지 않는다

주석
  JSX의 주석은 {/* /}을 사용한다. 단, 태그 안에서는 // 나 / */를 사용한다.

스타일링
  HTML과 달리 객체 형태로 입력해야 한다. 그리고 하이픈으로 연결된 이름은 카멜표기법으로 바꾸어 작성해야한다.
  const App = () => {
    return (
      
      ‹Text>Open up App.js to start working on your app!
      
    );
  };


컴포넌트
Core Components and APIs · React Native
위 공식 문서에서 다양한 내장 컴포넌트를 확인할 수 있다. 
Button 컴포넌트 예시

  Button Component
  

title 속성: 버튼 내부에 출력되는 텍스트
onPress 속성: 버튼이 눌렸을 때 호출되는 함수
color: ios에서는 텍스트 색상, android에서는 바탕색

이전에 Flutter를 할 때에는 모든 플랫폼에 동일하게 적용되었었는데, RN은 아니라고 하여 그 이유를 찾아보았다. Flutter는 자체적인 엔진(Skia)을 사용하지만 RN은 네이티브의 위젯을 가져와 사용해서 OS별로 다르게 나올 수 있다고 한다.
커스텀 컴포넌트 만들기
여러 내장 컴포넌트를 조합하여 새로운 컴포넌트를 만들 수 있다.
import React from 'react';
/*리액트를 불러옴*/
import { TouchableOpacity, Text } from 'react-native';
/*RN에서 제공하는 TouchableOpacity, Text컴포넌트 추가*/
const MyButton = () => {
  return (
     alert('Click !!!')}
    >
      My Button
    
  );
};
props와 state
props
properties를 줄인 표현으로 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값을 말한다. 부모로부터 받은 props를 사용할수는 있지만 변경은 불가능하다.

/*MyButton 컴포넌트에게 title이라는 이름의 데이터를 넘긴다*/
const MyButton = props => {
  return (
    
      
        {props.title} /*props를 전달받아 출력*/
      
    
  );
};
컴포넌트 태그 사이에 값을 입력하여 전달할 수도 있다
Children Props
const MyButton = props => {
  return (
    
      
        {props.children || props.title}
      
    
  );
};
태그 사이로 전달된 값은 children으로 전달된다. props에 children이 있다면 title보다 우선시된다. 
defaultProps
MyButton.defaultProps = {
  title: 'Button',
};
기본값을 자식 컴포넌트에서 지정할 수 있다.
propTypes
잘못된 props가 전달되었을 때 PropTypes를 사용한다.
import PropTypes from 'prop-types';

...

MyButton.propTypes = {
  title: PropTypes.number.isRequired,
};
propsType을 number로 지정해주었다. isRequired를 붙여주면 필수 전달 여부를 지정할 수 있다. propsType에는 이 외에도 string, func, object, array등이 있다.
state
컴포넌트 내부에서 생성되고 값을 변경할 수 있으며 컴포넌트 상태를 관리한다. 상태가 변하면 컴포넌트는 리렌더링한다.

useState
  함수형 컴포넌트에서 상태를 관리할 수 있도록 해준다.
  import React, { useState } from 'react';
  import { View, Text } from 'react-native';
  import MyButton from './MyButton';

  const Counter = () => {
    const [count, setCount] = useState(0);
    /*상태 관리 변수와 변수를 변경할 수 있는 세터 함수를 배열로 반환, 0으로 초깃값 설정*/
    return (
      
         {
            setCount(count + 1); /*버튼을 누르면 count +1*/
          }
        />
         {
            setCount(count - 1); /*버튼을 누르면 count -1*/
          }
        />
      
    );
  };

  export default Counter;
  useState는 여러개일 수 있다. 관리해야 하는 상태의 수만큼 useState를 사용한다.



React Native = 선언적(Declarative) UI + Virtual DOM 기반
   → 상태가 변하면 React가 “무엇을 다시 그릴지” 판단
   → 개발자는 신경 안 써도 됨


Flutter = 자체 렌더링 엔진 + 위젯 트리 직접 재구성
     → 업데이트할 시점을 개발자가 알려줘야 함
    → 대신 성능이 매우 빠르고 일관적임

이벤트
press이벤트
onClick이벤트와 비슷한 이벤트이다. TouchableOpacity 컴포넌트에서 설정할 수 있는 press 이벤트의 종류는 4가지이다.


onPressln: 터치가 시작될 때 항상 호출



onPressOut: 터치가 해제될 때 항상 호출
onPress: 터치가 해제될 때 onPressOut 이후 호출
onLongPress: 터치가 일정 시간 이상 지속되면 호출

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const EventButton = () => {
  const _onPressIn = () => console.log('Press In !!!\n');
  const _onPressOut = () => console.log('Press Out !!!\n');
  const _onPress = () => console.log('Press !!!\n');
  const _onLongPress = () => console.log('Long Press !!!\n');

  return (
    
      Press
    
  );
};

export default EventButton;
onPress와 onLongPress는 사용자가 클릭하는 시간에 따라 둘 중에 하나만 호출된다.
change 이벤트
import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';

const EventInput = () => {
  const [text, setText] = useState('');
  const _onChange = event => setText(event.nativeEvent.text);

  return (
    
      text: {text}
      
    
  );
};

export default EventInput;
위와 같이 텍스트만 변화될 경우 onChangeText를 사용하면 더 간편하다. 컴포넌트의 텍스트가 변경되었을 때 변경된 텍스트의 문자열만 인수로 전달하며 호출된다.
Pressable컴포넌트
기존의 TouchableOpacity 컴포넌트를 대체하는 Pressable 컴포넌트이다. 기존의 컴포넌트보다 더 다양한 기능을 제공한다. 
import React from 'react';
import { View, Text, Pressable } from 'react-native';

const Button = (props) => {
  return (
     console.log('Press In')}
      onPressOut={() => console.log('Press Out')}
      onPress={() => console.log('Press')}
      onLongPress={() => console.log('Long Press')}
      delayLongPress={3000}
      pressRetentionOffset={{ bottom: 50, left: 50, right: 50, top: 50 }}
      hitSlop={50}
    >
      {props.title}
    
  );
};

const App = () => {
  return (
    
      
HitRect와 PressRect를 이용하여 이벤트 발생 범위를 조절할 수 있다. hitSlop값에 따라 PressRect의 범위가 달라진다.



데이터베이스 - CHATER 2. 관계 데이터 모델 (1)
Sun, 27 Mar 2022 13:41:35 GMT
관계 데이터 모델의 개념
릴레이션의 개념

릴레이션(relation)은 행과 열로 구성된 테이블을 말한다. relation의 사전적 정의는 '관계'이지만 뒤에 나오는 relationship과의 충돌을 피하기 위해 '관계'라고 하지 않는다. 

relation은 집합에서 나온 개념이다. 위의 도서 relation의 경우 4개의 집합으로 이루어져있으며 각 집합은 다음과 같다.
도서번호 = {1, 2, 3, 4}
도서이름 = {축구의 역사, 축구아는 여자, 축구의 이해, 골프 바이블, 피겨 교본}
출판사 = {굿스포츠, 나무수, 대한미디어
가격 = {7000, 13000, 22000, 35000, 8000}
위 표에서 첫번째 행의 경우 네 개의 집합에서 각각의 원소를 하나씩 선택하여 만들어진 것으로 이 원소들이 relationship을 맺고 있다. 
relationship에는 relation내의 관계와 relation간의 관계가 있다. 
릴레이션 스키마와 인스턴스

relation은 schme와 instance로 이루어진다. 

스키마(schme)
관계 데이터베이스의 릴레이션이 어떻게 구성되는지, 어떤 정보를 담고 있는지에 대한 기본적인 구조를 정의한다.

인스턴스(instance)
정의된 스키마에 따라 테이블에 실제로 저장되는 데이터의 집합이다. 


위의 도서 릴레이션에서, 열(column)은 속성(attribute)라고도 하며 개수를 표현할 땐 차수(dgree)라는 표현을 사용한다. 속성이 가질 수 있는 값의 집합을 도메인(domain)이라고 한다.
행(row)은 튜플(tuple)이라고도 하며 수를 표현할 땐 카디널리티(cadinality)라는 표현을 사용한다. 
릴레이션의  특징

속성은 단일 값을 가진다. 
속성은 서로 다른 이름을 가진다.
한 속성의 값은 모두 같은 도메인을 가진다.
한 속성의 값은 모두 같은 도메인 값을 가진다.
속성의 순서는 상관이 없다.
릴레이션 내의 중복된 투플은 허용하지 않는다.
투플의 순서는 상관없다.

관계 데이터 모델
 관계 데이터 모델은 데이터를 2차원 테이블 형태인 릴레이션으로 표현하며 릴레이션에 대한 제약조건과 관계 연산을 위한 관계대수를 정의한다. 
 관계 데이터 모델을 컴퓨터 시스템에 구현한 것을 관계 데이터베이스 시스템이라고 한다. 관계 데이터베이스 시스템은 관계 데이터 모델에 기초하여 SQL로 수행하고, 릴레이션에 대한 제약조건을 SQL을 기반으로 구현된다.
키(key)
 특정 튜플을 식별할 때 사용하는 속성(attribute) 혹은 속성의 집합이다. 키가 되는 속성은 반드시 값이 달라서 튜플들을 서로 구별할 수 있어야 한다. 키는 릴레이션간 관계를 맺는 데도 사용한다.

슈퍼키(super key)
튜플을 유일하게 식별할 수 있는 하나의 속성 혹은 속성의 집합.

후보키(candidate key)
튜플을 유잃게 식별할 수 있는 속성의 최소 집합. 

복합키(composite key)
두 개 이상의 속성으로 이루어진 키.

기본키(primary)
여러 후보키 중 하나를 선정하여 대표로 삼는 키. 
기본키를 선정할 때엔 다음과 같은 고려사항이 있다.



릴레이션 내 튜플을 식별할 수 있는 고유한 값을 가져야 한다. 

NULL값는 허용하지 않는다.

키값의 변동이 일어나지 않아야 한다.

최대한 적은 수의 속성을 가진 것이어야 한다.

향후 키를 사용하는 데 있어서 문제 발생 소지가 없어야 한다.
릴레이션 스키마를 표현할 때 기본키는 밑줄을 그어 표시한다.
데이터베이스에 저장된 데이터는 결함이 없어야 하며 질의에 대해 신뢰성 있는 답을 제공해야 한다.





JAVA 1. 자바 시작
Wed, 23 Mar 2022 05:34:08 GMT
JAVA의 시작
 JAVA는 제임스 고블링에 의해 개발되었다. 기존의 불편한 방식을 없애기 위해 플랫폼으로부터 독립적이며 메모리 사용량이 적은 새로운 언어를 만들기를 희망했고, 그렇게 탄생된 것이 JAVA이다. 
 JAVA는 플랫폼 종속성을 극복하여 C, C++와는 다르게 운영체제나 하드웨어에 상관없이 자바 가상 기계(JVM - Java Virtual Machine)가 있으면 어디서나 동일한 실행 결과를 기대할 수 있다. 이를 WORA(Write Once Run Anywhere)라고 한다.
  자바 프로그램도 여러 소스파일(.java)로 나누어 작성하며 자바 컴파일러는 각 소스 파일을 컴파일하여 클래스 파일(.class)을 생성한다.하지만 자바에서는 이들을 하나의 실행파일(.exe)로 묶는 링크의 과정이 없다. 이런 과정으로 자바로 작성 된 프로그램은 적은 메모리를 가진 컴퓨터에서도 실행될 수 있다.
JDK와 JRE
  JDK(Java Development Kit)는 자바 개발자에게 무료로 배포하는 소프트웨어로 개발 도구와 JRE(Java Runtime Enviroment)로 구성된다. 
  
  https://www.oracle.com/java/technologies/downloads/ 에서 다운받을 수 있다.
자바 API
  자바 API(Application Programing Interface)는 개발자들이 사용하도록 미리 만들어놓은 유용한 자바 클래스들의 집합이다. API에 대한 설명은 https://docs.oracle.com/en/java/javase/17/docs/api/index.html 에서 볼 수 있다. 
자바 IDE
  IDE는 통합 개발 환경이다. 나는 eclipse를 사용할 예정이다. 



데이터베이스 - CHAPTER 1. 데이터베이스 시스템
Mon, 14 Mar 2022 11:26:41 GMT
데이터베이스와 데이터베이스 시스템
데이터베이스의 개념 및 특징

데이터(data)
관찰의 결과로 나타난 정량적 혹은 정성적인 실제 값
정보(information)
데이터에 의미를 부여한 것
지식(knowledge)'
사물이나 현상에 대한 이해


데이터베이스(database)
조직에 필요한 정보를 얻기 위해 논리적으로 연관된 데이터를 모아 구조적으로 통합 해놓은 것


통합된 데이터(intergrated data)
데이터를 통합하는 개념으로 각자 사용하던 데이터의 중복을 최소화하여 중복으로 인한 데이터 불일치 현상을 제거
저장된 데이터(stored data)
문서로 보관된 데이터가 아니라 디스크, 테이프 같은 컴퓨터 저장장치에 저장된 데이터를 의미
운영 데이터(operational data)
조직의 목적을 위해 사용되는 데이터를 의미. 즉 업무를 위한 검색을 할 목적으로 저장된 데이터
공용데이터(shared data)
한 사람 또는 한 업무를 위해 사용되는 데이터가 아니라 공동으로 사용되는 데이터를 의미

데이터베이스 시스템의 구성

데이터베이스는 보통 하드디스크에 저장이 되어있는 데이터의 모임이라고 생각하면 된다. 

DBMS(Data Base Management System)
데이터베이스 관리시스템이다. 이 소프트웨어를 작동시켜야 데이터베이스를 다룰 수 있다.


데이터베이스 사용자
DBMS를 사용하는 user는 4가지로 나눌 수 있으며 이들은 직접 데이터베이스를 다루는 것이 아니라 응용프로그램(application)을 이용하여 데이터에 접근한다. 


데이터베이스 언어
데이터베이스 시스템은 데이터베이스 전용 언어인 SQL을 사용한다.  


3단계 데이터베이스 구조

3단계 데이터베이스 구조는 외부단계, 개념단계, 내부단계로 나뉜다. 스키마(schema)는 조직이나 구조를 의미한다. 

외부단계
일반 사용자나 응용프로그래머가 접근하는 계층으로 데이터베이스 전체 중에서 하나의 논리적인 부분을 의미한다. 서브 스키마(subschema)라고도 부른다.

개념단계
전체 데이터베이스의 정의를 의미한다. 통합 조직별로 하나만 존재하며 DBA가 관리한다. 

내부단계 
물리적인 저장장치에 데이터베이스가 실제로 저장되는 방법의 표현이다.


DBMS는 매핑(mapping)을 통하여 각 단계간 대응 관계를 정의한다. 

외부/개념 매핑
사용자의 외부 스키마와 개념 스키마 간의 매핑으로 외부 스키마의 데이터가 개념 스키마의 어떤 부분에 해당하는지 대응시킨다.

개념/내부 매핑 
개념 스키마의 데이터가 내부 스키마의 물리적 장치 어디에 어떤 방법으로 저장되는지 대응시킨다. 


데이터 독립성
데이터 독립성은 하위 단계의 내용을 추상화하여 상위 단계에 그 세부사항을 숨김으로써 한 단계 내의 변경에 대해 다른 단계와의 상호 간섭이 없도록 하는 것이다.

논리적 데이터 독립성(logical data independence)
외부 단계와 개념 단계 사이의 독립성. 개념 스키마가 변경되어도 외부 스키마에는 영향을 미치지 않도록 지원한다.

물리적 데이터 독립성(phygical data independence)
개념 단계와 내부 단계 사이의 독립성. 내부 스키마가 변경되어도 개념 스키마에는 영향을 미치지 않도록 지원한다. logical data independence보다 구현하기 쉽다. 





Python 9. 클래스와 객체 지향 프로그래밍
Sat, 12 Mar 2022 02:29:31 GMT
class
클래스는 속성/필드, 메소드로 구성된다.

속성/필드(attribute/filed): 데이터 멤버, 변수 등
메소드(method): 클래스 내부의 함수

클래스를 생성할 때엔 특수인자인 self를 사용한다. 다른 이름을 사용해도 되지만 self가 관례적이다. 자신을 참조하는 인자이다. 생성자는 객체 생성시 호출 되는 특수한 메소드로 앞 뒤에 언더바(_)가 2개씩 붙어있다.
객체(object)는 클래스의 개체(instance)이다. '클래스'라는 것은 일종의 타입, 형태이고 그 안에 속하는 것이 객체, 클래스의 개체이다.  

불필요한 정보는 숨기는 것이 좋다. 외부에서 접근할 수 없도록 하면 내가 직접 수정을 하더라도 외부에서는 영향을 받지 않기 때문이다. 이렇게 정보를 숨기는 것을 정보 은닉(information hiding) 이라고 한다. 일부만 열여두고 나머지는 숨기는 캡슐화(encapsulation)를 사용하여 재사용성을 높일 수 있다.

공개(public): 외부에서도 접근 가능
비공개(private) member: 내부에서만 접근 가능
-> 2개 이상의 '_'로 시작, 끝에는 1개 이하의 '_'를 사용하면 정보가 비공개된다. 





Python 8. 예외 처리와 파일
Sat, 12 Mar 2022 02:29:12 GMT
예외처리
어떤 프로그래밍 언어에서 정해진 문법을 따르지 않는 명령이 입력되어 프로그램이 문제를 일으키는 것을 오류라고 한다. 
오류의 종류와 특징
많은 프로그램에서 오류를 수행 전에 찾기 어려운 경우가 있다. 파이썬 인터프리터에서 오류 정보를 제공하고 프로그램은 오류를 역추적하여 오류가 발생한 곳에서 오류의 종류를 출력한다. 다음은 오류의 종류이다.

구문오류: print()함수에서 따옴표를 빼먹는 등의 오류. 문법오류라고도 한다.
값 오류
인덱스 오류
0으로 나누기 오류
파일 가져오기 오류

예외처리
예외란 구문상의 오류는 없으나 실행 도중에 만나게 되는 오류이다. 이런 오류를 다루는 기술을 예외처리기술이라고 한다.
이 때는 try-except문의 문법을 사용한다. try절에는 예외가 발생할 우려가 있는 코드를, except 절에는 오류가 발생했을 때 처리할 내용을 담는다.

try-except문을 이용함으로써 프로그램은 갑작스럽게 종료되지 않고 사용자에게 대처할 수 있는 방법을 제시할 수 있으며 이전의 프로그램에 비해 안정적으로 작동한다. 
만약 어떤 예외 상황에서 except가 실행되었는지 알고 싶을 경우 Exception as e 라는 문법을 통해 Exception 변수 e를 선언한 후 다음과 같이 e 값을 출력하면 오류의 종류를 알 수 있게 된다. 
except Exception as e:
    print('error:', e)
except다음에 오류 메세지를 적어주면 해당 오류가 발생했을 때 실행할 코드를 작성할 수 있다. 여러 except구문이 있으면 위에서부터 차례대로 검사한다. 파이썬 페이지에서 내장 예외의 클래스 계층 구조를 확인할 수 있다.

try-except-else문이 있다. 예외가 발생하지 않을 경우 else문을 사용하여 그 결과값을 출력한다. else문이 가장 마지막에 와야 한다.
try-except-finally문이 있다. finally는 예외의 발생 여부와 상관 없이 항상 실행한다. 
raise를 이용하여 강제로 예외 발생이 가능하다. raise문에 의해서 Exception이 발생되어 파이썬 인터프리터 프로그램이 그 과정을 추적하였다는 출력이 뜬다.
파일 입출력
파이썬에서 파일을 사용하기 위한 절차가 있다. 파일을 경로를 통해 열어서 사용목적에 따라 사용하고 마지막에는 꼭 파일을 닫아야 한다. 그 메모리를 시스템에서 사용할 수 있도록 반환해주는 것이다. 
파일을 열 때는 open()이라는 함수를 사용하고 닫을 때는 close()라는 메소드를 사용한다. 파일을 열 때 경로를 설정하지 않았다면 파이썬 스크립트파일이 있는 위치의 파일을 연다. 그 뒤에 오픈모드를 설정하여 가져온다. 
파일 열기
 open함수는 파이썬에서 파일을 다루는 핵심 함수이다. 파일 이름과 파일 오픈 모드의 인자를 가질 수 있다. encoding이라는 인자를 통해 파일의 인코딩 형식을 지정 가능하다. 지정된 경로가 없을 경우 디폴트 경로는 파이썬 스크립트 파일이 있는 곳이 된다.
 
 오픈 모드들이다. 기본적으로 4가지가 제공되고 +를 이용하여 추가적으로 모드를 설정할 수 있다.
 
 이진 파일을 다룰지 텍스트 파일을 다룰지 지정하는 모드이다. 디폴트값은 t이며 b는 이진 파일 형식으로 파일을 열거나 생성한다.
 
파일 읽기
read()메소드를 통해서 파일을 읽어올 수 있다. 파일의 모든 문자열은 줄 바꿈에 관계없이 하나의 문자열로 반환된다. 인자로 수를 주면 그 수만큼의 문자를 읽어와서 반환한다.
readline()메소드는 줄별로 파일을 읽어올 수 있다. 우리 눈에는 보이지 않지만 줄바꿈이 일어났다면 그 뒤에는 줄바꿈문자가 포함되어있는 것이다. readline()함수는 그 줄바꿈문자까지 포함하여 읽어온다. print를 사용하여 출력한다면 readline과  print에 의해서 두 번 줄바꿈이 된다. 한 번만 줄바꿈을 하고 싶다면 end를 사용한다. 또는 rstrip()메소드를 사용하여 마지막에 나오는 문자를 삭제할 수 있다. 
파일 추가하기
'a'모드를 사용한다. 추가모드로 이미 있는 파일 뒤에 새로운 내용을 입력한다. w모드는 기존의 내용을 초기화하고 내용을 삽입한다는 것과 차이가 있다.



Python. 7-1. 모듈과 활용
Sat, 13 Nov 2021 17:14:13 GMT
모듈
모듈이란 파이썬 함수나 변수 또는 클래스를 모아놓은 스크립트 파일이다. 파이썬은 수많은 개발자들에 의해서 개발된 많은 모듈이 있다. 만들어진 모듈을 가져올 때에는  'import' 와 함께 모듈 이름을 써 준다. 사용할 때에는 모듈 이름에 점을 찍은 후 모듈 안의 구성요소를 작성한다. 파이썬 설치와 함께 제공되는 모듈을 파이썬 표준 라이브러리 라고 한다. 날짜, 시간, 수학함수 등과 관련된 모듈이 있다. 구글에 python documentation이라고 검색해보면 모듈을 모아둔 문서를 볼 수 있다.
dir()함수는 모듈이 가진 클래스의 목록을 출력해준다. import로 모듈을 불러낸다음 사용해야한다.
매번 "모듈이름.클래스이름.메소드이름" 을 점 연산자로 구분해서 적는 것은 매우 번거롭다. as구문을 사용하여 모듈 이름을 입력하는 사람이 임의로 정한 별칭으로 간단하게 줄일 수 있다. 
--> import 모듈이름 as 모듈의 별칭
"모듈이름.클래스이름.메소드이름" 방식의 호출을 간단하게 하는 방법으로 "from 모듈import 클래스,함수" 구문이 있다. 그 뒤로는 모듈 이름 또는 클래스 이름 없이 코드를 짤 수 있다. 
날짜와 시간 모듈 datetime
날짜와 시간에 관한 기능을 제공하고 조작할 수 있는 모듈이다.

앞의 datetime은 모듈의 이름, 뒤는 클래스의 이름을 의미한다. now라는 메소드는 현재 시간을 알려주는 메소드이다. 시간은 객체의 형태로 반환된다. 

date 클래스의 today()메소드는 현재 날짜를 반환하는 메소드이다. 

datetime 클래스의 replace()메소드는 날짜나 시간 값을 변경할 수 있는 메소드이다. 

datetime모듈을 이용하여 크리스마스까지 남은 시간을 계산해보았다. 


timedelta 클래스는  +,- 연산을 이용하여 시간의 연산이 가능하다. 위의 사진은 timedelta에 들어가는 인자를 적은 표이다. 
time 모듈
time모듈은 시간에 관련된 정보를 제공하는 모듈이다. 유닉스 시스템의 시작 시간은 1970년 1월 1일 0시 0분 0초 협정 세계시를 에폭이라고 한다. 유닉스 운영체제에서 표준으로 사용되는 시간체계는 에폭 시간 혹은 유닉스 시간이라고도 한다. 
sfrttime()은 localtime()함수가 반환한 struct_time 이라는 형식의 튜플 값을 지정된 포맷의 문자열로 변환한다.
math 모듈



Python 6-2. 딕셔너리, 튜플, 집합
Sun, 07 Nov 2021 05:29:01 GMT
딕셔너리
딕셔너리는 키와 값을 쌍으로 갖는 자료형이다. 키를 이용하여 값을 참조하는 특성을 지니고 있다. 딕셔너리의 항목은 {[키]:[값], [키]:[값]} 의 형식으로 나타낸다. 리스트와는 다르게 중괄호를 사용한다는 점에 주의 해야 한다.

딕셔너리를 만들고 참조하는 방법이다. 키와 값에 형의 제한은 없다. 다만 키의 값은 유일해야한다. 값은 중복이 허용된다. 
딕셔너리의 삽입과 삭제
딕셔너리에 새로운 항목을 삽입하려면 딕셔너리이름[키] = 값 을 입력한다. 

항목에 키가 4이고 값이 99인 새로운 항목이 추가되었다. 2라는 키가 가진 항목이 중복되었으므로 앞의 입력은 무시되었다. 만약 이미 존재하는 키에 다른 값을 입력한다면 값이 변경된다.

만약 어떤 항목을 삭제하고 싶다면 del키워드 다음에 삭제할 딕셔너리의 키값을 입력하면 된다. 그러나 존재하지 않는 항목을 삭제하면 KeyError오류가 발생한다. 
딕셔너리를 위한 함수와 연산


len(): 딕셔너리 내의 항목의 수를 얻기 위해 사용
in, not in: 키가 딕셔너리에 있는지 확인
==, != : 두 개의 딕셔너리가 동일한 항목을 가지고 있는지 확인


딕셔너리의 메소드이다. items 메소드를 통해 반환되는 항목들은 괄호 내에서 쉼표로 구분되어있다. 이것은 리스트나 튜플이 아닌 dict view object라는 특정 개체를 반환한다. 

이 개체는 반복이 가능하기 때문에 for문을 사용할 수 있다. 이것은 딕셔너리도 마찬가지이다. 여기서 주의할 점은 딕셔너리에서 값을 받는 n은 값이 아닌 키라는 점이다. 만약 값을 출력하고 싶다면 d.values를, 키와 값의 쌍을 받고 싶다면 d.items를 입력한다. 이 때 d.items를 입력 후 나온 결과값은 튜플의 형태이다.

person의 항목에서 없는 항목을 가져오려 한다면 KeyError가 발생하고 프로그램이 종료되지만 get 메소드는 없는 항목을 가져오려고 한다면 None을 반환한다. 만약 어떤 키의 값이 None이라면 get 메소드를 사용하였을 때 당연히 None을 반환한다. 두 경우를 헷갈리지 않도록 주의해야한다. 두 경우를 구분하는 방법은 in 연산을 사용하는 것이다.
리스트와 딕셔너리의 비교

딕셔너리는 키의 값도 저장해야하기때문에 저장공간이 많이 필요하다. 

리스트에서는 앞의 값이 삭제되면 앞으로 당겨진다. 그러나 딕셔너리에서는 앞의 값이 삭제되어도 키와 값의 쌍은 변하지 않는다. 리스트에서는 정의된 순서가 의미가 있지만 딕셔너리에서는 의미가 없다. 

리스트는 대괄호를, 딕셔너리는 중괄호를 사용한다. 값에 접근하려면 리스트는 인덱스 번호를, 딕셔너리는 키를 이용한다. 

튜플
튜플은 여러 개의 요소를 가지는 컬렉션 자료형이다. (1, 10, 30)과 같이 소괄호를 사용하며 쉼표로 구분을 한다. 튜플도 리스트와 마찬가지로 인덱스를 사용한다. 그러나 리스트와는 달리 한 번 정해진 요소의 순서를 바꿀 수 없다. 또한 튜플 내부의 객체를 변경하거나 삭제하는 것도 불가능하다는 교환불가능(immutable) 속성을 가지고 있다. 

튜플을 생성하는 여러가지 방법이다. 리스트와 비슷한 부분이 많다. 

튜플은 내부의 값을 변경할 수 없으므로 개별 항목에 대한 할당 연산은 오류를 발생시킨다.

패킹은 하나의 변수에 여러 개의 값을 넣는 것을 의미하며, 언패킹은 그 반대로 패킹된 변수가 있으면 여기에서 여러 개의 값을 꺼내오는 것을 의미한다. 
a,b = b,a라는 한 줄을 이용하여 두 변수의 값을 바꾸는 스왑을 할 수 있다. 효율성이 좋고 코드가 직관적이다. 
튜플의 연산

튜플 역시 +와 *연산을 사용할 수 있다. +현산은 피연산 튜플의 원소들을 서로 연결하는 기능을 가지고 있다. *은 튜플과 정수 사이의 연산이 되어야한다.
튜플의 메소드
튜플에서 사용되는 메소드는 다음과 같다.

count(x) : 튜플 내에 특정 값 x가 몇 개 있는가를 알려준다.
index(x) : 튜플 내의 특정 값 x의 위치를 알려준다. 

튜플 내의 항목을 변경하고 싶다면 튜플을 list()함수를 사용하여 리스트로 변경한 뒤 이 리스트의 값을 변경시킨 후, tuple()함수를 사용하여 다시 리스트를 튜플로 만드는 방법을 사용한다. 
집합
집합은 순서가 없는 자료형이다. 중복이 허용되지 않으므로 인덱스를 사용하지 못한다. 동일한 값을 가지는 항목의 중복이 허용되지 않는다. 교집합, 합집합, 차집합 등의 집합 연산 수행이 가능하다. 집합은 중괄호를 이용하여 나타낸다. 

집합을 만드는 여러가지 방법이다. 빈 집합을 만들 때 {}라고 한다면 이것은 딕셔너리를 의미하므로 주의해야 한다.
집합의 메소드
집합의 메소드는 다음과 같다

add, discard, clear는 집합이 변경 되는 것, union, difference, intersection, symmetric_difference는 새로운 집합을 반환하는 것이다. 
교집합은 &, 합집합은|, 차집합은 -, 대칭 차집합은 ^연산을 사용한다.
곱집합(데카르트 곱)

곱집합이란 집합 A의 모든 원소 a와 집합 B의 모든 원소 b를 이용해 만들 수 있는 튜플 (a,b)의 집합이다. 곱집합은 AXB로 표현한다.

*연산자는 패킹 기능을 하는 연산자라고 할 수 있다. 함수에서 입력 받을 때 *이면 튜플, 즉 위치인자를 **이면 딕셔너리 형태로 키워드 인자를 묶어서 전달한다.

*, ** 연산자가 인자를 받는 곳이 아닌 다른 곳에서 쓰인다면 언패킹의 의미를 갖고 있다. 

첫번째 줄에서 c는 3, 4, 5, 6이 패킹된 리스트의 형태로 전달이 된다.

위 내용을 이용하여 곱집합을 출력하는 내용이다.
zip()함수를 이용한 집적화
리스트, 딕셔너리, 집합, 튜플과 같은 자료형은 하나씩 꺼내어 반복하여 처리할 수 있는 자료형이므로 반복가능자료형이라고 한다. 반복가능 자료형 여러 개 인자로 넘겨주면, 이들을 합쳐서 튜플 반복자를 반환하는 함수이다. zip()함수는 다음과 같이 여러 개의 반복가능 자료형을 받을 수 있다. 이를 집적화라고 한다. 

집적화된 개체들은 하나의 튜플 형태로 저장된다. 한 번 z를 사용한다면 그 원소들은 모두 사라지고 그 안에 남아있는 원소는 없게 된다. 

집적화는 두 묶음에서 서로 같은 위치에 있는 것끼리 모은다. 
문자열을 원소로 하는 리스트를 반복가능 자료로 zip()함수에 넘긴 경우 생성되는 원소가 튜플이리 때문에 'a'가 아니라 'a'라는 하나의 원소를 가진 튜플로 반환됨에 주의해야 한다.

원소의 개수가 다르다면 가장 짧은 원소를 기준으로 묶음을 만든다. 
zip()함수를 통해 묶여진 튜플들을 원래의 반복가능 자료들로 되돌리는 작업을 하고 싶다면 zip()함수에 묶인 자료를 인자로 입력하고 *연산자를 인자 앞에 붙인다.




Python 5-2. 함수(2)
Thu, 14 Oct 2021 16:58:42 GMT
재귀함수
함수 내부에서 자기 자신을 호출하는 함수이다. 절차적 기법으로 해결하기 어려운 문제를 직관적이고 간단하게 해결 가능하다. 

재귀함수를 이용하여 팩토리얼을 계산하는 프로그램을 구현하였다.
팩토리얼은 n! = n * (n-1)! 으로 정의될 수 있고, 팩토리얼을 나타낼 때 팩토리얼을 사용하는 재귀적 정의를 사용하였다. 이것을 이용하여 재귀함수로 프로그래밍을 할 수 있다.

재귀함수를 이용하여 피보나치수열을 구하는 프로그램을 구현하였다. 피보나치 수열은 앞의 두 수 n, n+1번째 수를 더하여 n+2번째 수를 구하는 수열이다. 
함수와 메소드
용어를 정리해보자

메소드(method): 특정한 객채 유형에 적용할 수 있는 기능
구분자(separator): 한 문자열을 하나 이상의 개별 문자열로 나누는 문자
베이스(base): 출력 메소드 fomat을 호출하는 문자열
플레이스홀더(placehoder)=대치 필드(replacement field): 인자의 출력을 목적으로 사용되는 중괄호. {}가 있는 곳으로 가서 인자가 출력이 된다. 여러개의 대치필드와 인자가 있다면 순서대로 대응된다.

입출력 관련 메소드
한꺼번에 여러 개의 입력 값을 받을 때 사용한다. split() 메소드는 입력된 문자를 공백 단위로 나누어준다. 입력받은 것은 모두 string형식, 즉 문자열이다. 만약 다른 형으로 입력을 받고 싶다면 형 변환을 해야 한다. 

구분 단위를 공백이 아닌 다른 것을 사용하고 싶다면 인자로 제시해준다. 

문자의 대소를 전환해주는 여러가지 메소드이다. 
format 메소드

{}안에 숫자를 사용하여 다양한 출력이 가능하다. 예를들어 {0}은 인자 중 가장 먼저 나오는 인자, {1}은 두번째 인자가 된다. format() 내부에는 문자열 리터럴 뿐만 아니라 변수나 객체도 넣을 수 있다. 중간에 뜬 오류는 오타에 의한 것이다. 

출력 간의 크기 지정을 할 수 있다. d는 decimal로 10진수를 의미하며 10진수로 출력한다는 뜻이다. 이 예제에서는 생략해도 무관하다. d앞의 수는 field width, 즉 필드 폭으로 3칸을 잡고 오른쪽 정렬하여 출력한다는 의미이다.

{}안에서 f는 실수를 출력한다는 의미이다. f앞에 수를 써주면 소수점 아래로 해당 수만큼 출력한다는 의미이다. 칸수는 특별히 지정하지 않아도 된다.

:,는 1000단위마다 쉼표를 출력해주는 역할을 한다. 
플레이스홀더에 출력을 할 때는 키와 값을 인자로 넘겨주고 이 키를 이용한 출력도 가능하다. 순서에 상관 없이 키와 값 형식으로 입력된 정보가 유지되기만 하면 정상적인 출력을 얻을 수 있다.
그 외 다양한 메소드

인자는 여러자리 문자열이 들어가도 문제가 없다. find 메소드는 공백까지도 위치에 숫자를 할당한다. 만약 없는 문자열을 찾을 땐 -1을 반환한다. 


join 메소드는 문자열 외에도 튜플이나 여러 문자열에서도 작용한다. strip은 양 끝의 공백을 지우는 메소드이다.
파이썬의 내장함수

파이썬에는 위와 같은 여러 내장 함수가 있다. eval은 evaluate는 뒤에 나오는 문자열을 수로 변환하여 사용한다. sorted에서 기본은 오름차순 정리를 하지만 reverse를 True로 바꿔주면 내림차순으로 정리해준다.
그외에도 
id(): 고유 아이디를 반환
Type(): 객체의 자료형을 반환
chr(): 유니코드를 입력하면 그에 해당하는 문자를 반환
ord(): 문자를 입력하면 그에 해당하는 유니코드를 반환
등의 함수가 있다.



Python 5-1. 함수
Sun, 10 Oct 2021 14:51:50 GMT
함수의 정의
함수의 역할
 함수는 레고 블록처럼 하나의 프로그램을 구성하는 요소로 생각할 수 있다. 
용어정리

덩어리 or 블록(block):  반복적으로 사용되는 코드
내장함수(built-in function): 파이썬에서 미리 만들어서 제공하는 함수, 인터프리터에 포함되어 배포됨 
사용자 정의 함수(user defined function): 사용자가 직접 필요한 함수를 만듬, 이 때 def(define 의 약자)키워드를 사용한다. 

함수 정의의 형식

C언어와 다르게 콜론(:)이 사용되는 것과 줄을 맞춰 블록을 형성하는 것에 주의하여야 한다. 

한 번 만들어진 함수는 다른 프로그램에서 재사용이 가능하며 프로그램 개발의 시간과 비용을 절약할 수 있다. 
함수와 매개변수
매개변수란 함수나 메소드 헤더부에 정의된 변수로 함수가 호출될 때 실제 값을 전달받는 변수이다. 인수, 인자와 같은 말이다. 실제 함수에 넘겨줄 값을 실인자(actual argument) 라고 하며 전달받을 값을 지정하는 변수를 형식인자(formal parameter) 라고 한다. 함수가 호출될 때 가장 먼저 하는 일은 실인자를 형식인자에 전달하는 인자 전달이다. 

매개변수를 이용하여 문자열을 출력하는 프로그램을 작성하였다.
인자를 2개 필요로 하는 함수 호출 시에 인자를 하나만 넣어주게 되면 함수에서 필요한 매개변수의 값이 없으므로 TypeError메세지가 나타나며 실행되지 않는다. 

매개변수를 이용한 2차 방정식의 해를 구해보자. 

** 은 제곱 연산이며 제곱근은 0.5제곱을 해주는 것으로 연산한다. 그러나 위의 코드는 a, b, c 의 값이 달라질 때마다 전체 코드를 다시 작성해야 하는 번거로움이 있다. 이를 함수 사용으로 간단하게 만들어 줄 수 있다.

반환문 return
함수는 값을 전달받아 처리하고 결과를 반환할 수 있다. 일반적으로 함수 내부는 블랙박스(black box)라고 가정한다. 즉, 그 안에서 무엇이 일어나는지는 사용자가 알지 못한다. 함수의 내부는 특정한 코드를 가지고 있으며 주어진 일을 수행하고 return 키워드를 사용하여 하나 이상의 값을 반환해 줄 수 있다. 

출력은 함수 내에서 하는 것보다는 밖에서 하는 것이 좋다. return을 이용하여 값을 반환할 때는 키워드 다음 수식을 입력하여 수식의 결과를 반환하는 것도 가능하다. 이와 같이 두 개 이상의 값을 반환하는 반환문을 다중 반환문이라고 한다. 다중 반환문에서 쉼표로 구분되는 두 개의 값은 튜플 형으로 반환이 이루어진다. 
전역변수와 지역변수
전역변수와 지역변수는 변수가 선언된 위치에 따라 구별된다. 파이썬에서는 C언어와 다르게 명시적으로 변수가 선언되지 않고 값이 할당되며 선언되기 때문에 이 때 묵시적으로 선언되는 곳에 따라 구별하면 된다. 
전역변수(global variable)
함수 바깥에서 선언되거나 전체 영역에서 사용 가능한 변수
지역변수(local variable)
함수 내에서 선언되거나 함수 내에서만 사용 가능한 변수


함수 내 a와 b는 전역변수를 의미하게 되어 함수 밖에 있는 a와 b와 값이 같아진다. 만약 함수 내에서 a와 b를 따로 정의한다면 함수 내의 a, b는 지역변수 함수 외의 a, b는 전역 변수로 두 a와 b는 서로 다른 값이 된다. 만약 지역변수를 선언한 뒤 전역 변수에 할당된 값을 지역변수에서 사용하고 싶다면 global 키워드를 사용한다. 

global 선언을 하며 동시에 수에 할당을 하는 것은 불가능하다. 

함수의 매개변수 값을 직접 적어줬을 땐, 호출 시 인자가 없을 땐 그 수를 사용한다는 의미이다. 이런 변수를 디폴트 매개변수 라고 한다. 여러개의 매개변수가 있는 함수에서는 전체 변수에 대하여 모두 할당하거나 매개변수의 출현 순서상 뒤에 있는 변수부터 할당해야 한다. 
키워드 인자 는 함수를 호출할 때 인자의 값만을 전달하는 것이 아니라 그 인자의 이름을 함께 명시하여 전달하는 것이다. 파이썬의 기본 인자 전달 방식을 위치 인자 방식이라고 한다. 

인자의 수가 정해지지 않은 가변인자가 있다. * 을 매개변수 앞에 넣어 사용한다. 위 코드는 가변인자를 사용하여 수의 합과 평균을 구하는 코드이다. 



Python 4-2. 제어문(반복문)
Thu, 30 Sep 2021 13:10:56 GMT
for 반복문
반복문은 특정한 작업을 여러번 되풀이해서 수행하고 싶을 경우 사용한다. 파이썬에는 for문과 while문 두 종류가 있다. for문은 반복 횟수가 미리 정해져있는 경우 사용한다. while문은 조건이 만족될 때까지 반복해야 할 때 사용한다.
range()함수는 특정한 구간의 정수 열을 반복해서 생성한다. for문에서 순환을 위한 용도이다.

range() 함수의 사용법이다. 대괄호 안의 내용은 생략이 가능하다.

대화창을 이용하여 range() 함수의 활용법을 작성해봤다. 
for문과 리스트
for in 구문은 반복문 키워도 for 와 in 사이에 계속 새롭게 할당할 변수 n을 선언한다. in 뒤에 리스트 자료형을 넣어 리스트를 차례대로 순회하는 실행이 가능하다.

for in구문의 in 다음에 범위를 지정하는 함수 range()가 아닌 numbers라는 리스트가 있다. 또한 실수 리스트도 for in문을 통해 순회가 가능하다. 

C언어에서는 합을 구할 때 for문을 사용하였으나, 리스트 원소들의 합은 for문을 사용하지 않고 내장함수 sum()을 사용하여 간편하게 합계를 구할 수 있다. 
중첩 for 루프
 for문 안에 for문을 다시 넣은 이중 for문이다. 
 
 중첩 for문을 사용하여 구구단을 출력하였다.
 이중 for 루프나 삼중 for 루프의 경우 코드를 이해하는 것이 어려워지기 때문에 중첩루프는 삼중 루프 이상의 구조를 잘 사용하지 않는다.
 
 이중 for문을 활용하여 소수를 구하는 프로그램을 구현하였다. 소수란 1과 자기 자신 이외의 약수를 가지지 않는 수이다. 어떤 수 n을 2부터 n-1까지의 수로 전부 나눠보고 만약 나머지 없이 나누어 떨어진다면 소수가 아니라는 사실을 이용하였다.
 
while 반복문
 
 while 반복문은 조건이 참인 경우 계속 실행하는 반복문이다. 조건식이 참이라면 계속 반복하여 해당 코드를 실행하며 if문과 매우 유사하다.
 
 while문을 이용하여 반복 출력하는 프로그램을 작성하였다 
 
 반복실행 횟수가 명확한 경우는 while문의 코드가 길어지기 때문에 for문을 사용하는 것이 더 낫다. 예를 들어 지정된 수까지의 누적 합을 구하는 프로그램은 while문보다 for문이 더 적합하다.
break와 continue
break와 continue는 반복문을 제어하는 키워드이다. 반복 실행 중에 종료를 하는 키워드는 break이다. 반복문 루프 내의 나머지 실행부를 건너 뛰고 계속해서 반복 루프를 실행하는 키워드는 continue이다. continue는 반복 실행을 종료하지 않는다.

while이나 반복문은 조건이 참이면 블록 내의 문장을 수행한다. 도중에서 break를 만나면 그 즉시 반복실행을 종료하고 루프를 빠져 나온다. 


continue문은 루프를 빠져나오지 않고 continue 아래의 문장만을 건너뛰는 역할을 한다. 반복문이 종료되는 것은 조건이 거짓을 때에만 해당한다. 



Python 4-1. 제어문(if 조건문)
Sun, 26 Sep 2021 05:24:07 GMT
순차문
순차적 구조란 먼저 나타나는 코드가 먼저 실행되는 구조이다. 파이썬은 순차적 구조를 지니게 된다.
순차문 이외의 흐름문
제어문은 프로그램의 흐름을 제어하는 역할을 한다. 그 종류에는 조건문과 반복문이 있다.
if 조건문
C언어와 달리 파이썬은 if조건문밖에 없다. 조건문은 조건에 따라 실행을 달리하는 여러 개의 실행문이 있다. 조건식은 True 혹은 False를 반환란다. 

위 사진은 if조건문의 사용법이다. 파이썬은 들여쓰기가 매우 중요하다. 블록을 구분해주기 때문이다. 
블록이란 어떤 조건을 만족하는 경우에 특정한 코드를 선택적으로 실행되는 코드 덩어리이다. 이 블록은 반드시 들여쓰기를 해주어야 한다. 동일한 블럭에 대해 들여쓰기의 칸 수가 일정하지 않으면 "indentationError: unxpected indent"라는 들여쓰기 오류가 발생한다.  동일한 코드 블록에서는 들여쓰기의 칸 수를 반드시 일치시켜야 한다. 탭보다는 스페이스 4칸을 권장한다. 

조건문을 이용하여 3의 배수를 판단하는 프로그램을 만들어보았다.
if-else 조건문
if 조건문의 종류 중 하나이다. 

if-else문을 이용하여 프로그램을 만들어보았다. else문의 블록 안에 또다른 if문이 있다면 그것을 중첩 if문이라고 한다. 

if문을 이용하여 윤년 판별 프로그램을 만들어보았다. 
if-elif-else문

위 코드를 보면 양쪽 코드는 동일한 코드이다. C언어에 비교하자면 elif는 else if와 비슷한 역할을 한다.

if-elif-else문을 이용하여 등급을 계산하는 프로그램을 만들었다.