[스파르타코딩클럽] 앱개발 종합반 1주차 [21.10.25 - 21.10.31]

드디어 앱 개발 종합반 강의 시작!

 

웹 개발과 마찬가지로 클라이언트와 서버를 모두 만드는 것이 곧 앱 서비스를 만드는 것이다.

 

다시 웹 개발 수업을 복기하면서 앱 개발을 살펴보도록 하겠다.

클라이언트는 사용자가 보는 화면, 즉 크롬, 사파리와 같은 웹사이트들이고 앱으로 따지면 스마트폰에서 사용하는 어플 즉 앱 자체가 클라이언트라고 할 수 있다.

서버는 데이터 저장소인 동시에 클라이언트의 요청에 대한 응답을 해주는 곳이기도 하다.

클라이언트와 서버의 관계는 웹뿐만 아니라 앱 개발 모두 일맥상통하는 것이다.

 

앱 개발을 하기 위해서는 안드로이드와 iOS 운영체제에 대한 기술과 언어를 알고 있어야 하고 각각 안드로이드는 Java&Kotlin이라는 기술로 개발이 가능하고, iOS는 Swift라는 기술로 개발이 가능하다. 두 운영체제가 실행될 때 서로 다른 OS(실행환경)를 가지고 있기 때문에 각기 다른 개발 기술과 언어가 필요하다. 두 가지의 기술과 언어를 습득하기 위해서는 상당히 높은 러닝 커브가 존재해서, 둘 다 하는 일은 매우 어려운 일 OTL..😩

 

앱 개발의 종류에는 크게  안드로이드와 iOS 각각 개발하는 네이티브 앱과 웹 사이트를 만들고 껍데기를 씌워 간단히 배포할 수 있는 하이브리드 앱, 마지막으로 자바스크립트, 즉 하나의 언어로 두 플랫폼 해당되는 앱을 만드는 크로스 플랫폼 앱 개발이 존재한다.

이번 앱 개발 종합반 수업에서는  '크로스 플랫폼 앱 개발'을 통해 앱을 만들어서 배포까지 하고자 한다.

 

크로스 플랫폼 앱 개발 언어 중 리액트 네이티브(React Native)를 통해서 개발을 진행하려고 한다. 페이스북에서 만들고 지원하고 있으며, 사용자 인터페이스(UI)를 만드는 데에 특화되어 있는 리액트(React.js) 라이브러리/프레임워크 기반으로 앱을 제작하는 기술이다. 리액트(React.js) 라이브러리/프레임워크가 기반이라서 자바스크립트로 개발 가능하다. (js = javascript) 하나의 언어로 너무 효율적 👍

 

Javascript 란 웹사이트에서 움직이는 그림을 보여주게 할 수 있는 가벼운 언어이다. 웹 사이트에서 alert 창이 띄우거나, 현재 환율이 계속해서 나오게 만드는 것을 예로 들 수 있다. 

 

(좌 : alert 창 띄우기 , 우 : 환율 정보 보여주기)

 

과거 웹 개발의 전유물이라고 일컫던 자바 스크립트가 이제는 앱 개발과 서버(node.js)까지 커버할 수 있게 발전했다. 

맥 개발자 크롬 콘솔창

이번 앱 개발 1주 차 수업에서 자바스크립트 실습은 크롬 브라우저로 구글 웹사이트의 개발자 콘솔 창을 이용해서 진행했고, 콘솔 창에 우측 이미지와 같이 코드를 입력하면서 진행했다. 여기서 console.log(변수)는 콘솔 창에 괄호 안의 값을 출력해주는 도구이다. 개발자가 결괏값을 편하기 보기 위해서, console.log(변수 1, 변수 2)로 여러 변수를 한 번에 출력할 수도 있다. 우측 콘솔 창 이미지의 결괏값 hello world 아래의 undefined는 구 분선이라고 생각하고 의미가 없는 값이기 때문에 무시해도 된다.

 

자바스크립트 문법

 

1. 변수

변수란 값을 담는 그릇이고 이 변수를 선언하는 방식은 정해져 있다. 보통 let과 var을 통해 변수를 선언하는데, 이 수업에서 우리는 let을 사용할 것이다.

