행렬의 덧셈

 

행렬이란게 처음 나왔다.

아마 JS의 새로운 배열방식 이라기 보다는

그냥 평범한 배열중 하나라고 생각하는게 좋을 듯 하다.

 

arr1 =  [[1,2],[2,3]]   일때

arr1[0] =  [1,2]     ///   arr1[1] = [2,3]   라는 것 !

 

더더 중요한것은 

arr1[0][0]  =  1    이라는것으로

배열안의 배열을 지정할 수 있게 된다는 것

 

그럼 문제를 다시 풀어보자.

일단 arr1[0][0] + arr2[0][0] = return[0][0]  을 시작으로

 arr1[0][1] + arr2[0][1] = return[0][1]  ...  다음

 arr1[1][0] + arr2[1][0] = return[1][0]   

이런식의 반복과 적절히 [ ] , [ ] 나눠주는 작업이 필요하겠다

 

저런류의 반복은 이미 이중 for문 으로 해결한 바 있다.

 

당장 문제는 행렬을 더해주는 방법보다는 

더한값을 행렬처럼 만드는 방법을 알아내야 한다.

 

제일 간단한 방법은 

[0][0] 결과 값, [0][1] 결과값 을 배열에 push 해서 행렬을 만드는 법

 

function solution(arr1, arr2) {
    var answer = [];
    for(let i =0; i < arr1.length ; i++) {
        var ans = [];
        for( let j = 0; j < arr1[i].length ; j++) {
            
            ans.push(arr1[i][j] + arr2[i][j]) 
        }
        answer.push(ans);
    }
    return answer;
}

 

완성된 코드는 이러하다

 

결과적으로 

j 반복문으로 

arr1[i][j] + arr2[i][j] 의 값 ans 가  answer [ ]  에 push 되면서   [[ ans[0], ans[1]]]  를 만들고

i 반복문으로 돌아와서

var = ans 로 ans 값이 초기화되고 

다시 j 로 넘어가서 arr[1] 로 넘어가게 된다 .

 

그렇게 해서

[ [arr[0]] , [arr[1]] ]   과 같이 행렬로 만들 수 있게 된다.

 

글로 설명하려니까 오히려 복잡해진 느낌인데, 

 

행렬은 배열 안에 배열이 있는 형태이고, 

배열 arr [a][b].... 으로 배열내의 배열의 index 를 지정할 수 있다.

 

이런 배열을

2차원 배열 ( 다차원 배열)

이라고 하며, 이러한 2차원 배열의 데이터를 활용하기 위해선 

거의 필수적으로 for 문 또한 2차원이 되어야 할 것이다.

 

 

 

 

 

'사전캠프' 카테고리의 다른 글

28일차 - SQL 문제 풀이  (0) 2024.07.30
26일차 - 알고리즘 풀이  (0) 2024.07.25
25일차 - 알고리즘 풀이  (3) 2024.07.24
24일차 - 알고리즘 풀이  (1) 2024.07.23
23일차 - 알고리즘 풀이  (3) 2024.07.22

 

이제 학습의 시작을 알고리즘으로 하는것에 익숙해졌다.

 

학습이 건강해지고 있다는것....

 

 

1. 핸드폰 번호 가리기

 

그다지 어렵지 않은 문제이다. (엄청 헤맸음)

 

반복문을 이용해서 문자열 phone_number를 순회하여 length -4 까지는 * 로, 그외는 그대로 출력해주면 된다

function solution(phone_number) {
    var answer = '';
    for(var i = 0; i < phone_number.length; i++ ) {
     answer = i < phone_number.length - 4 ? answer + '*' : answer + phone_number[i] ;
    }
    return answer;
}

 

 

 

2. 없는 숫자 더하기

 

function solution(numbers) {
    var answer = 0;
    for( var i = 0; i < numbers.length; i ++) {
        answer += numbers[i]
    }
    return 45 - answer;
}

배열의 모든 숫자를 더하고 0~9 의 합인 45에서 빼는 코드를 만들었다.

 

