방구석 개발자의 놀이터

React에서 DOM에 html을 그리는 원리 및 코드는 다음과 같다. ReactDOM.render( // 테스트 React.createElement("div",null,"테스트"), document.getElementById("root") ); 위의 예제는 div하나만 그리지만 일반적으로 저렇게 간단한 코드를 사용하는 경우는 거의 없다. 예를 들어, 태그 안에 여러 태그가 있다고 가정해보자. ReactDOM.render( /* 테스트1 테스트2 */ React.createElement( "div", null, React.createElement( "div", null, Reat.createElement("h1",null,"테스트1"), Reat.createElement("h1",null,"테스트2") ..

Hoisting(호이스팅) 관련 내용을 보다가 함수 선언 function을 주로 사용하는지 const (arrow function)을 주로 사용하는지 각 선호도에 대해 각자의 생각을 토론하는 글을 보고 재미있어서 정리해보았다. (토론 출처 : https://dev.to/skinnypetethegiraffe/function-or-const-which-do-you-prefer-typescriptjavascript-apa) // function function test() { return "test"; } // arrow function const test = () => "test"; 1. function 선언을 선호하는 이유 hoisting(호이스팅)을 지원 (중첩 함수를 작성할 때 코드 정리 용이) con..

결론적으로 변수를 불변객체로 관리하면 나중에 두개의 변수를 비교할 때 편리하다. 이 말을 밑에 예시 코드로 확인해보자. const animal1 = { animal: [ {name: "dog", age: 10}, {name: "cat", age: 20} ] } const animal2 = { animal: [ {name: "dog", age: 10}, {name: "cat", age: 18} ] } 위의 animal1 과 animal2를 비교한다고 해보자. 만약 불변성을 유지하지 않은채로 변수를 관리 한다면 1. animal1.animal.length === animal2.animal.length 2. animal1.animal[0] === animal2.animal[0] 3. animal1.animal..

무한 스크롤을 하기 앞서 가장 중요한 포인트는 Scroll Bar의 위치를 찾는것이다. 1. Scroll Bar의 위치 찾는법 const onScroll = e => { console.dir(e.target.scrollingElement); } document.addEventListener("scroll", onScroll); 위와 같은 코드를 사용하여 콘솔창을 확인해보면 위와 같이 수많은 정보가 나온다. 여기서 필요한 정보는 scrollHeight: 1231 , scrollTop: 340, clientHeight: 891 이렇게 3가지 정보가 필요하다. 그 이유는!!! 무한 스크롤에서 필요한 Scroll을 가장 아래로 내렸을 때가 바로 body 영역의 총 길이 = scrollHeight = scroll..

1. Script import 방법 내용 // script 호출 //index.js let test = document.querySelector("#test"); test.addEventListener("click", function(){ alert("Hello Test") }); 로 호출할 수 있다. 위의 예제에서 index.js파일 경로는 html과 같은 폴더안에 있어서 경로를 생략했다. 2. Script 파일 위치 script를 head 태그 안에 위치할 수 있다. 하지만 이 경우에는 위의 예시에서는 오류가 발생한다. 오류를 방지하기 위해서는 위 예시의 index.js를 아래처럼 바꿔야 한다. //index.js window.onload = function(){ let test = document...

filter 란? - 특정 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열을 만드는 함수 예제 const food =[ { id:1, name:'포도', kind:'fruit' }, { id:2, name:'소고기', kind:'meat' } ] //과일을 만족하는 배열을 꺼내보자 const fruit = food.filter(food => food.kind === 'fruit'); console.log(fruit); // 결과 : [{id:1, name:'포도',kind:'fruit'}] food 배열에서 kind : 'fruit' 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열 fruit을 만든다.

ESM 문법을 익히기 위해 모듈을 내보내고 가져오는 코드를 예시로 사용한다. // file1.js export default function func1(){} export function func2(){} export const var1 = 123; export let var2 = 'hello'; //file2.js import myFunc1, { func2, var1, var2 } from './file1.js'; //file3.js import { func2 as myFunc2 } from './file1.js'; ESM 문법 특징 코드를 내보낼 때는 export 사용 코드를 가져오는 쪽에서는 import, from 사용 default 키워드는 한 파일에서 한 번만 사용 가능 default 키워드로 ..

내장함수 indexOf() 함수를 사용하면 특정 문자열이 있는지 없는지 체크가 가능하다. ※"문자열".indexOf("찾고자 하는 문자열") var testStr = "test123"; var findStr = "test"; console.log(testStr.indexOf(findStr)); //결과값 : 0 console.log(testStr.indexOf("777")); //결과값 : -1 indexOf함수는 찾는 문자열의 시작위치에 해당하는 index를 반환. 따라서 "test123"에서 "test"의 시작위치인 0을 반환 indexOf함수는 찾는 문자열이 문자열에 없을 시 ' -1 ' 을 반환. 따라서 "test123"에 "777" 문자열은 없으므로 -1을 반환