김기지의 코딩노트

React.js 자바스크립트의 라이브러리 => 자바스크립트를 알아야함 + 동작환경인 Node.js를 다룰 수 있어야함 (이전에 배웠던 내용은 따로 정리하지 않고 새로 배운 내용을 위주로 정리함) 📍 배열 내장함수 1. 배열을 순회하는 내장함수 // for문 대신 배열을 순회하는 방법 let arr = [1,2,3,4]; arr.forEach((el)=>console.log(el)) // [1,2,3,4] // arr의 요소가 콜백함수의 인자로 하나씩 들어가 새로운 배열을 만들어냄 여기서 새로운 배열 newArr에 arr의 요소에 *2를 한 값을 요소로 넣어주려면? // newArr에 arr요소에*2한 값을 요소로 넣기 const newArr = []; arr.forEach((el)=>newArr.push..

부트캠프에서 만나게된 페어분께서 '친구가 추천해 준 강의'가 있다며 나에게 공유해주셨다..(당신.. 혹시 천사?) 지금 하고있는 스터디에서도 리액트로 프로젝트를 만들고, 지난 아고라스테이츠 그룹 회고 시간에서도 한 교수님께서 '리액트로 만드는건 도전해보는게 좋아요' 라고 말씀하셨다. 그래서.. https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, ..

📍 window.localStorage localStorage속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 도와주는 속성이다. 로컬 저장소는 웹 브라우저에서 각 도메인에 대해 할당해주는 저장공간으로, 데이터를 영구적으로 보관할 수 있다. 데이터 보관시에는 데이터의 이름(key)과 데이터의 실제 값(value)을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용된다. 더보기 🔍 영구적으로 보관한다는 것은? 브라우저를 껐다가 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아있도록 할 수 있다는 것 💡 로컬 스토리지는 어디에서 확인할 수 있을까? 크롬의 경우 개발자도구의 application 하위 폴더에서 Local Storage를 확인할 수 있다. 📍 로컬 스토리지 사용법 로컬스토리지로부터..

수업에서 진행했던 계산기js를 참고하여 계산기를 만들어보았다. (사실 거의 다 보고 베낀 수준이지만..) 계산기 최종 먼저, 내가 구현하고 싶었던 다크모드/라이트모드 와 닫기버튼은 구현해냈다. 다크모드 / 라이트모드 처음에는 단순히 class를 따로 만들어 .dark일때의 css를 따로 설정한 다음 classList.add를 해주면 될 것이라고 생각했다. 하지만 처음에 라이트모드에서 다크모드로 바뀌는건 가능하지만, 반대로 다크모드일때 라이트모드로 다시 변환하는 것은 불가능했다.(첫 번째 고난) 그러다 구글링을 통해 .classList.toggle()을 이용하면 구현이 가능해진다는 것을 알게 되었다. 🔍 element.classList.toggle()이란? -> 클래스 값을 토글링한다. 즉, 클래스가 존재..

🔖 객체 사전적인 의미는 실세계에 존재하는 대상 또는 생각할 수 있는 어떤 개념 🔍 자바스크립트에서의 객체란? 값 또는 기능을 가지고 있는 데이터 즉, 소프트웨어적 사물로써 어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단이다. 🏷️ 최초의 객체 : 웹 브라우저 웹 브라우저는 소프트웨어에 세계에 존재하는 사물, 즉 객체이다. 자바스크립트는 웹 브라우저라는 객체에게 명령을 내리기 위해 사용하는 언어로, 사용자가 웹 브라우저에게 명령을 내릴수 있도록 돕기 위해 웹 브라우저와 관련된 다양한 객체들을 제공한다. 그 중 대표적인 객체는 window객체이다. 📎 자바스크립트 코드 내에서 window를 입력하면 웹 브라우저에 접근할 수 있다. 🏷️ 객체 사용하기 객체는 값 또는 기능을 가지고 ..

◎Type(타입) :값(value)의 종류 우리는 평소 여러가지 표현으로 정보를 전달한다. '오늘은 2022년 12월 18일 입니다.' , '아메리카노 5000원' , 100 > 24 등등 말이나 글로써 정보를 표현한다. 위 정보에서 2022, 12 등을 문자가 아닌 숫자로 표현한 이유는 뭘까? 정보를 전달받는 사람의 가독성을 높여주기 위함이다. 때문에 숫자나 부등호 기호를 문자열이 아닌 숫자, 기호 그 자체로 분류하고 표현하게 된다. javascript에서도 정보를 전달하기 위해 값을 사용한다. 여기서도 자주 쓰이는 값은 분류를 하게 되고, 분류된 각 타입은 고유한 속성과 메서드를 갖게된다. ● 타입의 종류 - 원시타입 : 변경 불가능한 값 ▶ 종류 ① Number ② String ③ Boolean ④..