[스파르타] 앱개발 1주차 리뷰

스파르타코딩클럽 앱개발 종합반 1주차 자바스크립트

기본 개발환경 구축을 준비했던 0주차를 마치고
본격적인 1주차 수업을 듣고 기억에 남은, 기억에 남아야 할 내용들을
간단히 정리해보록 한다.

이번주 목차

• 앱 서비스의 기본 동작 구조
• 클라이언트와 서버
• Javascript 기초 문법
• 앱개발에 자주 쓰이는 Javascript
• 숙제 설명 및 해설

가볍게 이렇게 정리할 수 있겠다.

01. 앱 서비스의 기본 동작 구조

앱 서비스를 만든다는 것은 ?
클라이언트와 서버를 모두 만들어야 한다는 것을 뜻한다

02. 클라이언트와 서버

클라이언트와 서버의 의미를 정리해보자.

클라이언트?
사용자가 보는 화면.
웹사이트로 따지면 크롬 브라우저나 사파리, 익스플로어 등이 해당.
앱으로 따지면 어플리케이션, 즉 앱 자체가 클라이언트이다.

서버?
개발자가 원하는 데이터가 있는 곳이며
원하는 데이터를 요청하면 이에 응답해주는 곳

+) 앱 개발의 종류
네이티브 앱 : 안드로이드, iOS 각각 개발하는 방식
하이브리드 앱 : 웹 사이트 개발 방식으로 만들고 껍데기만 씌워서 간단히 배포하는 방식
크로스 플랫폼 앱 : 네이티브 앱과 하이브리드 앱의 장점들을 모아둠!

03. Javascript 기초 문법

아주 기초적이고 이미 알고 있는 내용들은 스킵하고
내가 다음에 다시 찾아보게 될 것 같거나 이번에 처음 알게된 내용만 담아본다.

• JSON 데이터 구조?
  리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조
  큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 구조
  
  (서울시 미세먼지 값 Open API JSON 데이터 구조)

• 함수

  function funcName() { // 기본적인 함수 구조
  	...
  }```

04. 앱개발에 자주 쓰이는 Javascript

• 화살표 함수
  기존에는 함수를 선언하기 위해 function 키워드를 사용했지만
  이를 Arrow Function 문법으로 선언 가능하다.

  let a = () => { // 최신 함수 구조
  	...
  }```

• 비구조 할당
  딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치지 않으면서 딕셔너리의 키 값 그대로 변수 사용이 가능하다.

  //객체 
  let blog = {
  	owner : "noah",
  	url : "noahlogs.tistory.com",
  	getPost() { 
  		console.log("ES6 문법 정리"); 
  	}
  };
  //기존 할당 방식
  let owner = blog.owner
  let getPost = blog.getPost()
  //비구조 할당 방식
  let { owner, getPost } = blog;       
  //각각 blog 객체의 owner , getPost() 의 데이터가 할당
  //blog의 키 값과 이름이 같아야 함
  //owner가 아니라 owner2를 넣는다면? 아무것도 할당 X ```

• 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식

  //함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
  let blogFunction = ({owner,url,getPost}) => {
  	console.log(owner)
  	console.log(url)
  	console.log(getPost())
  }
  blogFunction(blog)```

• 백틱 (`) 이용하기
  백틱을 이용하면 문자열 안에서 자유롭게 줄바꿈을 할 수 있다.
  또한 문자열을 + 기호 없이 간단히 처리할 수 있다.

  const id = "myId" ;
  const url = `http://noahlog.tistory.com/login/${id}` ;
  const message = "줄바꿈을 하려면 \n 이 기호를 써야 했지만!"
  const message = ` 줄바꿈도 마음대로
  사용이 가능. ` ```

• 객체 리터럴
  기존에는 딕셔너리를 생성할 때 필드명과 대입 변수명이 같은 상황에서 아래와 같이 코드를 작성했다.

  var name = "스파르타";
  var job = "developer";
  var user = {
    name: name,
    job: job
  }
  console.log(user);
  //{name: "스파르타", job: "developer"}```

  하지만 더 간결하게 작성할 수 있다. (아래참고)
  key:value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입된다.

   var name = "스파르타";
  var job = "developer";
  var user = {
    name,
    job
  }
  console.log(user);
  //{name: "스파르타", job: "developer"}````

• map
  리스트를 traverse하면서 값을 꺼내 확인할 때
  for문을 사용하지 않고,
  리스트 길이값을 알지 않고
  map을 이용해서 코드를 작성할 수 있다

  let numbers = [1,2,3,4,5,6,7];
  // 화살표 함수 이용 코드
  numbers.map((value,i) => { 
  	console.log(value,i) 
  })
  // 동일한 코드
  numbers.map(function(value,i) {
      console.log(value,i)
  })```

• 모듈화 (module system)
  export - 자바스크립트의 값, 함수, 딕셔너리 또는 파일 자체를 외부로 내보냄
  import - 반대로 파일 안으로 가져옴
  export default - 해당 파일에서 유일하며 원하는 이름으로 가져옴

05. 숙제 설명 및 해설

간단한 숙제여서 생략..

06. 1주차를 마치며

1주차 수업을 들으면서 리액트 네이티브 코드를 오랜만에 공부하는 시간이 되었는데 인턴 생활 하던 시간들이 참 많이 생각났다.
인턴 할 때 시간에 쫓겨 왜? 왜? 라는 의문점이 들었음에도 그저 받아드리고 넘어갔던 내용들이 이번 수업을 듣고 앞뒤가 맞아떨어지는 느낌이 들어서 기분이 좋았다. 한편으로는 처음 다뤘던 리액트 네이티브를 인턴 시작 전에 조금이라도 공부를 해갔으면 어땠을까 하는 아쉬움도 든다. 조금 더 잘할 수 있었을 텐데 하는 아쉬움.
다음에 시간을 내서 내가 인턴 때 짰던 코드들을 다시 한번 들여다 봐야겠다. 궁금해.