본문 바로가기
SMALL

JavaScript135

React) 컴포넌트와 render 함수, 초기렌더링/리렌더링(조화과정) Virtual DOM 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트란? - 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용 - 오직 V(view)만 신경 쓰는 라이브러리 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하는 리액트를 이해하려면 '초기 렌더링'과 '리렌더링' 개념을 이해해야 합니다. 먼저 컴포넌트와 render 함수에 알아보겠습니다. 컴포넌트(Component) 버튼과 텍스트 박스 등의 범용성이 높은 요소를 컴포넌트로 정의하여 UI 부품을 설계할 수 있습니다. - 특정 부분이 어떻게 생길지 정하는 선언체 - 재사용이 가능한 API로 수많은 기능들을 내장 - 하나의 컴포넌트에서 해당 컴포넌트의 생김새와 작동 방식.. 2022. 10. 26.
React) 리액트 사용 이유와 탄생 과정 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트 탄생 과정 프론트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하려면 순수 자바스크립트만으로는 부담이 존재합니다. (어떠한 데이터를 변경하고자 할 때 해당 요소를 찾아 업데이트 처리) 이유는? 규모가 클수록 코드가 복잡 제대로 관리가 어려우면 성능 저하 이러한 문제점을 기반으로 지금까지 MVC, MVVM, MVM 아키텍쳐 기반으로 프레임워크들이 개발 되었습니다. 간단하게 개발할 수 있는 방법? 페이스북 개발팀이 고안해낸 방법은 데이터가 변경될 때마다 어떤 변화를 주는 것이 아닌 기존 뷰를 날려버리고 처음부터 새로 랜더링하는 방법을 생각하였습니다. 간단하다 코드의 양이 줄어든다.. 2022. 10. 26.
Ajax) 검색어 자동완성 기능 (Autocomplete) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 검색어 자동완성 https://jqueryui.com/autocomplete/ Autocomplete | jQuery UI Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for progr jqueryu.. 2022. 7. 12.
Ajax) text/html 처리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. HTML text.jsp csv No 이름 프로필 구분 document.querySelector("#btn-celeb-html").addEventListener('click', (e) => { $.ajax({ url : '/celeb/html', method : 'GET', success(html) { console.log(html); document.querySelector("#tbl-celeb tbody").innerHTML = html; }, error(jqxhr, statusText, err) { console.log(jaxhr, statusText, err); } }); }); C.. 2022. 7. 12.
Ajax) text/csv 처리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. CSV text.jsp csv CelebCsvServlet @WebServlet("/celeb/csv") public class CelebCsvServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throw.. 2022. 7. 12.
Ajax) text/plain 처리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. text text.jsp 검색 $.ajax({})안에 필요한 데이터들을 담아 전송합니다. 서버 응답이 오류없이 넘어오면 success의 매개변수로 담기게 되고, 서버 응답 시 오류가 발생하면 error()가 실행됩니다. SearchServlet @WebServlet("/jquery/search") public class SearchServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServlet.. 2022. 7. 8.
LIST

티스토리툴바