javascript 21

[JS] 자바스크립트 함수 : 화살표 함수

이전 포스팅에서 함수 선언식과 표현식에 대해 알아봤다! 함수 표현식을 이용해서 함수를 보다 가독성 있게 표현할 수 있었다. 하지만, 화살표 함수를 사용하면 표현식을 좀 더 간결하게 표현할 수 있다. 🤔 (그럼 선언식은 ?????) 이전 포스팅에서 알아본 함수 표현식을 다시 한번 확인해보자. 함수 선언식과 비교해보면 음 나름 가독성 있는 ? 코드처럼 보인다. //함수 선언식 //function 키워드로 단독으로 함수를 선언한 것! function sum (a, b) { return a + b; }; //함수 표현식 //변수를 함수에 할당한 것 const sum = function(a, b) { return a + b; }; 화살표 함수 ? 익명 함수 ? 화살표 함수는 ES6에 새로 추가된 유용한 기능으로 ..

JS/Javascript 2021.09.09

[JS] 자바스크립트 함수 : 함수 선언식 vs 함수 표현식 ?

자바스크립트에서는 함수를 만들 때 사용할 수 있는 여러가지 문법이 있다. 오늘은 함수 선언식과 함수 표현식의 차이점에 대해 알아보자. 🤔 함수 선언식(Function Declarations) ? 함수 선언식은 자주 보게되는 기본적인 형태를 띄고 있다. 함수 선언 또는 함수 정의는 function 키워드로 시작한다. 그 뒤로 함수의 이름을 적고, 중괄호 사이에 함수의 기능?을 적게된다. function handleIt() { console.log("I can handle it!!"); } handleIt(); 함수 표현식 (Function Expression) ? 함수를 만드는 다른 방법으로 함수 표현식이 있다. 유연한 자바스크립트의 특징을 활용한 선언 방식으로 함수 표현식은 익명 함수를 만들며, 변수에 ..

JS/Javascript 2021.09.05

[React] #6 리액트에서 Element 생성하기 : createElement()

오늘은 강의를 들으며 공부했던 내용을 작게나마 정리하려고 한다. 만약 리액트로 아래와 같이 텅텅 빈 html 내부에 태그를 이용해 "Hello world"를 출력하고 싶다면 어떻게 할 수 있을까? 🤔 먼저 자바스크립트로 DOM을 다루며 Element를 생성할 때를 생각해보자. 우리는 아마도 아래와 같은 스크립트를 작성할 것이다. const root = document.getElementById("root"); //삽입할 h1 엘리먼트를 생성 const h1 = document.createElement("h1"); //생성된 엘리먼트에 주입될 텍스트 작성 h1.textContent = "Hello world"; //해당 엘리먼트를 자식으로 추가 root.appendChild(h1); 그렇다면 리액트는 어떻..

JS/React 2021.08.28

[Javascript] 프로그래머스 : 모의고사

[Javascript] 프로그래머스 Level 1 _ 모의고사 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서 든 생각들.) ✏️ 제출 코드 - solution 1 완전 탐색 문제로 처음에는 문제의 길이가 패턴의 길이보다 길면 패턴의 길이를 repeat()으로 늘려줘야겠다고 생각했다. 그렇다 보니 늘리고 줄이는 과정을 추가하며 코드를 적다 보니 생각보다 길어졌다,,, - solution 2 근데 생각해보니 패턴은 계속 반복되기 때문에 수포자 1이 10문제를 찍어서 [1, ,2, 3, 4, 5, 1, 2, 3, 4, 5, ... ] 로 풀었다고 하면, 답으로 1번을 찍은 문제들은 모두 (인덱스 % 패턴의 길이)가 0이라는 패턴을 가지고 있길래 간단히 코드를 수정할 수 있었다! ⚠️ 아래 내..

Programmers/Level 1 2021.08.24

[Javascript] ES6 배열 메소드 : Array.from()

오늘은 자바스크립트 ES6에 추가된 배열 메서드 Array.from()에 대해서 알아보자! 🦖🦕 ... 우선 쉽게 예제로 바로 들어가 보자. 우연히 모던 자바스크립트 강의를 보다가 풀게 된 문제인데 내용은 아래와 같다. html 내부에 ul 태그를 살펴보면 문자열을 가진 li 요소들이 있다. 요소들을 자바스크립트 코드로 "e"를 포함한 요소들만 배열로 리턴하는 함수를 만들어라! (Array.from(), filter(), includes()를 사용!) 이걸 보시는 분이 계시다면,,,, 한 번 풀어보길 추천한다,,,,! ✳︎ let lists = document.querySelectorAll("li")으로 li 모두를 가져오게 되면 lists는 우리가 생각하는 배열이 아닌 NodeList라고 하는 유사 배..

JS/Javascript 2021.08.23

[Javascript] 프로그래머스 : 다음 큰 수