아무래도 (야매)

정답으로 인정받기엔 어려운 답지라고 생각한다.

 

 

.includes() 함수  를 데려오도록 하자

이걸 이용하면 훨씬 그럴싸 한 코드를 만들 수 있다.

 

function solution(numbers) {
    var answer = 0;
    for ( var i = 1; i < 10; i ++) {
        if(!numbers.includes(i)) { answer +=i} 
    }
    return answer;
}

1~9 까지의 숫자를 number가 포함되어 있는지를 체크한 뒤  없는경우 ( ! ) 만 answer 에 더해준다.

 

 

 

3. 제일 작은 수 제거하기

 

우선 아는것만 가지고 풀어보자..

 

function solution(arr) {
    var answer = [];
    for( var i = 0; i < arr.length ; i++) {
        if(arr[i] != Math.min(...arr) ) { answer.push(arr[i])}
    }
    return answer < 1 ? [-1] : answer;
}

 

arr을 순회하여 arr의 최소값이 아닌경우 answer 에 push 한다.

그리고 answer 값이 없는경우 [-1] 을 리턴하고 아닌경우 answer 를 그대로 리턴...

 

 

통과는 되는데, 테스트1의 지연시간이 심상치가 않다.

아마도, arr.length 가 엄청나게 큰 경우인 듯 하다.

 

검색 해본결과, index값을 찾기 위한 for 노가다를 할 필요가 없이

 

 

indexOf() 함수를 사용하면 된다

이 문제는 사실상 Math.min() 과 indexOf() 를 위한 문제였던것

 

function solution(arr) {
    if(arr.length == 1) { return [-1]}
    arr.splice(arr.indexOf(Math.min(...arr)), 1)
    return arr;
}

우선 [-1] 이 리턴될 경우는 arr.length 가 1인 경우 뿐이므로 미리 리턴해버린다

그 후 arr 배열에서 가장 작은 수의 index 값을 splice 로 날려주면 끝이다 !

 

 

'사전캠프' 카테고리의 다른 글

26일차 - 알고리즘 풀이  (0) 2024.07.25
25일차 - 알고리즘 풀이  (3) 2024.07.24
23일차 - 알고리즘 풀이  (3) 2024.07.22
22일차 - 알고리즘 풀이  (0) 2024.07.19
21일차 - Javascript 입문 수업  (0) 2024.07.18

알고리즘 !!

월요일은 역시 알고리즘 

 

1. 서울에서 김서방 찾기

 

늘 그렇듯,

아는방법대로 풀고  모르면 검색한다

 

아는 방법

function solution(seoul) {
    let i = 0;
    while(true) {
        if (seoul[i] == 'Kim') { return '김서방은 '+i+'에 있다'}
        i++
    }
}

 

 반 드 시 seoul 에 포함이 되어있기 때문에 while  true를 돌렸다.

while 을 가급적 멀리 하라고 했지만 아무튼 근거는 있다.

 

Kim 이 나올 때 까지 seoul[i] 를 순회한다. 찾으면 i를 반환하여 문장을 출력.

끝끝

 

 

 

2. 나누어 떨어지는 숫자 배열

 

약간 복잡해 보이는 문제...

 

for (var i = 0; i < arr.length ; i++)

우선 for 문으로 arr 원소를 순회해보자 

 

 if(arr[i] % divisor == 0)

arr 의 원소를 divisor 로 나누어 떨어질 경우

 

           answer.push(arr[i]);

해당 원소를 answer 배열에 넣어준다.

 

push는 배열의 뒤에 추가하는 것이다.

 

여기서 든 생각은 arr 배열이 오름차순이라면 자연스럽게 

연산의 결과도 오름차순이 될. 것이다.

 

        arr.sort((a,b) => a-b);

반복문 진입 전에, 해당 코드로 arr 배열을 오름차순으로 만들어 주자.

 

 

    if (answer.length == 0) { return [-1]} ;
    return answer;

 

 

