React-native에서 Animation을 Frame drop 없이 사용가능 하도록 만든 패키지

• React-native animated가 가지고 있는 단점을 해결

  📌react-native animated의 단점

  • main thread 와 js thread의 통신

📌react-native-reanimated

animation 관련된 작업을 모두 main thread에서 실행 worklet을 이용하여 js thread로 전달

worklet

작은 조각의 javascript 조각, 뷰 속성을 업데이트 하거나, 이벤트에 반응할 때 ui thread에서 바로 실행 시킬 수 있는 js 조각

• 생성 방법 : 함수 상단에 worklet이라는 string을 추가
• 함수 외부에 있는 값을 사용하더라도 함께 가져감

  const funa = () => {
  'worklet'
  /* ...etc logic */
  }

shared values

JS Thread 와 Main Thread 모두에서 읽기 또는 수정이 가능 한 값 Main thread에서는 값이 변경됨을 바로 감지 할 수 있어 읽기에 특화됨

const animval = use sharedvalue(0)
{...etc}
return (
 <Button onPress={() => {animval.value = math.random()}}
)

설치

• npx install --save react-native-reanimated
• babel.config.js

  plugins: ['react-native-reanimated/plugin'],

Thread란 ?

• 실행되는 프로세스 내에서 실제로 작업을 실행하는 주체
• 명령어를 실행하여 처리 하는 주체(like 음식점에서 음식을 만드는 행위와 비슷)

  Main Thread or UI Thread

• Native 영역에 레이아웃을 그려주는 역할

  JavaScript Thread

• 작성한 Javascript 실행 되는곳

  Native Module Thread

• Native Module을 다룰때 사용하게 되는 Thread
• 특정 리소스등을 요청하고자 할때 사용

  Shadow Thread

• virtual DOM으로부터 새로운 Layout으로 변환하도록 계산해주는 역할

📌Native Module 이란-0

Native Module 이란 Native API를 사용 하기 위한것.

주로 현재 위치, wifi 상태 등 native 영역에서만 알고 있는 정보에 접근하는것 또는 image processing 처럼 연산이 native의 높은 performance가 필요할때 사용

📌New Architeture

Why New Architecture?

Bridge가 가지고 있는 본질적인 문제를 해결 하기 위함

Bridge 가 가진 제한점#1

• 비동기 처리

  Bridge 가 가진 제한점#2

• 싱글 스레드
• Javascript가 싱글 스레드에서 동작하기 때문에 Bridge도 싱글 스레드로 동작 함

  Bridge 가 가진 제한점#3

• 변환시 드는 과도한 비용
• Bridge로 이동 하게 될때 JSON Object 변환하는 비용이 큼

  New Architecture ( JSI)

  기존에 있는 Bridge를 버리고, JSI가 해당 역할을 대신 하도록 수정

  JSI: Javasript interface, C++ 객체에 대한 참조를 할수 있게 해주는 역할

  

New Architecture를 적용 하며 얻은것#1

• 동기 실행이 가능하게 됨
• C++ 모듈로 직접 접근을 할 수 있다보니 비동기 통신이 어니어도 됨

  New Architecture를 적용 하며 얻은것#2

• 동시성
• javascript에서 다른 스레드에 있는 함수를 호출 할 수 있음

  New Architecture를 적용 하며 얻은것#3

• Overhead가 줄어듬
• JSON Object로 변환 하지 않고 C++ 언어로 통신하게 되었기 때문

  New Architecture를 적용 하며 얻은것#4

• ios, Android간 내부 네이티브 모듈 코드 공유 가능
• C++이 추가됨으로 인하여 플랫폼이 다르더라도 한개의 코드로 관리 가능

  New Architecture를 적용 하며 얻은것#5

• 타입의 안정성
• 자동으로 생성 되는 코드 레이어에 의해서 자동으로 타입을 생성 하도록 되어있음

Fabric이란?

• New Architecture의 새로운 rendering system.
• 이전 Architecture에서는 UI Manager가 담당하던 부분

Fabric 개선점

Shadow Thread에서 새로운 Shadow Tree를 계산하던 로직을 자바스크립트에서 C++ 로직으로 변환 가능하도록 수정 OnLayout, onMeasure등 View의 위치, 사이즈등을 계산하던 로직을 비동기에서 동기 함수로 변환 했기 때문에 많은 퍼포먼스 이득

Turbo NativeModule

기존 Architecture에서는 NativeModule로 사용되던 것, Bridge가 사라지게 되면서 추가됨

Turbo NativeModules 장점

• 1. Platform 전반적으로 Typecheck가 잘됨
• 2. 플랫폼 별 코드 공유가 쉬움( C++ 로 작성된 코드를 공유)
• 3. Native Module Lazy Loading이 적용됨
     • Lazy Loading: 최초에 모든 리소스를 로드 하는것이 아닌, 필요 할때 로드하는 방식.(최초 로드시 부하를 줄이기 위함)
• 4. JSI 사용으로 인하여 Native 와 Javascript코드간 통신이 효율적
  • JSON Object로 변환 없이 C++ 코드만으로 통신 가능

    CodeGen

    3rd-party library에서 제공되는 코드를 인터페이스에 맞게 작성하면 JSI 관련 코드들을 만들어 주는것, 프로젝트를 빌드 할때 자동으로 실행(빌드 시간에 영향)

📌Hermes

Facebook에서 만든 javascript Engine, Bytecode 형태로 미리 컴파일 하여 저장 해둔 뒤 사용

또다른 장점

• 사용하는 Memory의 감소(기존 185mb -> 136mb)
• AAB / ARK 크기 감소(기존 41mb -> 22mb)

  적용 되어있는지 확인

  const isHermes = () => global.Hermesinternal !== null;

• Hermes의 장점을 온전히 보기 위해서는 release build Type으로 확인

📌New Architecture 프로젝트 만들어 보기

• bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

안드로이드 Application에서 전체 앱 상태를 관리하는 class

Event를 전달하기 위한 함수를 제공

onCreate : 어플리케이션이 실행될때 최초에 호출

onTerminate: 어플리케이션이 종료될때 호출

📌Manifest

Android 앱의 메타 정보를 요약해서 선언 해 둔것

권한, 이름 패키지명 등 앱의 전반적인 내용들을 담고 있음

위치: android/app/src/main/AndroidManifest/xml

📌Activity

안드로이드에서 화면을 구성 하는 요소

유저가 직접 보고, 누르는 등의 액션이 발생됨

안드로이드의 4구성 요소(activity, service, receiver, content provider)

intent란 ?

• 어떤 Activity를 호출할때 사용하는것 매개변수와 함께 보내는것 navigation을 이동했던것과 비슷한 형태

  Activity Life-cycle

• onCreate -> onResume -> onPause -> onDestroy

  intent-Filter ?

• Intent를 실행 시킬때 어떤 종류의 activity인지를 빠르게 찾기 위한 수단
• Intent-Filter 구조 Action: activity가 어떤 행동에 유효한 것인지 나타내는 값(ex SEND등) Category: 어떤 종류의 액티비티 인지를 나타내는 값

  <intent-filter>
  <action.android:name="android.intent.action.MAIN"/>
  <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>

  • 종류:
  • ACTION_MAIN: 앱의 시작점. 홈화면에 아이콘이 만들어짐
  • ACTION_SEND: 공유하기 액션등이 필요할때 사용됨
  • ACTION_DIAL: 전화번호 폰 패드와 같은 화면이 필요할때 사용됨

📌ios-AppDelegate

Android에서 activity처럼 화면을 구성 하는 단위, 각각 앱의 상태에 따라 불려지게 되는 함수가 있음

didFinishLaunchingWithOptions

• 앱이 최초 실행될때 호출되는 함수(like android application onCreate)

  info.plist

• 권한, 앱의 이름, 실행시 주로 필요한 값들을 관리해주는 파일 SDK API Key값, 권한 요청시 텍스트 등 값을 관리

  Bulid Phase

• 앱을 실행 시킴에 있어 필요한 값들을 자동으로 설정하도록 Command로 모두 선언해둔것

📌Android, ios Permissions

Permissions

특정 리소스를 필요로 할 떄 사용자에게 허용 할것인지 물어보는것

추가로 더 필요한것

• ios - info.plist 권한 요청문

자주 사용하는 권한

자주 사용하는 권한#1

사진 관련

• ios - NSPhotoLibrayUsageDescription
• Android - READ_EXTERNAL_STORAGE

  자주 사용하는 권한#2

  카메라 관련

• ios - NSPhotoLibrayUsageDescription
• Android - WRITE_EXTERNAL_STORAGE

  자주 사용하는 권한#3

  위치 관련

• ios - NSLocationAlWaysAndWhenInUseUsageDescription
• Android
  • ACCESS_FINE_LOCATION
  • ACCESS_COARSE_LOCATION
  • ANDROID_BACKGROUND_LOCATION

    자주 사용하는 권한#4

• AppTrackingTransparency
• IDFA를 읽어오는 권한
• IOS 앱 심사시 필수로 보고 있는 정보

📌ios / Android에서 알아야 하는것

Scheme

• 외부에서 우리 앱을 호출하거나, 우리 앱이 외부앱을 호출 하는 수단

  (scheme)test://path/to/screen 

  Scheme 테스트 하는법

  uri-scheme package 를 통하여 테스트

• npx uri-scheme open "scheme://path" -- ios
• npx uri-scheme open "scheme://path" -- android

구글에서 만들어진 BAAS(Backend As A Service) 모바일에서 필요한 거의 모든 기능을 제공, 저장장치, 테스팅 푸시 등 필요한 거의 모든 기능을 제공

🔥RealTime DataBase

실시간으로 접근 할 수 있는 database NoSQL의 형태로 구성되어있음, 실질적으로 저장되는 값은 key와 value값으로 구성된 JSON Object

🔥제한사항

동시 연결에 대한 제한이 있음(무료 plan 100, 유료 plan 20만) 한번에 Write은 1MB 내외

🔥Storage

파일 저장을 위해서 사용, 프로필사진, 임시 저장하는 파일 저장 가능.

🔥Cloud Firestore

데이터를 저장 하기 위한 제품, 실시간성, NoSQL을 지원한다는 점을 Realtime database와 비슷

• 저장하는 값: JSON 형태가 아닌 Collections를 저장
• Document: Data가 집합해있는 단위
• Collections: Document가 집합해있는 단위

🔥RealTime Database vs ColudFirestore 차이

종합 : 큰 단위 데이터 요청시에는 Cloud Firestore 데이터가 작고 CRUD가 자주 발생하면 Realtime database

