Fetch API를 사용하여 앱 외부에 있는 날씨 데이터를 가져오기 위해서는 날씨 정보를 가지고 있는 API가 필요합니다.

• OpenWeather: https://openweathermap.org/api

OpenWeather에서 제공하는 날씨 API를 사용하기 위해서는 회원가입이 필요하고 회원 가입을 하면, 날씨 API를 사용할 수 잇는 키를 가입할 때 사용한 이메일로 발송됩니다. 이 키를 사용하여 날씨 정보를 가져올 수 있습니다.

위치 정보

이번 예제에서는 react-native-geolocation-service 라이브러리를 사용하여 위치 정보를 습득할 예정입니다.

• react-native-geolocation-service: https://github.com/Agontuk/react-native-geolocation-service

react-native-geolocation-service 라이브러리를 사용하기 위해서는 다음 명령어를 사용하여 라이브러리를 설치합니다.

npm install -save react-native-geolocation-service

iOS에서 react-native-geolocation-service를 사용하여 위치 정보를 습득하기 위해서는 코코아포드를 통해 필요한 라이브러리를 링크하기 위해 ./ios/Podfile을 열고 수정합니다.

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'WeatherApp' do
  ...
  pod 'react-native-geolocation', path: '../node_modules/@react-native-community/geolocation'

  target 'WeatherAppTests' do
    inherit! :search_paths
    # pods for testing
  end

  use_native_modules!

end
...

파일을 수정했다면 라이브러리를 명령어로 연동합니다.

# cd ios
pod install

iOS, 안드로이드에서 위치 정보를 사용하기 위해서는 사용자 권한(promission) 설정이 필요합니다. iOS에서 권한 설정을 하기 위해, ./ios/Weather/Info.plist 파일을 열고 NSLocationWhenInUseUsageDescripton을 찾아서 수정합니다.

<?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>NSLocationWhenInUseUsageDescription</key>
    <string>날씨 정보를 가져오기 위해서는 위치 정보 권환이 필요합니다.
    ...
</dict>
</plist>

이것으로 react-native-geolocation-service 라이브러리를 사용하여 위치 정보를 가져올 준비가 끝났습니다.

• react-native init projectname

Typescript, styled-components, babel-plugin-root-import를 설치합니다.

• cd ProjectName
• npm install --save styled-components
• npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import

