Front-End13 this, $(this) 의 차이 this는 자바스크립트의 문법, $(this) 는 JQuery의 문법으로 명칭은 비슷해 보인다. 그러나 다른 데이터를 보여주는데... 사실 비교적 간단하다.. filterSelect.on("change", function(e) { console.log(this); console.log($(this)); }) 개발자 도구를 살펴보면 추출되는 데이터가 다른것을 알 수 있는데. this의 경우 해당 이벤트가 발생한 요소를 표시해주고 $(this)는 이벤트가 발생하면 발생한 태그를 Object 형태로 감싸서 보여준다는게 다른점이다. this와 같은 데이터를 갖기 위해서는 $(this)[0] 을 사용하면 된다. this === $(this)[0] 2021. 3. 22. <select>태그의 option의 value 값 // 추가 작성내용 굳이 this를 사용하지 않고 다른 방법으로도 value을 얻어왔다.. 만약 select태그를 div부모로 감싸고 있다고 가정하면 2021. 3. 22. display: table , table-cell 프로젝트 제작 겸 특정 사이트를 모방해서 따라만들면서 연습하는 도중에 발견한 CSS이다.. * 특정 사이트에서 만들어져 있는 화면. 클론코딩 중에 위의 표를 만드려고 했을 때 우선 간단하게 따라서만드는 것에 의미를 두고 있기 떄문에 우선적으로 기억난 것은 display: flex 를 이용해서 해당 div박스의 레이아웃을 잡으려고 했다. 그렇지만 개발자도구를 통해 확인해본 결과 display: table이라는 속성을 사용하고 있었다. display: table 속성을 사용하기 위해서는 다음과 같은 방법으로 진행해야한다. 1. 부모 태그가 display: table 을 사용한다. 2. 자식 태그가 display: table-cell 을 사용한다. * 굳이 이 아니라 해당 CSS를 사용하는 이유는 vertic.. 2021. 3. 19. (8) React - useEffect 사용 React 라이브러리의 Hook 중 하나인 useEffect의 사용 예시를 알아보겠습니다. useEffect는 렌더링이 될 때마다 어떤 작업을 진행시키고 싶을 경우 사용하는 Hook입니다. 1. 우선 사용하기 위해서 useState처럼 import를 해주셔야 합니다. 그 후 useEffect 문법 안에 람다식을 사용해서 콘솔로 찍어보겠습니다. 2. 먼저 태그에 값을 입력시킬 경우 렌더링을 하게 설정해두었습니다. 렌더링이 될 때마다 실행되기 때문에 우선적으로 웹페이지를 켜자마자 useEffect에 입력한 내용이 실행이 되고 태그에 값을 넣고 출력하면 다음과 같이 한번 더 렌더링이 되면서 useEffect에 입력한 내용이 실행됩니다. 3. 만약 특정 값이 새로 업데이트 될 때 마다 사용하고 싶다면 아래 보는.. 2020. 8. 14. (7-3) React - 간단한 TodoList 제작 국비과정을 통해 배운 내용을 복습하는 용도로 제작하였습니다. 작성방식이 미숙하여 이미지 캡처로 소개한 점 양해 부탁드리겠습니다.. 소스코드는 깃허브 URL에 공개해 두었습니다. https://github.com/awse2050/ReactTodo 이 예제는 이전 게시물에 이어서 포스팅합니다. 자세한 건 상단 깃허브나, 이전 게시물을 참고해주세요. 이전 파일과 동일하게 이어서 진행합니다. 1. 우선 TodoList 컴포넌트에 배열을 추가하기 위해서 arr변수를 추가합니다. 리스트 배열은 보통 추가하거나 삭제하는 등등 값이 변화가 이루어집니다. 따라서 변화된 값들을 표시하기 위해서는 렌더링이 필요하므로 useState를 사용하여 선언합니다 기본값으로는 빈 배열을 선언했습니다. 2. 이때 발생하는 문제는 배열의.. 2020. 8. 14. (7-2) React - 상위 컴포넌트에서 값 도출하기 국비과정을 통해 배운 내용을 복습하는 용도로 제작하였습니다. 작성방식이 미숙하여 이미지 캡처로 소개한 점 양해 부탁드리겠습니다.. 소스코드는 깃허브 URL에 공개해 두었습니다. https://github.com/awse2050/ReactTodo 이 예제는 이전 게시물에 이어서 포스팅합니다. 자세한건 상단 깃허브나, 이전게시물을 참고해주세요. 안녕하세요. 이전 게시물에서 컴포넌트간의 상하관계를 맺어줬었는데요. 출력하는 컴포넌트에서 직접 결과값을 도출했었습니다.이번에는 출력하는 컴포넌트 즉, 하위 컴포넌트에서 나타나는 값을 상위 컴포넌트에서 값을 도출할 수 있게해보려고합니다... Todo를 만들기 위한 과정이며 배웠던 내용의 양이 좀 많아서 단계별로 쪼개서 포스팅하려합니다. 1. 우선 Component 폴더.. 2020. 7. 27. 이전 1 2 3 다음