let       num     =   1

선언문  변수 이름값

위의 콘솔 창을 통해서 변수 문법에 대해 설명하면, 우선 처음에 num이라는 변수의 값을 20이라고 선언하여 console.log(num)를 통해서 확인했을 때 변수의 값 20 이 잘 찍히는 것을 볼 수 있다. 그리고 바로 아래 num이라는 변수의 값을 100이라고 입력해서 다시 콘솔 로그를 통해 확인하면 변수의 값이 100으로 교체돼서 재할당 된 것을 알 수 있다. 이렇게 변수는 여러 값으로 재할당 할 수 있다.

 

변수는 좌측 이미지와 같이 사칙연산도 가능하고 콘솔 로그 안에서 console.log(a*b) 이런 식으로 사칙연산도 가능하다. 그리고 우측 콘솔 창에서와 같이 문자열도 더하기를 할 수 있는데, 여기서 문자의 값을 쓸 때는 '', ""를 사용해서 숫자와 구분을 해 준다. 그리고 변수의 이름을 보면 first_name(스네이크 케이스)과 lastName(카멜 케이스) 이렇게 두 가지의 형태로 약속하여 나타낼 수 있는데 개발자 본인이 사용하기 편한 케이스로 사용하면 된다. 두 가지의 케이스를 혼용하기보다는 일정하게 변수의 이름을 사용하는 것이 가독성도 좋고 본인이 직접 리뷰하기도 편할 것이라고 생각한다.

앞서 변수를 선언할 때 var과 let 두 가지의 형태로 사용한다고 이야기했는데, 만약 코드를 작성하다가 변수의 값이 재 할당되는 것을 방지하고자 할 때에는 let 이 아닌 const를 통해서 변수를 선언하면 변수의 값이 바뀌지 않는다. 아래의 이미지를 통해 변숫값이 변하지 않은 것을 알 수 있다.

 

 

2. 리스트(배열) / 딕셔너리(객체)

- 리스트(배열)

여러 데이터를 차곡차곡 쌓아 넣어 놓는 것을 리스트라고 한다. 리스트의 형태는    let a_list = [1,2,3,4,5,6,7]    값에 대괄호를 이용해서 값을 넣는다. 여기서 잠깐 프로그래밍에서 순서는 0부터 시작한다. 그렇기 때문에 만약 앞서 a_list 변수의 2번째 값은 2 가 아니라 3 이 되는 것이다. 아래 좌측 콘솔 창에 콘솔 로그 a_list에 색인을 2라고 넣어서 확인한 것을 보면 리스트의 2번째 값은 3이라고 잘 찍히는 것을 볼 수 있다. 그리고 리스트 변수에 값을 추가하고자 하면   리스트 변수. push(리스트 요소)를  이용해서 추가하면 된다. 여기서 리스트 뒤에. 은 연결 연산자로 리스트 변수에 어떤 도구가 있는지 알 수 있다. 아래 우측 콘솔 창을 보면 문자열 'sparta'를 리스트 값에 추가해서 총리스트의 요소가 8개가 된 것을 확인할 수 있다. 

정리하자면 리스트가 가지고 있는 함수들을 통해 요소를 추가하거나 제거하고, 값이 몇 개 있는지 알 수 있고, 리스트의 순서는 0 번째부터 시작이라는 것을 잘 기억해 두면 좋을 것이다.

 

-딕셔너리(객체)

딕셔너리는 이름 그대로 사전 형식 또는 전화번호부를 생각하면 된다. 기본 형태는    let a_dict = {"key":"value" }    이렇게 이뤄져 있다. 콘솔 로그로 딕셔너리의 값을 알고 싶을 때는 console.log(a_dict [key값])   을 넣어야 한다. 그리고 새로운 요소를 넣고 싶을 때는 앞서 나온 리스트와 달리     변수[key값] =  값  바로 입력해서 추가해 주면 된다. 아래 콘솔 창을 통해서 딕셔너리의 형태와 추가하는 방법 등을 살펴보면 될 것이다. 

