DH의 개발 공부로그

※ 노드가 깔려있어야 합니다. 웹팩을 쓰는 이유 여러개로 나누어져 있는 컴포넌트, 즉 파일들을 하나의 파일로 합쳐서 파일의 수를 줄여 효율적으로 관리할 수 있게 해주기 때문이다. 1. package.json 생성 npm init 2. react 설치 npm i react react-dom 3. webpack 설치 npm i -D webpack webpack-cli -D: 실제서비스에서는 필요가 없고 개발환경에서만 사용할 때 적용하는 코드 "dependencies": { // 실제 서비스에서 사용하기 위한 것들 "react": "^18.2.0"7, "react-dom": "^18.2.0" }, "devDependencies": { // 개발환경에서만 사용할 것들 "webpack": "^5.75.0", "w..

자바스크립트에서 this를 활용하여 작업을 할 수가 있는데, this가 의미하는 것이 각각의 상황에서 다 다르므로 이해를 잘 하는것이 중요하고, 헷갈릴때는 console.log()를 활용하는 것이 좋습니다. 그러면 this에 대해 알아보겠습니다. 구문 this 브라우저의 콘솔창에 this를 쳐보면 this // window {} 이렇게 this는 window를 의미합니다. 또 함수에서 this가 의미하는것은 function a() { console.log(this) } a() // window {} 역시나 window 입니다. 이렇듯 this는 기본적으로 window를 의미합니다. 그렇다면 this가 다른 것을 의미할 때의 상황을 알아보겠습니다. 우선 객체 안에서의 this입니다. let obj = { ..

reduce() 란? reduce()는 배열의 각 요소를 순회하면서 주어진 함수를 실행하여 값을 누적해 하나의 결과값으로 반환하는 메서드입니다. 구문 arr.reduce(callback[, initialValue]) callback 콜백함수에는 다음 4가지의 인수를 받을 수 있습니다. 누적 값 (accumulator) 현재 값 (currentValue) 현재 인덱스 (currentIndex) 원본 배열 (array) initialValue callback함수의 초기값으로, 따로 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용합니다. 예시 쉽게 이해해보면 이런 형태의 구조를 갖는다고 볼 수 있습니다. 배열.reduce((누적값, 현재값) => { return 새로운 누적값 }, 초기값) ### 1. 배..

sort() 함수 sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 함수입니다. 기본 정렬 순서는 문자열의 유니코드를 따라 정렬합니다. 구문 array.sort([compareFunction]) ompareFunction은 매개변수로 정렬순서를 정의하는 함수입니다. 또한 sort()는 배열의 순서를 정렬하고 복사본을 반환하는 것이 아닌, 원 배열을 정렬하고 그 원 배열을 반환하기 때문에 이점은 유의해야 합니다. 정렬방법 1. 오름차순 const array = [2, 4, 5, 8, 30, 1]; array.sort( (a, b) => a - b ); console.log(array); // output : [1, 2, 4, 5, 8, 30] 간단하게 정렬하는 방법을 설명하자..

순서도 폴더구조 Link https://shape2ee.github.io/javascript-class/calculator/index.html HTMLE 코드 7 8 9 + 4 5 6 - 1 2 3 / C 0 = * CSS 코드 @charset "utf-8"; main { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } .grid { display: grid; gap: 12px; grid-template-rows: repeat(5, 80px); grid-template-columns: repeat(4, calc(25% - 9px)); width: 50%; max-width: 300px; } ..

프론트엔드 개발자가 되기위해 우선 완벽하지는 않아도 기초를 탄탄하게 하고 싶어서, ZeroCho님의 강의를 보면서 JavaScript 공부를 다시 시작하였습니다. 이번에 새롭게 배운 팁?이 있다면 if문의 중첩으로 인한 코드의 복잡성을 제거해주는 방법에 대해 공부를 하였습니다. if문 중첩제거 방법 if문 다음에 나오는 공통으로 진행되는 코드를 true와 false 각각의 분기점 내부에 넣는다. 분기점을 비교하여 그중 짧은 절차의 코드 먼저 실행이 되도록 if문을 작성한다. 짧은 절차가 끝나면 return이나 break로 중단한다. 이제 else를 제거한다. (이때 중첩하나가 제거간 됨) 이 방식으로 하면 if문의 중첩을 제거할 수 가 있다. 예시 ex) function test1() { let resu..

학원 수업이 끝나고 휴식과 예비군등 바쁘게 지내면서 시간이 지나고, 그리고 계속 걸리고 싶지 않았던 코로나에 걸리면서 일주일동안 고생을 하고 나니.... 컨디션이 올라오지않고 계속해서 쉬고 싶은 마음이 강했습니다. 그래도 다시 일어나서 시작을 해야하니까, 예전에 유튜브 "코딩 알려주는 누나" 채널에서 미뤄두었던 자바스크립트 슈팅게임 만들기를 해보고자 컴퓨터를 켰습니다. 자바스크립트 슈팅게임! 1. 폴더 구조 2. JavaScript let canvas; let ctx; canvas = document.querySelector("canvas"); ctx = canvas.getContext("2d"); canvas.width = 400; canvas.height = 700; 게임에서의 움직임을 자연스럽게 표..

1. Object shorthand assignment let name="shape"; let age = 20; let person={ name:name, age:age } console.log(person) key 이름과 value에 변수 이름과 같으면 단축 가능 let person={ name, age } 2.Destructuring (객체를 분해해서 가져오다) let person ={ name:"shape", age:20 } /* let name = person.name let age = person['age'] */ let {name, age} = person 많이 사용되는 방식의 문법이며, 특히 React Hook인 useState와 함께 사용이 많이 된다. 객체뿐만 아니라 배열에서도 사용가능 ..