emayom.log

input 태그를 작성하고 해당 태그에 포커스를 주고싶을 때! html 태그에 autofocus를 명시하거나, 자바스크립트에서는 selector 함수를 통해 가져온 엘리먼트에 focus() 메소드를 통해 포커스를 줄 수 있다. 그렇다면 리액트는 ???? 🤔 우선 자바스크립트부터 확인해보자. 그냥주면 심심하니까 화면이 보여지고 3초 뒤부터 포커스를 줘보자. 우선 DOM 셀렉터로 input을 가져오고, setTimeout()으로 3초 뒤에 focus()를 주도록 작성할 것이다. const autoFocusInput = document.getElementById("input"); setTimeout(() => { autoFocusInput.focus(); }, 3000); 이제 리액트로 바꿔보자. 이전과 동일..

[JS] 자바스크립트 스코프 ? : 변수의 유효 범위 자바스크립트는 다른 프로그래밍 언어와는 다르게 전통적으로 함수 레벨 스코프를 지원하였고, 블록 스코프는 지원하지 않았다. ES6 이후부터 let, const가 등장하면서 블록 레벨의 스코프를 지원 emayom.tistory.com 이전에 var, let, const의 스코프에 대해 포스팅했었는데 러닝 리액트 책을 보다가 var, let비교에 항상 보이는 예제가 있어 정리해보려고 한다! var의 문제점 var로 변수를 사용할 경우 유의해야할 점이 있다. 변수의 중복 선언 허용 변수의 유효 범위(함수 레벨 스코프) 아래는 var를 사용했을 때 변수의 유효범위로 인해 예상치 못하게 작동할 수 있는 부분에 대해 잘 이해시켜주는 예제이다. for문을 반복하며 ..

리액트의 특징을 확인하면서 Virtual DOM 그러니까 VDOM의 개념을 알아봤었다! 오늘은 강의를 들으며 나왔던 코드를 통해 자바스크립트와 리액트의 리랜더링 방식의 차이에 대해 확실히 알아보자. 🤔 [React] 리액트 : #1 React ? 오늘은 리액트가 무엇이고 왜 리액트인지를 알아보는 시간을 가지려고한다. 👨🏻‍🎨 리액트 == 자바스크립트 라이브러리 React, Angular, Vue 알지 못하더라도 셋 중 하나 이상은 꼭 들어봤을 것 emayom.tistory.com 리랜더링 ? 랜더링은 사용자에게 View를 보여주는 것을 의미한다. 바닐라 자바스크립트의 경우 변경 사항이 있을 때마다 새로 그려나가며 전반적인 DOM 엘리먼트들을 다시 그려 화면에 표시해줬다. 결국 단순 랜더링 과정이 반복되는..

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

[Javascript] 프로그래머스 Level 1 _ 직업군 추천하기 (위클리챌린지 4주차) 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서든 생각들.) ✏️ 제출 코드 +) 어제 풀었던 모의고사와 예전에 풀었던 문자열 마음대로 정렬하기 ? 가 모두 생각나는 문제였다,, ! 다행히도 레벨 1에 해당하는 문제라 복잡해보여서 그렇지 실제로는 어렵지 않았다! 풀다보니 for문과 map()과 forEach()를 골고루 써봤다 ㅎㅎㅎㅎㅎ 통일했으면 보기가 조금 더 편했을 것 같다는 생각이 들어 코드를 정리하며 통일했다! ⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️ *** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ..

모두의 예상처럼 props 는 properties의 약자였고 state는 말그대로 상태이다,,,! ✳︎ 오늘은 props와 state의 차이점에 대해 알아보자! props, state ? 리액트 공식문서에 따르면 props와 state는 모두 렌더되는 결과물에 영향을 주는 정보를 담고 있는 자바스크립트의 객체(objects)라고 설명한다. props(short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, props와 state 모두 컴포넌트에서 다루는 데이터이고, 비슷한 역할을 해서 무엇이 다른 건가 궁금했는데 둘은 작동..

가끔 색 조합이 너무 고민될 때 어울리는 색 조합을 추천해주는 사이트에서 트랜디한 컬러들을 간편하게 pick!!!! 해보자. 👇🏻 https://color.adobe.com/ko/trends color.adobe.com Gradient Background Colors - Eggradients.com Ready to use gradient background colors. ✓ Cool Gradients are prepared according to the latest design trends. And it is served in the form of eggs. ✓ With hex and CSS codes. www.eggradients.com

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