본문 바로가기

IT 개발85

[드림코딩]자바스크립트 기초 정리 ③ 함수선언과 함수표현, Arrow Function 사용방법 function 함수의 정의 및 기능? function 함수는 sub-program이라고도 불린다. 프로그램 안에서 각각의 작은 단위의 기능들을 수행한다. 프로그램을 구성하는 매우 기본적인 블록이다. 함수는 여러 번 재사용이 가능하다 한 가지의 일 (하나의 함수엔 하나의 기능을!) 또는 어떤 것을 계산할 때 사용한다. 이름을 정하는 네이밍은 동사 형식으로 지정한다 (함수명을 보고 어떤 동작을 하는 함수인지 알 수 있게끔) 자바스크립트에서 함수는 오브젝트이다 Input(parameters)를 받아서 Output(return)하는 것이 함수이다. API를 사용할 때 함수의 이름을 보고 대충 '이러한 동작을 하겠구나'라고 유추할 수 있고, 전달해야 하는 parameter의 값은 무엇인지, 어떠한 값이 리턴되길.. 2021. 6. 17.
[드림코딩]자바스크립트 기초 정리 ② var let const 변수 차이점 , 호이스팅과 블럭스코프란? var, let, const의 차이점을 설명하기에 앞서 여기서 나올 기본개념을 정리해보자면, 우선 자바스크립트의 데이터 타입은 크게 두 가지로 분류가 가능하다 계속 변경이 가능한 Mutable 데이터 타입과, 변경이 불가능한 Immutable 데이터 타입이 존재한다. 이 두 가지의 예시는 밑에서 더 자세히 정리해보겠다 위의 그림을 조금씩 참고해가며 var, let, const에 대해 이해하자 Var ? 요즘엔 var를 사용하는 추세는 아니지만 (아직 현업에서 사용하는 곳도 있긴 하다고 들었다) 왜 사용하지 않는지, ES6부터 새로 나온 let, const와 다른 점은 무엇인지 알아볼 필요가 있다. var의 가장 큰 차이점은 변수의 재선언 var age = 1이라고 작성 후, 밑에서 var age = 2라.. 2021. 6. 16.
[드림코딩]자바스크립트 기초 정리 ① operator, if, for loop 처음 자바스크립트 독학하면서 알게 된 유튜버 드림코딩 엘리님의 강의. 기초까진 괜찮았다가 함수들이 점점 나오면서 이해가 아예 되지 않아서 멘붕의 연속이었다 그래서 같은 강의를 거의 5번 넘게 돌려보고, 그래도 이해가 안 되는 부분은 책을 읽어가며 이해했다. 내 머리가 좋지 않다는 건 알고 있었지만 이렇게까지 심각했나? 싶을 정도였는데, 강의 밑의 댓글들을 보니 동지들이 많았다 ^^.. 절대 혼자만 헤매고 있는 게 아니니 자바스크립트에서 너무 좌절하지 않도록! 프런트엔드의 경우 HTML, CSS는 비교적 쉽게 접근이 가능하여 (이 둘은 프로그래밍 언어가 아니다.) 프런트엔드를 만만하게 볼 수 있지만 자바스크립트를 맞닥뜨리는 순간, 이 분야에 쉽게 얻을 수 있는 건 없다고 느낄 것이다.. 나는 정말 뼈저리게.. 2021. 6. 15.
script 로딩방법 - async와 defer의 차이와 장단점 html 문서에서 src 속성의 외부 스크립트 script 를 로딩 할 때 다양한 방법이 존재한다. 오늘은 상황에 따라서 어떻게 script를 불러와야 효율적인지 각각의 방법과 그 특징에 대해서 알아보자! 1. 에 를 별다른 조건 없이 넣는 경우 스크립트가 모두 로딩 된 후에서야 사용자들은 스크립트 밑의 페이지를 볼 수 있는데 만약 스크립트의 용량이 크다면 로딩 시간이 오래 걸릴 것이고, 그 시간 동안은 페이지 자체를 막아버리기 때문에 (자바스크립트의 기본 옵션은? 동기처리이다! ) 스크립트에서 DOM 요소에 접근이 불가능해진다. 실행 흐름을 보면, 브라우저가 html 문서를 위에서부터 아래로 쭉 읽는데 여기서 script를 만나면 바로 script 안의 내용을 한 줄 한 줄 해석하기 시작한다. 하지만 .. 2021. 6. 14.
Callback 콜백함수와 콜백지옥, Promise로 해결하기 콜백함수(Callback)란 ? 이름에서 알 수 있듯이 나중에 호출되는 함수이다. 바로 전 포스팅에서 설명했던 비동기처리 방식으로, 어떠한 행동을 다른 객체에게 전달하고 그 일이 끝날 때까지 기다리지 않고 곧바로 다른 일을 한다. 즉 어떤 이벤트가 발생 또는 특정한 시점에 도달했을 때 호출되는 함수를 말한다. (호출 방식을 말함) 이러한 방식으로 싱글스레드가 계속 움직일 수 있게 해주는 Non-Blocking 방식으로 동작하며 이를 비동기적 테크닉이라고 부른다. 콜백지옥은 어떻게 생기는가 ? 여러 개의 함수를 비동기적으로 하나씩 불러오고 싶을 때 콜백을 사용할 것이다. ex. 1번 로드하고 에러 없으면 2번 로드하고 에러 없으면 3번 ... 이러한 코드를 생각하면 콜백 안에 콜백을 넣게 되는데 단 몇 개.. 2021. 6. 12.
[HTML] 페이지 이동 링크 (a 앵커) 사용 시 리스트로 묶어주기 HTML 배우면서 많이 사용했었던 앵커(링크)와 ul, ol, li 리스트어제 4-5페이지의 웹사이트 만들기 과제를 했었고 별생각 없이 앵커를 쭉 나열하였다.(평소 앵커에 리스트로 감싸는 것은 Navbar에서만 자주 사용했기 때문에) 오늘 수업을 들으면서 페이지를 넘길 때 (ex. 페이지넘버를 이용하여 페이지 이동 시) 여기에 있는 앵커 모두리스트로 묶어줘야 한다는 걸 깨달았다 ..근데 생각해보면 당연한건데 그 당연한 걸 생각을 못 하고 있었다이제라도 인지해서 그나마 다행이다 다음엔 꼭 잊지 말고 사용하자,,! 2021. 6. 3.
반응형