분류 전체보기

✅ React Hooks란? 1. 리액트 훅(Hook) 1) 클래스형 컴포넌트(📌참고)에서 이용하던 코드를 작성할 필요 없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있다. 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.(클래스형 컴포넌트의 문제를 해결하기 위해 나온 것이 훅) 2) 함수형 컴포넌트들은 method의 개념이므로, 리렌더링이 되더라도 render()를 제외한 나머지 method 및 state는 그대로 보존되어 있다. 📌 클래스형 컴포넌트의 단점 클래스형 컴포넌트에서 로직 재사용시에 사용한느 고차컴포넌트, 렌더 속성 값 패턴은 리액트 요소 트리를 깊게 만든다. (너무어렵다) 따라서, 성능에 부정적인 영향과 개발 시 디버깅이 ..

✅ JQuery 메소드 정리 JQuery 정리에 앞서 요즘 jQuery를 쓰는 첫번째 이유는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리이다. 자바스크립트 문법 중 프로토타입 방식으로 만들어진 클래스라고 한다. 자바스크립트로 코딩하면 여러줄이 필요하지만, jQuery 사용 시 많이 줄여서 코드 작업을 할 수 있다. 또한, jQuery는 DOM제어 보다 크로스브라우징(최대한 많은 종류의 웹 브라우저에서 작동하는 웹페이즈를 만드는 방법 중 하나) 처리가 편리하다. IE7은 비표준 브라우저이기 때문에 이벤트 등록 시 자바스크립트로 처리할 경우 attachEvent(), addEventListener() 등을 사용하여 코드를 사용한다. 이와달리 jQuery 내부에는 이런 번거로운 작업들을 대신 처리..

✅ LocalStorage 란? localStorage를 사용하면, 브라우저에 Key-Value 값을 Storage에 저장할 수 있다. 브라우저 상에서 개발자 도구(F12)를 통해 보면 아래와 같이 보여진다. ✅ LocalStorage 사용법 setItem(key, value) - key, value 값 추가 getItem(key) - value 읽어 오기 removeItem(key) - item 삭제 clear() - 도메인 내의 localStorage 값 삭제 length - 전체 item 개수 key() - index로 key값 찾기 📌 setItem(key, value) localStorage.setItem("data_first", data); setItem 메서드를 통해 key는 data_fir..

✅ 리액트란 리액트는 사용자 인터페이스(User Interface)를 만들기 위한 자바스크립트 라이브러리이다. 페이스북에서 처음 개발하고 2013년 오픈 소스 라이브러리로 바뀌어 현재 많은 개발자들이 사용하고 있다. 👉 현재 페이스북, 넷플릭스, 에어비앤비 등 유명한 플랫폼이나 서비스등에서 리액트를 사용하고 있고, 프론트엔드 라이브러리이다. ✅ 리액트 특징 단방향 데이터 흐름: 리액트는 데이터가 단방향으로 흐르기 때문에 데이터 흐름을 추적하기 쉽다. 규모가 커질 수록 데이터의 흐름을 추적하기 힘든데 단방향 데이터 흐름을 통해 파악하기 쉬워진다. 컴포넌트(Component) 기반: 리액트는 독립적인 단위의 소프트웨어 모듈인 컴포넌트(Component)를 기반으로 페이지를 구성한다. 리애그의 컴포넌트는 자바..