본문 바로가기

📚 FrontEnd -Study/JavaScript30

IntersectionObserver 개념 포트폴리오를 만들면서 여러 포트폴리오를 찾아볼 기회가 있었습니다. 굉장히 멋있는 작품들이 많았습니다. 그중에서도 스크롤을 내리면서 애니메이션들이 동작하는 포트폴리오들이 있었는데 이것들이 정적일 수 있는 웹사이트를 지루하지 않게 만들었습니다. 또한 보기에도 상당히 멋있더군요.. 처음엔 framer motion이라는 라이브러리를 사용할 계획이었지만 Intersection Observer => 요 녀석을 추후에 사용할 계획이 많을 것 같기도 하고 정확한 개념을 배우고 싶은 생각이 들어 이번 프로젝트 계기로 훑어볼 계획입니다. Intersection Observer mdn에서 설명되어있는 글은 다음과 같습니다. 교차점 관찰자 API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소 또는.. 2024. 1. 24.

비동기 - Promise , async/await Promise 자바스크립트에서 대표적인 비동기 로직에 사용되는 객체이다. Promise를 사용하면 비동기 작업들을 쉽게 관리할 수 있다. Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 기본 사용법 const promise = new Promise((resolve, reject) => { //비동기 작업 }); resove와 reject는 함수 내에서 호출할 수 있는 또 다른 함수이다. resolve 를 호출하면 => 비동기 성공! reject 를 호출하면 => 비동기 실패! Promise는 new Promise(...) 하는 순간 이곳에 할당된 비동기 작업은 바로 시작된다. 우리가 알고 있는 함수는 정의하는 시점과 호출하는 시점이 다르지만 new Promise는 기다리지 않고.. 2023. 4. 25.

[JS/프로토타입 체인] 1. 프로토타입의 constructor 프러퍼티와 생성자 함수 모든 프로토타입은 constructor 프로퍼티를 갖는다. //생성자 함수 function Person(name){ this.name = name; } const me = new Person('Lee') console.log(me.constructor === Person); // true 위의 코드에서 me는 자신이 참조하고 있는 생성자 함수를 가리킨다. 이 연결은 생성자 함수가 생성될 때, 즉 함수 객체가 생성될 때 이뤄진다. 여기서 Person 생성자 함수는 me 객체를 생성했다. 이때 me객체는 프로토타입의 constructor 프로퍼타입을 통해 생성자 함수와 연결된다. me 객체에는 프로퍼티가 없지만 프로퍼타입인 Person.proto.. 2023. 3. 16.

TIL - [JS/프로토타입과 클래스] Object prototypes 프로토타입 객체(프로토타입)란 객체지향 프로그래밍의 근간을 이루는 객체 간 상속(inheritance)을 구현하기 위해 사용된다. 프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)를 제공한다. 프로토타입을 상속받은 하위(자식)객체는 상위 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다. 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이 내부 슬롯 값은 프로토타입의 참조다. 객체가 생성될때 객체 생성 방식에 따라 프로토타입이 결정되고 [[Prototype]]에 저장된다. 예를 들어, 객체 리터럴에 의해 생성된 객체의 프로토타입은 Object.prototype이고 생성자 함수에 의해 생성된 객체.. 2023. 3. 15.

TIL - [JS/객체지향 프로그래밍] 객체지향 프로그래밍 객체지향 프로그래밍은 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적인 단위, 즉 객체(object)의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 이러한 패러다임이 등장하면서, 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식을 고안해냈다. 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶여서 처리할 수 있게 되었다. => 객체(Object) 객체지향 프로그램(OOP)는 프로그램 설계 철학이다. 모든 것이 객체로 그룹화 되어있고, OOP의 캡슐화, 추상화, 상속, 다향성 의 주요개념을 통해 재사용을 얻을 수 있다. (객체는 한번 만들면 메모리상에서 반환되게 전까지 유지.. 2023. 3. 15.

TIL - [JS/클래스,인스턴스] 1. 클래스, 인스턴스, 생성자, 메서드 class는 객체를 생성하기 위해 기본적인 틀을 세팅한다. 이것을 기반으로 만든 것은 인스턴스 객체 줄여서 인스턴스(instance)라 부른다. 인스턴스는 new 키워드를 사용해 만들 수 있다. class Car(){} //클래스를 정의할 때 일반 함수와 구별하기 위해 대문자로 시작한다. let mini = new Car(); class 라는 문법은 ES6부터 등장하였고 이전에는 함수로 정의했다. //ES5 function Car (brand, name, color){ //인스턴스 만들어질 때 실행되는 코드 } //ES6 class Car(){ constructor(brand, name, color){} //인스턴스 만들어질 때 실행되는 코드 } 위의 코드에서 보.. 2023. 3. 15.

TIL - [JS/브라우저] DOM DOM은 Document Object Model의 약자로 HTML 문서의 계층적 구조와 정보를 표현하며 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. ❓ 트리 자료구조 - 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조를 말한다. * 비선형 자료구조 : 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조. ex) 트리, 그래프 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. DOM과 JavaScript DOM은 JavaScript 언어의 일부가 아니라 대신 웹 사이트를 구축하는 데 사용되는 Web API입니다. 따라서 DOM이 없으면 JavaScript 언어에는 웹 페이지, HTML 문서, SVG 문.. 2023. 3. 7.

TIL - [JavaScript Koans] Koans란? Koans는 테스트 주도 학습(Test Driven Learning)의 일종으로, 개발자들이 자신의 프로그래밍 언어 지식을 향상시키는데 도움이 되는 연습문제이다. 주로 학습자는 주어진 코드를 실행하고, 그 결과로 얻게 되는 실패 메시지를 보고 코드를 수정해 나간다. 이 과정에서 학습자는 언어의 문법, 기능, 특징 등에 대해 더 깊이 이해하게 되며, 보다 효과적인 프로그래머가 될 수 있다. 🧐 헷갈렸던 부분 클로저라는 개념을 몇일 전에 접하고 완벽히 이해한 것은 아니지만 어느정도 감은 알았었는데, 문제를 풀다보니 내가 원하는 답과 달랐다. 역시 무엇이든 정확하게 짚고 넘어가야 되겠구나 라는것을 깨달았다. 😅 일단 첫번째로 의문이 들었던 부분은 innerFn() 함수 안에 name = 'sug.. 2023. 3. 6.

TIL - [클로저] 어휘적 환경(Lexical Environment) 코드가 실행되면 script내에서 선언한 변수들이 Lexical 환경에 올라간다. (let으로 선언된 변수도 호이스팅 되고, Lexical환경에 올라 가지만 초기화가 되어 있지 않은 상태로 올라감. => 그래서 사용은 못한다. 그에 비해 함수 선언문은 변수와 달리 바로 초기화 된다. => Lexical 위치에서도 사용이 가능하다.) 코드를 하나하나 살펴보면 먼저 let one; 아직 할당되어 있지 않기 때문에 초기값 undefined를 갖는다. 이제 사용은 해도 에러가 나지 않는다. one = 1; function addOne(num){ console.log(one + num); } // 함수 선언은 이미 초기에 완료 되었고 addOne(5); //함수를.. 2023. 3. 2.

TIL - [핵심 개념과 주요 문법] JavaScript에서 자료형(type)이란 값(value)의 종류이다. 자료형은 크게 두가지로 구분할 수 있는데 원시 자료형 ( primitive type) 참조 자료형 ( reference type) 으로 나뉜다. // 원시 자료형(primitive type): number, string, boolean, undefined, null 42, 'string', true, undefined, null 원시 자료형이 아닌 모든 자료형은 참조 자료형이다. 여러 데이터를 한 번에 다룰 수 있는 배열, 객체가 대표적이다. 함수도 참조 자료형으로 분류한다. // 참조 자료형(reference type) [0, 1, 2] // 배열 {name: 'kimcoding', age: 45} // 객체 function su.. 2023. 3. 2.

TIL - [JavaScript-객체] 오늘은 객체에 대한 개념을 학습하고 알고리즘 문제를 풀었다..! 그래도 이때까지 끼어 맞춰서라도 풀었는데 이번에는 마지막 문제를 풀지 못하였다. ㅠㅠㅠ 내가 쓴 코드 function countAllCharacters(str) { // TODO: 여기에 코드를 작성합니다. let result = {}; let array = str.split(''); for(let el in array){ Object.keys(result).includes(array[el])?result[array[el]]+=1:result[array[el]]=1; } return result; } 빈 객체를 생성하고 str은 split하여 배열에 넣어준다. 그리고 result 객체에 array[el]의 키가 있으면 result[array.. 2023. 2. 28.

TIL - [JS-배열] 오늘 배열에 대해 배우고 배열 알고리즘 문제를 풀었는데 헷갈렸거나 검색했던 것 위주로 올려보도록 하겠다. 사실 첫 번째 문제에서 막혀버렸다. Array.isArray() 이것을 몰랐기 때문이다. 위의 메서드는 인자가 배열인지 아닌지 판별한다. function getType(anything) { if (Array.isArray(anything)) { return 'array'; } else if (anything === null) { return 'null'; } else { return typeof anything; } } 이건 사실 보자마자 sort로 내림차순으로 하여서 배열의 첫번째 값을 return 하면 되겠다 싶었는데 문자열 길이를 sort 하는 과정에서 구글링을 하였다. arr.sort((a,b.. 2023. 2. 27.

TIL - [간단한 웹앱 만들기] 오늘은 드디어 계산기 작동을 시키기 위해 javaScript로 코드를 짜는 날이다!! 기본 단계인 bare minimum test, 그 다음 단계인 Advanced Challenge test, 마지막 최종 단계인 Nightmate test가 있는데 물론 마지막 단계까지 통과할 각오로 임했다. 내가 작성한 코드가 어렵게 어렵게 모두 통과가 되긴 했지만 스킬이 부족해서 그런가 조금 지저분한 느낌이랄까..? 큰 틀을 생각하지 않고 세세한 것을 미션 깨듯이 코드를 작성해서 나중에 크게 봤을 때 다른 것과도 연관이 될 수도 있는데 억지로 연관지으려는 부분도 생기고... 반면에 강사님께서 작성한 코드는 되게 간단하고 깔끔한 느낌이었다. 1. 숫자 버튼 클릭 내가 쓴 코드 if (action === 'number').. 2023. 2. 23.

숫자야구 게임 제로초님 자바스크립트로 게임만드는 강의를 보고 실습을 해오다가 지뢰찾기 게임 부분부터는 너무 복잡하고 어려워서 잠시 그 전에 했던 게임들을 혼자 힘으로 코딩을 해보는 시간을 가지기로 했다. 강의를 듣다보면 재생을 잠시 멈춰두었다가 혼자 코딩 해보려고 해도 앞에 영상이 있고 몇 초만 넘기면 코드를 보게 되다보니 완전한 내것이 아닌 느낌이 들긴 했었다. 원래는 계산기만드는 것 부터 하려고 했으나 지금 수강중인 코드스테이츠에서 계산기를 만들 예정이라 숫자야구부터 차금차금 해보는 걸로!! 먼저 숫자야구 게임의 룰은 컴퓨터가 1 - 9까지의 중복되지 않는 숫자 4개를 뽑는다. 게임을 하는 유저는 총 10번의 기회가 있고 컴퓨터가 랜덤으로 고른 4개의 숫자를 맞추면 된다. 이때, 숫자뿐만 아니라 순서까지 맞춰야 한.. 2023. 2. 22.

TIL - [JS 기본문법] if문 if문은 주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정 된다. 조건식은 결과가 불린 타입이 되도록 작성해야 한다. 동치연산자 (===) 동치연산자는 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환한다. !==는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면 false를 반환한다. 비교연산자(> , = , 2023. 2. 21.

이전 1 2 다음

728x90

티스토리툴바