🔥Firebase에 익숙해지기

crashlytics / remote config / abtest

Crashlytics

• 앱이 강제종료 되었음을 알려주는 Tool, 로직을 잘 작성하더라도 라이브러리 등에서 크래시가 날 수 도 있다.

  Remote Config

• 원격에 있는 상수값을 업데이트 해줄 수 있는 Tool, 특정 기능에 대한 ON/OFF 또는 특정화면의 텍스트를 바꾸는것으로 활용

  주의점: Remote Config값을 조회 실패했을때 대비하여 기본값을 설정, 실패 등 여러가지 이유로 인하여 최신값을 항상 보여주지는 않음

  AB Test

• A그룹과 B그룹을 두고 어떤 그룹이 더 많은 전환율을 보이는지 체크, 기존 버전과 신규로 변경된 버전에서의 분기, 개선된 버전에서의 유저 피드백을 받는다는 이점

• 사전작업

  • Remote Config: config 설정된 값들에 대하여 가능
  • Analytics: 분석을 위해 필요

    🔥React-Native-Firebase

    Firebase를 사용 가능 하도록 만들어둔 Package https://rnfirebase.io/

• npx expo install expo-dev-client

• npx expo install @react-native-firebase/app

• npx expo install expo-build-properties

  • googleServicesFile 파일을 넣어준다.
  • 이 과정이 모두 완료되면 npx expo prebuild --clean 커맨드를 해주게 되면 native 코드들이 추가된다.

🔥 OAuth 2.0

인증을 위한 개방형 표준 프로토콜 Thrid party 프로그램에게 리소스 소유자를 대신하여 서버에서 데이터 제공

Authentication: 인증 하는 단계

Authorization: 인증이 끝난 뒤 Access Token이 부여되는것

Access Token: 유저에게 권한 받았음을 인증하는 Token

Refresh Token: Access Token을 Refresh 하기 위한 Token

• npm install @react-native-firebase/auth
• npx expo prebuild

RemoteURL 에 있는 리소스를 가져올때 사용

React-Native에서 새로 정의 한것이 아닌, MDN에 이미 만들어진것

📌HTTP

Hyper Text Transfer Protocol의 약자 Server에 데이터 저장, 업데이트 등을 요청하고 결과를 되받는것

📌Request Method

어떤 동작을 위한 요청인지를 미리 나타내는 것

• 종류: GET, POST, PUT, PATCH, DELETE

📌GET

특정 리소스를 가져와야 할 때 사용

• ex) 특정 회원의 데이터 조회, 특정 성별을 가진 회원들을 조회 등

📌POST

어떤 데이터의 저장해야 할때 사용

• ex) 회원가입, 로그인 등

📌PUST

특정 소스를 업데이트 할때 사용

• ex) 회원의 주소 데이터, 결제 데이터 등

📌PATCH

특정 리소스 중 특정 정보만 변경할때 사용

• ex) 회원의 나이, 전화번호 등

📌DELETE: 리소스를 아에 삭제

ex) 회원 탈퇴 등

📌Request 데이터 전달

데이터를 서버로 전달하는 방법 Path parameter, Queryparameter, Request Body 등

📌 Path parameter

• URL Path 내부에 값을 함께 넘기는것

  /person/${:useId}/

  📌 Queryparameter

• URL 뒷부분에 ?를 붙이고 그 뒤에 key 값과 value 값을 넘겨주는 것

  /person?birthday={:date}&sort={:regeditDate}

  📌 Request Body

• URL에 데이터가 보이지 않고, Body에 작성해서 넘기게 됨 데이터가 긴 경우 Request Body 사용이 적합 (URL 길이제한)

  📌항목별 사용처

  Path Parameter: 특정 유저 ID를 통해 정보를 가져올 때

  Query Parameter: 이름, 성별로 검색해서 가져올때

  Request Body: 회원가입, 게시글 등록 할때

📌Response status code

결과 처리에 대해서 숫자 형태로 서버로부터 전달받음 자주 사용하는 코드 [200, 400, 403, 404, 500]

📌Response status code( 200 & 500 )

200: 정상적으로 처리 됨 500: 서버에서 처리 중 에러가 발생함 400: Client에서 값을 잘못 전달함 403: 유저정보는 식별되나, 해당 URL로의 접근이 거부됨 404: URL이 존재 하지 않음

📌Fetch API 사용방법

fetch(REQUEST_URL,{method:POST', body:{}}).then((result) => result.json())

• 옵션에서 세부사항들을 적게 된다. method, body
• 결과를 받고 난 뒤에 json이라는 함수, text라는 함수를 통해서 해당 response를 파싱
• 전달받은 Promise에는 Text or json 등이 있어서 해당 값 들을 잘 사용해 주면 된다.

key 값으로 String을 저장

• 유저에 대한 정보(accessToken, refreshToken) 기능을 보여줄지 말지, 마지막 접속 시간 등 임시정보 저장 등
• Cookie 와 비슷한 사용 용도
• Android: SQLite 에 저장
• iOS : 네이티브 코드로 저장로직이 작성되어 있음

📌AsyncStorage.setItem

key값과 value 값을 넘겨 값을 저장 하는것 저장하는 value는 string으로만 저장

 AsyncStorage.setItem(KEY,VALUE)
 const values = {key: 'value'}
 AsyncStorage.setItem('TEST_KEY', JSON.string(values));

📌AsyncStorage.getItem

값을 가져 오는것, string 또는 null을 리턴

 const result = await AsyncStorage.getItem(KEY,VALUE)
 const result = AsyncStorage.getItem('TEST_KEY');
 console.log(JSON.parse(result));

📌AsyncStorage.removeItem

key값에 해당하는 value를 삭제하는 것

AsyncStorage.removeItem('TEST_KEY');
const result = await AsyncStorage.getItem('TEST_KET');
console.log(result); // null

📌AsyncStorage.clear

AsyncStorage의 모든 값을 삭제

AsyncStorage.clear();

📌AsyncStorage.mergeItem

Object안에서 같은 Key값이 있는 경우 한가지로 합쳐주는 것 , 자주 사용하지는 않음

📌그 외(etc)

multiGet, multiSet, multiMerge, multiRemove 각각 key값을 여러개 넘겨 한번에 받아오는 것

📌사용시 주의점(1)

Key값 중복으로 인한 value 덮어써짐 혹은 삭제된 사례

• Unique한 문자열을 만들기 위해서 여러 노력들을 해봄 UUID 문자열 만들어 사용 ex) 43833a60-cad**** 등
• 화면 또는 동작을 String으로 조합함 @/화면명/액션명

📌사용시 주의점(2)

AsyncStorage의 모든 함수는 Promise로 제공됨

 const result = AsyncStorage.getItem('KEY') // result is Promise
 const result = await AsyncStorage.getItem('KEY') // result is value

📌사용시 주의점(3)

Android에서 최대 저장 사이즈는 6MB
Android에서 한번에 가져 올 수 있는 사이즈는 2MB

📌세부목표

• 일기 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus 하기

const authorInput = useRef();
 // useRef 함수를 호출해서 반환값을 상수에 담아준다.
          <input
            ref={authorInput} // authorInput이라는 레퍼런스 객체를 통해서 input 태그에 접근 가능해진다.
            name="author"
            value={state.author}
            onChange={handleChangeState}
          />

   const handleSubmit = () => {
    if (state.author.length < 1) {
      authorInput.current.focus();

      return;
    }

• 상수에는 React.MutableRefObject 라는게 저장이된다.

  📌React에서 리스트 렌더링 하기

  📌세부목표

  배열을 이용하여 React 에서 List 렌더링 해보고 개별적인 컴포넌트 만들어보기

  <DiaryList diaryList={dummyList} />
  const DiaryList = ({ diaryList }) => {
  return (
   <div className="DiaryList">
     <h2>일기 리스트</h2>
     <h4>{diaryList.length} 개의 일기가 있습니다.</h4>
     <div>
       {diaryList.map((it) => (
         <DiaryItem key={it.id} {...it} />
       ))}
     </div>
   </div>
  );
  };
  

📌리스트 데이터 추가하기

React는 단방향으로만 데이터가 흐른다

• App component 최상단에서 state를 관리 각각의 컴포넌트에 props 으로 넘겨준다.

  📌리스트 데이터 삭제하기

  // App.js component
  
  const onDelete = (targetId) => {
   console.log(`${targetId}가 삭제되었습니다`);
   const newDiaryList = data.filter((it) => it.id !== targetId);
   setData(newDiaryList);
  };
  
  
  

// DiaryItem.js component <button onClick={() => { if (window.confirm(${id} 번째 일기를 정말 삭제하시겠습니까?)) { onDelete(id); } }} > 삭제하기

### 📌데이터 수정하기
> 배열을 이용한 React List에 아이템을 동적으로 수정 해보기 With 조건부 렌더링

//App.js const onEdit = (targetId, newContent) => { setData( data.map((it) => it.id === targetId ? {...it, content: newContent} : it) ) }

//Diary Item const handleEdit = () => {

if(localContent.length < 5) {
  localContentInput.current.focus();
  return;
}

if(window.confirm(`${id}번 째 일기를 수정하시겠습니까?`)) {
  onEdit(id,localContent);
  toggleIsEdit();
}

}; 수정 완료

### 📌React Lifecycle 제어하기 - useEffect
 > React 컴포넌트의 생에 주기(생명 주기)
 탄생 -> 변화 -> 죽음
  - 탄생 : 화면에 나타나는 것 Mount ex) 초기화 작업
  - 변화 : 업데이트(리렌더) Update ex) 예외 처리 작업
  - 죽음 : 화면에서 사라짐 UnMount ex) 메모리 정리 작업

useEffect(() => { // todo ... (callback) 함수

},[]); <- Dependency Array (의존성 배열) 이 배열 내에 들어 있는 값이 변화하면 콜백 함수가 수행된다.

useEffect(() => { console.log("Mount!");

return () => {
   // Unmount 시점에 실행되게 됨
 console.log('Unmount!');
};

}, []);

### 📌React API 호출하기
> 세부 목표
 - useEffect 이용하여 컴포넌트 Mount 시점에 API를 호출하고 해당 API의 결과값을 일기 데이터의 초기값으로 이용하기

const getData = async() => { const res = await fetch('https://jsonplaceholder.typicode.com/comments').then((res) => res.json());

const initData = res.slice(0, 20).map((it) => {
  return {
    author: it.email,
    content: it.body,
    emotion: Math.floor(Math.random() * 5) + 1,
    created_date: new Date().getTime(),
    id: dataId.current++,
  };
});

setData(initData);

};

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

