# js
[JS] 내가 만든 push method
push 메서드와 비슷하게 동작하는 myPush를 만들어 보려고 한다. 두가지를 만들어 보려고 하는데 첫번째는 push와 동일하게 비순수 함수로 만들어 볼 예정이고 두번째는 순수 함수로 만들어 보려고 한다. 1. 비순수 함수로 만든 myPush method 내가 만든 myPush 함수는 배열, 추가할 원소 총 2개의 매개변수 받는다. push와 동일하게 비순수 함수로 만들어보았다. 로 접근하여 array의 마지막 Index에 item을 추가해준다. array를 return해준다. 2. 순수 함수로 만든 myPush method 
JavaScript 기본 문법
오늘은 자바 스크립트의 기본 문법에 대해 알아보겠다. Do it html+css+자바스크립트 웹 표준의 정석 위 동영상 강좌도 참고하여 작성하였다. 사칙연산 덧셈 +, 뺄셈 -, 곱셈 *, 나눗셈 /을 사용하면 된다. 데이터 타입 js의 기본 데이터 타입 자바스크립트의 데이터 타입은 typeof() 함수를 이용하여 확인할 수 있다. js에는 총 6종류의 기본 데이터 타입이 있다. 그 중 중요한 4
JavaScript -03 (객체, 표준객체, DOM, Document에서의 요소 선택, 속성 추가, 노드 접근 등)
JavaScript - 자료형 ▶️ 기본 자료형과 객체 자료형의 차이 기본자료형 다른 변수에 값을 할당하거나 함수 인자를 넘길 때 값을 복사해서 전달 값 자체를 전달한 것이기 때문에 아래에서 num과 num2는 각각 다른 공간이다. 값을 각 공간에 그대로 복사해서 사용한 것이다. 객체자료형 값을 복사해서 전달하는 것이 아니라, 메모리 주소의 참조값(address)을 저장 같은 객체를 참조를 하는거지 그대로 가져오는게 아니다! 같은 주소를 공유하게 된다고 생각. JavaScript - DOM Document Object Model의 약자로 문서 객체 모델을 의미한다. HTML 문서에 접근하기 위한 일종의 인터페이스로 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 원하는 요소나 속성을 추가하거나 변경하거나 등을 할 수 있
Deep Dive 11 장, 원시 값과 객체의 비교
JS가 제공하는 데이터타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다. 원시타입과 객체타입은 크게 세가지 측면에서 다르다. 원시 값은 변경 불가능한 값이고, 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장되고, 객체는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 **원시 값이 복사되어 전달되는 것을 값에 의한 전달**이라하고, 객체를 가르키는 변수를 다른 변수에 할당하면 원본의 **참조 값이 복사되어 전달되는 것을 참조에 의한 전달**이라 한다. 👩🏻💻 11.1 원시 값 11.1.1 변경 불가능한 값 원시값은 **변경 불가능한 값
Deep Dive 10장, 객체 리터럴
👩🏻💻 10.1 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 “모든 것”이 객체다. 원시 값을 제외한 나머지 값( 함수, 배열, 정규 표현식 등 )은 모두 객체다. 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복잡적인 자료구조이다. 또한 원시 타입의 값은 변경 불가능한 값이지만 객체 타입의 값은 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 함수도 프로퍼티 값으로 사용할 수 있는데, 일반 함수와 구분하기 위해 메서드(method)라 부른다. 객체는 프로퍼티와 메서드로 구성된 집합체다. > **프로퍼티: 객
[React]StyledComponents - GlobalStyle 적용
포스팅 목적 >📖Styled Components를 사용할 때 전역적으로 스타일을 설정하는 방법인 GlobalStyle에 대해서 알아보자. 사용 목적 StyledComponents(이하 스타일 컴포넌트)를 사용할 때 각 컴포넌트에 대한 스타일을 지정하는 방법 외에도 전체 애플리케이션에 일괄적으로 스타일을 적용하기 위해 사용한다. 예를 들어 글꼴, Body의 margin, padding, 스크롤 스타일 등에 대해서 설정 할 때 사용하면 좋을 것 같다. GlobalStyle 사용하기 createGlobalStyle 위의 코드와 같이 기본 설정에 필요한 css를 컴포넌트에 정의한 후 저장해준다. 생성 경로 위치는 다음 사진과 같이 src 디렉토리 내 위치시켜준다. 적용 정의한
[프로그래머스/ JavaScript] 구명보트
https://school.programmers.co.kr/learn/courses/30/lessons/42885 📍 문제설명 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100kg이라면 2번째 사람과 4번째 사람은 같이 탈 수 있지만 1번째 사람과 3번째 사람의 무게의 합은 150kg이므로 구명보트의 무게 제한을 초과하여 같이 탈 수 없습니다. 구명보트를 최대한 적게 사용하여 모든 사람을 구출하려고 합니다. 사람들의 몸무게를 담은 배열 people과 구명보트의 무게 제한 limi
46장 제너레이터와 async/await
✅ 46.1 제너레이터란? ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 일반 함수와 다른 제너레이터의 특징 1. 함수 호출자에게 함수 실행의 제어권을 양도 가능 일반 함수는 호출하면 제어권이 함수에게 넘어가버린다. 즉, 함수 호출자는 호출한 함수의 실행을 제어할 수 없다. 하지만 제너레이터 함수는 caller가 함수 실행을 제어 가능하다. 함수 실행을 일시 중지 또는 재개시킬 수 있다. 함수 제어권을 함수가 독접하지 않고, 함수 호출자에게 할 수 있다. 2. 함수 호출자와 함수 상태를 주고 받을 수 있다. 일반 함수는 매개변수를 통해 외부 값을 받고 결과값을 함수 외부로 반환한다. 즉, 함수 실행 중에는 외부에서 내부로 값을 전달하거나 함수 상태를 변경할 수 없다. 제너레이터 함수는 호출자와 양방향으로 함수 상태를 주고받는다.
Deep Dive 9장, 타입변환과 단축평가
👩🏻💻 9.1 타입 변환이란? 자바스크립트의 모든 값은 타입이 있다. 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 의도적으로 변환하는 것을 명시적 타입변환 또는 타입 캐스팅 이라한다. 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 변환되는 것을 암묵적 타입변환 또는 타입 강제변환 이라 한다. 명시적 타입변환이나 암묵적 타입 변환이 기존 원시값을 직접 변경하는 것은 아니다. 원시값은 변경 불가능한 값이라 변경할 수 없다. 타입 변환이란, 기존 원시값을 사용해 다른 타입의 새로운 원시값을 생성하는 것이다. 암묵적 타임 변환은 기존의 변수 값을 재할당하여 변경하는 것이 아니라, 자바스크립트 엔진이 암묵적 타입 변환을 통해 새로운 타입의 값을 만들어 내 사용한 뒤 버리게 된다. **명시적 타입
Deep Dive 8장, 제어문
제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복실행(반복문)할 때 사용한다. 일반적으로 코드는 위에서 아래로 순차적으로 실행하지만 제어문을 사용하면 인위적으로 제어할 수 있다. 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다. 제어문의 사용을 억제하기 위한 노력으로 forEach, map, filter같은 고차함수를 사용하는 방법이 있다. 👩🏻💻 8.1 블록문 블록문은 0개 이상의 문을 중괄호{ }로 묶은 것으로, 코드블록 또는 블록이라고 부르기도 한다. 하나의 실행 단위로 취급한다. 단독으로 사용할 수도 있으나 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다. 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. 👩🏻💻 8.2 조건문 조건문은
[leetcode, JS] 1507. Reformat Date
문제 > 문제 링크 : Reformat Date 풀이 date를 split으로 나누고 년/월/일에 해당하는 값으 가져와 각 형식에 맞게 변형하여 return Runtime 51 ms, Memory 41.7 MB
[JS] 자바스크립트란?
최근 프로젝트가 끝나고 기초의 중요성을 한번 더 깨닫고 난 뒤 기초부터 다시 탄탄하게 공부하려고 시간을 쏟고 있다. 오늘은 결국 FE 그 자체인 자바스크립트라는 언어에 대해 공부하였다. JS JavaScript는 웹 브라우저에서 실행되는 대표적인 스크립트 언어이다. 원래는 Mocha라는 이름으로 탄생하였다가 사람들의 관심을 끌기위해 그 시대 한창 유행이던 자바의 이름을따 자바스크립트가 되었다. JavaScript는 동적인 기능을 웹 페이지에 추가하기 위해 설계된 인터프리터 언어이다. 이를 통해 사용자와 상호작용하는 웹 페이지를 만들거나, 비동기적으로 서버와 데이터를 교환하는 등 다양한 기능을 수행할 수 있다. JS의 주요 특징 동적 타이핑 : JavaScript는 동적 타입 언어로서, 변수 선언 시 변수의 데이터 타입을 명시하지 않아도 된다. 변수의 타입은 프로그램이 실행되는 도중에 변경될 수 있다 객체 지향 프로그래밍: JavaScri
프로그래머스 문자열의 뒤의 n글자
문자열의 뒤의 n글자 문제 설명 문자열 mystring과 정수 n이 매개변수로 주어질 때, mystring의 뒤의 n글자로 이루어진 문자열을 return 하는 solution 함수를 작성해 주세요. 제한사항 my_string은 숫자와 알파벳으로 이루어져 있습니다. 1 ≤ my_string의 길이 ≤ 1,000 1 ≤ n ≤ my_string의 길이 입출력 예 |my_string |n| result| |:--:|:--:|:--:| |"ProgrammerS123" |11 |"grammerS123"| |"He110W0r1d" |5 |"W0r1d"| >입출력 예 예제 1번의 my_string에서 뒤의 11글자는 "grammerS123"이므로 이 문자열을 return 합니
지식 빈틈 메우기 - HTML, CSS, JS
지식 빈틈 메우기 - 기존에 알고 있다고 착각하던, 또는 새롭게 알게 된 지식들에 관해 기록한 글입니다. HTML 1. data-* 속성 개발자가 직접 이름을 지정할 수 있는 속성이다. class 속성이 보통 스타일 선택자 용도로 쓰인다면, data- 속성은 요소에 의미를 갖는 정보*를 담기 위해 사용한다. (MDN) HTML에서 snake-case로 작성된 속성명은 JS에서 camelCase로 치환된다. JS에서 elem.dataset.[속성명]으로 해당 값에 접근할 수 있다. 브라우저에 그대로 노출되므로 비밀번호 등 민감한 정보는 넣지 않도록 하자. CSS에서 속성 선택자 [속성명="속성값"]를 통해 값에 따라 스타일을 부여할 수도 있다. CSS 1. Grid 레이아웃
[leetcode, JS] 1360. Number of Days Between Two Dates
문제 > 문제 링크 : Number of Days Between Two Dates 풀이 new Date로 date1과 date2를 변환하고 두개의 값을 빼고 하루치의 ms값으로 나눠 날짜의 차이를 구하는 방식 Runtime 55 ms, Memory 42.1 MB
JS 알고리즘 1주차 React
배열의 유사도. 두 배열이 얼마나 유사한지 확인해보려고 합니다. 문자열 배열 s1과 s2가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ s1, s2의 길이 ≤ 100 1 ≤ s1, s2의 원소의 길이 ≤ 10 s1과 s2의 원소는 알파벳 소문자로만 이루어져 있습니다 s1과 s2는 각각 중복된 원소를 갖지 않습니다. 다음에 올 숫자 문제 설명 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해보세요. 제한사항 2 < common의 길이 < 1,000 -1,000 < common의 원소 < 2,000 common의 원소는 모두 정수입니다. 등차수열 혹은 등비수열이 아닌 경우는 없습니다. 등비수열인 경우 공비는 0이 아닌 정수입니다. 입출력 예 common result [1, 2, 3, 4] 5 [2, 4, 8]
[ JS ] Custom Element
오늘은 JS의 Custom Element를 생성하는 방법에 대해 알아봅시다. 기본틀 위와 같이 작성할 수도 있고 아래와 같이 작성할 수도 있습니다. 이런식으로 Custom Element를 정의하면 HTML 내에서 다음과 같이 Custom Element를 사용할 수 있습니다. Attribute 만약 이 곳에 attribute를 추가하고 싶다면 다음과 같이 작성할 수 있습니다. Attribute 변경 감지 만약 Attribute가 변경되는지 감지하고 싶다면 아래 코드를 사용하면 됩니다. Example 1) Example 2)
S1. S2. S3.
section1. HTML과 JS HTML과 JS의 만남 : script 태그 자바스크립트를 넣는 방법 JS는 동적이다 HTML은 정적이다 HTML과 JS의 만남 : 이벤트 onclick = 클릭했을 때 onchange = 변경되고 포커스를 잃을 때 onkeydown = 키를 눌렀을 때 발생, 물리적인 키에 반응 section 2. 데이터타입, 변수, 웹브라우저 제어 데이터타입 - 문자열과 숫자 boolean, null, undefined, number, String, symbol trim() - 공백을 없애주는 기능 .length - 글씨가 몇글자로 구성되어 있는지 변수와 대입 연산자 변수 : variable 변할 수 있는 값. ex) x, y 대입 연산자 : 우변에 있는 것을 좌변에 대입 연산 할 수 있게 해주는 것 상수 : constant 변하지 않는 값. ex) 100, 1, 5 문자열 : string 우리가 쓰는
[프로그래머스] 1wk
1. 배열의 유사도 https://school.programmers.co.kr/learn/courses/30/lessons/120903 2. 다음에 올 숫자 https://school.programmers.co.kr/learn/courses/30/lessons/120924 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort ➡️ 사용한 문법 3. 특이한 정렬 https://school.programmers.co.kr/learn/courses/30/lessons/120880
Unit10 - [JS/Node] 비동기
코드스테이츠 - 유어클래스 콘텐츠를 참고하여 작성하였습니다. > >### [Day 6] >2023년 7월 4일 📗목차 동기와 비동기 동기 비동기 JavaScript의 작동원리 비동기 Web API setTimeout(callback, millsecond) clearTimeout(timerId) setInterval(callback, millsecond) clearInterval(timerId) Callback Promise [new