✨ Front-end67 [JavaScript] Spread 연산자의 개념과 사용방법 Spread 연산자 스프레드 연산자는 이터러블 오브젝트와 엘리먼트를 하나씩 분리하여 전개할 때 쓰이는 연산자이다. 전개한 결과를 변수에 할당하거나 호출하는 함수의 파라미터 값으로 사용할 수 있다. 함수 파라미터 매개변수로 값을 받을 때마다 각각 하나씩 출력되며, 보다 많은 매개변수를 넣으면 아래와 같이 undefined가 뜬다. Rest파라미터 호출받는 함수 파라미터에 function(...rest)와 같이 spread 연산자로 파라미터를 작성한 형태를 rest 파라미터라고 한다. ex1) ex2) ex3) ex4) Array-Like Array는 아니지만, Array처럼 사용할 수 있는 Object를 Array-Like라고 한다. 순차적으로 작성되야하는데, 10과 zoo가 0, 1이 아니라 undefi.. 2023. 9. 21. [JavaScript] ES6 화살표 함수 arrow arrow 함수란? ES6에서 도입된 새로운 함수 표현 방식이다. 화살표 함수는 함수를 간결하고 명료하게 작성할 수 있도록 도와주며, 주로 익명 함수의 선언과 사용에 활용된다. 파라미터 매개변수 왼쪽과 같이 function(one, two) 가 (one, two) => 로 바뀌게 되는 것이다. 만약 function add(one , two) 나 function add2(one, two), function add3(one, two) 처럼 함수 명을 간단하게 없애버리고, 익명으로 대체하여 변수에 넣어주기 편하다. 파라미터가 하나일 경우 ( ) 를 생략할 수 있으며, 만약 파라미터가 없을 경우 ( ) 만 쓰고 함수 선언 가능. 객체 {key : value} 형태의 Object를 반환하기 위해서는 소괄호 ( ).. 2023. 9. 21. [React] useEffect의 개념 및 실행 시점의 차이 및 사용예제 useEffect란? 함수형 컴포넌트에서 side effect를 수행하고, 컴포넌트의 생명주기에 특정 작업을 연결하는 Hook이다. 이는 컴포넌트가 렌더링될 때, 업데이트될 때, 혹은 제거될 때 특정 작업을 수행하게 해준다. ex1) 사용예제 HTML 삽입 미리보기할 수 없는 소스 결과화면 첫 번째 렌더링 시에 "컴포넌트 생성"이 찍히는 것은 useEffect의 첫 번째 실행이다. 해당 useEffect는 컴포넌트가 마운트될 때 실행된다. 두 번째로 "컴포넌트 사라짐"이 찍히는 것은 컴포넌트가 다시 렌더링되어 언마운트되었을 때의 작업이다. 이전에 생성된 컴포넌트 인스턴스가 제거되고, 새로운 컴포넌트 인스턴스가 생성되어 언마운트 작업이 실행된다. 마지막으로 "컴포넌트 생성"이 다시 찍히는 것은 두 번째 렌.. 2023. 9. 21. [React] useRef의 개념과 2가지 사용법 useRef란? React에서 사용되는 Hook 중 하나로, 함수형 컴포넌트에서 변수를 저장하고 관리하는 데 사용된다. useRef를 사용하면 함수형 컴포넌트 내에서도 값이 유지되며, 이전 값에 접근할 수 있다. 일반적으로 useRef는 DOM 요소에 대한 참조를 생성할 때 사용된다. 그러나 useRef는 단순히 DOM 참조가 아니라, 컴포넌트 전체에서 유지하고 싶은 어떤 값에도 사용할 수 있다. useRef는 .current 속성을 사용하여 값에 접근하거나 값을 변경할 수 있다. .current를 통해 접근된 값은 컴포넌트가 리렌더링되어도 변경되지 않는다. React에서 useRef는 크게 두가지 용도로 활용된다. 렌더링 시 초기화 되지 않고 유지되는 조작 가능한 변수 값을 선언할 경우 일반 JavaS.. 2023. 9. 21. [React] CSS 적용방법 (inline, CSS 파일, 모듈형 CSS 파일) 3가지 CSS를 적용하는 방법 3가지 인라인 (inline) styling 적용 Css styling 작성 후 Component에서 css파일 import css-module 사용 1. 인라인 styling (1) return문 안에서 인라인 스타일을 지정하여 css를 적용시켜준 예이다. 인라인 styling (2) 2. CSS 활용 ' ' 홀 따옴표 대신해서 " " 쌍 따옴표를 사용해도 정상적으로 작동된다. 인라인 Styling의 장점 CSS파일을 작성할 필요가 없다. 자바 스크립트 로직을 css파일에 먹일 수 있다. 단점 인라인 스타일로 작성하다 보니 태그에 스타일이 남으며 가독성이 떨어지고, 유동적인 조작이 힘들다. CSS파일의 장점 CSS의 개발 형식을 그대로 사용이 가능하다. 단점 파일 재사용 시 js.. 2023. 9. 21. [React] Prop 프로퍼티 사용하기 Prop 이란? properties의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (단방향 데이터 흐름) 프로퍼티는 수정할 수 없다는 특징이 있다. 자식입장에선 읽기 전용인 데이터이다. 프로퍼티에 문자열을 전달할 때는 큰따옴표 (" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용한다. Ex1) 기본적인 Prop src 아래에 component 폴더를 만들어 Comp1.js를 생성후 함수를 만들었다. 이 컴포넌트는 val1이라는 속성(props)을 받아서 해당 속성을 사용하여 "Hello {val1}"을 렌더링한다. 이후 export default Comp1로 외부에서도 사용할 수 있게 만들어 Comp1 컴포넌트를 내보낸다. 기본적인 Prop이 실행된 것을 볼 수 있.. 2023. 9. 20. [jQuery] Ajax에서 serialize()로 form 데이터 모두 넘기기 HTML 삽입 미리보기할 수 없는 소스 JSP 위 jsp의 form 태그안에 있는 데이터들을 ajax에서 한번에 넘겨줄 것이다. js 원래대로라면 주석과 같이 컨트롤러로 데이터를 넘길때, 하나하나 지정해주어야하지만, serialize()를 사용하면 데이터들이 name에 준 이름으로 한번에 넘어간다. Send 버튼을 누르면 데이터들이 알아서 직렬화되서 이름에 맞게 넘길 수 있다. DTO와 컨트롤러 CardFormBean 객체를 생성해서 컨트롤러에서 바로 찍어봐도 매개변수가 같으면 값이 찍히는걸 확인할 수 있다. 2023. 9. 13. [jQuery] RestApi 사용해서 Ajax 데이터 뽑아내기 DB데이터에 저장된 데이터 뽑기 컨트롤러 DB에 저장된 데이터들을 조회하여 컨트롤러에서 List에 담긴 데이터들을 Ajax로 return 시키는 것이다. HTML 삽입 미리보기할 수 없는 소스 $(v).each(function(index, x) { ... });: 이 부분은 서버에서 받은 데이터(v)를 순회하면서 각 항목을 처리한다. $(v)는 받은 데이터를 jQuery 객체로 변환한다. .each() 함수를 사용하여 데이터를 순회하며 각 객체(x)에 대한 처리를 수행한다. *아래에서 자세히 예제들어 설명 내부 순회($(Object.keys(x)).each(function(index, xx) { ... })): 각 객체(x)의 속성을 순회하면서 테이블의 헤더()와 데이터()를 생성한다. Object.ke.. 2023. 9. 13. [jQuery] JSON 데이터 띄우기 (prop, each, attr) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON 다른 jsp 파일을 만들어 JSON 객체로 데이터를 넣어주었다. ajax 함수를 생성해서 url로 JSON 객체 지정했던 걸 넣어주고, 하나씩 체크될 때마다 ajax를 실행시켜줄것이다. 결과화면 개발자 모드로 가서 콘솔을 확인해 보았더니 이렇게 데이터가 찍혀있는걸 확인해볼 수 있다. HTML 삽입 미리보기할 수 없는 소스 이렇게 박아 넣어주면 된다. 하나더 연습해보려고한다. jp1Ajax.jsp HTML 삽입 미리보기할 수 없는 소스 jsp 파일에 JSON 객체를 생성해주었다. view (html과 jQuery) view 페이지가 열리면 이렇게 select 박스가 뜨게되면서 웹 페이지 로딩 후 jQuery가 실행되도록.. 2023. 9. 7. [jQuery] prop이용해서 checkbox 전체 체크 선택 및 해제 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 .is(':checked') 체크 박스가 체크되었는지 확인하는 요소이다. .prop('checked', !checked) 이전에 확인한 checked 변수의 반대 값을 사용하여 모든 체크박스의 체크 상태를 변경한다. 즉, 만약 "전체 선택" 체크박스가 체크되어 있다면, 모든 체크박스가 체크 해제되고, 그 반대의 경우에는 모든 체크박스가 체크된다. 만약 Click1 의 버튼만 활성화 하고싶다면 HTML 삽입 미리보기할 수 없는 소스 .eq(0) 와 같이 위 코드에 한줄만 추가해주면 된다. 2023. 9. 7. [jQuery] Click시 만들어 놓은 CSS 스타일 넣어주기 보호되어 있는 글 입니다. 2023. 9. 7. [jQuery] 입력 문자열 제한 keyup( ) 과 slice( ) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $('textarea').keyup(function(){ ... }); textarea 요소에서 키보드 이벤트(keyup)를 감지하고 그에 따른 동작을 정의한다. keydown : 키보드가 눌러지는 순간 발생 keypress : 글자가 입력될때 발생 keyup : 입력후 손가락이 떼어질때 발생 var inputLength = $(this).val().length; 현재 textarea의 값(입력된 텍스트)의 길이를 계산하여 inputLength 변수에 저장한다. slice(0, 10) 이 메서드는 문자열의 일부분을 추출하거나 잘라내는 데 사용된다. 0: 시작 인덱스 10: 종료 인덱스 이 경우 10은 문자열에서 추출하려는 부분.. 2023. 9. 5. 이전 1 2 3 4 5 6 다음
