emayom.log

" 자바스크립트에서는 함수가 1급 시민이기 때문에, 자바스크립트가 함수형 프로그래밍을 지원한다고 말할 수 있다. " -러닝 리액트 [2판] " props는 읽기 전용입니다. props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. " - 리액트 공식 문서 여기서 얘기하는 '함수형 프로그래밍 - 순수 함수'에 대해 알아보자?! 🤔 함수형 프로그래밍 ? 자바스크립트는 함수형 프로그래밍만을 위한 언어는 아니지만! 함수형 프로그래밍을 지원하는 언어이다. 함수형 프로그래밍은 부수 효과가 없는 순수 함수를 추구하며, 모듈화를 통한 함수 간의 조합성을 강조하는 프로그래밍 방식이다. (즉, 외부 환경으로부터 독립적이며 주어진 것들로 정해진 작업을 하기 때문에 부수 효과로부터 자유로울 수 있다.) 순수 함수 (Pur..

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

간단한 미니 게임을 만들었다! random-word-api를 활용해서 랜덤 단어들을 가져오고 10초 안에 타이핑한 만큼 점수를 얻을 수 있는 게임이당ㅎㅎㅎㅎ 인간적으로 10초는 너무 짧은 것 같긴 하다 ㅎㅎㅎㅎㅎㅎ해보니 2점 맞았다. axios를 npm으로 인스톨하지않고 처음 CND으로 넣어서 써봤는데 다른 영상들을 보면 fetch 대신 axios를 사용하시는 분들이 많았다... 아직 그 이유는 자세히 잘 모르겠어서 한 번 포스팅해봐야겠다 ㅎㅎㅎㅎ typing-master 남은시간: 10초 획득 점수: 0점 emayom.github.io

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

리액트 공부를 하다 어쩌면 당연할 수도 있지만 생각지도 못했던 엥? 싶었던 부분이 있어서 글을 남겨보려고 한다. 🤔 form 태그 중 을 사용할 때 id와 name 속성을 지정하는데 name과 id 둘 모두 element를 식별? 참조하기 위해 사용된다. 여기서 name 속성은 form이 제출될 때 서버에 폼 값을 넘겨주기 위해 사용한다. (굳이 서버로 넘기지않은 값에는 name을 생략해도 무방하다,,!) 당연히 id는 유일한 값으로 사용되어야 하기 때문에 중복이 안되고, name은 중복이 가능한 값이다. 바로 여기서 오늘 적어보려는 주제가 등장한다! (아래 코드는 리액트 공부를 하며 작성하던 코드라 조금 다르다,,,!) const root = document.getElementById("root"); ..

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

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

[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..

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

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