자바스크립트 썸네일형 리스트형 [Deep Dive] var, let, const의 차이 / hoisting(호이스팅)에 대해 오늘 목표 : var, let, const의 차이 / hoisting(호이스팅) 모던 자바스크립트 Deep Dive 책을 이용해 변수들과 호이스팅에 대해 공부한 내용을 정리해 보았다. 1. var의 등장 배경 / 문제점 1) 중복 선언 - 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작한다. 또 재할당이 아니라 이전의 변수가 덮어쓰여진다. 규모가 큰 프로젝트에서 변수명이 중복될 경우에도 Error가 발생하지 않는다. 이는 누군가 실수로 변수를 중복 선언하여 의도치 않은 결과를 초래할 수 있다. 2) var 호이스팅 - var변수의 선언문이 스코프 내의 최상단으로 끌어올려진 것처럼 동작하여 변수를 정의하기 전에 사용해도 에러가 발생하지 않는다. 3) 함수 레벨 스코프 - var 키워드로 정의된 변수는.. 더보기 [항해99] 온보딩 스터디 - 2주차 1일 TIL 🦄 온보딩 스터디 2주차 1일 TIL ✨03/13 : 목표 : 알고리즘 1일차, 2일차, 3일차 풀이 📒알고리즘 풀이 1. 제곱수 판별하기 어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 정수 n이 매개변수로 주어질 때, n이 제곱수라면 1을 아니라면 2를 return하도록 solution 함수를 완성해주세요. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Math.sqrt(n) = > n의 제곱근을 반환한다. Number.isInteger(a) = > 정수인지 확인하여 true false를 반환한다. 문제 접근) 1. n의 제곱근을 구하여 .. 더보기 [JavaScript] 깊은 복사(Shllow copy), 얕은 복사(Deep copy) 🙌 깊은복사, 얕은 복사 얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다. 1. Primitive 타입 : 깊은 복사 : 원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다 let a = 2; let b = a; console.log(b); //2 b = 5; console.log(a); //2 console.log(b); //5 => primitive타입은 서로 영향을 미치지 않는다. 2. Object 타입 : 얕은 복사 : 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 참조값(주소)를 복사하여 같은 값을 가리킨다. 따라서 한쪽의 값을 변경 할 경우, 같은 참조값이기 때문에 양쪽 .. 더보기 [Deep Dive] 프로그래밍과 자바스크립트의 기본 개념 모던 자바스크립트 Deep Dive 요약 빨리 가는 유일한 방법은 제대로 가는 것이다. - 로버트 C. 마틴(Robert C. Martin), “클린 코드”의 저자 프로그래밍이란 무엇인가 (1) 프로그래밍 0과 1밖에 알지 못하는 기계가 실행할 수 있는 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다. 해결 과제를 컴퓨터의 관점으로 사고(Computational thinking)해야 한다. 이에는 논리적, 수학적 사고가 필요하게 되며 해결 과제를 작은 단위로 분해하고 패턴화하여 추출하며 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의되어야 한다. (2) 프로그래밍 언어 명령을 수행할 주체는 컴퓨터이다. 따라서 인간이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 언어, 즉 기계.. 더보기 자바스크립트(javaScript)_리팩토링(Refactoring)단계 정리 [⚙️Refactoring ] - 모듈화(module), 즉 리팩토링(Refactoring)과정을 단계별로 정리해 보았다. - 리팩토링의 장점 : 코드의 의미를 파악하기 쉽고 코드의 관리가 용이하며 가독성과 재사용성 등등을 개선시킬 수 있다. Refactoring 과정 1. 🛠️모듈화(Export, Import) : 파일을 작은 단위로 나누어 생성하고 모듈화 하고 객체지향적으로 코딩한다. Export, Import하여 외부로 노출시키고 가져와서 활용한다. 모듈화의 장점 : 하나의 파일에 많은 코드를 작성하면 코드의 의미 파악, 관리, 재사용성이 떨어진다. 각각의 기능별로 파일을 분리하여 모듈화시키면 코드를 효율적으로 관리할 수 있으며 재사용성도 높아진다. ex) HTML에서 큰 섹션 단위인 game과 p.. 더보기 드림코딩_자바스크립트_쇼핑몰 미니게임 클론코딩 [ 쇼핑몰 미니게임 클론코딩 ] 1. HTML / CSS 정적인 페이지 완성시키기 ellie와 내 코드를 비교한 결과 및 보완해야 할 점 - 일정한 수치값을 변수로 사용하여(통일성 있게) 재사용 한다. - 각각의 태그별 class를 거의 대부분에 사용하여 css를 적용시킨다. - 가로 세로정렬 모두 flex를 사용해 더 간편하게 정렬하였다. - 쇼핑 리스트 ul>li 하나를 먼저 구현해 놓고 추후 JS에서 동적으로 변경하였다. - section.class 사용하여 섹션을 구분한다. (div_con사용x) - div_con 감싸지 않고 바로 tag 사용(ex, 바로 ul>li사용, 간단한 프로젝트라 그런 것 같다.) 2. data폴더 안에 data.json 파일 생성하여 data 보관하기 JS에서 배열을 .. 더보기 자바스크립트 기초(ES5+)_비동기의 꽃 JavaScript async와 await / 유용한 Promise APIs [ async · await ] Promise를 조금 더 간편, 간결하게 동기적으로 실행되는 것처럼 보이도록 도와주는 것 > 깔끔하게 Promise 사용하는 법 Promise chaining(.then)을 계속 사용하면 코드가 난잡해지는 것을 좀 더 간편한 API인 async와 await을 이용하여 동기식으로 코드를 순서대로 작성한 것처럼 작성할 수 있도록 도와준다. 기존에 존재하는 Promise 위에 간편한 API를 제공 한다. > *syntactic sugar(ex : Class > 프로토타입을 베이스로하여 그 위에 살짝 덧붙여진 것) Promise를 무조건 대체x > async를 사용할 경우에 따라 더 깔끔한 경우에 사용한다. *syntactic sugar : 문법에 설탕을 뿌려 더 달콤하게 사용한.. 더보기 자바스크립트 기초(ES5+)_비동기 처리의 시작_콜백(Callback) 이해하기(콜백지옥) [ 동기(Synchronous)와 비동기(Asynchronous) ] 1. 동기와 비동기 1) 동기(scynchrounous) : JS는 동기적이다 > hoisting이 된 이후부터, 코드가 우리가 작성한 순서에 맞춰서 하나하나씩 자동적으로 실행된다. *hoisting : var변수 또는 함수 선언이 가장 최상위로 올라가는 것 2) 비동기(asynchronous) : 언제 코드가 실행될지 예측할 수 없는 것을 말한다. 3) 콜백(callback) : 해당 함수 호출 시 지정된 콜백함수를 인자로 전달하여 지정 함수를 부르도록(call back)한다. -동기/비동기 // 1. 동기 : synchronous console.log("1"); console.log("2"); console.log("3"); // .. 더보기 이전 1 2 다음
