코딩스파르타 앱개발 1주차 수업
수업을 들으며 연습했던 코딩들을 정리해본다!
비주얼 스튜디오 코드를 사용하지 않고 크롬에서 F12 키를 누르면 콘솔 창이 튀어 나온다.
그 곳에서 코드를 작성하면 자바스크립트를 이용할 수 있다!!
여러 라인을 사용하려면 Shift + Enter를 사용하면 한 번에 여러 라인으로 코드들을 작성할 수 있다.
이제부터 코드 시작!!
문자열을 대문자로 바꾸는 방법!
문자열 나누기!
함수 만들기!
function funcName() {
console.log("함수")
}
funcName()
조건문
반복문 예시
1~100 까지 더하기 연습!
function get_sum(n) {
let sum = 0
for (let i = 0; i < n; i++) {
sum += i;
}
return sum
}
let result = get_sum(10);
console.log(result) 반복문과 조건문을 사용하여 원하는 문자열 찾기!
let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
let count = 0;
for(let i=0; i<fruit_list.length;i++){
let fruit = fruit_list[i];
if(fruit == "딸기"){
count +=1;
}
> }
console.log(count)JSON 데이터 분석하기 (리스트와 딕셔너리 복합 구조 예제)
화살표 함수(arrow funtion)
let a = () => {
}() => 문자가 function과 같은 의미!!
<새로 배운 것>
비구조 할당 방식!
let blogFunction = ({owner,url,getPost}) => { console.log(owner) console.log(url) console.log(getPost()) } blogFunction(blog)
비구조 할당 방식으로 변수들을 넘긴다면 함수 안에서 각 변수들을 따로 선언해주지 않아도 되기 때문에 훨씬 코드가 짧아진다.
문자열을 상용할 때 자유롭게 줄바꿈을 할 수 있는 방법! `(백틱)을 사용한다.
let name = "yerim" let str = `나는 ${name} 입니다.` console.log(str)=> 문자열 안에 변수가 들어야야 할 때 가독성 좋게 만들 수 있다!
딕셔너리 구조를 짧게 작성할 수도 있다.
변수와 키 값이 동일하다면, 딕셔너리를 짧게 선언할 수 있게 된다.
반복문을 줄여서 사용할 수 있다아!
map() 함수 사용하기
map((value,index) => { })map이라는 도구가 리스트의 . (연결 연산자)로 붙어 있으면, 함수에 리스트의 값(value)과 순서(index)를 던져주게 된다.
2주차 예습
module system
export, import
export는 외부에서 함수를 사용할 수 있게 꺼낼 수 있게 하는 키워드이고,
import는 외부에서 사용할 수 있는 함수를 가지고 와서 파일에 적용시키는 키워드이다.
작성 방법
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));
길게 작성할 수도 있고, 짧게 특정 파일에 있는 export된 함수를 가져올 수도 있다.
export default function times(x) { return x * x; } import k from './util.js'; console.log(k(4));
시험기간인데 머리 식힐 겸 수업을 들었다가 생각보다 많은 수업 내용에 당황하였다. 그래도 javascript 언어는 익숙한 언어여서 크게 부담감으로 느껴지지는 않았다.
그럼에도 새로 배우는 함수들과 도구들이 있어서 시험이 끝나고 따로 공부해야 할 것 같다.
생각보다 수업이 딱딱하지 않고 너무 재미있어서 즐겁게 수업을 들을 수 있었던 것 같다!!
이번 주 숙제!
- map 함수를 사용하여 list에서 딸기가 몇개 있는지 알아보기
let fruit_list = ['사과','감','감','배','포도','포도','딸기', '포도','감','수박','딸기'] let count = 0; fruit_list.map((value,i) => { if(value == "딸기") { count += 1; } }) console.log(count);
- 이메일 검사 함수 만들기
2-1. indexOf()로 풀기function checkEmail(email){ if(email.indexOf('@')<0){ console.log("이메일이 아닙니다.") }else{ console.log("이메일이 맞습니다.") } } checkEmail("yerim2021@gamil.com"); checkEmail("yerim2021%gamil.com");
2-2. 정규 표현식으로 풀기
function checkEmail(email){ var emailRule = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; if(!emailRule.test(email)){ console.log("이메일이 아닙니다.") }else{ console.log("이메일이 맞습니다.") } } checkEmail("yerim2021@gamil.com"); checkEmail("yerim2021%gamil.com");
2-3. .com이 없는 경우 판별
function email_check( email ) { var regex=/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; return (email != '' && email != 'undefined' && regex.test(email)); } console.log(email_check('yerim2021@gmail')); //false console.log(email_check('yerim2021@gmail.com')); //true console.log(email_check('yerim2021$$gmail.com')); //false
