분류 전체보기398 로그인 기능 구현하기 https://youtu.be/SlF6mxaD3Eg - API 이용하기, 네이버 아이디로 로그인(네아로) 2023. 1. 25. onSubmit / onClick / onChange 230125 ver. 문득 비슷한 것 같으면서도 정확히 무슨 차이인지 몰라서 찾아봤다. 그저 느낌만으로 사용해왔는데, 정리함으로써 조금 정리됐다. onSubmit 과 onClick 공통점 - 자바스크립트를 호출하기 위해 사용되는 EventHandler onSubmit - form 태그 내부에서만 사용 가능 - form이 submit(제출)될 때 발생하는 이벤트 - form안에 있는 것을 validate(검증) 한 후에 return이 true, false 일 경우에 호출되는 역할을 하는 이벤트핸들러 - 기본적으로 호출될 때, 새로고침 효과가 발생한다. - e.preventDefault(); 를 작성하면 새로고침이 되지 않도록 할 수 있다. onClick - form 태그와 무관하게 사용 가능, 즉 외부에서.. 2023. 1. 25. import cn from {classnames} 참고 링크 https://github.com/JedWatson/classnames TodoList 를 만들다가 cn 이 뭔지 궁금해졌다. classnames은 리액트 라이브러리 중 하나이다. 조건부로 classNames를 결합할 수 있는 자비스크립트의 유틸리티 설치방법은 아래와 같다. // npm npm i classnames // Bower bower i classnames // or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`) yarn add classnames 2023. 1. 25. 반응형 웹(Responsive Web)에 대하여 230125 ver. 1. 참고 문서 &영상 https://youtu.be/8-uJ_4136u - 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web - Media Queries를 이용하라 모바일(mobile) : 320~480px 테블릿(tablet): 768~1024px 컴퓨터(desktop): 1024px~ 로 간주하고 작업하면 무난하게 반응형을 만들 수 있다. float는 텍스트와 이미지를 어떻게 배치할 것인지를 설정하는 역할 - COLOR TOOL 사이트 - 모든 것을 상세히 기억할 필요는 없다. 큰 그림을 이해한다음에 찾아가면서 만들면 된다. 이해한 상태에서 찾는 것과 모르는 상태에서 찾는 속도와 이해도는 다르다. - 모바일을 먼저 만들고 웹으로 만들기 많은 기업들이 Mobil.. 2023. 1. 25. 플렉스박스(Flexbox)에 대하여 230126 ver. 1. 참고 문서 & 영상 ■ 문서 mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox - 공식문서 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox - 공식문서 ■ 영상 https://youtu.be/7neASrWEFEM - CSS Flexbox 완전 정리 ■ 연습을 위한 게임 Flexbox Froggy 2. 플렉스 박스(Flex box) ■ What item을 행(row) 또는 열(column)로 정렬하기 위한 1차원 레이아웃(layout)방법 item은 flex(expand)하게 움직이며 공간에 맞게 채우거나 축소된다... 2023. 1. 25. 이전 1 ··· 67 68 69 70 71 72 73 ··· 80 다음