리스트와 딕셔너리 둘을 결합했을 때 말 그대로 포텐이 터진다!👻 많은 정보를 한 번에 정리해서 만들 때 상당히 편리하고 쉽게 이용할 수 있기 때문이다.

딕셔너리와 리스트의 결합

 위의 콘솔 창을 보면 names라는 리스트 안에 이름과 나이와 딕셔너리를 넣으면 잘 찍히고 있는 모습을 볼 수 있다. 그리고 앞서 배웠던 연결 연산자. push를 사용해서 리스트 값을 추가되어 있는 모습도 볼 수 있다. 이렇게 딕셔너리와 리스트의 결합을 JSON 데이터 구조라고 한다.

앞서 언급했지만 JSON 데이터를 사용하는 이유는 만약 학교의 전화번호부를 만든다고 했을 때, 방대한 양의 데이터를 훨씬 보기 깔끔하고 다루기도 쉽게 하기 위함이고, 그리고 혹시 사람이 추가될 때도 리스트에. push 함수를 통해서 손쉽게 추가할 수 있어서 매우 유용하다고 할 수 있을 것이다.

JSON 데이터의 예시를 서울시 미세먼지 공공 데이터를 통해 살펴보면 아래 이미지와 같은데 , 각각 키와 키값을 나타내는 것을 알 수 있다.

 

3. 자바스크립트 기본 제공 함수

자바스크립트는 앞서 배웠던 사칙연산 외에도 여러 함수가 존재한다. 자바스크립트의 어떤 함수가 남아있는지 살펴보도록 하겠다.

위에 좌측 콘솔 창은 a와 b의 값을 나눗셈해서 나머지를 얻고, 그다음 몫까지 얻은 결과이다. 우측은 myname이라는 변수의 값이 영문 소문자인 상태인데, 대문자로 바꾸는 연결 연산자의 도구를 이용해서 대문자 값을 얻어낸 결과이다. 이렇게 원하는 자바스크립트 함수를 최대한 영어로 구글링 해서 찾아보면 방대한 정보를 얻을 수 있다. 그다음은 split(문자열 나누기) 함수를 가지고 실습해 보았다.

문자열 나누기 split 함수

 첫 번째 줄에 email이라는 변수 값 "taehyeonkim@naver.com"에서 split 함수를 사용해서 @ 를 빼고, 문자열로 나눠진 리스트 값이 아이디와 도메인으로 ['taehyeon', 'naver.com'] 잘 나와있는 것을 볼 수 있다. 그다음 도메인 주소 값을 찾기 위해서 앞에서 이용한 split 함수를 그대로 가지고 와서 문자열이 있는 리스트의 1 번째가 도메인 주소이기 때문에   console.log(email.split('@')[1])   콘솔 로그를 입력하면 도메인이 잘 나오는 것을 볼 수 있다. 그다음 마지막으로 주소 뒤에 도메인 값이 무엇인지 찾는 것 까지 해보았는데, 여기서도 마찬가지로 앞에서 사용했던 split 함수를 그대로 가져와서 도메인 주소의 '.'까지 제거해주면 원하는 값을 얻을 수 있다.

그다음 문자열 합치기도 진행해 보았는데, 구글링을 통해서 cocat과 join이라는 함수를 찾았고 그중에 좀 더 간편해 보이는 join을 통해서 실습해보았다.

문자열 합치기 join 함수

처음 txt라는 변수의 값 "서울시-마포구-망원동"을 names라는 변수로 선언하여 split 함수를 통해 문자열을 나누어 리스트로 나타냈다. 그다음 join 함수를 통해 '>' 부등호를 넣어서 콘솔 로그를 찍어서 원하는 값이 잘 나온 것을 볼 수 있다. 이제까지는 자바스크립트가 제공하는 기본 함수에 대해서 알아보았다. 앞으로 개발자로서 일하다 보면 직접 함수를 만드는 과정을 다분히 겪을 예정이기 때문에 이제부터는 직접 함수 로직을 짜 보려고 한다.

 

 

4. 함수

 

 

함수 로직