설치가 완료되면 타입스크립트 설정을 위해 tsconfig.json 파일을 생성하고 아래 내용을 추가합니다.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": "./src",
    "paths": {
      "~/*": ["*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

절대 경로로 컴포넌트를 추가하기 위해 babel.config.js 파일을 열고 아래와 같이 수정합니다.

> ```
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    ],
  ],
};

소스코드를 한곳에서 관리하기 위해서 src폴더를 생성하고 App.js파일을 App.tsx로 변경하고 src폴더로 이동시킵니다.

마지막으로 index.js 파일을 열어 아래와 같이 수정합니다.

import App from './App';
import App from '~/App';

App.tsx에서 import Styled from 'styled-components/native';이 부분에

react native could not find a declaration file for module 'styled-components/native

이와 같은 에러문구가 생기면

npm add @types/styled-components-react-native -D

추가 해주시면 됩니다.

18dp라고 표시된 부분을 iOS로 변경하여 다운로드합니다. 완료되면 2x, 3x사이즈의 이미지가 함께 다운로드되는데, 여기서 iOS로 변경하고 다운로드 하는 이유는 이 이미지를 iOS에서만 사용하기 위해서가 아닙니다. React native에서는 원본 사이즈 이미지, 2배 사이즈, 3배 사이즈가 필요하기 때문입니다. React native에서는 이렇게 제공된 이미지를 활용하여 iOS와 안드로이드에서 자동적으로 필요한 이미지를 표시합니다.

다운로드한 이미지를 해당 폴더로 이동하여(예 : src/Assets/Images) add.png, add@2x.png, add@3x.png로 이름을 변경합니다. @2x, @3x는 이미지 파일 이름의 규칙으로 이미지를 불러올 때 React native가 iOS와 안드로이드에서 해당 화면 사이즈에 맞는 이미지를 자동으로 불러옵니다.

Homebrew는 맥(Mac)에서 필요한 패키지를 설치하는 관리자입니다.

• Homebrew: https://brew.sh/

설치를 완료하면, brew --version 정상적으로 설치가 되어 있으면, Homebrew 2.6.1 Homebrew/homebrew-core (git revision dd4e1d; last commit 2020-12-11) Homebrew/homebrew-cask (git revision 96bb38; last commit 2020-12-11)

Nodejs 설치

react-native는 Javascript이므로 Javascript의 런타임인 Nodejs가 필요합니다.

• Nodejs: https://nodejs.org/

설치 후 또는 설치가 되어 있는지 확인합니다. brew install node 설치를 완료하면, node --version 정상적으로 설치가 되어 있으면 v12.18.3 Nodejs를 설치하면 기본적인 패키지 매니저인 npm도 같이 설치됩니다. 설치가 되었는지 확인합니다. npm --version 정상적으로 설치가 되었다면 6.14.6

Watchman 설치

Watchman은 특정 폭더나 파일을 감시하다가 변화가 생기면, 특정 동작으로 실행하도록 설정하는 역할을 합니다.

• Watchman: https://facebook.github.io/watchman/ brew install watchman 설치를 완료하면, watchman --version 정상적으로 설치가 되어 있으면 4.9.0

  React Native Cli설치

  react-native로 앱을 개발하기 위해 필요한 CLI를 설치합니다. npm install -g react-native-cli 설치를 완료하면, react-native --version 정상적으로 설치가 되어 있으면 react-native-cli: 2.0.1 react-native: n/a - not inside a React Native project

  Xcode 설치

  react-native로 iOS 앱을 개발하기 위해서는 iOS 개발 툴인 Xcode가 필요합니다. 앱 스토어에서 Xcode를 다운로드 합니다.
• Xcode 다운로드 링크: https://apps.apple.com/us/app/xcode/id497799835?mt=12

  Cocoapods 설치

  Cocoapods는 iOS 개발에 사용되는 관리자입니다.
• Cocoapods: https://cocoapods.org/ React native로 iOS를 개발하려면 꼭 필요한 관리자이므로 설치를 합니다. sudo gem install cocoapods 설치를 완료하면, pod --version 정상적으로 설치가 되어 있으면 1.10.0

  JDK 설치

  react native로 안드로이드 앱을 개발하기 위해서는 JDK(Java Development Kit)를 설치 해야 합니다. brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8 설치를 완료하면, java -version 정상적으로 설치가 되어 있으면, openjdk version "1.8.0_275" JDK를 설치하면 Java 컴파일러도 같이 설치됩니다. javac -version 정상적으로 설치가 되어 있으면, javac 1.8.0_275

1. View - UI 구축하기 위한 가장 기본적인 태그
2. Text - 텍스트를 표시하기 위한 구성요소
3. Image - 이미지를 표기하기 위한 태그
4. TextInput - 키보드를 통해 앱에 텍스트를 입력하기 위한 태그
5. ScrollView - 여러 구성 요소 및 보기를 호스팅 할 수 있는 스크롤 컨테이너
6. StyleSheet - CSS 스타일 시트와 유사한 추상화 계층

User Interface

1. Button - 모든 플랫폼에서 렌더링 되어야 하는 터치를 처리하기 위한 기본 버튼 태그
2. Switch- 스위치 토글 버튼

Git에서 한 브랜치에서 다른 브랜치로 합치는 방법으로는 두 가지가 있다. 하나는 Merge 이고 다른 하나는 Rebase 다.

1. 마스터에서 업데이트가 되었을 때 - 마스터로 이동 후 git pull origin master
2. 로컬 브랜치로 이동 후 git rebase -i master > 1개를 제외한 나머지 squash
3. 충돌 해결 후 git add > git rebase -continue
4. push 할 때는 git push origin feature/main -f

만약 돌이킬 수 없는 상황이 왔을 때 push / pull 할 때는 commit을 남겨야 하니 그 시점으로 돌아가기 위해서는 git reflog로 모든 커밋 내용을 볼 수 있고 돌아가고 싶은 커밋내용을 선택해서 git reset -hard 커밋넘버

• 액션(Action): 상태를 어떻게 변경시킬지 추상화한 표현힙니다. 단순 객체(Plain object)로 type프로퍼티를 꼭 가지고 있어야 합니다.
• 리듀서(Reducer): 애플리케이션의 다음 상태를 반환하는 함수입니다. 이전 상태와 액션을 받아 처리하고 다음 상태를 반환합니다.
• 스토어(Store): 애플리케이션의 상태를 저장하고 읽을 수 있게 하며 액션을 보내거나 상태의 변화를 감지합니다.

Redux의 3원칙

하나의 소스로부터

모든 상태는 하나의 스토어 안에서 하나의 객체 트리 구조로 저장됩니다. 이미지 : Redux가 필요하다는 것을 언제 알 수 있나요?. 상태의 변경은 Reducer를 통해 반환하고 그 데이터를 스토어에 저장합니다. React에서는 부모 컴포넌트에서 자식 컴포넌트에서 상태를 넘기지만, Redux에서는 하나의 스토어에서 관리합니다. -스토어를 여러개 만들 수도 있습니다.-

상태는 읽기 전용

상태를 변화시키는 방법은 액션 객체를 통해 전당하는 방법뿐입니다. Reducer 이외의 공간에서 상태는 읽기모드입니다.

변화는 순수 함수로 작성 되어야합니다.

액션에 의해 상태 트리가 어떻게 변화하는 지는 순수 Reducer를 작성해야 합니다.

순수 함수란?

• 함수가 실행되는 곳이 어디든, 언제든 외부의 상태를 변경하지 않으면서 동일한 입력값에는 동일한 결과값을 반환해야 합니다.

Reducer는 2가지 특징을 갖는데

• Reducer는 반드시 이전의 상태와 Action을 매개변수(잆력값)로 받습니다.
• Reducer는 결과값으로 이전의 데이터를 변경시키지 않고 새로운 데이터(객체)를 만들어 반환합니다.

Redux의 장점

데이터가 집중화(Centralized)되어 있어서 예측 가능하며(Predictable)데이터 흐름이 단방향이라서 디버깅하기 쉽습니다(Debuggable). 필요에 맞게 유연하게(Flexible) 구현 할 수 있습니다.

spread라는 단어는 퍼뜨리다, 펼치다 라는 의미입니다. 객체 혹은 배열을 펼칠 수 있습니다.

위 코드의 핵심은 기존의 것을 던들이지 않고, 새로운 객체를 만든다는 것 입니다. 이러한 상황에서 사용 할 수 있는 문법이 spread입니다.

배열에서의 spread

spread 연산자는 배열에서도 사용 할 수 있습니다.

rest

rest는 spread랑 비슷한데, 역할이 다릅니다. rest는 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능합니다.

rest는 객체와 배열에서 사용 할 떄는 비구조화 할당과 함께 사용합니다. 주로 rest라는 키워드를 사용하는데 추출한 값의 이름이 꼭 rest 일 필요는 없습니다.

배열에서의 rest

JavaScript를 사용 할 떄에는, 우리가 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택합니다
React에서 엘리먼트 크기를 가져올 때 , 스크롤바 위치를 가져올 때 ref라는 것을 사용합니다. 함수형 컴포넌트에서 useRef라는 Hook 함수를 사용합니다.

useRef()를 사용하여 Ref객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값을 설정해주어야 합니다. 그러면 Ref객체의 .current 값은 원하는 DOM을 가르키게 됩니다.

onReset함수에서 input에 포커스를 하는 focus() DOM API를 호출해주었습니다.

데이터 가져오기, 구독(subscription) 설정하기, 수동으로 리액트 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects입니다.

리액트의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.

Clean-up를 이용하지 않는 Effects

Class를 사용하는 예시

class 컴포넌트에서 render 메서드에서는 side effect를 발생시키지 않습니다. 이러한 effect를 수행하는 것은 리액트가 DOM을 업데이트하고 난 이후입니다. 리액트 class에서 side effect를 componentDidMount와 componentDidUpdate에 두는 것이 바로 이 때문입니다.

class컴포넌트 안에 두 개의 라이프사이클 메서드가 중복되는 것을 주의해야 합니다. 컴포넌트가 마운트된 단계인지 아니면 업데이트되는 것인지에 상관없이 같은 side effect를 실행되기 때문입니다. 개념적으로 렌더링 이후에는 항상 같은 코드가 수행되기를 바지만, 리액트 클래스 컴포넌트는 그런 메서드를 가지고 있지 않습니다.

Hook을 이용하는 예시

useEffect가 하는 일

useEffect Hook을 이용하여 컴포넌트가 렌더링 이후에 어떤 일을 하는 지를 말합니다. 리액트는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다. effect를 통해 문서 타이틀을 지정하지만, 데이터를 가져오거나 다른 명령형(imperative) API를 불러내는 일도 할 수 있습니다.

useEffect를 불러내는 이유

useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수(또는 그 어떤 prop에도)에 접근할 수 있게 됩니다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있는 것입니다.

Hook을 이용해서 Class 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

소개영상

Ryan Florence가 Hook를 사용하여 어텍스트떻게 애플리케이션을 리팩토링 할 것인지 보여주었습니다. !youtube[dpw9EHDh2bM]

Hook의 장점

• 함수형 컴포넌트에서는 원하는 기능을 함수로 만든 후 필요한 곳에 넣어주기만 하면 되기 때문에 로직의 재사용이 유연해 집니다.
• 클래스형 컴포넌트가 가지고 있던 복잡함과 , 재사용성의 단점들까지 보안 해줍니다.
• class형 컴포넌트의 이벤트에서 Props를 재사용 하면서 문제가 발생하는데 함수형 컴포넌트는 이런 문제를 발생하지 않습니다.
• 라이프 사이틀 매서드가 다양하여 코드가 복잡해 지면서 테스트도 어려워 집니다. 이를 해결하기 위해 Effect Hook이 축가가 되었는데 Effect Hook은 componentDidMount, conponentDidUpdate, componentWiilUnmount를 대체할 수 있습니다.

State Hook 사용하여 비교하기

Hook과 같은 기능을 하는 클랭스형 컴포넌트

state는 { count: 0 } 이며 사용자가 this.setState.()룰 호출하는 버튼을 클릭했을 때 state 값인 count를 증가시킵니다.

함수형 컴포넌트

const [count, setCount] = useState(0);에서 count는 class형 컴포넌트에서 state = count이고, setCount는 class형 컴포넌트에서 this.setState입니다. setCount자리는 꼭 setCount라고 안해도 됩니다.

아래와 같이 똑같은 출력을 할 수 있는 것을 볼 수 있습니다. useState를 사용 할 때에서는 파라미터로 넣어서 호출 할 수 있습니다.

프로젝트 개요

clone 프로젝트로 Logitech 미국 사이트를 선정 했습니다. "https://www.logitech.com/en-us"

공통 목표

• Trello 와 같은 tool을 활용하여 프로젝트를 진행 했습니다.
• Standup Meeting을 매일 아침 미팅을 통해 진행 사항과 오늘 할 일을 공유 했습니다.
• Communication을 팀원들과 올바른 방법으로 의견을 주고 받으며 조율했습니다.
• Git의 기본적인 Flow에 따라 Git을 사용할 수 있고, branch를 생성하고 올바른 이름과 내용을 commit message를 작성했습니다.

프로젝트에 사용된 기술

프론트엔드: ReactJs, Sass 백엔드: Django, MySQL 배포 : AWS 소스관리:git, github

프로젝트 인원 구성

프론트앤드 - 4명 백앤드 - 2명

프론트엔드 개발자로 참여하여 Main 페이지 그리고 nav 바 담당을 했습니다.

프로젝트 구현

프로젝트를 마치고

처음 프로젝트를 시작할 때 내가 해낼 수 있을까? 라는 생각을 많이 했다. 팀에 민폐가 되지 않을까? 라는 생각을 매일 했고, 매일 그 생각을 가지고 열심히 했지만 열심히 한게 열심히가 아니었다. 내가 무엇이 잘못되었는가를 생각했다. 공부를 하는 방법, 프로젝트의 큰 틀을 보지 못한 점, 부족한 점이 많다.

지금이라도 열심히 공부하고 내가 무엇이 부족한지 스스로 인지하면서 공부를 하자. 늦지 않았고 스스로 가능성이 있다고 생각한다. 지금은 아니지만 열심히 해서 같이 일하고 싶은 사람이 되자.

첫 프로젝트인 만큼 서로 어색하게 시작해서 지금까지 큰 일 없이 마무리 해주신 우리 팀원에게 감사합니다. 처음이자 마지막이 될 수도 있는 프로젝트 같이 할 수 있어서 영광이였습니다.😎

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())   // 왜 then이 두개고 res.json() 은 뭔지?
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

첫 번째 then의 res가 어떤 값이 들어올 때 리턴하는가? console.log를 찍어봅니다.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => {       // 첫 번째 then
    console.log(res);  // 어떤 값이 나오는지 확인해보세요. 실제 잘 작동하는 api 주소가 필요합니다.

    return res.json();
  })
  .then(res => {       // 두 번째 then
    if (res.success) {
        alert("저장 완료");
    }
  })

fetch()함수 - 첫 번째 then 함수에 추가되는 로직

fetch() .then() .then()형태만 있었지만 백앤드에서 응당 body를 안 주는 경우도 많습니다. 응답 body로 JSON 데이터를 주지 않는데 프론트에서 Reaponse Object의 json()을 호출하면 에러가 납니다.

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }
응답 body:
    1. 제대로 저장했으면 status code를 200 전달. 응답 body는 없음
    2. 권한 오류가 생기면 status code를 403으로 전달하고. 응답 body는 아래와 같음
        {
            success: false,
            message: "권한이 없습니다"
        }

위의 상황일 때 fetch()를 구현하는 방법

>```
fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("에러 메시지 ->", res.message);
  })

