Frontend
자바스크립트 null, undefined, NaN의 차이
null - 다른 참조 변수에 대한 주소 값이 없는 것 - 객체의 속성 값이 존재하지 않거나, 함수의 매개변수를 초기화할 때 사용 - undefined에 비해 메모리 용량 많이 차지 undefined - 값이 할당되지 않은 상태 - null에 비해 메모리 용량 적게 차지 NaN - Number 타입 - Not a Number의 약자로 숫자가 아닌 값을 의미 - 숫자가 아닌 문자열 값을 숫자로 변환하여 계산할 때 일종의 오류 값으로 사용 null, undefined, NaN의 공통점 자바스크립트 조건식에서 false 값으로 평가
크롬 브라우저에서 자바스크립트 디버깅 하는 법
F12 버튼을 눌러 크롬 개발자 도구에 진입합니다. 소스 탭 메뉴를 누른 후에 디버깅하고 싶은 자바스크립트 파일을 찾습니다. 해당 파일을 클릭 후에 함수 왼쪽을 클릭하여 브레이크 포인트를 지정합니다. 지정한 자바스크립트 함수가 실행될 수 있도록 이벤트를 발생시킵니다. 브레이크 포인트가 걸렸으면 디버깅 모드를 이용할 수 있습니다. 디버깅 모드 다음 함수 호출(Step Over) - 한 줄씩 순차 실행 다음 함수 호출(Step Into) - 해당 시점에 함수 안에 들어가 내부 함수를 탐색합니다. 현재 함수에서 벗어나기 - 현재 함수에서 상위 함수로 빠져나옵니다.
Virtual DOM
DOM(Document Object Model) 객체로 문서 구조를 표현하는 방법(XML, HTML 등으로 작성) Virtual DOM 리액트의 성능을 향상시키기 위해 고안된 개념 메모리 상에 존재하는 가상의 DOM 브라우저 상에 실제 DOM을 직접 조작하는 것보다 더욱 빠르게 렌더링 가능 Virtual DOM은 실제 DOM과 비슷한 구조를 가지고 있으며, 리액트의 컴포넌트가 렌더링될 때마다 Virtual DOM을 업데이트합니다. 이때, Virtual DOM을 업데이트하는 것은 실제 DOM을 조작하는 것보다 훨씬 빠르며, Virtual DOM을 업데이트할 때마다 리액트는 변경된 부분만 실제 DOM에 반영합니다. Virtual DOM의 장점 효율적인 렌더링: Virtual DOM은 변경된 부분만 실제 DO..
제이쿼리 - 마우스 관련 이벤트, css 속성
제이쿼리 - 마우스 관련 이벤트 mouseenter - 마우스 커서가 특정 부분에 올라간 상태 mouseleave - 마우스 커서가 특정 부분을 벗어난 상태 hover - 커서가 올라갔다가 벗어난 상태 - mouseenter + mouseleave css 속성 overflow - 요소 내에 컨텐츠가 초과하는 것을 설정 - 종류 : auto, visible, hidden, scroll transform - translate : x축과 y축으로 지정한 값만큼 이동 translate(x, y) - scale : 요소의 크기를 변경 scale(좌우, 상하) - rotate : 요소를 회전 rotate(회전) - skew : 요소를 왜곡시킴 skew(x, y)
제이쿼리 함수 - 이벤트 추가
클릭 이벤트 1. .click 사용 $("클릭 요소").click(function() { $("this").css("font-weight", "bold"); // 여기서 this는 클릭 요소와 동일 }); 2. .on 사용 인자가 2개일 때 $("대상 요소").on("이벤트", function(){ $(this).css("font-weight", "bold"); // 여기서 this는 .hideReply }); 예시 $(".hideReply").on("click", function(){ $(this).css("font-weight", "bold"); // .hideReply 요소를 클릭했을 경우, // hideReply 클래스에 폰트를 진하게 적용 }); 인자가 3개일 때 $("범위 제한").on("이벤..
제이쿼리 함수 - 요소 찾기
parent() - 부모들을 호출 eq() - index로 호출 ex) $(this).parent().eq(3); - 3번째 상위의 parent 요소 선택 closest() - 가장 가까운 부모 선택 siblings() - 형제 요소들을 호출 next() - 바로 옆에 있는 형제만 선택 children() - 직계 자식만 선택 find() - 자식 요소 검색
JSP - 파라미터 전송 방식(POST)
이전에 배웠던 GET 방식이 검색이나 조회를 할 때 쓰인다면, POST 방식은 게시판 글 작성, 회원가입, 로그인 등 변경 및 수정을 할 때 사용한다. - POST 방식으로 파라미터를 전송하면 body에 정보를 실어서 보냄 - POST 방식은 용량에 제한이 없음 - POST 방식은 form 태그의 method="post"를 통해서 전송됨 - form 태그의 method="post"의 기본 enctype 설정은 enctype="application/x-www-urldecoded" 이다. application/x-www-urlencoded는 주소 형식으로 데이터를 인코딩해서 정보를 보낸다. - form 태그의 enctype 설정은 method="post"에서만 유효하다. 이름 : 점수 : 전송하기 POST ..
JSP - 파라미터 전송 방식(GET)
GET : 기본 파라미터 전송 방식 기본적으로 클라이언트가 서버에 접속하면 파라미터 전송 방식은 GET 방식이다. 주소줄에 파라미터를 실어서 보냄 Query String : GET 방식으로 전송되는 파라미터 주소? 다음에 이어지는 값들을 (이름1=값&이름2=값2&이름3=값) Query String이라고 한다. 확인 확인 확인 // 클라이언트가 보낸 요청 파라미터 받기 // request : 요청 정보를 가지고 있는 JSP 내장객체 String name = request.getParameter("name"); // 클라이언트측에서 보낸 파라미터("name")가 존재하지 않을 경우 null이 된다. // GET 방식으로 넘어온 인코딩된 파라미터를 디코딩하지 않으면 WAS에 따라 한글이 깨질 수 있다. nam..