### 📌최적화
 > 최적화 1 - 연산 결과 재사용

#### 📌연산 결과값을 재사용 하는 방법
> 현재 일기 데이터를 분석하는 함수를 제작하고 해당 함수가 일기 데이터의 길이가 변화하지 않을 때 값을 다시 계산하지 않도록 하기
 + Memoization 이해하기

#### 📌Memoization
 - 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키게 하는 방법

> 마치 시험을 볼 때, 이미 풀어본 문제를 다시 풀어보지 않아도 답을 알고 있는 것 과 유사
 - 답을 기억해 둔다 -> 기억해 두었던 답을 다시 적는다(Memoization 을 이용한 연산 과정 최적화)


#### 📌사용법

const getDiaryAnalysis = useMemo(() => { console.log("일기 분석 시작");

const goodCount = data.filter((it) => it.emotion >= 3).length;
const badCount = data.length - goodCount;
const goodRatio = (goodCount / data.length) * 100;
return { goodCount, badCount, goodRatio };

}, [data.length]);

const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

- useMemo로 어떤 함수를 감싸고 2번째로 디펜더시 array를 전달해서 함수를 최적화 하면 더이상 함수가 아니다. 
- useMemo 라는 기능은 어떤 함수를 전달을 받아서 콜백함수가 return 하는 값을 그냥 return 한다.
- 그렇기 때문에 값으로 사용하여야 한다.
> 정리하자면 어떤 함수가 있고 그 함수가 어떤 값을 return 하고 있는데 그 return까지의 연산을 최적화하고 싶다면 useMemo를 사용해서 디펜더시 array에 어떤 값이 변화할 때만 다시 수행할 것인지 명시해 주게 되면 함수를 값처럼 사용해서 연산 최적화를 할 수 있다.

#### 📌React.memo
- 사용법 1