백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받습니다. 이 때 자바스크립트 Web API fetch 함수를 사용합니다.

fetch() 함수 기본

fetch() 화살표 함수 선언식

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

fetch() 함수 선언식

fetch('api 주소')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

fetch()함수 - method가 get인 경우

fetch() 함수에서 default method는 get입니다.

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: get
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

호출 시

fetch('https://api.google.com/user/3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

리액트에서 사용 시

import React, { Component } from 'react';

class User extends Component {
  componentDidMount() {
    // user id가 props를 통해 넘어온다고 가정
    const { userId } = this.props;

    fetch(`https://api.google.com/user/${userId}`)
      .then(res => res.json())
      .then(res => {
        if (res.success) {
            console.log(`${res.user.name}` 님 환영합니다);
        }
      });
  }
}

flex는 두 가지 요소로 이루워져 있습니다.

flex container은 flex itex을 포함한 부모 역할을 합니다. 박사가 늘어나는 방향(flex-direction)과 박스가 다음 줄로 넘어가는 방식 (flex-wrap)을 정합니다. flex 아이템을 정렬(align-item, justify-content)하는 것이 flex container의 역할입니다.

flex item은 flex container 안에 위치하면서 박스 하나 하나의 모양을 결정합니다. 박스의 크기(flex-basis)와 그 크기가 변경되는 방식(flex-grow, flex-shrink)을 정의 할 수 있습니다.

그리드 레이아웃 만들기

행(row)

먼저 .row클래스로 flex container를 정희합니다. display속성에 flex값을 사용하면 flex container를 만들 수 있습니다.

.row {
    display: flex;
}

flex container는 안에 요소가 늘어나면 한 줄로 늘여 세웁니다. 자식 요소가 다음 줄로 넘어가는 것은 flex-wrap속성입니다.

.row {
    display: flex;
    flex-wrap: wrap;
}

플렉스 컨테이너 안에 있는 요소가 늘어나 컨테이너 너비를 넘어가면 다음 줄로 배치합니다.

열(column)

.row가 flex container 였다면 .col은 자식 요소인 flex item으로 만들어 볼 수 있씁니다. 행이 열을 포함하듯 flex container가 flex item을 포함하니까 중첩 구조가 맞습니다.

flex container의 자식요소는 자동으로 flex item이 되는데 기본적으로 자식요소는 컨텐츠 크기만큼 공간을 할당합니다. 열을 행에 꽉 차게 만들고 싶을 때 flex-grow속성을 이용합니다.

flex-grow는 flex item이 flex container 안에서 차지하는 크기의 정도를 나타내는데 기본값이 0입니다. 1로 설정하면 컨테이너의 크기만큼 꽉찬 아이템을 그릴 수 있습니다.

.col {
    flex-basis: 0;
    flex-grow: 1;
}

아이템 크기를 지정할 수도 있어야 하는데 flex-basis속성을 사용합니다. 아이템의 초기 크기를 지정하는데 이것을 50% 값으로 설정하면 부모인 flex container 너비의 절반인 크기를 갖습니다.

.col-6 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}