위의 콘솔 창에 나타나 있는 함수 코드를 순서대로 설명하면 function으로 선언하여 함수 이름(필요한 변수들)을 넣고 { 내릴 명령들을 순차적으로 작성 } 해서, 함수 이름(필요한 변수들)을 나타내고 있다. 이것이 함수 로직의 기본적인 생김새이다.

 

앞서 언급했던 함수 로직을 가지고 콘솔 창에서 연습해 보았다. 위의 2개의 함수 로직을 보면 num1, num2와 같이 함숫값에 하나하나 다 이름을 지을 수 있고, 콘솔 로그를 통해서 넘겨받은 값이 있는 변수(num1, num2)를 가지고 이전에 연습했던 사칙연산 외 여러 가지 함수를 진행할 수 있다. 마지막으로 명령을 마치고 함수 이름을 불러서 넘길 값을 넣어 로직을 마무리한 것을 볼 수 있다.

마지막으로 다른 로직 구조를 통해서 함수를 정리해 보면, minus라는 함수의 변수  num1 - num2를 한 결과 값이 return(반환)을 하고, result 변수에 minus의 변수에 뺀 결괏값이 담기게 되는 것이다. 다시 설명하자면 minus 함수의 변수 num1과 num2에 각각 100과 10이 넘어가서 100 - 10을 한 결괏값이 return 하여 result라는 변수에 담기게 되고 콘솔 로그를 통해 result 변수의 결과 값이 90이라고 나타낼 수 있는 것이다. 이렇게 우리는 함수의 로직을 다양하게 짤 수 있다.

리터럴 함수 방식

앞서 배웠던 함수의 기본 로직 말고 위의 콘솔 창에 나온 것처럼 a 변숫값에 함수를 바로 넣어서 변수가 함수 역할을 할 수 있게 해주는 방식도 있다. 앞서 배운 함수의 기본적인 로직과 리터럴 함수 방식 두 가지를 잘 숙지하고 있으면 추후의 앱 개발을 할 때 수월하게 진행할 수 있을 것이다.

 

 

5. 조건문

 

조건문은 다음과 같은 함수 로직을 가지고 있다. 위의 콘솔 창을 보면 연령을 알려주는 함수를 만들었는데 상세히 함수 로직을 리뷰하자면  is_adult라는 함수에 변수의 이름은 age이고 그 값은 30이라고 설정했다. 그리고 조건문 if에 ( ) 안에 조건을 쓰고 콘솔 로그로 값을 보여주고 그 밑으로 계속 여러 가지 조건을 달아주는 구조이다. 계속 조건을 달 때에는 else if를 사용해서 조건문을 쓰고, 마지막으로 모든 조건에 해당되지 않는 함숫값을 나타낼 때는 else에 해당이 된다. 그리고 조건문에서 >(부등호)가 계속해서 나오는데 부등호를 나타낼 때는  < 초과  > 미만  >= 이상  <= 이하 이런 식으로 표현할 수 있다.

 

그리고 AND 연산자와 OR 연산자는 위의 콘솔 창을 보면 쉽게 이해할 수 있다. AND 연산자는 && 양 쪽이 모두 참이어야 밑에 alert 가 실행이 되는 것이고 OR 연산자는 | | 양 쪽 중 하나만 참이면 실행이 되는 것이다. 콘솔 창에 나와 있는 == 부등호는 동일 연산자이다. 참을 나타낼 때 쓰는 연산자이다.

 

 

6. 반복문

 

 

 

반복문을 사용하는 이유? 만약 0부터 99까지 숫자를 출력해야 하는 상황이면 이제까지 우리가 배운 내용으로는 좌측 콘솔 창처럼 막일? 를 해야 하는 상황이 온다. 그래서 우측 콘솔 창의 반복문을 통해서 손쉽게 해결할 수 있는 것이다. 반복문은 

for (let i = 0; i < 100; i++) {

console.log(i);

}

이렇게 나타내고 

for (1. 시작 조건; 2. 반복 조건; 3. 더하기) {

4. 매번 실행

}

이렇게 실행되는 것이다. 정리하면 반복문 for 안에 i는  0이고 100 보다 작으며, 1 씩 더하기 시킬 것이다.라는 것을 나타낸다.

 

