GraphQL GraphQL(GQL)이란 페이스북에서 만든 API (Application Programming Interface) 를 위한 쿼리 언어이다. SQL(Stucted Query Languag)와 마찬가지로 쿼리 언어이지만 조금 다르다.

GrpahQL(GQL) 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적인 쿼리 언어

Structured Query Language(SQL) 데이터 베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적인 쿼리언어

두 쿼리 언어의 다른점을 조금 더 살펴보자면 GraphQL의 문장은 주로 클라이언트 시스템에서 작성하고 호출하지만 SQL은 주로 백엔드 시스템에서 작성하고 호출한다는 점이 있다.

//SQL 예시 SELECT first_name, last_name FROM users WHERE age>18 ORDER BY last_name ASC; //GraphQL 예시 query{ user(id:"1"){ firstName lasName friend{ firstName lasName } } } GraphQL의 특징 GraphQL의 특징을 알아보자

타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임이다. 특정 데이터베이스나 플랫폼에 종속적이지 않다. HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다. 데이터 결과를 JSON 형식으로 응답받는다. GraphQL 라이브러리가 조회 대상 schema (데이터 베이스에서자료의 구조, 표현방법, 관계를 형식 언어로 정의한 구조)가 유효한지 검사한다. 서버 개발자가 작성한 각 필드에 대응하는 reslover (요청에 대한 응답을 결정해주는 함수로 Query, Mutation, Subscription 과 같은 타입의 로직) 함수로 필드의 데이터 조회가 가능하다. REST API와는 다르게 /graphql 하나의 엔드포인트에서 쿼리를 이용해 여러개의 API에 요청, 응답 받을 수 있다.

일단 회의 결과 백오피스 만들때 적용해보자고 했고 세세한 부분은 차근차근 공부해야겠다.

슬슬 면접을 준비하며 부족한 CS 지식을 함께 공부 중이다. 그 중 CS공부를 하며 헷갈렷던 개념을 하나하나 정리해보려 한다.

TCP (Transmission Control Protocol)

전송제어 프로톨콜 IP의 상위 프로토콜로 패킷(네트워크에서 사용하는 작게 분할된 데이터 조각, 데이터의 기본 단위) 을 재조립 후 손상, 손실된 패킷 재요청을 한다.

IP (Internet Protocol)

인터넷 프로토콜 메시지가 목표로 하는 컴퓨터에 잘 도착하도록 해주는 역할

두 방식을 조합해 인터넷 통신을 하는 것을 TCP/IP라 부른다.

TCP/IP 계층 구조

TCP/IP는 링크, IP(인터넷 계층), TCP, 응용(인터넷 서비스) 계층으로 나누어져있다.

TCP/IP의 특징

• 인터넷 연결을 위한 프로토콜이다.
• 4계층 (링크계층, IP계층, TCP 계층, 응용계층)으로 구분된다.
• TCP는 데이터 전송 프로토콜로 연결형 프로토콜이다.
• IP는 여거래의 패킷 교환망들의 상호 연ㄹ결을 위한 범용 비 연결형 프로토콜이다.
• 현재로는 SMTP(이메일), HTTP, FTP(파일), Talnet(원격접속)이 주요 서비스이다 (응용계층).
• IPv6는 IPv4의 한계로 인해 출현하였다.
• Unix OS가 탑제된 웨크스테이션이나, 미니컴퓨터를 주축으로 하여 운영되고 있다.

TCP - 신뢰성 있고 무결성을 보장하는 연결을 통해 데이터를 안전하게 전송해주는 전송 프로토콜 IP - 패킷들이 가장 효율적인 방법으로 최종 목저지로 갈 수 있도록 해주는 프로토콜

출처:

• 코드온 - TCP/IP 3분 개념이해
• 최희준교수의-컴퓨터 일반 (TCP/IP)

