본문 바로가기

JAVASCRIPT

(12)

[JS] for 반복문: for..in 과 for..of의 차이 udemy에서 리액트 강의를 들으면서 미니 프로젝트를 만드는 중에 위 같은 오류가 발생했다 ExpenseChart 컴포넌트에 무슨 문제가 있다고 하는 거 같은데 전혀 모르겠어서 결국 강의를 켰고 for문을 사용하는 데 문제가 있다는 걸 알게 되었다 //ExpensesChart.js import Chart from "../Chart/Chart"; function ExpensesChart(props) { const chartDataPoints = [ { label: "Jan", value: 0 }, { label: "Feb", value: 0 }, { label: "Mar", value: 0 }, { label: "Apr", value: 0 }, { label: "May", value: 0 }, { labe..

[JS] 함수 헷갈리는 부분 : 값을 넘기는 것과 참조값을 넘기는 것의 차이 리액트를 공부하며 유튜브를 클론 코딩하던 중 혼자 해결하지 못하고 있던 부분이 있어서 강사님 코드와 비교해보니 //내 코드 onClick = {onVideoClick(video)} //강사님 코드 onClick = {()=> onVideoClick(video)} 위 코드처럼 강사님은 화살표 함수를 사용하셨다 이해가 잘 안가서 Q&A 게시판을 살펴보니 나와 같은 고민을 하는 사람이 많아서 신기했다ㅎㅎ 결론적으로 위 두 코드의 차이점은 ↓ //onVideoClick을 호출하고 리턴되는 값 자체를 value1에 할당하는 것 const value1 = onVideoClick(video) //onVideoClick을 호출할 함수를 value2에 할당하는 것, 참조값을 전달하는 것 const value2 = () ..

[JS] callback 오늘은 자바스크립트 공부하면서 지겹게 들었던 콜백에 대해 정리해 보려고 합니다. (1) 콜백함수에 대해 아주 간단하게 설명하면 콜백함수란? 정의: 함수 안에 파라미터로 들어가는 함수 용도: 순차적으로 실행하고 싶을 때 씀 특징: 콜백함수가 필요한 함수들에만 콜백함수 사용 가능 (addEventlListener, setTimeOut,,,) (2) 콜백함수 예시 document.querySelector(".button").addEventListener("click", function(){ }) //addEventListener 안에 들어있는 함수가 콜백함수 //click 이벤트 발생 후 순차적으로 실행 (3) 콜백함수 만들어 보기 //순차적으로 1, 2 나오도록 하고 싶다면? function first(파라..

[JS] ES6 : Spread Operatot (스프레드 연산자) 미니 프로젝트로 movie seat booking 페이지를 만들다가 새로운 ES6 문법을 알게 되었다. 바로 '스프레드 연산자('...')'라는 것인데 사용법은 아주 간단하다 const arr = [1,2,3] const arr2 = [...arr,4,5] console.log (arr2) ; // [1,2,3,4,5] 기존에는 concat 매서드를 사용했다고 하는 데 훨씬 간단하게 연결, 복사 기능을 수행할 수 있어서 알아두면 좋을 것 같다!! + 더 자세한 내용은 ↓ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

[JS] const를 조작할 수 있는 경우 노마드코더 챌린지가 끝나고 챌린지 도중 궁금했던 부분을 더 세세히 이해하기 위해 윤인성 강사님의 유튜브 강의를 들었는데 너무 설명을 잘해주셔서 잊어버리기 전에 기록! 오늘의 궁금증: const는 재선언, 재할당이 불가능하다고 배웠는 데 const a=[1,2]같은 array에 추가로 값을 넣을 수 있다고?왜?? 이를 이해하기 위해선 스택과 힙에 대해 먼저 알아야 합니다 -스택: 기본 자료형과 주소 등을 저장하는 메모리 공간 (여기서 기본 자료형은 숫자, 문자열, 불 등을 의미) -힙: 복합 자료형을 저장하는 메모리 공간 (복합 자료형은 배열, 함수, 객체 등을 의미) -주소: 저장된 자료의 위치 -레퍼런스한다: 스택의 주소가 힙의 자료를 가리키는 것 -레퍼런스 변수: 스택에 저장된 것중에 ..

[JS ] 백틱(` `) 사용법 요즘 나는 노마드코더의 바닐라 자바스크립트 챌린지 중이다. 이 챌린지로 자바스크립트를 처음 접하고 사용하는 중이라 매 챌린지가 고비지만 slack을 통해 많은 분들이 도움을 주셔서 잘 버티고 있는 중이다:) 오늘은 비교적 간단한 챌린지를 진행했는데 분명 식은 잘 작성한거 같은데 작동이 안됨,,, slack을 통해 도움을 받은 결과 백틱을 사용하라고 알려주셨고 그래서 평소 대충 알고 있었던 백틱을 자세히 찾아보았다!!! https://curryyou.tistory.com/185 [JS] 자바스크립트 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법 # 템플릿 리터럴(Template Literal) ES6부터 새로 도입된 문자열 표기법이다. 문자열 생성시 따옴표 대신, 백틱(`)을 사용한다. var ..

[JS] 이벤트 알아보기 Events title.addEventListener("click", handleTitleClick) -addEventListener로 listen할 이벤트를 첫 번째에 적어주고 이벤트가 발생했을 때 동작하길 원하는 function을 두번째 칸에 적어줍니다 -여기서 가장 중요한 것은 handleTitleClick이 곧바로 실행되지 않도록 하는 것 handleTitleClick() 처럼 괄호 넣지 않도록 주의!★ -'.removeEventListener'를 통해 제거 가능 event 찾는 방법 1. 구글에 찾고 싶은 element의 이름, 예를 들어 'h1 html element mdn' 이라고 검색, Web APIs라는 문장이 포함된 페이지 찾아서 읽기 2. console.dir()를 ..

[JS] HTML in Javascript JS와 HTML은 연결되어 있고 JS에서 HTML 변경 가능! 그런데 왜 굳이 JS에서 HTML을 변경해야 할까? 하는 궁금증 생겨서 검색해보니 서버와 통신을 하거나 복잡한 일들을 처리할 때 JS 파일에서 처리하게 되는데 이때 유용하게 쓰일 것이라고 하네요ㅎㅎ document.getElementBy~ -HTML에서 element를 찾아주는 기능 -element 찾으면 JS로 HTML의 무엇이든 바꿀 수 있음 -getElementById / getElementByCalssName / getElementByTagName 등 있음 document.querySelector() -가장 많이 사용 -CSS selector 사용하여 검색 가능 -조건 만족하는 것 여러개 있어도 첫번째로 검색된 것만 가져옴 (다 가..

이전 1 2 다음

티스토리툴바