[Java Script 개념]20 Recursion (재귀함수)와 콜스택 🥓 재귀함수 자기 자신을 호출하는 절차이다. 한 가지 문제를 가지고 어떤 종료점(end point)에 도달할 때까지 더 작은 부분이나 변경되는 부분에서 반복적으로 수행하는 것 그 종료점을 종료 조건이라고 부른다. 보이지 않는 곳에서 작동하는 정적 데이터 구조 😊 call stack : 대부분의 프로그래밍 언어에는 보이지 않는 곳에서 함수 호출을 관리하는 일종의 데이터 구조가 있다. 호출된 함수는 다른 함수가 return 될 때까지 기다리면서 특별한 순서가 생기게 된다. 제일 먼저 호출한 함수가 있다면 그 함수 안에서 두 번째 함수를 호출하는 것과 같은 순서말이다. 이렇게 순서대로 호출하는 데이터 구조가 자바스크립트에서는 호출 스택이다. 이 call stack는 종이 더미와 비슷하다고 생각하면 쉽다. 함수.. 2022. 10. 18. Big O of Arrays 😁 배열에서의 Big O 배열의 기능에 따른 속도 삽입 : 내용에 따라.. 제거 : 내용에 따라.. 다르다 검색 : O(N) 접근 : O(1) 접근이 O(1)인 이유는 배열에서는 인덱스가 있기 때문에 인덱스로 바로 접근이 가능하기 때문에 O(1)이다. 그러나 삽입은 다르다. 삽입과 제거 let fruits = [ "apple", "banana", "pineapple"] 0 1 2 위와 같은 배열이 있다고 하자 만약 배열의 맨 끝에 "orange"를 추가한다면 똑같이 O(1)시간이 든다. 그러나 배열의 앞이나 중간에 입력했을 때가 문제이다. let fruits = ["orange" "apple", "banana", "pineapple"] 0 1 2 이렇게 추가됐을 시 인덱스가 엉망이 되고 바로잡기 위해서는.. 2022. 10. 18. 공간 복잡도 😋 공간 복잡도 이전에는 시간 복잡도를 보았다. 하지만 이제는 메모리 즉 공간 복잡도를 살펴보겠다. 😁 O(1) space function sum(arr){ let total=0; for(let i=0;i 2022. 10. 12. Big O Notation 🙄빅오 표기법이란 ? 빅오 표기법은 알고리즘의 효율성을 표기해주는 표기법이다. 코드를 분류하거나 비교할 수 있는 시스템 대략적으로 숫자를 세는 것의 붙인 공식적인 표현 입력된 내용이 늘어날 수록 알고리즘에 실행시간이 어떻게 변하는 지 설명하는 공식적인 방식 입력된 N의 따라 걸리는 시간의 전반적인 추세 ex) 예를 들어 "문자열을 받아 뒤집어서 출력하는 코드를 작성하시오" 라는 문제가 있다고 해보자 그렇다면 어떻게 작성하는 것이 가장 효율적인 방법일까? 이 문제에 대해 접근 방식과 해결 로직을 작성하는 데 고민할 때 적용할 수 있는 것이 Big O Notation이다. Add1 function addUpto(n) { let total=0 for(let i=1;i 속도를 보기 위해 위와 같이 코드를 추가하.. 2022. 10. 11. jquery 이용 연습 간단하게 이런 팬명록 사이트를 만들어보았고 여기에 닫기 간단하게 아이유님의 팬명록 사이트를 만들어보았다. 1. 글 쓰기 버튼을 누르면 글을 쓸 수 있는 박스가 생긴다 2. 닫기를 누르면 없어진다. 3. 팬 명록 밑에 오늘 서울의 온도를 넣는다. closebox함수는 닉네임과 응원하기 박스를 없애주는 함수고 openbox는 글쓰기를 눌렀을 때 나타나개 해주는 함수이다. 위에는 날씨api를 이용하여 현재의 날씨를 받아와 보이게 해주는 함수이다. 닫기 버튼에 onclick으로 closebox()를 넣어서 닫을 수 있게 해주고 , 글쓰기 버튼에 onclick를 넣어 나타나게 해주었다. 그리고 현재온도는 태그와 태그에 넣어 ajax로 날씨 api를 받아와 jquery로 표현하게 해준다. 2021. 11. 5. Jquery 간단한 연습 jquery를 이용해 자바스크립트 코드를 짧고 간결하게 작성할 수 있다. 연습하기 위해 간단한 퀴즈를 풀어보겠다 문제1 답 자바스크립트라면 documemt.element 이런 식으로 값을 받아왔을 것이다 하지만 jquery를 사용하면 $('#id').val()를 통해서 해당 id값에 입력한 값을 받아올 수 있다. 위 문제는 값이 없다면 값을 입력하라고 뜨게 하고 있다면 입력한 값을 얼럿하게 하는 간단한 문제이다 문제 2 답 똑같이 input-q2의 값을 받아와 value에 넣어준다. 하지만 이메일 형식 abc@gmail.com에서 도메인 네임만 추출하기 위해서 spilt 함수를 두 번 이용한다. 그 전에 먼저 includes 함수를 통해 입력한 값에 @이 있는 지 없는지를 판별하는 함수를 만든다. 거기서.. 2021. 11. 5. 시계 만들기 시계 date를 이용하기 위해서는 new Date()를 선언을 해주어야 한다. 그 안에서 각가의 시간, 분, 초를 이런 식으로 가져온다. 이때 1초가 지나갈 때마다 시계가 가는 것을 보기 위해 setInterval 함수를 이용해야한다. setInterval함수는 설정한 시간만큼 주기적으로 넣은 함수를 실행한다. setInterval(함수, 시간)이렇게 설정한다. 위의 코드에서는 1초마다 함수를 주기적으로 수행하라는 의미이다. 따라서 1초가 지날 때마다 시간이 바뀐다. D-DAY 시계만들어 보기 HTML에 시간을 표시할 수 있는 클래스를 넣어준다. 1) 가장 먼저 이 클래스를 받아온다. 2) Clock function을 만들어 주면서 오늘 날짜와 디데이를 크리스마스로 정했을 때 이렇게 받아온다. 달을 구할.. 2021. 9. 2. JS이용한 간단한 게임 만들기 0부터 입력한 값으로 범위를 구하고 내가 예측한 번호를 입력한 후 PLAY를 누르면 내가 고른 번호는 고정되고 컴퓨터 번호는 play를 누를 때마다 랜덤으로 바뀐다. 만약 내가 고른 번호와 컴퓨터가 고른 번호가 같다면 you won!으로 바뀐다. 코딩 한 순서 HTML 1) 범위를 입력하는 input창은 최대 범위를 입력하는 것이라 max라는 id값을 넣어주고 숫자만 입력할 거라 type은 number로 해준다. 2) Play라는 버튼을 누르면 submit이 되면서 실행되야 하기 때문에 form태그 안에 넣어주고 받아올 수 있도록 GuessingArea라는 id값을 넣어주고 입력할 수 있도록 input을 넣어준다. 버튼을 누르면 Result div안에 있는 span에 내가 고른 번호와, 컴퓨터가 선택한 .. 2021. 9. 1. async await promise를 더 깔끔하게 사용하는 것 먼저 promise를 사용하지 않았을 때 예시 =>hojin 이렇게 쓰면 바로 user를 출력할 수 있지만, 동기적으로 움직이기 때문에 유저정보를 다 받아올 때까지 다른 코드를 읽어오지 못해 시간이 오래걸린다. Promise 사용 동작이 완료되었기 때문에 fulfilled이고 then 콜백함수로 값을 받는다. 그러나 이렇게 promise를 사용하지 않고도 간단하게 사용할 수 있는 방법이 있다. async 사용 promise를 지우고 function앞에다가 async를 달아주면 코드 블록이 자동으로 promise로 바뀐다. await사용 ✔200,100이 아니라 2000,1000이다. =>🍎+🍌(출력 결과) getFruits는 두 과일을 다 가져오는 함수이다. aw.. 2021. 8. 28. Promise 🔥개념 Promise는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object이다. callback함수 대신 유용하게 사용할 수 있다. 정해진 기능을 수행하고 나서 정상적으로 기능이 수행되면, 성공한 메세지와 함께, 처리한 결과값을 전달한다. 하지만 문제가 발생하면 에러를 반환해준다. promise를 사용하는 이유!! 파일에서 큰 데이터를 읽어오는 경우, 동기적이면 전체적으로 파일이 수행되기까지 시간이 오래걸린다. 따라서 그럴 때는 비동기적으로 처리하여 시간을 줄일 수 있도록 promise로 수행하는 것이 효율적이다. 따라서, nerwork이나 file을 읽어오는 것은 promise로 처리하는 것이 좋다. Promise를 공부할 때 아래 2가지를 중점적으로 알아야 한다! 1. .. 2021. 8. 28. 비동기(asynchronous), 동기 (synchronous) 호이스팅: var, 함수 선언은 제일 위로 올라가는 것을 의미한다. 자바스크립트는 동기적 실행방식을 가지고 있으며, 호이스팅이 된 후 위에서부터 차례로 실행된다. 동기 : 요청 후 응답을 받아야 다음 동작을 실행하는 것을 의미하며, 한 번에 하나의 작업만 수행할 수 있다. 따라서 어떤 작업이 진행 중인 경우 다른 작업은 멈춘 상태로 유지하며 순서를 기다린다. 이러한 동기적 실행방식을 단일 스레드, 싱글 스레드라고도 한다. 비동기: 요청이 들어운 후 응답에 관계없이 바로 다음 동작을 실행하는 것을 의미한다. synchronous way 이렇게 작성한 순서대로 실행되는 것이 동기적 실행방식이다. asynchronous way callback 함수 : 전달해준 함수를 나중에 불러달라! 라는 함수 map, fi.. 2021. 8. 24. JSON JSON (JavaScript Object Notation) : 성, 값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷 DLA이다. HTTP (Hypertext Transfer Protocal) : 클라이언트와 서버가 어떻게 통신할 수 있는 지를 정의한 것 Hypertext: 는 웹의 하이퍼링크뿐만 아니라 전반적인 리소스(문저, 이미지파일), 등을 다 포함한 것. AJAX(Asynshronous Javascript And XML) : 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술 EX) XHR (XMLHttpRequest)=object :object를 이용함으로써 간단히 데이터를 주고 받을 수 있다. XML : HTML과 같은 .. 2021. 8. 23. 이전 1 2 다음