개인 프로젝트를 준비하며 패키지 관리자를 정하려던 중 npm과 yarn 만 사용 해봤는데 어디서 주워들었던 yarn berry에 대한 궁금증이 생겨 사용해 보려 공부하기 시작했다. yarn 2라고 불리는 yarn berry에 대해 알아보려한다.

yarn berry는 yarn의 새로운 버전으로 PnP(Plug'n'Play)와 같은 다양한 기능 개선이 이루어지고 zero install을 통해 배포 시간을 대폭 감소 시킬 수 있다고 한다.

zero install 이란 설치를 하지 않고 이용하는 방식을 말한다.

• 기존 node_modules에서 모든 디펜던시를 인스톨하느라 소모하던 시간을 없앨 수 있다.
• CI 실행시간, 배포시간을 감소 시킬 수 있다.

yarn berry 마이그레이션 방법

berry 활성화 $ yarn set berry yarn을 최신 버전으로 업데이트 $ yarn set version stable berry 버전이 세팅되면 .yarnrc.yml이 루트 경로에 설정된다.

yarn config 설정

.yarnrc.yml

nodeLinker:"pnp" // pnp, pnpm, node_modules 중 선택 가능

설정 후에는 의존성에 대한 문제가 있는지 검사를 해준다. $ yarn dlx @yarnpkg/doctor