위의 콘솔 창은  복합 리스트&딕셔너리 구조의 변수 값을 가지고 반복문과 조건문을 연습한 모습이다. 리뷰를 해보면 scores라는 변수가 6 명의 딕셔너리 정보를 리스트 안에 가지고 있고, 이 6 명의 스코어 값에서 70 미만 사람만 나오게 반복문에 조건을 달아줘서 결과적으로 형준, 기남, 동희 3 명을 잘 속아줘서 찍히고 있는 모습이다.

 

자바스크립트 기초 연습하기

1. 합을 구하는 함수 만들기

👉 0부터 n-1까지 더하는 함수를 만들고 싶을 때?

이 부분에서 막혀서 애먹었지만, 함수를 만들 때 항상 순서대로 생각하면 헷갈릴 일이 없다. 순서대로 리뷰를 해보면 우선 위 두 개의 콘솔 창에 코드는 똑같은 것이다. get_sum이라는 함수의 변수를 n이라고 해서, 우선 반복문을 넣어주고 sum이라는 변수를 선언해서 0이라고 값을 주고 y = f(x) 함수의 구조를 잘 생각해서,   sum = sum + i    또는    sum += i  (축약형)  이렇게 두 가지로  함수를 나타낼 수 있다. 그다음 return 한 sum의 값은 결국 아래 result 변수에 값에 담기 돼서 결과 값은 45 가 나오는 것이다.

 

2. 배열에서 특정 원소 개수 구하기 

👉 다음 변수의 리스트에서 딸기는 몇 개일까?

 

위의 콘솔 창을 보면 fruit_list라는 변수 값에 여러 과일이 담긴 리스트를 볼 수 있다. 이 변수 리스트를 가지고 딸기의 개수를 찾아보는데 여러 가지 과일 리스트 값에서 딸기의 개수를 찾는 특정 조건인 상황이기 때문에  반복문을 사용해야 한다. 반복문 안에서 매번 실행되게 하기 위해서 fruit라는 변수를 선언해서, 앞에 fruit_list 변수 리스트의 [ i ] 값을 찍히게 하고(리스트 안에 값을 하나씩 확인하며, 딸기를 찾기 위해), 거기에  if 문을 이용해서 fruit 변수는 '딸기'라는 조건을 입력해 준다. 마지막으로 딸기의 개수 값을 결과로 도출하기 위해서 반복문 밖에 count 변수를 선언해서 0이라는 값을 넣고(만약 count 변수가 반복문 안에 있으면 반복문이 돌 때마다 초기화되기 때문에 반복문 밖에 변수를 선언해준다.), 반복문 돌면서 딸기라는 조건을 찾을 때마다 count 값에 1 씩 더해주는 로직을 입력하면 내가 찾고자 하는 딸기의 개수를 찾을 수 있다.

 

3. 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기

👉 미세먼지 지수가 40보다 작은 구 찾기!

좌측 콘솔 창을 보면 서울시 미세먼지 JSON 데이터인데, 이 데이터를 가지고 주어진 문제에 결과를 찾아보았다. 우측 콘솔 창을 보면 우선 앞서 실습했던 것들과 같이 여러 리스트 안에 딕셔너리 값에서 특정 조건 결과를 찾을 것이기 때문에 우선 for 문을 입력하고, 그다음 mise라는 변수를 선언하여 모든 미세먼지 데이터가 들어있는 mise_list [ i ] 값을 찍히게 하고 그다음 조건문을 이용해서 미세먼지 지수가 40 보다 작은 수치를 찾는다. 여기서 mise 변수 안의 key 이름은 JSON 데이터 안에서 찾아서 넣어주면 되고,  내가 나타내고자 하는 것은 구의 이름과 수치이기 때문에 gu_name , gu_mise라고 변수를 선언해주고 그에 따른 key 이름을 찾아서 mise [key 이름] 넣어준다. 그리고 콘솔 로그로 나타내고자 하는 데이터 정보(console.log(gu_name, " : ", gu_mise))를 입력해서 확인해보면 우측 이미지의 하단 부분처럼 서울시 미세먼지 지수가 40보다 아래인 지역들이 나오게 된다.

 