값이 없는경우 -1을 리턴하게 하면 완성... 인데  

쓸데없이 if문 하나 더 쓰는것 보다는 삼향 연산자에 익숙해질 필요가 있다.

 

   return answer.length == 0 ? [-1] : answer;

거기서 거기 같지만 했다는게 중요하다...

 

 

function solution(arr, divisor) {
        var answer = [];
        arr.sort((a,b) => a-b);
    for (var i = 0; i < arr.length ; i++) {
        if(arr[i] % divisor == 0) answer.push(arr[i]);
    }
   return answer.length == 0 ? [-1] : answer;
}

최종 결과 

 

 

3. 음양 더하기

불리언 배열 ???

수학을 못해서 불리 ..한 배열

 

정리해보면, absolutes[n] signs[n] 원소가 있을때 signs[n] =false 인 경우는 absolutes[n] 이 음수이다

그 외는 양수

 

머리로는 알겠는데..

 

 for ( var i = 0; i < absolutes.length; i++) {
     if ( signs[i] == false) {
         nn.push(absolutes[i] * -1)
     } else nn.push(absolutes[i] * 1)
    }

 

우선 양수는 양수로 음수는 음수로 nn배열에 넣도록 했다

    for ( var i = 0; i < nn.length ; i++) {
        answer += nn[i]

그 다음 다 더하면.. 끝?

function solution(absolutes, signs) {
    var nn = [];
    var answer = 0;
    for ( var i = 0; i < absolutes.length; i++) {
     if ( signs[i] == false) {
         nn.push(absolutes[i] * -1)
     } else nn.push(absolutes[i] * 1)
    } 
    for ( var i = 0; i < nn.length ; i++) {
        answer += nn[i] 
    }
    return answer;

잘 작동하지만 쓸데없이 조잡해보인다. for 문도 괜히 2번 들어가고..

 

가능한 줄여보도록 하자.

 

불필요한 nn변수를 없애고 바로 answer 에서 연산

 if 구문을 삼향 연산자로 대체

function solution(absolutes, signs) {
    var answer = 0;
    for ( var i = 0; i < absolutes.length; i++) {
        answer = signs[i] == false ? answer-absolutes[i] : answer+absolutes[i]
    }
    return answer;
}

 

 

 

'사전캠프' 카테고리의 다른 글

25일차 - 알고리즘 풀이  (3) 2024.07.24
24일차 - 알고리즘 풀이  (1) 2024.07.23
22일차 - 알고리즘 풀이  (0) 2024.07.19
21일차 - Javascript 입문 수업  (0) 2024.07.18
20일차 - Javascript 입문 수업  (0) 2024.07.17

오랜만에 SQL 문제를 하나 풀고 시작해보자

 

 

입양 내역 테이블을 알려주고 입양을 못간 동물을 찾으라고 해서 잠시 당황했다.

 

어떻게 입양못간 동물을 골라낼 수 있을까?

 

내가 할 줄 아는 방법은,

보호소 전체 동물중 입양 간 동물을 제외한 나머지를 구하는 방법이다.

 

from animal_ins ai left join animal_outs ao on ai.animal_id = ao.animal_id

 

두 테이블을  animal_id 라는 공통 데이터를 통해 left join을 해준다.

left join을 했기 때문에 ao.datetime 데이터가 비어있는 녀석들도 join 했다

ao.datetime 데이터가 null = 입양간 데이터가 없음 = 아직 입양을 못 간 동물의 데이터

 

where ao.datetime is null

where 로 골라낸다

 

order by ai.datetime
limit 3

보호소에 들어온 날짜 기준 오름차순으로 정렬한 뒤에 3 데이터로 리밋을 걸면

결과적으로 입양가지 못한 동물 중, 가장 오래 보호소에 남아있는 순으로 3 데이터만 남게된다.

 

select ai.name, ai.datetime
from animal_ins ai left join animal_outs ao on ai.animal_id = ao.animal_id
where ao.datetime is null
order by ai.datetime
limit 3

문제에서 요구한 컬럼을 select로 지정해주면 끝 ! 

 

 

Javascript 입문 수업

 

 

오늘 배운 내용은 모듈 이다.

 

모듈은

특히, 반복 사용될 가능성이 높은 코드 뭉치를 한번에 작동시키는 버튼으로 만든다

라고 생각하면 좋을 듯 하다.

어디까지나 방식에 해당하는 개념적인 용어이기 때문에 설명이 좀 애매모호한데,

 

내가 이해한 바로는

감자가 올 때마다 세척해서 껍질을 벗기고 10등분으로 칼질한다  했을 때, 

세척해서 껍질을 벗기고 10등분 하는 과정을 '썰다' 라고 모듈화 하는것으로

감자가 오면 '썰다' 해.  로  간소화 시킬 수 있다는 것이다.

만약 새로 고구마가 들어온다면 고구마에게도 '썰다'를 지시할 수 있을 것이다.

 

또 다른 특징으로는, 

다른 문서에서 쓰여진 코드 또한 모듈화 한다면

원하는 문서로 불러와 쓸 수 있다는 것이다. 

 

 

라이브러리

10일차에, JQuery에 대해서 학습한 적이 있다.

 

위에 처럼 정리를 했었는데,

이 JQuery 가 Javascript 에서 가장 대표적인 모듈 모음집, 라이브러리 라고 할 수 있다.

 

 

JQuery 를 사용한 코드 예시

 

 

JQuery 없이 작성한 코드 예시

 

위의 예시는 JQuery의 활용성에 대해 알려주는 예시인데,

$ 두줄 만으로 empty 였던 list <li> 구간을 전부 채우는 활용을 보여준다.

아래와 비교했을 때 가히 '딸깍' 이라 할 수 있는 차이를 보여준다.

 

 적절한 JQuery의 활용은 물론, 

자신이 만든 코드를 적절히 모듈화해서 사용하는것이 아주 중요할 것 같다 !

 

 

UI   와   API

 UI 는, user interface 로,

일반 사용자가 프로그램을 동작하는 수단이라고 할 수있다.

이것은 구글 검색창의 UI 라고 할 수 있고,

일반 사용자는 해당 인터페이스를 통해 키워드를 검색 하는 등의 동작을 지시할 수 있다.

 

 

 

 

API 는, Application Programming Interface 로,

프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다.

 

위의 구글 UI를 나타내기 위해서,

프로그래밍 언어를 통해 웹 브라우저를 조작하는것을 API 라고 할 수 있겠다.

 

 

 

 

머리로는 이해를 했는데 글로 쓰려니까 뭔가 어렵다..

잘 이해 한거겠지?

 

'사전캠프' 카테고리의 다른 글

23일차 - 알고리즘 풀이  (3) 2024.07.22
22일차 - 알고리즘 풀이  (0) 2024.07.19
20일차 - Javascript 입문 수업  (0) 2024.07.17
19일차 - Javascript 입문 수업  (1) 2024.07.16
18일차 - [왕초보] 웹개발 종합반  (0) 2024.07.15

사실,   알고리즘 문제를 몇개 풀고난 뒤에 학습을 시작하려고 했다.

 

그러나 javascript 의 기본지식이 너무 없는 탓에 

 

다른사람의 풀이를 참고해서 그 중 모르는것을 학습하는

기존의 방법은 더 이상 불가능했다.

 

 

 

문제 풀이를 위한 함수도 모르고, 배열에 대한 이해도 부족한 상황에서 

다른 사람의 풀이를 본다고 해도, 하나부터 열까지 다 배워야 한다.

 

효과적인 학습 방법이 아니며, 원하는 방향도 아니기에 

알고리즘 풀이는 잠시 보류하기로 하였다.

 

 

마침, 오늘 배울 내용은

[ '배열 ' ]  이다.

 

물론 처음 보는것은 아니다.

 var a = ['1','3','5']

위 처럼, 하나의 변수 a에 리스트의 형태로 여러개의 값이 저장된 데이터 형태를 배열 이라고 한다.

 

배열에 들어있는 각각의 데이터를 원소(Element)  라고 하고, 

각 원소의 순번을 색인(index) 라고 한다.

 

주의사항으로는 index 는 0 부터 시작한다 ! 

 

배열의 조작

우선 가장 기본적인것은

length 

 var a = ['1','3','5']  일 때,

a.length 를 통해서 배열의 크기 =  배열안에 담긴 원소의 수 를 나타낼 수 있다.

위의 경우, 세 개의 원소를 가지고 있으므로 a.length  = 3을 표시한다.

 

열받는 부분은  index 는 0부터 시작해서 0,1,2 이지만

length 는 1,2, 3 으로 센다는 것이다

 

카운팅넘버링의 차이를 잘 기억해야 할 것이다.

 

 

추가

arr.push('a')

arr배열의 끝에 'a' 라는 원소를 새로 추가한다. 

 

arr.concat(['a','b']) 

arr 배열의 끝에 'a' , 'b' 모두 추가한다.

배열의 형식을 갖기에 복수의 원소를 추가할 수 있다.

 

arr.unshift('a') 

arr 배열의 시작에 'a'를 추가한다.  'a' 의 index는 0이 되고 기존의 원소들은 1씩 밀리게 된다.

 

arr.splice(x,y, 'a');

splice는 x 번째 인덱스 부터 , y숫자만큼의 원소를 제거하고 , 'a' 를 그 자리에 추가한다.

이 때, 3번째 인자는 필수가 아니므로 비워둘 수도 있다.

 

 

제거

arr.shift(); 

arr 배열의 첫번째 원소를 제거한다.

 

arr.pop();

arr 배열의 끝 원소를 제거한다.

 

정렬

arr.sort(); 

arr배열을 정해진 방식에 따라 정렬한다. 

기본적으로 숫자, 알파벳 등을 오름차순 정렬 한다.

 

arr.reverse();

arr 배열을 역순으로 정렬한다.

 

 

오랜만에 웹개발 강의를 이어서 들었다.

 

주제는 

 

Fetch  이다.

Fetch란, Javascript 에서 백엔드 서버의 데이터 베이스를 긁어오는것 이라고 할 수 있다.

 

여기서 말하는 데이터 베이스는 api 이며, api는 주로 json의 서식으로 쓰여진다.

 

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
		console.log(data)
})