flex-basis아이템 크기를 지정했다면 늘어나는 정도를 정하는 flex-grow와 flex-shrink속성의 값을 0으로 주어 변동되지 않도록 고정해야합니다.

.col-6 { flex: 0 0 50%; }

아이템 크기와 관련된 이 세 개 속성은 하나의 축약 표현을 많이 사용하는데 flex속성에 flex-grow, flex-shrink, flex-basis값을 순서대로 지정합니다.

LIFO (Last in First Out) 마지막으로 들어온 데이터가 가장 먼저 나갑니다.

아이스크림의 콘 위에 쌓이는 것도 스택 책들을 쌓아두는 것도 스택

Queue

FIFO (First In First Out) 처음으로 들어온 데이터가 가장 먼저 나갑니다.

마트에서 장을 볼 때, 버스를 기다릴 때, 모두 큐에 들어간 데이터와 같습니다. 가장 먼저 들어온 데이터가 먼저 처리됩니다.

주차별 세션 스케줄

1주차

• 웹 서비스의 역사와 발전
• Linux & Termainal
• 프론트엔드 개발자가 하는 일
• 개발자 도구
• [Replit] HTML,CSS, JavaScript

2주차

• HTTP
• Database
• Git & GitHub
• Westagram 시작

3주차

• [React] Router, Sass
• [React] state, Props, Event
• [React] 팀 프로젝트