• zero install을 사용하는 .gitignore 작성법

  .yarn/*
  !.yarn/cache
  !.yarn/patches
  !.yarn/plugins
  !.yarn/releases
  !.yarn/sdks
  !.yarn/versions

• zero install 사용하지 않는 방법

  .pnp.*
  .yarn/*
  !.yarn/patches
  !.yarn/plugins
  !.yarn/releases
  !.yarn/sdks
  !.yarn/versions

• ZipFS - a zip file system extension node_nodules 대신 pnp 모드로 설정을 하게 되면 필요한 라이브러리 모듈을 .yarn/.cache 디렉토리에 zip 아카이브 파일로 관리하고 zip으로 된 각 모듈의 의존성 트리 정보들은 프로젝트 루트의 .pnp.cjs 파일로 관리한다.

• 타입/모듈 추론을 위한 명령어 $ yarn dlx @yarnpkg/sdks vscode 타입/모듈 추론이 되지 않아 모듈에서 에러를 해결해주는 명령어다. 명령어를 입력하면 이런 팝업이 뜨는데 allow를 해주면 에러를 해결할 수 있다.

현재까지 알아보며 정리한 정보는 여기까지이며, 앞으로 프로젝트를 진행하며 부족한 부분에 차차 공부할 예정이다.

출처: https://helloinyong.tistory.com/341

최종프로젝트 전 마지막 프로젝트의 끝! 이번 리액트 심화 프로젝트는 빨리빨리 자기 몫을 다 해준 팀원들 덕분에 아직 발표가 남았지만 모든 기능을 완성하고 배포까지 다 끝냈다. 정말 제일 여유롭고 정말로 내 할일만 신경쓰면 되는 프로젝트였고 처음으로 스트레스 보다는 재미있게 프로젝트를 진행했다. 개인적으로 할 일이 너무 많아 바빴지만 그래도 프로젝트 하는게 재미있어서 다른 일은 제쳐두고 프로젝트에 조금 더 집중했고 그 결과 빠르게 좋은 결과물을 낼 수 있던 것 같다.

이번 프로젝트에 우리 조가 구현한 기능은

• 로그인,회원가입
• 댓글 CRUD
• 설문조사 테스트 기능
• 카카오 맵 API 연동
• 카카오톡 공유하기 AIP 연동
• SNS(페이스북, 트위터) 공유하기 연동
• 클립보드 복사 기능
• 스테이터스 바
• 라이브러리를 이용한 애니메이션 (눈내림, 커서 이미지)
• 반응형 웹 (모바일, 태블릿, 데스크탑)
• open graph (오픈 메타 태그 적용)

공통된 어려웠던 점들은 타입스크립트를 적용하는 부분에 있었다. 처음 타입스크립트를 이용한 프로젝트를 진행하며 props를 지정하는 부분부터 하나하나 다 어려웠다. 기능을 구현하는 것도 어려운데 타입까지 지정해주면서 진행하려니 오류가 많이 났고, 기능이 구현이 됐는지 확인 하기 어려워서 처음에는 모든 부분에 any를 지정해주고 기능이 잘 됐는지 확인했던 것 같다. 이렇게 하는게 맞나 의문도 갔지만 그래도 차차 진행하면서 조금씩 익숙해졌고 그래도 마지막에는 타입스크립트가 무엇인지 조금은 알 수 있던것 같다. (아직 멀었지만)

이번 팀은 모든 조 중에서 가장 빠르게 진행되고 마무리까지 완벽하게 되었다. 원활한 협업은 이렇게 삶의 질을 높여준다니... 최종 프로젝트도 이렇게 좋은 팀원들만 있었으면 좋겠다...!

최종 프로젝트 전 마지막 프로젝트 그리고 긴 설 연휴의 시작

벌써 12주, 3개월차에 접어들었고 한달 차 이후에는 주말에 나가지도 않고 놀지도 않아서 그런지 요즘 하기 싫어 병에 거려서 정말 꼭 해야할 일 (캠프 공부) 말고는 아무것도 하지 않았다. 공부 말고도 사실 급하게 해야할 일들이 너무 많은데 진짜 너무너무 하기 싫고 오히려고 코딩 공부가 재밌어서 다른 해야할 일 말고 공부가 더 하고싶다. 현실은 설에 집에도 못 갈정도로 너무 바쁘지만 이겨내 보려고 시간표도 짜보고 하나하나 해결해 나가는 중인데, 하나 끝냈다고 또 잠시 멈춰있는 상태이다.

• _ 학교 시험_
• 타입스크립트 공부
• 학교 과제
• 프로젝트 준비 (공부)
• 리액트 개인 공부
• 이사준비 !!!!!!!!

그리고 연휴기간 동안 해야 할 일

• 학교 과제!
• 프로젝트 마무리
• 이사준비 !!!!!!!!!!!!!

정말 살면서 하루가 48시간이었으면 좋겠다고 생각한 것도 처음이고 지나가는 시간이 너무 아깝다고 생각한 적도 처음이다. 매일매일 뒤쳐지는것 같은 기분이고 그럴수록 그냥 아예 놔버리고 하기 싫어진다. 그래서 이번 연휴기간 그리고 앞으로 남은 최종프로젝트 전 기간까지는 너무 급하게 생각하지 말고 천천히 내 페이스 대로 진행하는게 목푠데....

스트레스 받지 말고 조급해하지 말고 잘 할 수 있겠지..?

타입스크립트 기본 타입

타입스크립트는 type annocation:을 통해 변수나 함수 같은 자바스크립트 코드에 타입을 정의할 수 있다.

기본 타입 12가지

• Boolean
• Number
• String
• Object
• Array
• Tuple
• Enum
• Any
• Void
• Null
• Undefiend
• Never

String

let str: string = "hi"

Number

let num: number=10;

Boolean

let IsLoggedIn: boolean: false

Object

let obj: {name:string, age:number} = {name: "kim", age:30};

Array

let arr: number[]=[1,2,3];
let arr:Array<number>=[1,2,3];

Tuple

• 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식

  let arr:[string,number]=["hi",10]

  Enum

  enum Direction{
  Up, //0
  Right, //1
  Down, //2
  Left //3
  }

  Any

• 모든 타입에 대해서 허용한다

  let str:any="hi"
  let num:any=10
  let arr:any=['hi',2,true]

  Void

• 변수에 undefined 와 null만 할당하고 함수에는 반환값을 설정할 수 없는 타입

  let unuseful:void = undefined;
  function notuse():void{
  console.log('hi')
  }

Never

• 함수의 끝에 도달하지 않는 타입

function neverEnd():never{
  while(true){
  }
}

TYPESCRIPT

타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. ( 슈퍼셋: 특정한 언어의 모든 기능을 포함하면서 다른 기능까지 포함하도록 향상 또는 확장된 것)

자바스크립트의 타입을 부여한 언어 이자 자바스크립트의 확장된 언어로 볼 수 있다. 타입스크립트는 마이크로 소프트에 의해 개발/관리었으며 대규모 어플리케이션을 개발하는 데 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해 자바스크립트의 단점을 보완하여 개발 되었다.

타입스크립트의 장점

• 자바스크립트의 모든 기능을 포함하며 타입을 지정해주어 여러 타입으로 인해 발생하는 오류를 미연에 방지할 수 있어 생상성이 향상된다.
• 코드 작성시 오류를 체크하고 타입을 미리 결정하기 때문에 실행속도가 빠르다.
  • 자바스크립트는 동적 타입의 인터프리티 언어이다 ( 런타임 실행시 타입을 결정해 적용되기 때문에 실행속도가 오래걸린다).
• 타입을 명시하고 보여주기 때문에 안정적이고 협업에 용이하다.

타입스크립트의 단점

• 초기 세팅에 시간이 걸린다.
• 새로운 언어를 배우는것이기 때문에 시간이 걸린다.
• 자바스크립트에 타입을 지정해 주어 코드를 더 많이 작성해야하고 반대로 가독성이 떨어질 수도 있다.

잊기 전에 쓰는 KPT 회고

Keep

• TASK의 세분화
• 혼자 해결하기 어려운 문제는 빠르게 공유하고 빠르게 해결하기
• 지속적이고 원활한 소통하기
• 소통! 정말 중요하다!

Problem

• Task 세분화와 관리:task를 세분화 하는것은 좋았지만 마감기한 관리가 확실하지 않았다.

• git hub issue와 project 기능을 사용하여 관리하는 것이 좋을것 같다.

• component 분리의 어려움: 처음부터 컴포넌트를 나누지 않아 중간에 나누려니 어려웠다.

• 처음 시작할때 구조를 잘 잡고 시작하는 것이 좋을 것 같다.

• 기본적인 실력 부족

• 지속적인 개인공부 필수

*Try *

• task 관리를 위한 github issue 사용과 project 사용
• 부족한 공부 계속하기
• 더 많은 경험을 할 수 있게 여러가지 기능 맡아서 해보기

이번 프로젝트는 처음으로 여유로웠고 처음으로 순서대로 잘 진행됐던 프로젝트였다. 깃을 제대로 사용해본것도 이번이 처음인것같고 대체적으로 만족스럽고 순탄히 진행됐다.

처음은 와이어 프레임을 짜고 task를 세분화 하는 것 부터 시작해서 그라운드 룰과 컨벤션을 만들고 각자 UI를 만들어 오는 것 부터 시작했다. 간단하지만 완성도 높게 만들고 싶어서 처음부터 크게 시작하지 않았고 하고싶은 추가 기능들을 사전에 정리해서 필수 기능을 빠르게 완성 시키고 추가기능을 구현하기로 했다.

모두들 주말에도 열심히 해서 금요일에 시작한 프로젝트가 월요일에는 어느정도 완성이 되었고 부족한 부분들을 수정하는 방향으로 완성도 높게 만드려고 노력했다.

그 과정에서 깃을 사용하는 법에 익숙해졌고 그리고 이렇게 잘 사용해본 적은 처음이라 프로젝트가 재미있었다. 그래도 프로젝트 몇번 진행 해봤다고 어려운건 여전하지만 프로젝트에 익숙해져서 수월하게 진행됐고 짧았지만 잘맞는 팀원들과 잘 진행되는 프로젝트의 재미도 느꼈다.

다음 프로젝트도 순탄하길...!

FlatList 와 ScrollView는 비슷하지만 다르다.

ScrollView는 scroll을 내려서 화면에서 벗어난 데이터를 볼 수 있게 해주고 FlatList는 많은 양의 데이터를 한번에 렌더링하지 않고 화면에 나타나는 부분만 렌더링 한다.

FlatList 안에는 data, renderItem, keyExtractor 요소가 포함된다. data: 리스트의 데이터 renterItem: data로 받은 데이터를 item 에 render 시켜준다. keyExtractor: 각 요소를 구별해준다.

공식문서에 나와있는 예시

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({item}) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

이번 프로젝트에서도 scrollview로 만들었던 scroll 화면을 Flatlist로 만들어보기로했다.

Template Literal

동적인 문자열을 처리할 때 사용하며 `Hi I am ${userName}`. 의 형태로 사용된다.

Tagged Template Literals

Tagged Template Literals이란 템플릿 리터럴의 발전된 형태로써, 함수 형태로 사용할 수 있다.

React Styled-compoenets Tagged Template Literals

React의 Styled-components 안에서는 tagged template literal 문법을 사용할 수 있다.

이번 리액트 네이티브의 프로젝트에서도 tagged template literal을 사용해서 다른 팀원분이 만드어주신 inline style category color 함수를 styled-compoenents로 만들어줬다. 이렇게 카드 리스트 안에 있던 함수를 category라는 props로 내려주어 카드 styled-compoenet 안에서 사용할 수 있게 만들어 주었다.

결과적으론 확인해봤을 때 전체적으로 색상이 다르게 잘 불러와졌고 쳐음 사용해본 tagged template literals 어렵지 않게 사용할 수 있을 것 같다.

OPTIONAL CHAINING

Optional Chaining 은 const name = person ?. name 일 때 person이 undefined 나 null 이면 undefiend를 반환하고 그렇지 않으면 person.name을 반환한다. (?.앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.)

위 코드에서 word가 값이 있으면 filter를 실행하고 값이 없으면 undefined에 filter를 하려고 했기 때문에 오류가 났다.

Optional chaining을 사용해서 word가 undefined 이면 filter를 실행하지 않게 해서 오류가 나지 않도록 만들어주었다. Word의 값을 할당해 주기 전에 word를 filter를 실행시키지않기 위해 optional chaining을 사용한 것이다.

결국 실행은 잘 되었고 정확한 이유는 아직도 모르겠다. 
그래서 optional chaining을 남용하는것은 디버깅을 어렵게해서 위험하다고 한다. 

React가 아닌 React Native를 처음 접해보고 공부하며 친해지는 주! 프로젝트를 시작하게 되며 부담이 많았는데 결국은 네이티브도 리액트 베이스 이고 다른점이 있고 적용 되지 않는 점이 조금씩 있지만 결록은 리액트를 잘해야겠다 더 공부해야겠다고 생각이 들게 만든 주였다.

배울 수록 더 배워야 할게 많고 공부할수록 부족함이 더 느껴지는것은 그만큼 내가 알게 되는것이 많아지고 깊게 들어가고 있다는 뜻으로 받아들이기로했다.

한달 전의 내가 몰르고 그냥 지나 쳐왔던것들이 눈에 보이고 이해되고 어렵지 않게 사용할 수 있어지며 그 때 놓쳤던게 보이고 또 다른 방향으로 보이는 것이 정말 신기하다!

느리지만 조금씩 성장하는 중! 화이팅!

이제는 조금 익숙해진 figma를 사용해서 아이디어를 내고 프로젝트를 시작했다.

정말 간단한 아이디어 회의부터 시작해서 나온 100일 완성 왕초보 MZL 영어, 중국어, 한국어의 신조어를 모아 영어 단어장 처럼 보여주는 커뮤니티 어플을 만들기로 했다.

아이디어 회의하면서 색을 정하다가 적용해본 노란색에서 아이디어를 얻어 포스트 잇 처럼 만들어 보기로 했고 그 결과 나온 와이어프레임! 너무 귀엽고 깜찍해...!!

생소하고 또 생소한 React Native라서 다른 조에 비해 간단해보일지 몰라도 일단 최소 기능 먼저 구현하고 할 수 있는 추가 기능들을 넣어보기로 했다.

해야 할 기능
Firebase를 사용한
- Auth
- CRUD


+해보고싶은 추가 기능
- 마이페이지
- 추천기능
- 퀴즈

7면조 SA

7면조 Figma

EXPO란

JavaScript/TypeScript 로 ISO와 Android web 앱을 개발할 수 있는 프래임워크와 플래폼이다.

expo는 리액트 네이티브를 크로스 플랫폼으로 개발하기 위한 빌드 도구로써 네이티브 모듈을 보다 쉽고 편하게 사용할 수 있으며 실게 기기에서 테스트해 볼 수 있도록 해주는 XDE이다.

expo를 이용하려면 expo 계정을 생성한 뒤 $ npm install -g expo-cli 로 Expo CLI를 설치해야한다. 그리고 $ npx create-expo-app '프로젝트 명' 으로 프로젝트를 시작할 수있다.

설정을 마치면 npm start 혹은 yarn start 로 앱을 실행 시킨 뒤 QR코드를 통해 핸드폰 혹은 i를 눌러 xcode (ios simulator)로 앱을 실행시킬 수 있다.

이번주는 생소했던 react 클론 코딩 프로젝트 주차가 끝나고 더 생소한 React Native를 만났다.

이번 프로젝트에서도 많은것을 하고싶었지만 많은 걸 하지는 못했다. 전체적인 css를 맡았고, 다른 팀원과 댓글 crud를 맡았고 (미스커뮤니케이션으로 내가 완성하기 전에 다른 팀원이 완성해 버렸지만), 완성하지 못한게 아쉬워서 검색기능을 구현해보겠다고 해서 구현해보았고 전체적인 디테일 수정을 (팀 내의 교통정리를) 맡았다.

나열해보니 꽤 많은데 이번에도 아쉬움이 많이 남은 프로젝트였고 프로젝트를 진행했지만 아직도 리액트와 친해지진 못한것 같다.

이번 프로젝트를 진행하면서 전체적인 react의 이해가 많이 부족하다고 느껴서 처음부터 천천히 되짚어 가는 시간을 혼자 가지고 시작했다. 안다고 생각했던 부분도 실제로 사용해보려니 어려웠고 프로젝트를 진행하면서도 힘들었지만 배우게 되는 부분이 참 많았다.( 아직도 어렵고 잘 모르겠다 ).

어렵고 미숙했지만 그럼에도 불구하고 잘 했고 다음에도 지키고 싶은 부분은 있다. 이번에는 팀 노션을 적극 활용해서 정보를 공유하고 스케쥴을 정리했고, 완벽하진 않았지만 깃 플로우를 최대한 따라보았고, 모르는 문제가 있을 때는 서로서로 도와가며 문제점을 찾고 문제를 해결해 나갔다.

다들 빠듯하게 프로젝트를 했고 여유는 조금 부족했지만 열심히 했고 그만큼 결과도 나쁘지 않았던것 같다.

조금 수정됐지만 좋은 아이디어로 이렇게 귀여운 페이지도 만들었고 다들 만족하고 웃으며 프로젝트를 마무리했다.

조금 아쉬웠던 배포는 각자 조금 더 공부해보기로 했고 중간중간 하기로 했지만 시간에 쫓겨 하지 못했던 각자의 코드 공유는 다음에는 시간이 없더라도 서로 코드 리뷰를 하는 시간을 가져보기로했다.

아쉽고 또 아쉬웠던 리액트 클론코딩 프로젝트는 끝났지만 리액트 공부는 더 열심히 하기로 하며 프로젝트를 마무리했고 비슷하지만 또 다른 리액트 네이티브와의 첫 만남으로 이번주도 마무리가 됐다.

정말 하면 할 수록 공부할 것도, 하고싶은것도 많고 부족함을 많이 느낀다. 리액트 공부... 더 열심히 하자..!

리액트 네이티브를 이해보기 위해 어떻게 작동하는지 알아보았다.

The New React Native

Metro

리액트 네이티브를 위한 자바스크립 번들러로 JS 파일을 읽어서 순서에 맞게 하나의 파일로 합쳐주고 앱에서 실행 준비를 해준다.

JS Thread

JS 스레드는 모든 자바스크립트 코드를 읽고 컴파일 및 응용 프로그램의 비지니스 로직의 대부분이 일어나는 곳이다.

General Interface

기본 스레드는 UI 를 업데이트 하거나 기본 기능에 액세스해야 할 때마다 JS 스레드와 통신한다. (네이티브 UI와 네이티브 모듈로 나눌 수 있다.

JSI

JacaScript Interface 는 모든 스레드 간의 완전한 상호 운용성을 허용한다. 공동 소유권의 개념을 사용하면 JavaScript 코드가 JS 스레드에서 직접 네이티브 측과 통신할 수 있고 전달 메세지를 JSON으로 직렬화 할 필요가 없어 브리지의 모든 혼잡 및 비동기 문제를 제거할 수 있다.

Shadow Thread

그림자 스레드는 레이아웃이 계산되는 곳이다. Facebook의 자체 레이아웃인 Yoga를 사용하여 flexbox 레이아웃을 계산하고 UI 스레드로 다시 보내준다.

ICHI.PRO

REACT NATIVE

React Native는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임 워크이다. JavaScript로 개발이 가능하며 하나의 프로그래밍 언어로 ISO와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼이다.

React와 비슷하지만 다른 React Native

• 리액트 네이티브는 View(div 와 같음) 라는 컴포넌트를 iso 와 안드로이드에 맞는 각각의 컴포넌트로 트랜스파일 하여 운영체제에서 실행할 수 있는 방식으로 변환된다.
• 아래와 같이 컴포넌트도 조금씩 다르게 사용된다.
• 코어 컴포넌트를 사용할 때 import를 해줘야한다.(import {Text} from 'react-native)
• 리액트 네이티브도 jsx 문법을 사용하지만 html 문법은 사용하지 않는다.
• 리액트 네이티브는 기존의 css를 지원하지 않고 flexbox를 이용한 레이아웃 제작을 제공한다.

JSON SERVER

JSON이란 JavaScript 객체 문법을 따르는 문자기반의 데이터 포맷이다. JavaScript 객체 문법과 유사하지만 JavaScript 뿐만 아니라 다수의 프로그래밍 환경에서 JSON을 읽고 쓸 수 있는 기능이 제공된다.

• JSON은 문자열의 형태로 존재한다.

  • 문자열의 형태이기 때문에 네티워크를 통해 전송할 때 유용한다.

• JSON은 JavaScript 객체 리터럴 문법을 따르는 문자열이다

  • 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있다.
  • 이러한 방식으로 데이터 계층을 구축할 수 있다.

JSON 객체는 board.id board[id] 와 같이 점/브라켓 표현법을 통해 객체 내 데이터에 접근할 수 있다. 하위 계층의 데이터에 접근하려면, 프로퍼티 이름과 배열 인덱스의 체인을 통해 접근할 수 있다. board['name'][0]

• JSON은 데이터 포맷이다. 메서드는 담을 수 없고 오직 프로퍼티만 담을 수 있다.
• 문자열과 프로퍼티의 이름 작성시 큰 따옴표만 사용할 수 있다. 작은 따옴표는 사용 불가하다.
• 콤마나, 콜론을 잘못 배치하는 사소한 실수로 인해 JSON 파일이 잘못되어 작동하지 않을 수 있다.

이번 프로젝트에서 우리 팀은 이런 형태의 json 데이터를 구축해서 사용했다.
board 와 comment의 데이터를 각각 받아오고 그 안에 저장 한 뒤 저장된 데이터를 가지고 화면에 다시 불러주는 작업을 거쳐 각각의 페이지를 만들었다.

Query String

Query String 이란 사용자가 입력 데이터를 전달하는 방법 중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.

• 쿼리스트링은 정해진 엔드 포인트 주소 뒤에 ? 를 쓰는것으로 쿼리 스트링이 시작함을 알린다.
  • 쿼리 스트링은 key 와 value 로이루어져 있으며 엔드포인트 주소/?key=value 의 형태이다.
  • 파라미터가 여러개 일 경우 &를 붙여 여러개의 파라미터를 넘길 수 있다. endpoint/endpoint? key=value&key=value

위의 사진에서 localhost:3001/? 뒤의 q는 key 이고 "안녕하세요"가 value 이다.

q는 jason-server에서 제공해주는 operator로 full-text search를 할 수 있게 해준다. GET /posts?q=internet

NPM

NPM은 Node Pakage Manager로 node.js 전용 패키지가 올라가 있는 서버이며 노드 패키지를 관리해준다. npm은 별도의 설치를 할 필요 없이 node.js를 설치할 때 함께 설치된다.

Pakage.JSON

pakage.json npm install을 통해 패키지를 설치하면 node_modules 디렉토리와 함게 package-lock.json 파일이 생성된다. node_modules는 프로젝트에 필요한 패키지가 실제로 설치되는 디렉토리이다.

package.json 파일에는 프로젝트와 관련된 메타 데이터가 담기며 npm 패키지를 주고 받는 장소이다. 패키지의 이름, 버전, 등의 설명이 담겨있고 Node.js 프로젝트의 루트 디렉토리에 위치해 있으며, npm은 이를 통해 프로젝트를 식별하고, 프로젝트의 dependency를 처리한다.

name

프로젝트 이름으로 중앙 저장소에 배포할 때 version과 함께 필수 항목이다. url로 사용되고 url이나 디렉터리에서 쓸수 없는 이름을 사용하면 안 된다.

version

프로젝트 버전을 정의한다. -로 태그 이름을 적을 수 잇다.

description

프로젝트의 설명으로 문자열을 기술한다.

homepage

프로젝트 홈페이지의 주소이다. url 항목과는 다르다.

author

프로젝트 작성자 정보로, 한 사람만을 지정한다. json 형식으로 name, emai, url 옵션을 포함한다.

contributors

프로젝트에 참여한 공헌자 정보로 여러 사람을 배열로 지정할 수 있다.

repository

프로젝트의 소스 코드를 저장한 저장소의 정보이다.

scripts

프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능하다.

config

소스 코드에서 config 필드에 있는 값을 환경 변수 처럼 사용할 수 있다.

private

값을 true로 작성하면 중앙 저장소로 저장하지 않는다.

dependencies

프로젝트 의존성 관리를 위한 부분이다. pakage.json 에서 가장 많은 정보가 입력되는 곳이다. 애플리케이션을 설치할 때 내용을 참조하여 필요한 확장 모듈을 자동으로 설치한다. npm install 명령을 하면 여기에 포함된 모든 확장 모듈을 설치하게 되어있다.

devDependencies

개발할 때만 의존하는 확장 모듈을 관리한다.

engine

실행 가능한 노드 버전의 범위를 결정한다.

이번 프로젝트에도 npm을 이용한 많은 패키지들을 다운 받았는데 npm이 뭔지 알고 있지만,
정확한 개념을 알지 못하고 사용하는 것 같아서 찾아 봤는데 알고 있는 개념 그대로였다!

참조자료 @leyuri