간단히 말해, url 을 통해 api에 접속해서,  json 형태로 불러온 뒤 data 라는 이름을 붙여준다.

그렇게 data 라는 변수 안에  api 내에 데이터가 전부 들어가게 된다.

 

강의속 api

http://spartacodingclub.shop/sparta_api/seoulair

서울의 각 자치구, 위치, 미세먼지 수치 등이 기록되는  openapi 

 

 

이 api를 활용해 

기존에 만들었던 스파르타 플릭스 html에 활용하는 내용의 강의였다.

 

 $(document).ready(function () {

document.ready를 통해  페이지가 준비 완료되었을 때 실행되도록 하고

    let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
            fetch(url).then(res => res.json()).then(data => {

api url을 불러와서 data 에 입력해주고

 

        let temp = data['temp'];
        $('#temp').text(temp);

data 내에서 'temp' 로 지정된  값을  temp 라는 변수에 대입시키고 

 id =  #temp 로 지정된 값을  temp 변수에 담긴 값으로 span 해준다...

 

하필 다 temp 로 써놓아서 헷갈리지만,

let temp 는 변수인 temp

data['temp'] 는 데이터 내에서 temp로 지정된 항목을 말하고

#temp 는 id를  temp 로 준 구간을 말한다.

맞나..? 

 

 

이렇게 하는것으로 spartaflix 에

api 에서 얻은 서울의 기온을 표기할 수 있게 된다.

 

 

 

오늘 배운 내용은 

api 의 데이터를 불러와서 원하는 정보를 띄운다는 점에서

 

기존에 배웠던 SQL 의 주 기능이

Javasript 에서도 가능하다 ! 라는 느낌이 들었다.

 

다만 sql 은 데이터 베이스를 다루는 데 특화된 언어이니 만큼,

SQL 의 언어가 훨씬 간결하고 직관적이었고 

JS는 복잡하고 이해가 힘든 코드뭉치로 보인다는 점이 다르다.

 

        $(document).ready(function () {
            let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
            fetch(url).then(res => res.json()).then(data => {
        let temp = data['temp'];
        $('#tempo').text(temp);
        })

외워서 쓰는건 힘들고, 형식이라도 기억이 나면 다행일듯 

 

 

전반적으로 SQL을 배울 때에 비해서 속도가 나질 않는다. 

내일은 다시 js 기초강의 영상을 학습해야겠다.

'사전캠프' 카테고리의 다른 글

20일차 - Javascript 입문 수업  (0) 2024.07.17
19일차 - Javascript 입문 수업  (1) 2024.07.16
17일차 - Javascript 입문 수업  (0) 2024.07.12
16일차 - Javascript 입문 수업  (0) 2024.07.11
15일차 - Javascript 입문 수업  (0) 2024.07.10

 

 

오늘은~~~~~~~

저번에 수업에 이어서 생활코딩의 

 

함수 !

들어가기 앞서서, 

 

 

 

알고리즘 문제 하나를 풀고 시작하도록 하겠다

 

 

 

제일 바보같고 멍청하고 단순하고 무식한 방법으로 시작한다.  

경악 을 금치 못하는 코드를 완성했다.

 

50조가 될지 모르는 n을 제곱근을 찾을 때 까지  i+=1 씩 증가시키며 찾는 코드가 되었다.

심지어 제곱근이 정수가 아닌 n의 경우는 무조건 i == n 이 될 때 까지 계산을 해야한다.

 

실무에서 이런 코드를 짰다면  머지않아 직장을 잃게 될 것이다.

 

 

근속을 위해 15일차에 잠깐 배웠던 내용중에 위 함수를 활용 해 보자.

Math.sqrt(n) 이 정수일 때와 그 외만 구분하면 훨씬 그럴싸한 코드가 될듯하다.

 

추가로, 값이 정수인지를 판별하기 위해 Number.isInteger() 함수를 급조해왔다.

 

 

function solution(n) {
    var answer = 0;
    if (Number.isInteger(Math.sqrt(n)) == true ) {
        answer = (Math.sqrt(n)+1)*(Math.sqrt(n)+1)
    }
    else { answer = -1}

    return answer;
}

n 의 제곱근 을 구해서, 그 값이 정수인 경우와 그렇지 않은 경우만 구분하면 되기 때문에 

불필요한 연산이 사라지고 코드도 그럴싸 해졌다.

 

생활 코딩에서 자주하는 말이 있다.

 

늘, 극단적인 상황에 대비해야 한다.

 

입문자임에도 분명하게 느껴진다.

그러기 위해선 알아야 한다.

 

 

그럼 다시 함수 학습을 시작하자.

 

함수란 ,

하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다 

 

여기서 중요한것은 재사용성 이다.

여기저기 퍼져있는 동일한 부류의 코드를 함수로 묶으면서

쓰기도 편하고, 수정하기도 편하고 보기에도 좋아지는 것이다. 

 

이론적으로 보면 약간 복잡한데,

function 의 기본 내장형 변수 라고 생각하면 될 듯 하다.

같은 function 이라도 인자의 값을 다르게 받는다면 다른 결과를 만들어 낼 수 있다.

쉽게 말해, 기본적인 가공 방법이 있지만 ' 어떻게 해드릴까요? '  정도의 변칙을 줄 수 있다는것

 

위의 예시 처럼, get_arguments 함수의 인자를 어떻게 입력하는지에 따라

다른 결과가 나올 수 있다.

https://www.youtube.com/@coohde

 

반복문

반복문은 사용빈도가 높은 코드 종류로 반드시 숙지해야한다.

조건 설정이나 내용을 조금이라도 잘못 쓴다면

'  어?  '    를 하게 될 것이므로

많은 주의가 필요한 코드이기도 하다.

 

 

 

시작은 while 로 , () 조건이 만족하는 동안  { }  코드를 무한 반복한다

조건을 적절히 설정하지 않는다면 반드시 무한 루프에 걸리게 된다.

break 와 continue 를 사용한다면 더 유연한 반복문 사용이 가능하다.

 

break;

해당 반복문을 즉시 종료한다. 

조건없이 break; 만 덩그러니 들어있다면 반복문이 아니게 되기 때문에 

항상 조건문과 같이 쓰인다.

if(~~) { break;}

 

 

continue 의 경우는 반복문을 전체종료하는 break와는 다르게

continiue 위치에서->  반복문 시작점으로 '되돌아가는' 함수이다.

물론, 이때 i의 값은 보존되기 때문에 

주로 반복문 내의 일정 구간을 건너뛰고 싶을때 사용된다.

 

 

 

for

for 문은 쉽게 말해 보다 깔끔해진 while 이라고 할 수 있다.

조건문에 거의 필수로 사용되는 초기값, 조건, 증감값 을 미리 쓰고 시작하는 것이다.

 

아앗..어째서 int 가...

이것은 13일차에 알고리즘 풀이에서 학습한 부분이기도 하다.

 

 

반복문의 중첩

당연하게도 반복문 내에서 또 반복문을 사용할 수 있다.

위는 반복문의 중첩 예시로,  00 ~ 99 까지의 모든 숫자를 나열하는 반복문이다. 

 

처음 봤을 땐 전혀 이해가 되지 않았다.

어떻게 저게 00~ 99 가 되는것일까?

 

 

강의 영상에서는 이것을 이해시키기 위해 Debuger 기능을 소개했다.

 

 

Debuger 에서 breakpoints 를 설정해서 해당 코드가 어떻게 동작하는지 볼 수 있다.

 

그 결과,

var i = 0   실행

조건을 확인하여 만족하기 때문에 for ~j~ 에 해당하는 반복문이 실행

00~ 09 까지 표기하게 되고 j 가 10이 되는순간 다시 for ~i~ 의 구문으로 돌아오면서 i ++1 이 적용된다.

 

이렇게 i가 1이 되었기 때문에

1+j 부터 다시 for ~j~ 코드가 반복된다. 

 

여기서 중요한것은  for (var j = 0; 또한 다시 실행 된다는 것이다. 

따라서, 10이 되어 정지했던 for~j~ 구문이 다시  var j = 0 이 되었기 때문에 j<10 을 만족하는 한 계속된다.

 

확실히, Debuger를 통해 코드가 실행되는 상황을 순차적으로 보니까 이해가 빠르게 되었다.

 

 

추가적으로, 해당 코드에서 숫자+숫자의 결과가 표기되는걸 막기위해

i 와 j 에 해당하는 숫자가 문자열로 표기되도록  String() 을 사용해 주었고, (대문자 S로 해야되더라)

만약, "coding"+i+j+ "<br/>"  과 같이, 

문자열과 문자열 사이에 들어있는 숫자열은 자동으로 문자열로 사용되도록 되어있다는 것도 알게 되었다.

 

 

꽤 난이도가 있는 수업이었다.

한번에 이해가 되지 않아 여러번 보았고, 유연하게 활용할 수 있을지도 미지수 이다.

 

하지만, 알고리즘의 기본이 이 조건문과 반복문이라고 생각하고 있기 때문에,

결국 숙달될 때 까지 학습해야 할 것이다.

 

 

https://www.youtube.com/@coohde

 

오늘은~~~~

Javascript 초보입문기초를 배워보는 시간을 가졌다.

기존에 듣고있던 웹개발 종합반의 내용은

웹페이지, html 위주로 진행이 되고 있었고, 

일반적으로 종합강의에선 이론적인 부분은 가볍게 짚고 넘어가는 경우가 많기 때문에

 

이론적인 부분과 기초적인 부분을 따로 학습하는것이 좋다고 판단했다.

 

 

생활 코딩 

은 유튜브 채널중 하나로, 공개된 채널중 상당히 양질의 정보를 제공하고

목소리 또한 듣기 편하며...아무튼 구독

 

 

 

학습내용

1. Javascript 오리엔테이션

2.                   실행과 실습

3.                   숫자와 문자

4.                   주석 / 줄바꿈 / 여백

5.                   비교 연산자

6.                   조건문

 

까지가 오늘 학습한 내용이다.

 

숫자와 문자

기본적으로 1  은 숫자일 수도 문자일 수도 있다.

숫자일 경우 1 + 1 = 2 가 될것이고

문자일경우  1 + 1 = 11 이 된다.

 

따로 지정해주지 않는경우 기본적으로 숫자는 숫자열이 되고 

'1'  "2" 와 같이 따옴표/큰따옴표를 사용해서 문자열로 사용 될 수 있다.

 

기본적으로 사칙연산 + - * / 를 지원하며,

 

좀더 복잡한 연산도 자바스크립트에서는 가능하다.

 

 

 

변수

 

변수는 값이 변할수 있는 숫자를 말하며, 문자 또한 가능하다.

var a

을 통해 a 라는 변수를 지정할 수 있고,

 

var a = 0; 

a라는 변수에 0 이라는 값을 입력 할 수 있다.

 

이런 변수는 연산에서도, 조건문에서도, 반복문에서도, 어디든지 사용할 수 있다.

 

 

 

비교 연산자

이미 알고있는 내용이라고 생각했는데, 처음보는 녀석이 등장했다.

===

해당 연산자는  == 와 비슷한 기능을 하지만, 

데이터 타입까지 일치해야 하며

 

어차피 값이 없는건 마찬가지인 null 과 undefined 를 구분하고

 true === 1 또한 false로 다루기 때문에

 

==와 비교하여 훨씬 엄격한(strict) 비교 연산자 라고 할 수 있다.

해당 강의에서는  == 보다는 === 을 사용할 것을 강력히 추천하고 있다.

 

 

추가적으로 not 의 의미를 가지는 ! 도 익숙하지는 않기 때문에 따로 적어 보았다.

 

 

 

 

조건문 

오늘 학습한 내용중 가장 중요한 내용이라고 할 수 있다.

 

많은 데이터 형식 중

boolean (불린) 은   true  또는 false 를 값으로 갖는 데이터 이다.

 

수없이 사용하게될  조건문은 

if(boolean) 형태로 작동하게 된다.

 

 

if(true) {

  code

}

if 는 기본적으로 boolean 에 해당하는 값이 true 혹은 false 일때 '만' 해당 

코드를 실행하게 된다.

 

else 를 주는것으로  그 외의 경우를 만들 수 있으며,

else if를 사용하는것으로  if구문 이후로 

" 그러면 이거는? " 라는 형태로 계속해서 조건을 이어갈 수 있다.

 

 

 

 

 

조건문 안에 조건문이 들어가는 것 또한 가능하고,

 

논리 연산자를 사용한다면 약간 더 간결하게 코드를 짤 수 있다.

 

and 에 해당하는 논리 연산자로,  A && B   일때 ,     A =true , B= ture 일 경우에만  A && B = true  를 출력한다.

 

 

or 에 해당되는 논리 연산자로,  A || B  일 때,  A 와 B 중 하나라도 true 라면  A || B = true 를 출력한다.

 

 

 

 

다음은 반복문 인데, 

전에 알고리즘 문제풀이를 위해 학습했던  ' for ' 가 등장할 것으로 예상된다.

 

반복문의 경우  내용이 많기 때문에 오늘은 이것으로 마무리해야 겠다.

 

+ Recent posts