[스파르타코딩클럽] 앱개발 종합반 1주차 -2 (21.12.25)

[스파르타코딩클럽] 앱개발 종합반 1주차 -2 (21.12.25)

728x90

반응형

21.12.25 토요일

- 1주 차 강의 1-6 ~ 1-7까지 들음

교육 내용

- 화살표 함수

[기존 방식] let a = function() { console.log("function"); } a(); [최신 방식] let a = () => { console.log("arrow function"); } a();

- 딕셔너리에 모든 데이터 구조를 다 넣을 수 있다. 함수도 가능

- owner같은 키 값을 "owner" 로 넣지 않아도 가능 / 앞에있으면 무조건 키고, 뒤에것은 값이다.

- 비구조 할당 방식

중괄호를 써서, 비구조 할당

ex) let { owner, getPost } = blog;

각각 blog 객체의 owner , getPost() 의 데이터가 할당

blog의 키 값과 이름이 같아야 함.

let blog = { owner : "noah", url : "noahlogs.tistory.com", getPost() { console.log("ES6 문법 정리"); } }; //기존 할당 방식 let owner = blog.owner //blog["owner"] let getPost = blog.getPost() //이렇게 할당하는것도 귀찮아서 나온게.. //비구조 할당 방식 let { owner, getPost } = blog; //각각 blog 객체의 owner , getPost() 의 데이터가 할당 //blog의 키 값과 이름이 같아야 해요! //(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.) ** 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식** //함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기 let blogFunction = ({owner,url,getPost}) => { console.log(owner) console.log(url) console.log(getPost()) } blogFunction(blog) //기존 let blogFunction = (blogDic) => { let owner = blogDic.owner }

- 리터럴 ? 백틱 ( ` ) 을 이용

- 자바스크립트 안에서 줄바꿈을 자유롭게

- 키보드에서 느낌표 옆에 있는 키인 백틱 ( ` ) 을 이용

- 백틱 ( ` ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능

- 중간에 ${변수}식으로 변수를 쉽게 입력 가능

const id = "myId" ; const url = `http://noahlog.tistory.com/login/${id}` ; const message = "줄바꿈을 하려면

이 기호를 써야 했죠!" const message = ` 줄바꿈도 마음대로 사용이 가능합니다. ` let name = "김건희" let str = "제 이름은 " + name let str2 = `제 이름은 ${name}` consloe.log(str) // 제 이름은 김건희 consloe.log(str2) // 제 이름은 김건희

- 딕셔너리 구성을 짧게 => 객체 리터널

[기존 방식] var name = "스파르타"; var job = "developer"; var user = { name: name, job: job } console.log(user); //{name: "스파르타", job: "developer"} [최신 방식] var name = "스파르타"; var job = "developer"; var user = { name, job } console.log(user); //{name: "스파르타", job: "developer"}

- 코드를 줄이는게 왜 좋냐면 , 실제로 코드 줄이 길어지면 퍼포먼스가 떨어지고, 가독성이 떨어짐.

축약해서 쓰면 간결하게 효율적으로 짤 수 있음

- map -반복문의 또 다른 방식

: 반복문 for문을 쓰면 최소 3줄을 잡아먹었음. 또한, 리스트의 길이 값을 알아야만 했는데,

map 이걸 사용하면 한 줄에 가능 ( 리스트 길이도 몰라도 됌)

[기존 방식] let num_list = [1,2,3,4,5,6,7]; for(let i=0; i { console.log(value,i) }) // 눈에 잘 안들어온다면 //map 함수 안에 함수가 들어있고, 그게 실행되는것 num_list.map(function(value, i) { //value : 리스트에 담겨있는 값 , i : 인덱스( 순서 ) console.log() });

- module system : 파일을 불러오기

export는 어떠한 자바스크립트를 만들었으면 파일을 밖에서도 쓸 수 있다. 하고 선언하는 키워드

import는 반대로 자바스크립트 파일 불러오는 키워드

export default

export 가 붙어있으면 외부에서 쓸수 있는 준비 키워드

import 외부에서 쓸수있는 준비된 함수를 가져다가 불러오는 키워드

ex)

//times, plusTwo 함수를 외부로 내보낼 준비를 합니다. export function times(x) { return x * x; } export function plusTwo(number) { return number + 2; } import { times, plusTwo } from './util.js'; console.log(times(2)); console.log(plusTwo(3)); // in util.js export default function times(x) { return x * x; } // in app.js import k from './util.js'; console.log(k(4)); // returns 16

소감

앞에 강의하시는 분은 자꾸 괜찮다고 하는데 벌써부터 계속 멘붕이 온다.

분명 업무때도 자바스크립트를 사용하긴 분명히 했는데

...하던게 맞는지 모르겠네 새롭다.............좀 걱정이다.

728x90

반응형

from http://youten.tistory.com/88 by ccl(A) rewrite - 2021-12-25 20:01:42