4주차

• Stack & Queue
• 인증 & 인가
• 로그인 & 회원가입
• [React] Mock Data 활용법
• [React] Westagram - 마무리
• [React] Monsters 과제

Westagram은 위 개념들을 하나하나 적용해가면서 다시 곱씹을 수 있는 프로젝트 였습니다. 기본 적인 개념들을 완벽하게 이해를 하지 못한 상태에서 프로젝트를 시작하니 많은 어려움이 있고, 그 어려움이 있어서 짧지만 굵은 4주 동안 많은 성장과 나를 다시 뒤돌아보는 시간이 많았습니다.

주요 기능

1. login page / main page 컴포넌트화
2. id, password 인풋에 setstate 기능으로 state값에 value전달
3. 버튼 클릭시 main 페이지 이동
4. 메인 페이지 및 로그인 페이지 componenet화(nav, feedline)
5. Array map()활용
6. mock data 활용

React를 배우고 느낀 점

React의 컴포넌트 구조는 계층으로 구성되어 있고 용도에 맞추어 컴포넌트와 모듈을 구별하여 프로젝트를 진행 할 수 있었습니다. 전체적인 가독성이 높아지고 컴포넌트를 쉽게 재사용 할 수 있어서 React의 강점이 느껴졌습니다. 컴포넌트화로 인해 쉽게 레이아웃이 어떻게 구성 되어 있는지 쉽게 알아 볼 수 있었습니다. 그리고 반복적으로 코드를 작성하지 않고 Array.map기능으로 쉽게 구현할 수 있었습니다.

