React에서는 input에 입력된 값을 어떻게하면 가져올 수 있을까? > input태그에 값을 입력하면 state에 새로운 객체값을 하나 추가하는 로직을 구현하고 있었는데 input태그의 값을 얻어와서 처리하는 방법을 고민 중이었다. > > DOM에서는 input에

state에 배열안에 객체들을 담고 있는 값을 map을 이용해서 각각의 li태그들로 자식 컴포넌트를 만드는 과정에서 한 가지 오류가 발생했다.아래와 같은 오류가 발생하였는데 여기서 에러 문구를 잘 살펴보면, 리스트에서는 고유한 key를 사용 해야 된다! 라는 문구가 나

명령어를 사용해서 폰트어썸을 받아서 프로젝트에 아이콘들을 넣어서 사용해 볼 것이다.fontawesome을 설치 한 다음에는 리액트에서 사용할 때 컴포넌트 단위로 사용할 수 있다.위와 같이 여러 방식으로 사용할 수 있지만, 아래의 코드로 추가해 볼 것이다.위의 impor

리액트를 사용해서 프로젝트를 하나 진행해 볼 것이다.전체 습관의 개수를 셀 수 있다.사용자가 입력창에 입력한 뒤 추가 버튼을 누르면 하나의 습관을 목록에 추가한다.각각의 목록을 추가하고, 감소시킬 수 있다.각각의 목록을 삭제 할 수 있다.Reset 버튼을 누르면 모든

기존 코드 > 버튼 클릭시 각각의 이벤트 핸들러를 통해 기능이 동작된다. 게임 시작 게임 멈춤 게임 승, 패에 따라 그 안에서 각각 알림 소리와 알림창을 다르게 설정한다. 게임 시간을 초기화한다. 남은 게임 시간을 보여주는 함수 남은 목표 개수를 보여주는 함수 버튼 숨

게임영역을 잡아야되는데 부모 박스에 display: flex를 주고 게임 영역에도 동일하게 주었는데 그럴 필요가 없이부모 박스에 아래의 속성만 주어도 내가 원하는 대로 잘 위치를 잡을 수 있었다.\--> 내가 알게모르게 부모 태그에는 display: flex만 주려하고

구현할 때 필요한 것 생각해보기제한된 시간안에 당근을 없애서 승리해야되는 게임을 만들것이다기능setInterval을 이용해서 타이머 기능 구현하기당근을 제한시간안에 다 없애면 승리벌레를 클릭할 경우 게임이 끝난다제한된 시간을 사용자에게 보여주고, 남은 당근의 개수를 보

HTML이 모두 로드되기전에 자바스크립트 영역에서 HTML을 참조하는데 addEventListener에서 HTML태그를 참조하지 못해서 계속 에러가 발생했다.보통 body 태그가 끝나기 바로 위에 부분에 script의 위치를 옮겨서 사용하는 방법을 많이들 사용하는데나는

현재 리액트를 공부하면서 자바스크립트도 더 깊게 공부하고 있는 중이다.리액트를 이용하면 html의 기본적인 코드를 하드코딩하지 않아도 되지만, 기본적인 것은 만들 수 있어야 되기 때문에 자바스크립트와 html 구조를 짜는것에 많은 시간을 투자하고 있는중이다.💻 실력있

구현 화면2021.05.11});

구현할 때 필요한 것 생각해보기기능1-1. 사용자가 입력창에 목록을 입력하고 Enter key 또는 +버튼을 클릭했을 때 화면에 쇼핑 리스트를 추가한다.1-2. 목록 오른쪽에는 휴지통 아이콘이 있는데 이것을 클릭하면,해당 쇼핑 목록이 리스트에서 지워진다.UI2-1. 사

메뉴에 마우스가 올라갔을 때 border와 background-color를 변하도록 지정했더니, 기존 사이즈에서 border가 적용되어서 사이즈가 바뀌면서 메뉴들이 움직이는 에러를 발견했다.평소에는 border: transparent;를 주고,마우스 hover일 때는

우선 화면에서 스크롤을 할 때 그 화면의 높이가 홈 화면의 높이를 넘어가게 되면, 이벤트를 적용할 버튼을 보이게 하고, 스크롤 이벤트를 적용하는 코드를 작성했다.그런데, 우선 화면 영역에 따라 버튼을 보이고, 감추는 것은 잘 적용되었으나,스크롤 이벤트를 따로 정의해 놓

웹 페이지의 메뉴를 빼면 제일 상단을 home부분으로 만들어 놓았다.우선 Element.getBoundingClientRect()를 이용해서 home영역의 크기를 구하기또 window.scrollY의 값을 구해서 위에서 구한 home 영역을 이용해서 이벤트를 걸기hom

메뉴가 클릭되면 값을 가져와서 addEventListener에 등록한 함수를 실행시킨다.들어온 event 객체의 target에 접근해서 해당 이벤트가 일어난 요소를 가져온다.메뉴의 요소를 가지고 와서 클릭 이벤트가 일어났을 때의 동작을 처리하기 위해 먼저 그 요소를 가

menu 구현하기 화면에서 스크롤을 하면, 보통 화면 상단에 위치한 메뉴가 사라질까? 사라지게 구현한다면, 스크롤 시 메뉴를 사라지게 했다가 마우스를 화면의 상단으로 가져가면, 메뉴가 나타나도록 구현할 수 있을 것이다. 이번에 구현하려고하는 기능은 메뉴가 상단에

css에서 background 속성을 사용해서 url로 해당 경로의 이미지를 지정해 준 후 이미지를 반복하지 않으려고 no-repeat를 추가적으로 설정해주었는데 또 하나가 생각대로 잘 되지 않았다.이미지가 반복되지 않는 것은 잘 적용되었지만, 화면크기를 키우고 줄일

nav 태그를 사용해서 ul태그 밑에 li들을 만들어서 메뉴를 구현하려고 코드를 작성하였다.css에서 해당 li태그에 마우스를 올렸을 때 동작을 어떻게 구현할 까 생각했다.사용자에게 클릭이 가능하다는 것을 알려주기 위해 cursor: pointer 를 주었다. hove

객체 및 배열을 JavaScript로 다루기UI를 와이어프레임으로 그린 후, HTML & CSS로 디자인하기특정 도시와 현재 시점에 대한 날씨 데이터 다루기객체로 주어지는 날씨 데이터 값을 특정 element에 DOM을 활용하여 동적으로 렌더링 하기자원(resource

addEventListener( )는 EventTarget의 함수이다.addEventListener( ) 메소드는 지정한 이벤트가 대상에 전달될 때 마다 호출할 함수를 설정한다.사용방법에는 2가지 방법이 있다.1\. 표현식을 통해 구현한 함수를 넣는 방법2\. 익명함수