const TextView = React.Memo(({ text }) => { useEffect(() => {

})

return

const CountView = React.memo(({ count }) => { useEffect(() => {

})

return

const OptimizeTest = () => { const [count, setCount] = useState(1); const [text, setText] = useState("");

return ( <div style={{ padding: 50 }}>

- 사용법 2

const CounterA = React.memo(({ count }) => { return

const CounterB = React.memo(({ obj }) => { return

const OptimizeTest = () => { const [count, setCount] = useState(1); const [obj, setObj] = useState({ count: 1, });

> CounterB는 업데이트가 되었다고 출력이 된다.
 렌더링이 일어난 이유는, Props인 obj 가 객체이기 때문이다.
- 자바스크립트에서는 기본적으로 얕은 비교를 하게 되어서 문제가 발생하는 것
- 객체의 주소의 의한 비교(얕은 비교)
- 얕은 비교: 객체의 값을 비교하는 게 아니라 두개의 객체가 같은 주소에 있느냐를 비교한다.

const areEqual = (prevProps, nextProps) => { if(prevProps.obj.count === nextProps.obj.count) { return true; } return false; }

const MemoziedCounterB = React.memo(CounterB, areEqual);

📌i18n-js 을 이용한 Localiztion 세팅, custom hook - useTranslation, UI 개발

• npx expo install expo-localization
• npx expo install i18n-js

📌AsyncStorage를 이용해 선택한 언어 저장하고 불러오기

• npx expo install @react-native-async-storage/async-storage

  📌SplashScreen 피그마로 SplashScreen 만들고 앱에 적용하기

• npx expo install expo-splash-screen

  SplashScreen.preventAutoHideAsync(); // splashscreen 실행시키는 함수
  
  
  

useEffect(() => { setTimeout(() => { SplashScreen.hideAsync(); // 제거하는 함수 }, 2000);
}, []);

### 📌SplashScreen 번역이 세팅된 후 SplashScreen 숨기기

const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => { if (locale !== null && cookieKey !== "") { setIsLoaded(true); } }, []);

useEffect(() => { if (isLoaded) { SplashScreen.hideAsync(); } }, [isLoaded]);

### 📌Lottie 적용(1) SplashScreen이 사라진 이후 Lottie를 이용한 로딩화면 추가로 띄우기, conditinal rendering
 - npx expo install lottie-react-native

 import { View } from "react-native";
import LottieView from "lottie-react-native";

const LoadingView = () => { return ( <View style={{ flex: 1, backgroundColor: "lightblue" }}> <LottieView // ref={ref} autoPlay style={{ width: 150 }} source={require("../assets/loading.json")} // https://lottiefiles.com/97111-loading-spinner-dots /> ); };

export default LoadingView;

 - 첫번째는 SplashScreen 을 보여줘서 앱에서 필수적으로 세팅되기 전까지는 SplashScreen을 보여주다가 쿠키 데이터를 가져오는 2초동안 로딩을 보여주게 구현
### 📌react-string-format 을 이용해 변수에 따라 달라지는 언어별 문자열 대응하기 
  - npm install react-string-format
  import { format } from "react-string-format";

const y = new Date().getFullYear();

const m = new Date().getMonth() + 1; const d = new Date().getDate(); const todayText = format(t("today_is"), y, m, d);

### 📌Lottie 적용(2) 배경화면에 Lottie 적용하기, zIndex
 - import LottieView from "lottie-react-native";
 - https://lottiefiles.com/animations/background-full-screen-train-JaazABl2MA

<LottieView autoPlay={true} source={require("./assets/background.json")} resizeMode="cover" style={{ width: 850, height: 850, position: "absolute", zIndex: -1, }} />

### 📌커스텀 폰트 적용
 - npx expo install expo-font

import { useFonts } from "expo-font"; const [fontsLoaded] = useFonts({ RIDIBatang: require("./assets/fonts/RIDIBatang.otf"), });

fontFamily: "RIDIBatang", ```

2월목표

• 작은 프로젝트 들도 깃허브에 다 정리하기
• 나만의 notion 페이지 작성
• 리액트, 리액트 네이티브 집중적으로 공부하기
• cs 공부 대비하기
• 코테는 꾸준히
• 중요하지 않은 일에 시간 낭비하지 말기

📌준비 - 레퍼런스 찾기

핀터레스트

• https://www.pinterest.co.kr/

  WWIT

• https://wwit.design/

📌준비 - Unsplash

리소스 다운받기

언스플래시: 무료 이미지 및 사진(https://unsplash.com/ko)

• run 을 누르면 바로 실행 가능
• 마우스 우클릭으로 확인 가능
• 언스플래시 플러그인(https://www.figma.com/community/plugin/738454987945972471/unsplash)

📌준비 - Color, Font, icon

컬러 제너레이터(https://mycolor.space/?hex=#4A51E9&sub=1)

• 내가 고른색과 어울리는 색을 확인할 수 있는 사이트

  눈누: 상업적 이용 가능한 무료 폰트

• https://noonnu.cc/

  추천 폰트

• https://catus.tistory.com/306

  추천 아이콘

• https://www.figma.com/community/file/1014241558898418245/material-design-icons

🚌SectionList와 FlatList와의 차이

 <FlatList
          data={[
            { busNum: 146 },
            { busNum: 360 },
            { busNum: 740 },
            { busNum: 3412 },
            { busNum: 1100 },
            { busNum: 1700 },
          ]}
          renderItem={({ item }) => <Text>{item.busNum}</Text>}
        />
         <SectionList
          sections={[
            {
              title: "간선버스",
              data: [{ busNum: 146 }, { busNum: 360 }, { busNum: 740 }],
            },
            {
              title: "지선버스",
              data: [{ busNum: 3412 }],
            },
            {
              title: "직행버스",
              data: [{ busNum: 1100 }, { busNum: 1700 }],
            },
          ]}
          renderSectionHeader={({ section: { title } }) => <Text>{title}</Text>}
          renderItem={({ item }) => <Text>{item.busNum}</Text>}
        />

• FlatList는 data 안에 배열을 넣어줬지만 SectionList는 sections 가 필요 그리고 title, 그 안에서 반복될 data list 가 들어간다.
• Section 부분을 렌더하기 위해서는 renderSectionHeader 라는 prop을 활용

🚌useState, useEffect, setInterval 을 이용해 1초마다 도착시각 업데이트 하기

   const [now, setNow] = useState(dayjs());

    useEffect(() => {
    setInterval(() => {
      const newNow = dayjs();
      setNow(newNow);
    }, 1000);
  }, []);

• 만들어 줬으면 종료하는시점도 있어야 한다.

  useEffect(() => {
  const interval = setInterval(() => {
    const newNow = dayjs();
    setNow(newNow);
  }, 1000);
  
  return () => {
    clearInterval(interval);
  };
  }, []);

• 이렇게 해주면 컴포넌트가 언마운트 하는 시점에 자동으로 해제됨

  🚌SectionList - ListHeaderComponet

  • 헤더를 사용하기 위해서는 최상단이 안전영역 다음으로 그려지게 하면 안된다. SafeAreaView -> View 로 바꿔준다.

  • header 에 root 를 SafeAreaView 로 바꿔준다.

   const ListHeaderComponent = () => {
  return (
    <SafeAreaView
      style={{ backgroundColor: COLOR.GRAY_1, width: "100%", height: 200 }}
    ></SafeAreaView>
  );
  };  

  🚌ItemSeparatorComponent

  • FlatList나 SectionList와 같은 리스트 컴포넌트에서 각 아이템 사이에 위치할 컴포넌트를 지정하는 프로퍼티입니다. 이를 통해 아이템들 사이에 구분선이나 공간을 추가할 수 있다.

  • 기본적으로 ItemSeparatorComponent는 리스트 내부의 각 아이템들 사이에 렌더링됩니다. 예를 들어, 리스트에 데이터가 10개 있을 경우, ItemSeparatorComponent를 통해 9개의 구분선이나 공간을 추가할 수 있다.

🚌SectionList - refreshControl

• ScrollView, FlatList, SectionList 등에 스크롤이 가능한 곳에서 사용가능

  const [refreshing, setRefreshing] = useState(false);
  
   const onRefresh = () => {
  setRefreshing(true);
  };
  
  useEffect(() => {
  // 인디케이터가 보일때 데이터를 refetch 해준다.
  if (refreshing) {
    setNow(dayjs());
    setRefreshing(false);
  }
  }, [refreshing]);
  
  

refreshControl={
      <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
    }

   - refresh 를 했을 때 api 측에 data 를 다시 refetch 해달라라는 요청
   - refreshing 이 true 일 때 인디케이터 가 보이고, 데이터를 refetch 해준다.
   - data 가 refetch 되면 setRefreshing(false)로 해줘서 인디케이터가 사라지도록
   - setRefreshing(false) 는 api refetch 가 완료되는 시점


### 🚌 custom hook -useTheme(다크모드), Switch Component

import { useState } from "react"; import { DARK_COLOR, LIGHT_COLOR } from "./color";

const useTheme = () => { const [isDark, setIsDark] = useState(false);

const toggleIsDark = () => setIsDark(!isDark);

return { NEWCOLOR: isDark ? DARK_COLOR : LIGHT_COLOR, toggleIsDark, }; };

export default useTheme;

#### Switch Component

1.심화 기능: 오토레이아웃

📌오토레이아웃

css 의 flex 와 유사한 개념 가장 강력한 유용한 기능 중 하나

• 디자인 시간을 획기적으로 단축시킬 수 있다.
• 레이어를 선택하고 단축키 shift + a 하면 좌측 레이어 패널에 오토 레이아웃 하위로 묶임
• ctrl + z (이전 상태로 돌아감)
• 오토레이아웃을 추가하면 기본적으로 균등한 마진값을 가진채로 자동으로 정렬된다.
• 제거하려면 (단축키 alt + shift + a)
• 오른쪽 메뉴바에 auto layout( 빼기 버튼을 눌러도 제거됨)
• 최초의 상태로 되돌리고 싶다면( ctrl +shift+ g)

  📌 오토레이아웃 - 리사이징 이론

  • Hug contents 는 자식 요소의 크기에 따라 자동으로 리사이징 된다.
  • Fixed width 로 했다면 부모의 오토레이 영역은 고정됨
  • 하위 레이어에서 fill container 를 설정하면 마진 영역을 제외하고 남는 부분을 하위 레이어가 채운다.
  • 오토레이아웃을 선택하면 기본적으로 자동으로 마진값과 패딩값이 설정된다.
  • 복사할때는 alt 누르고 마우스 참고

    📌 오토레이아웃 - 패널 살펴보기, 추가 장점

  • 우측에 individual padding 을 토글하면 각각의 패딩값을 따로따로 설정 가능
  • 더보기 버튼을 클릭하면 패널을 불러오게 된다.
  • Canvas stacking 겹쳐지는 레이어의 순서를 설정
    • sns 나 유저 ui 기능 활용 (margin 값을 음수값으로 설정)
  • 오토레이아웃은 유연하다는 장점이 있다.
  • 오토레이아웃에 레이어를 추가하고 싶은 경우 드래그앤 드랍을 통해서 넣을수도 있다.
  • 해당 레이어를 꾹 눌러서 순서 변경 가능
  • control + d 복사하는 기능, control + z 되돌리기
  • container 오토 레이아웃을 클릭하고 enter 를 누르면 하위 레이어를 선택가능

    📌2.심화 기능: 컴포넌트

    컴포넌트 - 기본, 베리언트(Varient)

  • 컴포넌트란 언제든지 재 사용할수 있게 정의한 디자인 요소
  • 생성하는 방법
  • 레이어를 클릭후 중앙에 위치한 쿨바를 보면 create component 아이콘이 활성화됨(버튼 클릭)
  • 또는 우클릭 후 Create component 라는 영역 클릭
  • control + alt + k
  • 어디서 관리하는 지 : 좌측 사이드 바에 Assets 이라는 탭에서 components list를 확인 가능
  • 사용 하는 방법: 해당 component 를 단순히 드래그 앤 드랍으로 사용 가능
  • asset 에서 불러온 컴포넌트는 비어있는 사각형 모양이다. 기본적으로 component는 main 컴포넌트와 인스턴스로 구성된다.
  • main component: 최초로 만든 컴포넌트를 의미
  • main component 를 재사용 하게 되면 인스턴스 컴포넌트가 된다.(비어있는 사각형 모양)

  • main component 의 업데이트가 있으면 자동으로 인스턴스에도 반영이 된다.

  • main component 가 다른 페이지에 있다고 하더라도 사용 가능하다.

    베리언트(Varient)

    
• varient 는 변수라고 해서 component의 변수를 설정,
• varient를 추가하면 기본적으로 property 와 default 를 설정하게 된다.
  • add varient 를 하게되면 레이어가 하나더 추가가 된다.
  • varient 의 이름은 독립적이어야 한다.
  • varient 를 추가 후 인스턴스 를 살펴보면 이전에는 없던 프로퍼티가 추가가 된다.
  • color 를 선택할 수 있게 됨

📌3.반응형 설정

반응형- Constrains

• 
• CSS 상에 position 개념과 유사하다.
• 부모에 맞춰서 동작하는 개념
• 프레임 하위에 존재하는 레이어들을 선택했을 때 활성화 된다.
• 수평과 수직 두가지 다 조정 가능
• Right 로 설정 후 부모 레이어를 조절할 경우 우측에 고정되어서 움직인다.
• control 을 누른채로 프레임을 리사이즈 하면 하위에 레이어와 상관없이 변경된다.

피그마는 기본적으로 백터 기반의 ui 디자인 툴이라는 점에서 훨씬 더 생산성,효율적 이다.

• 벡터: 점과 점을 연결해서 수학적인 원리로 그림을 표현(svg)
  • 확대를 하거나 축소를 해도 깨지는 부분이 없다.
• 비트맵: 특정 색상값을 갖는 점(픽셀의 배열로 이미지를 표현) (png, jpg)
  • 확대나 축소시 테두리에 화질이 저하된다.

📌 피그마 툴 학습하기(기초)

📌1.인터페이스

• 스페이스바: 캔버스 영역 움직이기
• 버전히스토리 : 특정시점으로 가고 싶으면
• 사이드바
  • page: 각 페이지는 고유의 캠버스를 가지고 있다.(페이지를 클릭하면 캔버스 변경) 진행 상태에 따라서 진행중, 완성본 페이지를 나눌수 있다.
  • 레이어: 캔버스에 오브젝트를 추가할 경우 각 오브젝트를 분리된 하나의 레이어로 취급

    📌피그마 단축기

  • 피그마 내에서 단축기 확인하려면 control + shift + ?

📌 2.기본 기능

📌프레임(frame), 섹션(Section)

📌프레임

• 프레임은 디자인을 시장하기 전 바탕이 되는 도화지( 단축키 F)
• 우측바에 있는 설정된 프리셋을 불러올 수 있다.
• 프레임을 만들고 그 안에서 디자인을 한다.
• 프레임으로 레이어 그룹핑 하는법 (ctrl +alt+ g , option +command+ g)

  📌섹션

• 그룹핑을 할 수 있는 방법중 하나, 프레임이나 그룹보다 좀더 상위 개념(shift + s)
• 워크스페이스를 정돈하는 역할로 쓴다.

  📌기본 도형, 텍스트(Text)

  📌기본도형

• 쉬프트를 클릭시 비율에 맞춰서 만들 수 있다.

  📌텍스트(단축기 t)

• 클릭해서 생성
• 클릭하고 드래그해서 원하는 영역을 잡아서 생성 가능
• 더블클릭해서 수정 가능
• 선택한 상태에서 t를 누르면 바로 수정 화면 진입 가능

  📌코멘트(comment), 좌측 사이드바

  📌코멘트( 단축키 c)

• 원하는 부분 클릭
• 특정 영역 클릭하고 드래그해서 영역에 맞춰서 코멘트 남길 수 있다.
• 특정 사용자를 멘션할수도 있음
• 답변 가능 내용안에서 멘션가능
• 키보드 / 로 팝업코멘트를 남길 수 있다.

  📌좌측 사이드바

• 레이어: 마우스 커서를 올리면 자물쇠 모양, 눈 모양 활성화
  • 자물쇠는 잠금, 눈모양은 숨김 기능
  • 잠금을 하면 캔버스 상에서 클릭이 되지 않는다.

    📌정렬(Align), 프레임 사이즈와 오리엔테이션(frame & orientation)

    📌정렬

• 우측 사이드바에 가장 상단에 위치
• 2가지 이상의 레이어를 선택한 경우부터 정렬기능 활성화
• 프레임 안에 있는 레이어를 선택하고 정렬기능을 사용할 경우 프레임을 부모로 보고 부모를 기준으로 정렬된다.

  📌프레임

• 프레임을 선택한경우 프레임에 있는 화살표 버튼을 누르게 되면 프리셋들이 모여 있다. 프레임 사이즈 변경 가능
• 세로형, 가로형 으로 오리엔테이션이 돌아가는 모습 확인 가능
• 프레임을 클릭하고 resize to fit 누르면
  • 프레임 안에 레이어가 있다고 했을때 내부에 있는 레이어의 크기만큼 프레임이 자동으로 리사이즈 되는 기능

📌포지션(position), 디멘션(dimenstion)

📌포지션

• 일반적으로 레이어를 선택하면 우측사이드바 상단에 x 값과 y값을 통해서 확인
• 프레임 안에 존재하는 레이어의 경우 프레임을 기준으로 표시해준다.

  📌디멘션

• 포지션의 밑에 가로값과 높이값을 디멘션이라 부른다.
• 오른쪽의 링크를 클릭 후 가로 높이 값을 조정하면 비율에 맞게 조정됨
• 꼭지점을 대고 shift 를 누르면 회전할 수 있다
• 프레임을 클릭한 경우 clip comtent 라고하는 체크박스 활성화
  • 콘텐츠를 자를 것 이나 말것이냐 선택

    📌레이어(layer), 텍스트(text)

    📌레이어

  • 우측에도 레이어 패널이 존재한다.
    • 투명도 조절, 블랜드 모드 설정

      📌텍스트

• 텍스트 레이어를 클릭하면 우측사이드바에 텍스트 프로퍼티가 추가된 모습을 확인 할 수 있다.
• 폰트 종류 선택 가능
• 폰트 weight, 사이즈 설정 가능
• 문장의 행간 조절 가능
• 데브모드를 통해서 line-height 의 비율과 값까지 확인 가능
• 글자와 글자 사이의 간격 조절 가능(letter spacing)
• 더보기란 으로 데코레이션 가능

📌채우기(fill), 선(Stroke)

📌채우기

• 기본적으로 색을 칠할 수 있는 면의 성격을 가진 레이어라면, 우측에 보면 fill 레이어, Fill 프로퍼티가 활성화 된다.
• 우측 상단에 + 버튼을 눌러서 사용 가능
• gradient 적용 가능
• 이미지나, 동영상을 불러 올 수 있다.

  📌선

• 우측에 stroke 패널
• +버튼 클릭해서 추가 가능
• 여러개의 레이어를 중첩 가능
• 선의 포지션을 결정하는 부분: inside, center, outside
• 상단에만 적용하거나 하단에만 하거나 하는 설정 가능

  📌선택된 컬러,(selection colors,), 이펙트(Effects), 내보내기

  📌선택된 컬러

• 우측 사이드바 패널에 selection colors
• 복수의 레이어를 클릭하면 레이어들의 사용된 모든 컬러값을 보여준다.
• 해당 컬러가 사용된 레이어들을 한번에 수정 가능

  📌이펙트

• 플러스 버튼을 사용해서 여러개의 효과 적용가능
• layer blur 흐림 효과
• backgounrd blur 하단에 위치한 레이어에 블러 효과 적용(fill layer 를 100 보다 낮게 설정 해야 적용 가능)

  📌export

• 다운로드 받고 싶은 레이어를 클릭 후 우측 export 플러스 버튼 클릭
• 한번에 다운로드 가능

강의만 보고 따라치는 게 내 실력인 줄 착각했던 것 같다. 앞으로만 강의만 보고 따라치지 말고 강의를 보고 내가 직접 안보고 만들어보는 공부를 하면서 인출하는 방식으로 공부를 해야겠다.

아직 많이 부족하다. 더 열심히 해보자

자바스크립트 과제였고 4시간을 주고 미션을 구현하는 문제다.

처음 개발 공부를 시작할 때 자바스크립트를 3달 정도 공부 후 바로 리액트로 넘어가고부터는

자바스크립트에 대해 깊게 공부하지 않았고 리액트를 쓰다가 자바스크립트로 구현을 하니 조금 어색하기도 하고 헷갈렸던 것 같다.

화면 구현은 어떻게든 했지만 리팩토링, 모듈화를 하는 과정에서 시간이 조금 촉박해 제대로 하지 못했던 것이 조금 아쉬웠다. 그래도 미션을 하면서 느낀 점은 결국 자바스크립트라는 언어를 탄탄히 알고 있어야 한다는 것, 그래야 리액트를 하더라도, react-native를 하더라도 좀 더 이해가 빠르게 쉽게 할 수 있을 거라는 것이다. 방학기간에 자바스크립트 복습, 리액트, 리액트 네이티브에 대해 미리 공부해서 팀 프로젝트를 대비해 보자!

• request 처럼 성공 실패가 확실하지 않은 경우에는 되도록 try catch문을 쓰고,
• status에서 error를 만들어줄때는 throw문을 쓴다.

📌모듈화

• ES6 module 형태로 코드를 변경합니다.

  • webpack, parcel 과 같은 번들러를 사용x
  • 해당 코드 실행을 위해서는 http-server 모듈을 통해 index.html 로 띄워야 합니다.

    const config = {
    API_ENDPOINT : "http://localhost:4001"
    }
    import config from './config.js';
    const {API_ENDPOINT} = config;
    export default config;
    

  ### 중복제거 함수

  export default function uniqueArray(list) { return Array.from(new Set(list)); } ```

  📌기타리팩토링

• 

• data, 와 page 를 리펙토링 해준다.

• async await 리펙토링

  async showDetail(data) {
   const detailInfo = await api.fetchCatDetail(data.cat.id);
   if(detailInfo) {
      // 정보를 업데이트
      this.setState({
       visible: true,
       cat: detailInfo.data
     });
   }
  
  }

📌테스트

• npm install --save-dev jest 설치 후 npm run test

  import uniqueArray from '../utils/uniqueArray.js'; // 테스트 대상 모드를 불러오고 
  describe('uniqueArray.js', () => {   // describe로 시작 
  test('중복 제거 확인', () => {
  expect(uniqueArray([0, 1, 1])).toStrictEqual([0,1])
  })
  });

## 📌결과없음
- 검색 결과가 없는경우 유저가 불편함을 느끼지 않도록 ui적인 적절한 처리

this.data = { show: false, isNull: false }

 show(data) {
 this.setState({
  show: data === null || data.length === 0,
  isNull: data === null
 })

}

render() {
if (this.data.show) {
  this.$empty.style.display = 'block';
  if(this.data.isNull) {
    this.$empty.innerHTML = `
    <p>
      요청 실패😂
    </p>
    `;
  } else {
    this.$empty.innerHTML = `
      <p>
        결과가 없습니다.😂
      </p>
      `;
  }



} else {
  this.$empty.style.display = 'none';
  this.$empty.innerHTML = '';
}

## 📌추가 요구 사항
 - 검색어 히스토리를 숨겼다가 인풋에 마우스가 오버될때 보여주도록 ui 변경
 - 간단하게 css로 구현 

.SearchInputSection { position: relative; }

.KeywordHistory { display: none; position: absolute; top: 75px; left: 0; width: 100%; background: #000; margin: 0; padding: 20px; }

.SearchInputSection:hover .KeywordHistory { display: block; }

 - 검색결과 각 아이템에 마우스 오버시 고양이 이름 노출하기
 - 아이템 호버시 opacity: 1로 해주기

 ```.SearchResult .item .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, .3);
  text-align: center;
  font-size: 30px;
  color: #fff;
  opacity: 0;
  transition: all .5s ease;
}
.SearchResult .item:hover .content {
  opacity: 1;
}

• 랜덤 고양이 배너섹션 추가

• 최근 검색한 keyword를 Searchinput아래에 표시되도록 만들고, 해당 영역에 표시된 특정 키워드를 누르면 그 키워드로 검색이 일어나도록 만듭니다. 단, 가장 최근에 검색한 5개의 키워드만 노출되도록 합니다.

  구현해보기

  // SearchInput 컴포넌트 하위에 배치
   class KeywordHistory {
   $keywordHistory = null;
   data = null;
  
   constructor({ $target, onSearch }) {
       const $KeywordHistory = document.createElement('ul');
       this.$KeywordHistory = $KeywordHistory;
       this.$KeywordHistory.className = 'KeywordHistory';
       $target.appendChild(this.$KeywordHistory);
  
      this.data = [
       '아',
       '고양이',
       'cat',
      ];
  
    this.onSearch = onSearch;
    this.render();
  
   }
  
   render() {
       this.$KeywordHistory.innerHTML = this.data
        .map(
           keyword => `
           <li><button>${keyword}</button></li>
           `
        ).join(''); 
       this.$KeywordHistory.querySelectorAll('li button').forEach(
           ($item, index) => {
           $item.addEventListener('click', () => {
  
             console.log(this.data[index]);
             this.onSearch(this.data[index]);
           });
       });
  
  

이제 데이터를 어떻게 가지고 올까

• 로컬스토리지에서 데이터를 가지고 오기

예시코드

  init() {
      let dummy = [
        '아',
        '고양이',
        'cat',
      ];
      this.setState(dummy);
    }

    setState(nextData) {
    this.data = nextData;
    this.render();
    }

• let dummy 부분을 로컬에서 가지고 오면 됨
• 데이터를 split 통해서 배열로 바꿔준다.

  데이터를 get 하는 부분

  

데이터를 저장하는 부분

• 저장하는 부분은 searchinput 컴포넌트에서 작성
• 어떤시점에 작성을 할까 = 결과를 요청하는 시점, enter 하는 시점
  • keyup 은 한글일때 2번 요청하는 enter 오류가 난다. (keypress 사용)
  • 처음에 null 값이 오는걸 방지하기 위해서 삼항연산자 적용
  • 수정해야 될 부분
• 최근데이터가 위로 가게끔 구현해야 하므로 unshift 사용
• 데이터를 5개까지만 제한
  • slice(0, 5) 사용

페이지를 새로고침해도 마지막 검색 결과 화면이 유지되도록 처리하기

• APP.js 에서 구현해준다.
  • 이제 저장한 데이터를 가져오기만 하면 된다.

📌스크롤 다음 페이지

• 검색 결과화면에서 유저가 브라우저 스크롤바를 끝까지 이동시켰을 경우, 그 다음 페이지를 로딩하도록 구현
  • scroll 이벤트는 제한없이 계속 발생한다.
• 다음 페이지 메서드 구현
• app.js
  • cat 과 2라는 데이터를 어떤식으로 관리하면 좋을까, 저장을 해야한다.
  • 로컬스토리지에 저장되어있던 데이터를 getitem으로 가져온다.

• searchResult 에서 받아와서 실행해준다.

📌intersectionbserver (리펙토링)

• 기존 코드의 문제점은 스크롤 이벤트가 자주 일어나서 별도의 디바운드, 스로틀링 작업을 하지 않으면 퍼포먼스에 영향을 준다.(화면을 새로 그리는 작업을 하게 된다) - cpu, 낭비

• 사용자 경험에도 영향을 준다.

• 인터셉션 옵저버 활용해보기

• isintersecting 은 현재 뷰 포트에 등장을 했는지 여부 등장을 하면 true

• 각 이미지에 index을 부여해준다.

  • 해당 아이템의 이미지의 인덱스를 받아서 마지막인덱스 일때 다음페이지 호출

  • 처음에 이미지가 납작해서 마지막 페이지를 읽는 이슈로 인해 더미 이미지를 넣고, min-height 를 적용해준다.

    render() {
    this.$searchResult.innerHTML = this.data
     .map(
       (cat, index) => `
         <li class="item" data-index=${index}>
           <img src="https://via.placeholder.com/200*300" data-src=${cat.url} alt=${cat.name} />
         </li>
       `
     )
     .join("");
    
      // 이미지를 로드한다.
      item.target.querySelector('img').src = item.target.querySelector('img').dataset.src;

  • 더미 이미지에 이미지를 로드 해준다.

해당 글은 울트라 러닝 이라는 책을 읽고 정리한 글입니다.

📌법칙1_메타학습

먼저 지도를 그려라. 3가지 질문을 통해 메타 학습 탐색 해보기 왜, 무엇을, 어떻게

'왜' 그것을 배우려 하는지

• 무엇을 배우려는지 스스로 물어보는 일이 중요하다. 그래야 세우려는 학습 계획들이 목적에 적합한지 알 수 있기 때문

'무엇을' 획득해야 하는가

• 왜 배울지에 답했다면 이제 공부하려는 지식이 어떻게 구조화되어 있는지를 살펴봐야 한다.

  1.개념

2.사실정보 3.절차

개념

• 개념이란 단어 아래에는 이해해야 할 내용들을 적는다.
• 개념이란 그것을 유용하게 사용하기 위해 융통성 있게 이해해야 할 어떤 생각을 말한다.

사실정보

• 여기에는 암기해야 할 것들을 적는다.
• 사실 정보는 어쨋든 외우면 그만인 것들이다.

절차

• 여기에는 연습해야 할 것들을 적어 넣는다.

• 절차는 수행해야 하는 행동들로, 의식적인 생각과는 관계없다.

• 예를 들어 언어의 경우 새로운 어휘를 배우려면 새로운 사실 정보를 암기해야 하지만 발음에는 연습이 필요하다. 따라서 '절차'에 넣어야 한다.

  브레인 스토밍을 끝냈다면 가장 어려울 것 같은 개념, 사실 정보, 절차들에 밑줄 긋기

'어떻게' 학습할 것인가?

1. 벤치마킹
   2. 강조제거

벤치마킹

• 어떤 학습 프로젝트를 시작하는 방법은 대부분의 사람이 그 기술(분야)을 배운 공통적인 방식을 찾는 것
• 배우려는 분야가 전문적인 기술이라면 온라인에서 그 기술을 습득한 사람을 찾거나 전문가에게 그 분야를 공부하는 데 필요한 자원들을 물어보기.

  강조제거

  • 앱을 만드려고 혼자 프로그래밍을 배우고 있다면 나는 컴퓨터 이론보다는 앱 개발의 세부적인 작업들에 초점을 맞출 것
  • 주요 목표가 말하기라면 문자를 암기하는 것은 과감히 포기하고 말하는 데 능숙해지는 것이 훨씬 더 효과적이다.

계획을 얼마나 많이 세워야 할까?

10퍼센트 규칙

• 좋은 방법은 프로젝트를 시작하기 전에 예정된 시간의 약 10퍼센트를 탐색에 투자하는 것

• 1,000시간을 공부할 계획이라면 5퍼센트 정도의 시간

• 프로젝트를 시작하기 전에 일반적인 학습 방식, 인기 있는 자원과 도구들을 찾아보고 각각이 지닌 강점과 취약점을 아는 것이 좋다

  수확 체감과 한계비용 계산

  • 어떻게 탐색할지에 관한 질문의 답은 규칙적인 학습과 메타 학습의 한계비용을 비교해보기 더 많은 전문가를 면담하고, 더 많은 시간을 들여 온라인 검색을 이용 가능한 새로운 기술이 있는지 찾아본다. 그러고 나서 선택한 경로를 따라 몇 시간 더 공부한다.
  • 각각에 어느 정도 시간을 들인 뒤에는 두 활동의 가치를 재빠르게 비교해보기
  • 계속 탐색을 해나간다면 마침내는 그냥 학습을더 하는 것보다 가치가 줄어든다. 따라서 그 지점에서는 학습에 안정적으로 집중하기
  • 실제로 탐색이 주는 보상은 변동이 크다. 몇시간 탐색하고 잡자코 있따 보면 빠르게 성공을 이끌어낼 완벽한 자원들을 우연히 만날 수도 있따.

📌법칙2_집중하기

짧은 시간에 집중도를 높이기

📌법칙3_직접하기

목표를 향해 똑바로 나아가라

• 자이스월 이야기는 세 번째 법칙을 완벽하게 보여준 바로 '직접하기'

• 건축이 실제로 어떻게 이뤄지는지 보고 자신이 원하는 자리와 밀접한 관계가 있는 기술들을 습득합으로써, 그는 별로 인상적이지 않은 포트폴리오를 제출하는 졸업생 무리를 뚫고 나갈 수 있었다.

• 직접하기는 배우려는 기술을 실제로 사용할 환경과 상황에 가장 가까운 상태에서 학습하는 방식

• 로저 크레이그는 실제로 등장했던 질문들로 자가 테스트를 했다.

• 에릭 배런은 자신이 만들 비디오게임에 들어갈 아트워크를 직접 만들어봄으로써 비디오게임 아트를 배웠다.

  이런 접근법들의 공통점은 그 기술의 맥락에서 공부해서 마침내 실제로 그 기술을 사용할 수 있게 되었다는 점

• 직접 하기를 가장 쉽게 하는 방법은 그저 잘하고 싶은 그 일을 행하는 데 많은 시간을 들이는 것

• 언어를 배우고 싶다면 베니 루이스처럼 그 언어로 말하기.

• 시험에 통과하고 싶다면 거기에 나오는 문제들을 풀어보기

  직접 학습은 책을 읽거나 앉아서 강의를 듣는 것보다 좌절하기 쉽고, 도전적인 일이며, 강도가 높다. 하지만 이런 극도의 어려움이 울트라러닝 지망생들에게는 경쟁적인 이점을 주는 강력한 원천이 되기도 한다.

프로젝트 기반 학습

• 강좌보다는 프로젝트를 시도하는걸 택한다.
• 컴퓨터 게임을 만듦으로써 프로그램 짜는 법을 배우는 건 프로젝트 기반 학습의 완벽한 본보기다.

담금형 학습

• 자신이 목표로 한 기술을 실행할 환경에 뛰어드는 것 이는 그 기술을 이용할 상황에 자신을 노출시켜서 일반적인 학습 방식보다 훨씬 더 많은 연습을 하게 된다는 이점이 있다. ex) 팀 프로젝트에 참가하기

  모의 비행 방식

• 직접 하기 방식을 시뮬레이션하는 것이 학습전이를 더 잘 일으킨다. 따라서 프랑스로 여행을 가기 전에 프랑스어를 배우려면 낱말 카드를 넘기는 것보다 스카이프를 통해 공부하는 편이 학습전이가 더 잘일어날 것이다.

  과다 학습법

• 직접 하기를 강화하는 마지막 방법은 도전을 늘리는 것이다. 그럼으로써 목표를 달성하는 데 필요한 기술 수준에 도달할 수 있다.
• 애플리케이션을 곧장 프로그래밍하는것보다는, 누군가가 코딩하는 법을 촬영한 동영상을 보고 싶을지도 모른다.
• 어떤 프로젝트에 과다 학습법을 적용하는 방법 한 가지는 당신 자신에게 필요한 수준 이상의 시험이나 과제에 도전하는 걸 목표로 삼는 것이다.

  직접 학습은 울트라러닝 프로젝트의 중요한 특징으로, 대부분이 받아온 교육 방식과는 다르다.

• 뭔가 새로운 것을 배우려고 한다면 그 지식이 어디에서 어떻게 나타나야 하는지 스스로에게 물어보는 습관을 들이자.
• 다음으로 그 맥락에서 자신이 학습 중인 것과 연관된 일을 하고 있는지 물어보기

📌법칙4_특화 학습

취약점을 공략하라

• 자신의 학습 반응 속도에서 율속 단계가 어디인지 확인함으로써 그 부분을 따로 떼어내 집중적으로 학습하는 것이다.

• 기술의 전체적인 숙련도를 지배하는 그 부분을 증진시키면 해당 기술의 모든 측면을 동시에 연습하는 것보다 훨씬 빠르게 발전할 수 있다.

• 직접 하기 방식은 어떤 기술이 사용되는 환경과 근접한 환경에서 전체적인 기술을 연습하는 것인데, 특화 학습은 이와 정반대 방향에 있다.

• 특화 학습은 직접 연습 방식을 취하고, 그것을 부분으로 쪼갠다.

  직접 학습 다음에 특화 학습 전략

• 많은 사람이 부분적인 기술들을 충분히 개발하면 학습전이가 일어나리라는 희망을 품고 직접적인 맥락을 무시하거나 그 차이를 도외시한다.

• 첫 단계는 그 기술을 직접적으로 연습하는 것이다. 그 기술을 사용할곳이 어디인지, 어떻게 사용할 것인지를 이해하고 그 기술을 실현할 환경과 비슷한 환경에서 연습한다.

• 다음 단계는 직접 하기 기술을 분석하고, 집중해야 할 요소들이 너무 많아서 진도가 안 나가는 하위 기술 속에서 율속 단계인 요소들을 분리하기. 이 부분들을 잘하게 될 때까지 특화 학습 하기.

• 마지막 단계는 직접 학습으로 되돌아가서 지금까지 배운 것들을 통합하기

  특화 학습을 하는 가장 쉬운 방법

• 어떤 부분을 향상시켰을 때 최소의 노력으로 전체 능력을 가장 많이 향상시킬 수 있을까

• 방해꾼이 무엇인지 추적하고, '직접 학습 다음에 특화 학습'을 이용해 특화 학습으로 공략하고, 그것이 올바른 선택이었는지 잽싸게 점검한다.

  1. 시간 쪼개기
  2. 인지 요소 거르기
  3. 흉내 내기
  4. 돋보기 방식
  5. 되돌아가기

  시간쪼개기

• 지금 공부하고 있는 과제에서 점점 더 어려워지거나 중요해지는 요소, 시간별로 쪼개서 연습할 수 있는 요소들을 찾기.

  인지 요소 거르기

• 흉내 내기

• 그림 그리기 프로젝트를 할 때 사진이 아니라 다른 사람들이 그린 그림에서 시작하기

• 창조적 작업의 경우 자신이 과거에 만든 작업물을 편집하는 것

  돋보기 방식

• 어떤 한 가지 요소에 훨씬 많은 시간을 쏟는 것

  되돌아가기

• 특정 단계로 되돌아가서 기초적인 내용 하나를 배우고, 연습하기를 반복하기

📌법칙5_인출

배운 것을 시험하라

• 교과서를 보지 않고 기억 인출을 시도한 행위가 다른 모든 방식을 뛰어넘은 것

• 뭔가를 수동적으로 복습하면 자신이 뭘 알고 뭘 모르는지에 관한 어떤 피드백도 받을 수 없다.

• 기억에서 지식을 소환하려고 애쓰는 행동은 직접학습이나 피드백과 연계되는 것을 넘어서서 그 자체로 강력한 학습 도구다.

  • 낮은 강도의 학습 전략들은 대게 쉬운 수준의 인출 작업을 요구한다. 따라서 어려움을 높이고 미처 '준비가 되기' 전에 자체 시험을 치르는 것이 훨씬 효율적이다.
  • 인출은 사전 시험 효과 를 준다.

    효율적인 인출을 위한 팁

    1. 낱말 카드
    2. 자유 회상 - 책의 어떤 한 부분을 읽거나 강의를 들은 뒤, 빈 종이에 기억나는 것을 모조리 적는 것
    3. 문제집 방식 - 기록할 내용을 문제로 바꿔서 작고 나중에 답하는 것, 각 장별로 질문을 한가지로 제한하는 것,
    4. 도전 만들기 - 책을 보다 새로운 기술이 나오면 그 기술을 실제 예시로 표현해서 기록하는 것
    5. 클로즈 북 학습 방법 - 집접 하기든 특화 학습이든, 대상을 검색하는 능력을 차단하고 연습할 수 있다. 자료를 참고하지 않으면 그 정보는 참고 매뉴얼이 아니라 우리 머릿속에 저장된다.

📌법칙6_피드백

날아드는 조언을 피하지 마라

• 우리가 뭔가를 잘못하고 있다거나 그것을 어떻게 수정할 것인지 말해주는 피드백은 강력한 도구가 될 수 있다.

• 에릭 배런은 게임 초안을 작성할 때 자신에게 돌아오는 비평 모두에 주의를 기울이지는 않았다. 그 조언이 자신의 비전과 상충될 때는 무시했다.

• 상황 한복판으로 들어가 곧장 피드백을 받고 그 정보를 이용하여 빨리 습득하는 대신, 우리는 한 방 머곡 중요한 학습 자원을 회피하곤 한다.

  결과 피드백 수정 피드백 정보 피드백

  결과피드백 "너, 그거 잘못하고 있는 것 같은데?

  • 가장 흔하고 자주 받는 피드백
  • 우리가 전반적으로 얼마나 잘하고 있는지는 말해주지만 더 나아지고 있는지, 혹은 나빠지고 있는지는 알려주지 않는다.
  • 빠르게 발전 중일 때는 기존의 학습 방식을 고수할 수 있다.
  • 발전이 지체되고 있을 때는 현재 방식에서 무엇을 바꿀 수 있을지 살펴볼 수 있다.

  정보피드백 "너, 뭔가 잘못하고 있는 것 같은데?

  • 우리가 무엇을 잘못하고 있는지 말해준다. 하지만 그것을 어떻게 고쳐야 할지까지 말해주는 것은 아니다.
  • 록의 스탠드업 코미디 실험 또한 정보 피드백을 받는 행위다. 어떤 농담이 제대로 먹혔을 때와 그렇지 않을 때를 청중의 반응을 보고 알 수 있었다.

수정피드백: "네가 잘못하고 있는 것을 어떻게 고칠 수 있을까?

• 가장 좋은 피드백은 수정 피드백이다.

• 이는 우리가 무엇을 잘못하고 있는지, 그것을 어떻게 수정해야 할지까지 알려준다. 이런 종류의 피드백은 대게 코치, 스승, 교사에게서 오는데, 올바른 학습 자원을 사용하고 있다면 자동적으로 받을 수 있다.

• 너무 빠른 피드백은 인출 작업을 수동적인 복습 상태로 넘어가게 한다. 그리고 답을 이미 알고 있는 것은 학습의 효율성을 떨어뜨릴 수 있다. 어려운 문제를 접했을 때 정답을 찾는 걸 포기하기 전에 어느 정도 시간까지는 그 문제와 씨름해보라.

  더 나은 피드백을 얻는 4가지 전략

소음을 제거하라

• 피드백에는 우리가 처리하고 싶은 유용한 정보가 담긴 신호와 소음, 2가지가 존재한다.

  바람직한 어려움의 적정선 찾기

  • 자신이 성공할지 실패할지 예측할 수 없도록 환경을 주의 깊게 조정하기.
  • 실패가 너무 잦으면 문제를 단순화해서 그 일을 젣로 하고 있는지 알아차릴 수 있다
  • 실패가 거의 없으면 과제를 더 어렵게 하거나 기준을 더 엄격하게 올린 뒤 다양한 방법으로 해보고 무엇이 더 성공률이 높은지 알아보기
  • 자신의 성취에 관해 좋은 기분 or 나쁜 기분 을 느끼게 하는 상황을 피하도록 노력해야 한다.

    메타 피드백

  • 메타 피드백에서 중요한 유형 하나는 '학습 속도'다.
  • 모의고사로 실력이 얼마나 향상되었는지를 측정
  • 학습 속도가 느려지고 있다면 현재 사용 중인 방식에서 벗어나 특화 학습, 다른 학습 방식을 적용 해보는 게 이득이 될 수 있다.

빠르고 강도높은 피드백을 받아라

• 피드백을 향상시키는 가장 쉬운 방법 하나는 많이, 자주 받는 것이다.
• 강도 높고 재빠른 피드백은 정보적 이점을 제공하지만 훨씬 더 큰 장점은 강정적인 부분에 있다. 피드백에 대한 두려움은 종종 그 무엇보다 우리를 움츠러들게 한다. 강도 높고 빠른 피드백이 몰아치는 상황에 스스로 몸을 던지면 처음에는 불편하겠지만, 몇 달이고 몇 년이고 기다렸다 피드백을 받는 것보다 나을 수 있다.
• 스스로 어마어마한 양의 피드백에 노출되어 신호에서 소음을 제거하는 것이다.

📌법칙7_유지

새는 양동이에 물을 채우지 마라

• 유지는 전략적으로 우리가 배운 것을 머릿속에서 새나가지 않게 하는 능력

• 우리의 뇌가 최초에 배웠던 것을 훨씬 더 많이 망각하는 이유

  • 쇠퇴, 간섭, 망각된 신호

  망각을 이기는 4가지 암기법

  공백: 기억하기 위해 반복하라

  • 10시간을 들여 뭔가를 공부한다면 하루에 10시간 공부하는 것보다 하루 한 시간씩 열흘 동안 공부하는 편이 훨씬 낫다.
  • 공백을 적용하는 또 다른 전략은 반정기적으로 재환기 프로젝트를 행하는 것이다.
  • 어떤 기술을 반정기적으로 연습하는 일

    절차화: 자동화될수록 더 오래 기억한다.

  • 절차적 지식은 무척이나 탄탄하며 서술적 지식보다 훨씬 오래 기억되곤 한다.(키보드 타이핑 하는 법)
  • 대량의 지식이나 기술을 균등하게 공부하기보다 일부 핵심 정보에 훨씬 자주 초점을 맞춰 공부하는 것.

    초과학습: 더 연습할수록 완벽해진다.

  • 어떤 기술의 핵심 요소들을 꾸준히 연습하고 제련하기
  • 고급 과정의 연습으로 보다 상위 수준에서 하위 기술의 핵심 부분들을 연습하기

    연상기호: 그림 하나로 수천 개의 단어를 기억하기

  • 📌법칙8_직관

    뼈대를 세우기 전에 깊게 파라

• 어려운 문제라고 쉽게 포기하지 말기

• 대상을 증명하는 방식으로 이해하기

• 늘 구체적인 사례를 가지고 시작하기

• 자신을 속이지 말기

  • 더닝 크로거 효과: 어떤 주제에 관해 제대로 이해 하지 못하면서 실제로 아는 것 보다 더 많이 알고 있다고 믿는 걸 말한다. 방법은 질문 많이 하기!!

    파인만 기법 활용하기

1. 종이 한장을 꺼내 이해하려는 개념이나 문제를 위에서부터 쭉 써 내려간다.
2. 그 아래 공간에 누군가에게 가르치듯이 설명을 해본다. a. 그것이 개념이라면, 그 개념에 대해 한 번도 들어보지 못한 사람에게 어떻게 전달할 수 있을지 스스로 물어본다. b. 그것이 문제라면, 어떻게 풀지 설명한다. 그리고 풀이 과정이 어째서 타당한지 스스로 설명해본다.
3. 벽에 부딪혔을 때, 즉 자신이 이해하고 있는 것으로 정답을 도출하지 못했을 때는 책, 공책, 교사, 참고 자료 등으로 돌아가 답을 찾는다.

📌법칙9_실험

자신의 안전지대 밖을 탐험하라

1. 따라하기, 창조하기
2. 방법들을 나란히 놓고 비교하기
3. 세로운 제약을 도입하기
4. 관련 없는 기술들을 결합해 자신의 힘 찾기
5. 극단을 탐험하기

📌나의 첫 울트라러닝 프로젝트 시작하기

1단계: 자신에게 필요한 조사하기

1. 어떤 주제를 공부할지 대략적인 범위 정하기
   2. 사용하게 될 주요 자원들을 결정하기
   3. 벤치마킹할 다른 사람들의 방법을 찾기
   4. 직접 연습 기회를 찾기
   5. 예비 재료와 수단을 구하기

2단계: 일정을 조율하기

3단계: 계획을 실행하기

4.결과를 검토하기

5.배운 것을 유지할 것인가, 완전히 익힐 것인가

📌프로젝트 spec과 user story 개념 정리

가계부 서비스 spec

• 소비내역을 관리하여 나의 자산현황을 파악하고 이전 기록을 확인하는 목적
• main 컨셉
  • 현재 자산을 관리할 수 있다.
  • 소비내역을 관리할 수 있다.
• entity 와 속성
  • entity: 식별할 수 있는 대상으로 정리한 것
  • 자산: id, 금액, 최초 생성일자, 수정 일자
  • 소비내역: id, 금액, 카테고리, 내용, 시점금액 생성 일자

    User story

  • 유저의 목표달성을 위한 인터렉션을 하나의 문장으로 정리한 것
  • {{사용자}} 는 {{무언가를}} 위해 {{무언가를}} 할 수 있다.

    main 컨셉에서 디테일하게 세분화

  • 현재 자산을 관리할 수 있다.
    • 현재 자산을 조회할 수 있다.
    • 현재 자산을 등록할 수 있다.
  • 소비내역을 관리할 수 있다.
    • 소비내역을 등록할 수 있다.
    • 소비내역을 수정할 수 있다.
    • 소비내역을 삭제할 수 있다.

📌User flow 정리

• user stroy를 기준으로, 구현 시나리오를 정리한 것
• 원칙
  • 유저의 행동을 시작으로 시나리오가 시작
  • 유저의 행동에 따른 피드백을 제공해야함
• 시나리오 성공 case를 먼저 작성
• 시나리오가 실패되는 case를 나열
  • ==엣지 케이스
  • 시나리오의 조건들을 나열하고, 조건별로 실패가능한 케이스를 정리

    가계부 서비스 - user flow

• 소비내역을 관리할 수 있다. > 소비내역을 등록할 수 있다.
• 필수 조건: 자산 존재 여부, 자산 금액
• 성공 시나리오
  • 유저는 자산이 0원 이상 경우 소비내역을 등록 할 수 있다.
• 실패 시나리오
  • 유저는 자산이 0원 미만이면 소비내역을 등록할 수 있다.
  • 유저는 자산보다 많은 금액을 소비내역을 등록할 수 없다.

    상세 flow- diagram

  • 소비내역을 관리할 수 있다 > 소비내역을 등록할 수 있따.
  • 필수 조건: 자산 존재 여부, 자산 금액
  • "유저는 자산을 확인한 후, 소비내역을 입력하여, 다시 계산된 자산을 확인할 수 있다."

📌tech spec

tech flow

1. 서비스에 접근한다.
2. 유저가 액션을 하면, 서비스는 액션을 입력 받는다.
3. 입력받은 데이터를 서버에 저장한다.
4. 현재 자산을 서버로부터 받아온다.
5. 서버로부터 받은 자산 데이터를 화면에 보여준다.

1. 서비스에 접근한다.

• 구현 목표: 유저가 브라우저에서 화면을 확인할 수 있도록 한다.
• 필요
  1. 유저가 브라우저에 접근한다.
  2. 유저가 확인할 수 있는 화면이 그려진다.
• tech flow
  1. 브라우저를 사용하여 서비스 url에 접속한다.
  2. 서비스에 필요한 파일을 load 한다.
  3. load한 파일들을 활용하여 화면을 그린다.

     2. 유저가 액션을 하면, 서비스는 액션을 입력 받는다.

• 구현 목표: 유저의 액션을 서비스에서 입력받는다.
• 필요:
  1. 유저가 액션할 수 있는 ui
  2. 유저의 액션을 입력받을 수 있도록 준비
• tech flow
  1. input ui에 키보드로 숫자를 입력한다.
  2. input에 등록된 이벤트가 실행된다.
  3. 입력받은 데이터를 브라우저에서 확인할 수 있다.

     3. 입력받은 데이터를 서버에 저장한다.

• 목표: 유저에게 입력받은 데이터를 서버에 저장
• 필요
  1. 서버
  2. 서버와 브라우저간 통신(api)
• tech flow
  1. 유저가 버튼을 클릭
  2. 버튼에 등록된 서버 전송 이벤트가 발생
  3. api를 통해 서버에 데이터 저장을 요청
  4. 서버는 요청사항이 완료되면, 브라우저에게 알려준다.

     4. 현재 자산을 서버로부터 받아온다.

• 목표: 현재 자산 데이터를 서버로부터 받아온다.
• 필요:
  1. 서버
  2. 서버와 브라우저가 통신(api)
• tech flow
  1. api를 통해 서버에 데이터 조회를 요청한다.
  2. 서버에서 데이터를 응답해준다.

     5. 서버로부터 받은 자산 데이터를 화면에 보여준다.

• 목표: 서버로부터 응답받은 데이터를 화면에 보여준다.
• 필요:
  1. 서버로부터 응답받은 데이터
  2. 응답 데이터를 유저가 보기 쉽게 처리하는 로직
  3. 유저가 확인할 수 있는 화면 그리기
• tech flow
  1. 응답 데이터를 유저가 보기 쉽게 처리
  2. 처리된 데이터를 화면에 다시 보여준다

3가지 레이어

• 웹/유저/서버 간 인터렉션

1. 웹 -> 유저: 화면을 보여준다.(렌더링)

2. 웹 <- 유저: 액션 입력 받을 수 있도록 한다.

3. 웹 -> 서버 : 데이터 조회/저장/수정 요청한다.

   • 1. 웹 <- 서버: 요청사항에 대한 응답을 받는다.

   📌Tech Spec- 렌더링

   렌더링

   • 기본 렌더링
   • html 파일에 문서를 작성
   • 최초 파일이 로드, 브라우저에 의해 html 을 읽어, 화면 그림
   • 런타임 때 렌더링
   • 런타임때 js로 렌더링 조작
   • 액션이 있을때 ui를 변경해야하는 case

     html을 통한 렌더링

• html파일, css 파일, dom의 개념

• html

  • hyper text markup language의 약자
  • 웹페이지와 웹사이트의 구조를 구성하는 코드(마크업)
  • 웹을 로드할 때 처음에 로드하는 파일

• css

  • cascading style sheet
  • 마크업 언어가 실제로 표시되는 방법을 기술하는 스타일 언어
  • 선택자 {...}

• DOM

  • Document Object Model
  • html 문서와 상호작용할 수 있는 인터페이스
  • node와 object로 문서를 표현
  • 트리 구조: 부모/자식의 관계가 형성
  • 렌더링 과정
    • 1. html 마크업 파싱(읽어들이는 과정) - DOM 트리 구축
    • 2. css 마크업 파싱 - CSSOM 트리 빌드
    • 3. dom 과 cssom을 결합하여 렌더링 트리 형성
    • 4. 렌더트리 배치
    • 5. 렌더트리 페인팅
  • 2) 런타임때 렌더링 조작
  • triggering이 있을때 ui를 변경해야하는 case
  • 런타임때 자바스크립트로 dom을 조작하여 렌더링
  • 리렌더링 - 리페인팅, 재배치 발생
  1. 자바스크립트로 DOM노드 선택
  2. 노드 조작
     • 선택한 노드에 새로운 노드 추가
     • 선택한 노드 수정/삭제
  • document 인터페이스를 통해 접근
  • DOM 노드 선택
    • document.querySelector(선택자)
    • document.querySelector(".className")
    • document.querySelector("#idName")
  • 노드 생성
    • document.createElement(태그이름)
  • 노드 추가
    • Node.appendChild(Node)

📌이벤트

유저가 클릭 했을 때, 함수를 실행 시키고 싶다?

EventTarget 객체

• 이벤트의 대상이 되는 객체가 eventtarget 객체를 구현
  • document, window ...
• 이벤트를 수신할 수 있는 수신기를 가질 수 있음

  이벤트 유형

• 유저와의 상호작용, 기본환경 상태의 변화..
• click, focus(input), blur(input)..

  addEventListener

  • Node.addEventListener(이벤트 유형, 콜백함수)
  • 요소를 생성할 때, 이벤트 리스너도 함께 등록

📌서버간 통신

• 데이터 조작을위해 클라이언트와 서버와의 통신이 필요함
• 서버 통신에는 물리적인 시간 지연이 발생
  • 요청과 동시에 바로 처리 불가능
  • 요청이후 응답이 오기까지 기다렸다가, 응답 신호를 받아야함
• 자바스크립트는 이러한 상황에 필요한 처리기가 필요
  • 콜백 패턴
  • promise 객체
  • async- await

    Promise

• 미래의 어떤 시점에 결과를 제공하겠다는 약속을 의미하는 이름의 Promise객체를 제공
• Promise 객체의 3가지 상태
  • 대기 pending: 수행중
  • 이행 fulfilled: 성공적으로 완료
  • 거부 rejected: 수행이 실패
• 메서드:
  • then: fulfilled 일 경우
  • catch: reject 일 경우

동기와 비동기

동기

• 직렬적으로 작업을 수행하는 방식
• 요청 이후, 응답을 받아야지 다음 동작이 이루어지는 방식

비동기

• 병렬적으로 작업을 수행하는 방식
• 요청 이후, 응답수락 여부와 상관없이 다음 작업이 동작하는 방식

async- await

• 비동기 처리 패턴 중 하나
• promise 단점 보안. 가독성을 높임
• 함수에 async 키워드를 붙여, promise 인스턴스를 반환
• await를 promise 인스턴스 앞에 추가하고, 성공처리 이후에 다음 함수 명령문 실행

📌프로젝트 셋팅

npm

• 다른이가 만든 코드 패키지를 사용하여, 프로젝트 작업의 시간을 단축,
• 패키지들의 설치 및 관리가 필요

  노드 패키지 매니저

  • node.js의 패키지 관리자.
  • 모듈 설치를 관리해주는 역할.
    • 버전관리, 코드 종속성 관리

      번들러 : 의존성 있는 모듈 코드를 하나의 파일로 만들어주는 도구

• html, css, javascript 파일들
• 개발 편의와 브라우저에서의 최적화 코드간의 형태 차이
  • 개발 편의: 가독성, 프레임워크 및 라이브러리 사용,
  • 브라우저 최적화: 용량 최적화, 캐싱, 리소스 최적화, 버전 대응...
• 작업된 코드를 브라우저에 최적화되도록 정리하는 중간 처리기가 필요
• 대표적인 번들러
  • wepack,vite,parcel, ...

    📌실습

    npm,html, vite 설치

• npm init -y
• npm install vite -D

  Sass 설치

• npm add -D sass

  json server 세팅

• npm install -D json-server
• npx i axios

  git 세팅

• git init
• git add .
• git commit -m "프로젝트 세팅"

📌Git 버전 관리 시스템

버전 관리 시스템의 목적

• 이력 관리

  • 무언가 잘못됐을 때 돌아가기
  • 특정 시점 사이의 변화 비교하기
  • 누가, 왜 수정했는지 파악하기

• 분기 관리

  • 큰 변경 작업을 안전하게 진행하기
  • 병렬적으로 진행된 작업을 편리하게 통합하기
  • 종류 : git, mercurial, subversion...

    git은 분산(저장소) 버전 관리 시스템

• 서버에서도 진행, 컴퓨터에서도 진행 각각 진행한다.

• 로컬과 서버에 동시 존재한다.

• git은 기본 동작으로 최대한 변화를 발생시키지 않으려 한다.

  git 저장소 생성 방법

• git init(내 로컬에서 먼저 만드는 것)

• git clone(remote 에 있는걸 그대로 복제해오는 것)

  commit

• 의미 있는 변화

• 미래를 위한 보험(현재의 변화를 추적하기 위한 용도)

• 하나로 만들어놓은 커밋을 3개로 분리하기는 힘듬

• 3개로 쪼개어 놓은 것을 하나로 합치는 것은 쉬움

• 가급적이면 쪼개는 것이 낫다.

  Staging Area

  branch

• 분기관리

• 위험한 작업을 바로 메인에다 올려둘 수 없으니 분리해둠

• 용도에 따른 분리

• 브랜치를 합치는 명령어 merge / bebase

📌Github

github에 push하기

로컬 저장소에 있는 commit 들을 github에 반영

• push 를 해준다.
• pull (remote 에 있는걸 rocal로 가져온다.) fetch 후 pull
• Branch Workflow
  • git flow, gitbhub flow(가장 간단), gitlab flow, trunk-based flow
• pull request

Fork

• (오픈소스에 기여할 때 필수, 협업을 할 때 선택적으로 적용)

  충돌최대한 적게 하면서 push 하는 방법

• pull 을 자주 한다.
• 두 작업자가 같은 파일을 수정하지 않도록 작업을 나눈다.
• 작업량 작게 만들기