계속해서 복기하겠지만 뭔가 이해가 안 될 때, 문제가 있을 때는 함수를 순서대로 차근차근 릴랙스 한 마음으로 살펴보자!

 

앱 개발에 자주 쓰이는 Javascript

지금까지는 기초 자바스크립트 문법에 대해서 공부했는데, 앞으로 리액트 네이티브를 이용해서 앱을 만들 때, 자주 쓰이고 간결하게 쓸 수 있는 자바스크립트 문법을 사용하려고 한다. 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한다. 그렇기 때문에 공식문서를 볼 때 당황하지 않고 적용하기 위해서는 기존 자바스크립트보다 더 함축적이고 간결한 문법을 사용하도록 할 것이다.

 

1. 함수를 더 짧게 - 화살표 함수(arrow function)

👉 기존에 함수를 선언할 때는 function( )이라는 키워드가 들어갔는데 최신의 함수 로직은  ( )=>  화살표로 함수를 선언한다.

기존 방식	최신 방식

2. 딕셔너리 키와 값을 빠르게 꺼내기 - 비구조 할당

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

기존 할당 방식	비구조 할당 방식

만약 딕셔너리의 값이 무수히 많으면 기존의 할당 방식으로 하나하나 변수를 선언하기는 상당히 힘든 과정이기 때문에 비구조 할당 방식을 이용해서 빠르게 한 줄로 변수를 선언하면 쉽게 값을 가지고 올 수 있다.

여기서 잠깐!  비구조 할당 방식을 이용할 때 가장 중요한 규칙은 앞서 선언한 딕셔너리 키 값의 이름과 아래 let { }으로 변수를 만들려는 키 값의 이름이 같아야 한다.

앞으로 리액트 네이티브 앱을 만들면서 가장 많이 사용할 방식인데 엄청 축약된 함수의 모습을 볼 수 있다. 위의 콘솔 창을 살펴보면 처음에 blog라고 선언된 변수의 딕셔너리 안에 키와 값을 아래 blogFunction이라는 변수 안에 얼 로우 함수를 넣고 얼 로우 함수 안에 위의 딕셔너리에 키 값의 이름을 넣어서 콘솔 로그를 찍어서 결과를 도출해낸 모습이다. 😂

사실 아직까지 이 축약형 문법이 잘 이해되지는 않지만, 계속 반복하면 이해할 수 있을 거라는 믿음을 가지고 포기하지 말자! 

 

 

3. 자바스크립트 안에서 줄 바꿈을 자유롭게! - 리터럴

기존	백틱( `` )

👉 최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백 틱 ( ` ) 안에서는 여러 줄의 줄 바꿈도 enter를 써서 자유롭게 사용 가능하다.

 

기존	백틱( `` )

👉  만약 큰 문자열 중간중간에 바뀌어야 하는 값들 있을 때, 백 틱 ( ` )을 이용하여 문자열 + 문자열을 하지 않고도 간단히 처리할 수도 있다.

 

 

 

4. 딕셔너리를 짧게 만들어보기! - 객체 리터럴

기존	최신

변수의 이름과 딕셔너리의 key 가 똑같으면, 딕셔너리 안에 key 값을 지워서 축약해도 딕셔너리 안에 key에 그 위에서 선언한 변수가 할당이 된다. 이 객체 리터럴 방식이 필요한 이유는 우선 코드를 만들 때 딕셔너리의 줄을 짧게 해서 퍼포먼스 속도를 높일 수 있고, 짧아진 코드 길이로 가독성도 좋게 효율적인 코드를 만들 수가 있기 때문이다.

 

 

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

기존	연결 연산자 도구 map

 

개발을 할 때 기존 반복문 for 문이 아닌  map이라는 연결 연산자 도구를 이용하면 훨씬 간결하고 쉬운 퍼포먼스 속도를 낼 수 있을 것이다.

 

6. 자바스크립트 파일을 모듈화 - module system

export는 자바스크립트의 값, 함수, 딕셔너리(객체) 또는 자바스크립트 파일 자체를 외부로 내보내는 키워드

import는 반대로 자바스크립트 파일 안으로 가져오는 키워드