아직 많은 기본적인 개념들을 잘 이해하지 못하고 있는 것이 스스로도 느끼고 있지만, 하루하루 조금 씩 성장해가는 제 자신도 동시에 느껴지고 있습니다.

git을 이용한 팀 프로젝트

협업을 통해 진행했던 프로젝트에서 공통으로 쓰이는 컴포넌트와 reset.scss와 common.scss를 사용하니 merge할 때 conflict가 발생하고 팀원들과 서로 비교를 하면서 소통하고 풀었을 때 색다른 경험을 느꼈고 git 협업을 통해 소통의 중요성을 다시 한 번 느꼈습니다.

인상 깊었던 코드

백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응닫을 받습니다. 지금은 Mock Data를 활용해 데이터를 받아왔지만, back과 front와의 첫 만남이였습니다.

부족한 점

1. 기본적으로 필요한 개념들을 많이 이해를 못하고 있는 점
2. 계획적으로 하지 않는 점
3. 내가 직접 짠 코드가 아니고 다른 분의 코드를 보고 따라한 점 (그 코드를 이해하고 분석하려는 시도는 나에게 위안을 심어준다.

부족한 점은 많지만, 완벽이라는 것은 없기에 완벽에 가까운 사람이 되기 위해 노력하자.

4주간 느꼈던 감정들...

위코드를 다니면서 정말 많은 생각을 하게 됐고 동기들을 통해 내 자신을 다시 뒤돌아보는 계기가 너무나 많았다. 앞으로의 미래를 생각해서 안좋은 습관들을 스스로 인지하여 천천히 고쳐나가는 습관을 길러야 한다. 내 스스로 열심히 하고 있다고 위안을 얻지만 그것은 여태껏 내가 해왔던 것에 비교해서이다.

사람들에게 편하게 다가가질 못한다 낯가림을 극복하도록 노력이라도 하자. 내가 먼저 다가가야 나에게 다가온다.

항상 겸손하고 배려하고 무례하지 말자.