본문 바로가기

javaScript&jQurey

 (39)
[React] 1. React 시작하기(1) - 환경 설정 *글 출처는 버릴것이 없는 갓대희님 글 입니다. [React] 1. React 시작하기 0. 프론트 프레임워크 선택에 대한 고찰 - React를 시작하기 앞서, 왜 리액트를 공부하기로 생각했었는지에 대해 간단히 작성 해두려 한다. - 이 부분도 상당히 길다보니, 무시하고 바로 환경 설정부터 보시려면 > [클릭] 1. 프론트 개발 언어의 변화 - 내가 알고있는 범위 한정이겠지만, 프론트 만큼 변화가 빠른 언어, 프레임워크는 없는 듯 싶다. - 데충 스쳐 지나갔던, 프론트 관련 키워드만 모아봐도 하기 예시 정도가 된다. ex) jsp, jquery, mustache, jstl, velocity, Freemarker, vanilla js, vue.js, react - 한때는 혁명이라고 생각 했던 jquery에..
[JavaScript] 배열에서 중복제거 및 값 삭제 1. 배열 값 삭제 1. let arr = ['a', 'b', 'c']; // 배열 값 전체 삭제 arr = []; console.log(arr.length); 배열 전체 값을 모두 삭제하고, 빈 배열로 만들기 위해 새로운 빈 배열을 만들어서, 배열 변수에 할당 하였습니다. 2. let arr = ['a', 'b', 'c']; let arr2 = arr; // 배열 값 전체 삭제 arr.length = 0; console.log(arr.length); // 0 document.writeln(arr2.length); // 0 배열의 길이 속성 값을 0으로 주면, 해당 배열은 길이 0의 빈 배열이 됩니다. 2.배열 첫번째 값 삭제 let arr = ['a', 'b', 'c']; // 배열의 첫번째 값 삭제 ..
[JavaScript] 자바스크립트 forEach 메서드 이해하기 ForEach 메서드란? forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다. map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다. 문법 const myArr = [1, 2, 3, 4, 5]; const newMyArr = myArr.forEach((currentElement, index, array) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(array); }); console.log(newMyArr); // undefined forEach 메서드도 map메서드와 동일하게 파라미터로..
[JS] 쿠키(Cookie) 다루기 선행 학습 [WEB] 🌐 쿠키 / 세션 정리 inpa.tistory.com 비연결성(Connectionless)과 비상태성(Stateless) HTTP 프로토콜에는 비연결성(Connectionless)과 비상태성(Stateless)이라는 특징이 있습니다. 이는 서버의 자원을 절약하기 위해 모든 사용자의 요청마다 연결 Cookie란? Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다. ​ 어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가? 아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가? 사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다. ​ ..
[React] 리액트 Hooks : useEffect() 함수 사용법 🚀 useEffect()란? useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook입니다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻합니다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었습니다. componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행. componentDidUpdate: 리렌더링을 완료한 후 실행. 즉 render()가 업데이트될 때마다 실행 compoenntWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행. 기본 형태..
[react]리액트 렌더링 최적화하는 8가지 방법과 고찰 서론 이 글은 함수형 컴포넌트, 클래스형 컴포넌트 상관없이 공통적으로 적용되는 렌더링 최적화 이야기와 hooks를 사용하는 함수형 컴포넌트에서 구체적으로 어떤 기능들을 사용해 렌더링 최적화를 사용할 수 있는지를 작성해봤습니다. 클래스형 컴포넌트에서의 구체적인 기능들은 다루지 않습니다. 예제가 많습니다. github에서 전체 코드를 볼 수 있습니다. https://github.com/cocoder16/react-rendering-optimization cocoder16/react-rendering-optimization Contribute to cocoder16/react-rendering-optimization development by creating an account on GitHub. github..
[javaScript]자바스크립트 타이머 - setTimeout, setInterval, clearInterval 함수 오늘은 Javascript에서 제공하는 타이머(Timer) 함수 활용에 대한 간단한 포스팅입니다. Javascript 를 이용할 때, 1) 종종 특정 함수나 기능을 페이지가 로드되거나 버튼이 클릭되었을 때, 바로 실행하지 않고, 약간의 시간이 지난후에 실행되게 하고 싶은 경우가 있습니다. 또는 2) 특정 함수를 지속적으로 반복하여 실행하고 싶은 경우도 있구요. 예를 들면 특정 정보를 화면에 표시하여 사용자에게 안내하고, 5초 후에 다른 페이지로 이동시키고 싶은 것이라면 위의 첫번째 경우이겠죠? 그리고 10초마다 새로운 정보를 보여주기 위해 페이지의 특정 영역 프레임을 AJAX호출을 통해 지속적으로 갱신해주고 싶은 경우라면 두번째 경우일 것 같구요. 이런 처리를 위해 Javascript는 어떤 함수를 제공..
[React] React Datepicker 시간 선택 커스텀 조건은 다음과 같다 - 예약 시간은 9:30-5:30 사이에 결정 (임시) - 사용 시간은 최소 30분에서 최대 2시간 * 즉, 5:00 시작이라면 5:30까지 사용 가능 정리하면, 종료 시간의 최대값은 시작 시간의 2시간 이후로 하되, 5:30을 넘어가면 안된다 React Datepicker crafted by HackerOne reactdatepicker.com 다행히도 React Datepicker의 공식문서(?)는 매우 친절해서, 수십 가지 경우의 수에 맞는 예제를 볼 수 있었다 결론적으로 구현한 코드는 다음과 같다 (SDatePicker는 DatePicker를 커스텀 한 것이고, 한글화 및 set(get)Hours 등의 함수들은 import해주면 된다) const ReserveMain = () ..

티스토리툴바