외부로 내보낸다는 건 밖에서 쓸 수 있게 준비한다는 의미이고, 내부로 가져온다는 것은 외부로 내보낸 것들을 가져온다는 의미입니다.

간단히 정리하면 export 란 외부에서 쓸 수 있는 준비 키워드이고, import는 외부에서 쓸 수 있는 준비된 함수를 불러오는 키워드라고 생각하자!

일단 이 정도로만 알고 있자.. 😂

 

🧑‍💻1주 차 숙제

숙제 1: 배열에서 특정 원소 개수 구하기 - map를 함수를 사용해서 해결하기

👉 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔 창에서!

for문 사용	map 함수 사용

 

숙제 2: 이메일 판별하기

👉 플랫폼에서 이메일로 회원 가입하는 일들이 빈번히 일어납니다. 이때 사용자가 입력한 이메일이 제대로 된 이메일인지 어떻게 알아낼 수 있을까요? 예컨대 gunhee#gmail.com이라고 썼다면 이메일인지 어떻게 할 수 있을까요?

 

indexOf() 사용하기	자바스크립트 이메일 정규 표현식

indexOf()

indexOf()를 이용해서 특정 문자열을 찾을 때는    str.indexOf(searchValue [, fromIndex])   구문을 이렇게 이용한다. indexof() 안에 첫 번째 변수에는 찾는 문자열(searchValue)을 넣고, 두 번째 변수에는 문자열에서 찾기 시작하는 위치(fromIndex)를 나타내는 인덱스 값이다. 만약 주어진 문자열에 일치하는 값이 없으면 -1을 반환한다.

좌측 콘솔 창은 indexOf( )를 이용해서 이메일을 판별한 과정이다. 우선 간단하게 '@' 유무로 이메일을 판별해 보았다. 우선 조건문을 써서 "만약에  '@'가 이메일에 없다면"을 실행하려고 하는데 앞서 문자열에 일치 값이 없으면 -1을 반환한다고 했기 때문에   ('@') < 0라고 코드를 찍어준다. 그리고 난 다음 반대 조건문 else 도 찍어주고 확인해 보면 아래 나와 있는 두 개의 이메일 주소를 잘 판별한 모습을 볼 수 있다.

 

자바스크립트 이메일 정규 표현식

자바스크립트에서 이메일과 더불어 휴대전화 번호, 비밀번호 등의 정규 표현식은 거의 통념화되어 있는 코드가 존재한다. 구글링만 해봐도 대부분 같은 코드로 설명을 하고 있기 때문에 굳이 머리 아프게 직접 창조하려는 노력을 할 필요는 없을 것이다. 만약 정규 표현식에 대해서 더 알아보고 싶다고 하면 regExp를 검색해보면 좋을 것이다.

 

이메일 판별 정규식 기본 로직

function isEmail(asValue){
      var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
      return regExp.test(asValue);// 형식의 맞는 경우는 true를 리턴한다.

우측 콘솔 창은 regExp를 이용한 이메일 판별 과정이다. 위의 이메일 판별 정규식의 로직을 토대로 콘솔 창을 리뷰해보려고 한다. 우선 regExp라는 변수를 선언하여 판별할 값을 넣어주고, 조건문을 써서 test함수(형식이 맞는 경우 true)를 넣고 '이메일이 맞다.'라는 것을 찍어주고 그 반대 조건문 else 도 찍어서 '이메일이 아니다.'라는 문자를 넣어서 확인해 보면 제대로 이메일을 판별한 것을 볼 수 있다.

 

 

Review

1주 차 수업이 생각보다 빡셌다.🥲 나는 이미 웹 개발 과정을 들었기 때문에 javascript에 대한 거부감이 없는 상태였지만, 이전에 배웠던 것과 다른 코드 로직이나 함수 축약형 등을 배우면서 아직 갈 길이 멀다는 것을 다시금 깨닫게 되었고, 늘 위기와 절망의 연속이지만 후에 강의가 끝나갈 때 즈음엔 이루 말할 수 없는 성취감을 얻을 것을 알기에 열심히 달려 볼 예정이다!! 🦾