자바스크립트 this란? 공식문서 피셜 this의 값은 호출한 방법에 따라 결정된다...라는데 사실 잘 모르겠다 그러니 직접해보자 자바스크립트 this 사용해보기 기본 세팅 index.js 객체 안에 함수도 가능 함수 안에 함수도 가능 const name = { name: "오윤희", getName: function () {...

에러 발생 index.html 파일을 Open In Default Browser(Alt+B)로 실행하니 index.js를 불러오려고 하는 부분에서 위와 같은 Error가 발생했다. 해결방법 1. http-server가 설치돼 있지 않다면 npm install http-server -g 2. http-server 실행 npx http-...

팀 프로젝트를 진행하던 중 잘 동작하던 코드에 콘솔에 위와 같은 에러가 생겼다. 아무래도 백하고 통신 중 input 값에 null이나 undefined 값이 들어가서 그런 것 같다. 동작하는 데는 아무 문제가 없지만 에러 콘솔은 없을수록 좋으니... 해결방법 input에 value 부분에 null 혹은 undefined 값일 때의 대처를 작성해...

react onClick이란? - react에서 자주 사용되는 이벤트로 html 요소를 클릭했을 떄 실행할 함수를 말한다. onClick 기본 사용법 App.js onClick은 클릭했을떄 함수를 실행하는 것 이기 떄문에 ()=>를 사용해 함수를 만들어준다. function App() { return ( <div&g...

자바스크립트 Date함수란? - 날짜와 시간을 위한 메소드를 제공하는 함수 이다.(년, 월, 일, 시, 분, 초, 밀리초) Date함수 다양히게 다루기 1. 기본 형태 현재 위치한 국가에 현재 시간을 반환해준다. 하지만 기본 형태를 그대로 쓰는 경우는 실전에선 거의 없다. const date = new Date(); consol...

react-router란? a태그를 사용해 페이지 이동을 한다면 새로고침과 같은 현상이 일어난다. 하지만 react-router는 신규 페이지를 렌더링 하지 않고 url 주소에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다. react-router 사용준비 1. 라이브러리 설치 npm install reac...

스프레드 연산자란 spread는 ES6에서 도입된 문법으로 단어 자체는 펼치다,퍼뜨리다 라는 의미를 가지고 있으며 객체나 배열을 펼칠 수 있다. 기본의 객체나 배열은 변하지 않으며 새로운 객체나 배열을 변화시킨다. 사용 상황 1. 객체에서 사용 const object1 = { name:"오윤희", job:"vocalist" ...

react 프로젝트에서 간편하고 퀄리티있는 아이콘을 사용하게 해주는 라이브러리~~ https://react-icons.github.io/react-icons/ 리액트 아이콘!!!! 사용전 준비 우선 해당 react 프로젝트 터미널에 라이브러리를 설치 해준다. npm install react-icons --save // npm 사용시 yarn ad...

map 함수를 활용하면 코드 양을 줄일 수 있고 편하다. 혹시 아직 map 함수에 대해 잘 모른다면 여기를 참고하자! html태그 반복 렌더링 function App() { const array = ["손명오", "최혜정", "문동은", "박연진", "이사라", "하도영"]; return ( <div className="co...

map 함수에 매개변수 const array = [1,2,3,4,5] const newArray = array.filter((value,index,array)=>) value: 요소값 const newArray = array.map((value, index, array) => console.log(value)); //...