[Sparta] 앱개발 1주차

HAM·2022년 4월 28일
1

[Sparta] 앱 개발

목록 보기
1/3
post-thumbnail

앱 서비스의 기본 동작 구조

  • 클라이언트와 서버
    클라이언트 : 사용자가 보는 화면 ex)크롬, 사파리, 어플 등
    서버 : 필요로 하는 데이터가 있는 곳, 데이터를 요청하면 응답해주는 곳

앱 개발 종류

  • 네이티브 앱 : 안드로이드, iOS 각각 개발
  • 하이브리드 앱 : 웹 사이트를 만들고 껍데기를 씌워 간단히 배포
  • 크로스 플랫폼 앱 : 네이티브 앱 개발 장점 + 하이브리드 앱 개발 장점
    • 리액트 네이티브(React Native)
      사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술, 자바스크립트로 개발 가능

Javascript 기초 문법

  • 기초의 기초
    • 코드를 마칠 때, ; 사용 해도 되고 안해도 됨
    • 변수 선언 시 let과 var 모두 사용 가능하지만 let이 최신
    • 딕셔너리 = 객체
    • 배열 = 리스트
  • console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력
	console.log("Hello World!");	//Hello World!
  • 변수
    • 변수 대입 의미 : 오른쪽에 있는 것을 왼쪽에 넣는 것

    • let 으로 변수 선언

    • 사칙연산, 문자열 더하기 가능

    • 변수명 : snake case( ex)first_name ), camel case( ex)firstName )
      다른 특수문자 또는 띄워쓰기는 불가능

    • const로 변수 선언 : const로 선언한 변수엔 새로운 값을 재할당 할 수 없음
      => 쉽게 변하면 안되는 고정 값을 관리할 때 사용!

    • 리스트(배열) : 순서를 지켜서 가지고 있는 형태

      let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
      
      // 또는,
      
      let b_list = [1,2,'hey',3] // 로 선언 가능
      
      b_list[1] // 2 를 출력
      b_list[2] // 'hey'를 출력
      
      // 리스트에 요소 넣기
      b_list.push('헤이')
      b_list // [1, 2, "hey", 3, "헤이"] 를 출력
      
      // 리스트의 길이 구하기
      b_list.length // 5를 출력
    • 딕셔너리(객체) : 키(key)-밸류(value) 값의 묶음

      let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
      
      // 또는,
      
      let b_dict = {'name':'Bob','age':21} // 로 선언 가능
      b_dict['name'] // 'Bob'을 출력
      b_dict['age'] // 21을 출력
      
      b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
      b_dict // {name: "Bob", age: 21, height: 180}을 출력
    • 함수

      • 기본 구조

        // 만들기
        function 함수이름(필요한 변수들) {
        내릴 명령들을 순차적으로 작성
        }
        // 사용하기
        함수이름(필요한 변수들);
      • 예시

        // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
        function sum(num1, num2) {
        console.log('num1: ', num1, ', num2: ', num2);
        
        //return 으로 값을 돌려주는, 뱉는 구조로 변수에 값을 전달 할 수도 있습니다.
        return num1 + num2;
        }
        
        sum(3, 5); // 8
        sum(4, -1); // 3
        let result = sum(10,10)
        console.log(result) // 20
      • 다른 선언 방식

        let a = function(){
        console.log("리터럴 방식 이라고 합니다");
        }
        
        a()
    • 조건문

      • age가 20이 넘음녀 성인, 아니면 청소년

        function is_adult(age){
         if(age > 20){
          alert('성인이에요')
         } else {
           alert('청소년이에요')
          }
         }
        
         is_adult(25)
      • if, else if 사용

        function is_adult(age){
          if(age > 20){
        			  alert('성인이에요')
          } else if (age > 10) {
        			  alert('청소년이에요')
          } else {
        			  alert('10살 이하!')
          }
         }
         
         is_adult(12)
      • And 조건과 OR 조건
        - AND 조건은 모두 참이어야 됨
        - OR 조건은 하나만 참이면 됨

    • 반복문

      • console.log 1부터 99까지 출력하기

        for (let i = 0; i < 100; i++) {
          console.log(i);
         }
      • 반복문 실행 모습

        for (1. 시작조건; 2. 반복조건; 3. 더하기) {
          4. 매번실행
         }
        
         1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
         -> 2체크하고 -> (괜찮으면) -> 4 -> 3
         -> 2체크하고 -> (괜찮으면) -> 4 -> 3
         -> 2체크하고 -> (괜찮으면) -> 4 -> 3
        
         와 같은 순서로 실행됩니다.
         i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

앱개발에 자주 쓰이는 Javascript

  • 화살표 함수 : 함수를 더 짧게
	[기존 방식]

    let a = function() {
      console.log("function");
    }
    a();

    [최신 방식]

    let a = () => {
      console.log("arrow function");
    }
    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를 넣어보세요! 아무것도 안 들어온답니다.)
     
     ** 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식**
     
     //함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
     let blogFunction = ({owner,url,getPost}) => {
         console.log(owner)
         console.log(url)
         console.log(getPost())
     }
     
     blogFunction(blog)
  • 리터럴 : 자바스트립트 안에서 줄바꿈 자유롭게

    • 백틱(`)을 사용하면 줄바꿈 자유롭게 가능
  • 객체 리터럴 : 딕셔너리를 짧게 만들기

    var name = "Ham";
     var job = "developer";
    
     var user = {
       name,		//기존 name: name
       job			//기존 job: job
     } 
    
     console.log(user); //{name: "Ham", job: "developer"}
  • map : 리스트의 길이 값을 몰라도 됨, 리스트 안에서 몇 번째에 있는 값인지 순서 알려줌

profile
Frontend developer

0개의 댓글