[Javascript] 프로그래머스 Level 2 _ 다음 큰 수 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서든 생각들.) ✏️ 제출 코드 - solution 1 처음엔 간편하게 toString()으로 진법을 변환했다. 그리고 정규표현식으로 1의 개수를 파악한 뒤 반복하며 n보다 1씩 늘려가면서 2진법으로 변환 시 1의 개수가 같아질 때에 리턴하도록 구성했다! - solution 2 do-while문이 아닌 그냥 while문으로 수정하며 무한 반복문 -> 조건문을 넣는 것으로 수정했다. - solution 3 toString()이 아니라 직접 2진법으로 수정해주는 것으로 수정했다. - solution 4 다른 분들의 풀이를 보다가 filter()를 사용했길래 정규표현식 대신 filte..

Programmers/Level 2 2021.08.23

[Javascript] 이벤트 : onclick() ? addEventListener() ?

자바스크립트 코드를 작성하며 클릭 이벤트에 이벤트 리스너(핸들러)를 등록하고 싶을 때 onclick과 같은 이벤트 핸들러로 처리를 할 수 도 있고, addEventListener()와 같은 메소드로 이벤트 리스너를 연결할 수도 있다! 그렇다면 둘의 차이는 무엇일까? 👇🏻 더보기 'on~ 이벤트 핸들러'의 경우, 하나의 이벤트에 하나의 콜백 이벤트만 발생시킬 수 있다. 'addEventListener() 메소드'의 경우, 하나의 이벤트에 여러개의 콜백 이벤트를 발생시킬 수 있다. 예시로 화면 어디든 클릭할 경우 이벤트로 alert()를 띄워주고싶을 때! 를 가정하고 코드를 작성해보자. 형식은 둘 다 비슷하다. 이벤트 리스너를 연결할 대상 + 어떤 이벤트에 반응할 것인지 + 콜백 함수 순서로 정의했다. 위의..

JS/Javascript 2021.08.21

[Javascript] 프로그래머스 : 행렬의 곱셈

[Javascript] 프로그래머스 Level 2 _ 행렬의 곱셈 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서 든 생각들.) ✏️ 제출 코드 문제를 풀기 위해서는 행렬의 곱셈에 대해 알고 있어야 한다! 행렬의 곱셈은 곱하는 행렬 A의 열의 개수와 행렬 B의 행의 개수가 같은 경우에만 가능하다. 즉, (m*k) 행렬과 (k*n) 행렬을 곱했을 때 (m*n)의 행렬이 만들어지게 된다. 처음에는 m*n의 행렬을 미리 만들고 값을 대입하려고 했는데, 두 번의 반복되는 과정이 생기는 것 같아서 배열만 생성한 뒤, 반복문을 통해 n개의 요소를 가진 배열을 m번 생성한 뒤 push()해서 행렬을 만들었다! 다른 분들을 map()과 reduce()도 사용하셨던데 그것도 도전해봐야겠다...! ⚠️ 아..

Programmers/Level 2 2021.08.20

[Javascript] 프로그래머스 : 프린터

[Javascript] 프로그래머스 Level 2 _ 프린터 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서든 생각들.) ✏️ 제출 코드 큐 프린터를 구현하는 문제였다! 처음에는 최댓 값을 기준으로 두 덩이로 나눠서 다시 이어 붙이고를 반복해야하나? 생각해서 복잡했었다 ㅠㅠ 하지만 단순하게 해당 타겟이 몇번째로 빠져나가는지만 구하면 되기 때문에 ① 맨 앞의 요소가 max라면 shift()를 해준 뒤 빠져나간 순서를 카운트 해주고, ② 아니라면 shift()와 push()를 함께 사용해 다시 뒤에 이어 붙여주기를 반복하는 과정을 구현했다. 그리고 ① + 조건으로 배열의 남은 요소 중 해당 타겟이 max라면 카운트를 리턴하는 조건을 추가했다. ⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 ..

Programmers/Level 2 2021.08.19

[Javascript] 프로그래머스 : 최솟값 만들기

[Javascript] 프로그래머스 Level 2 _ 최솟값 만들기 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서 든 생각들.) ✏️ 제출 코드 오늘은 양심적으로 쉬운 거 + 쉬운 거로 하나 더 풀었다 ㅎㅎㅎㅎㅎㅎㅎㅎ 문제는 두 배열의 요소들을 각각 곱했을 때 합이 최솟값이 되도록 만드는 문제였는데 큰 수 일수록 작은 수와 곱해져야 하기 때문에 A 배열의 작은 순서대로 정렬하고, B배열의 큰 순서대로 정렬해서 각각 곱했다 !!!! 역시 문제 풀이를 보니 비슷하게 같은 방법으로 푸신 분들이 많았다...! ⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️ *** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ! ***

Programmers/Level 2 2021.08.18