전체 글 104

이벤트가 발생한 대상의 데이터 값 가져오기 - event.target

자바스크립트는 event.target 속성을 통해 이벤트가 발생한 대상(요소)의 데이터 값을 가져올 수 있다. Event.target (=e.target) 예를 들어, 아래와 같은 코드가 있다고 예를 들어보자 $("a").click(function(e){ console.log(e.target); }); 실행시키면 콘솔창에 a 요소가 출력될 것이다. 즉, 위의 코드를 해석하자면 a요소 클릭 시 이벤트가 발생하며, 그 이벤트가 발생할 때마다 e.target 속성 때문에 이벤트의 대상인 a 요소가 출력된다. 만약, 데이터 속성 값(data-)을 지정한 요소의 이벤트 값은 어떻게 불러올까? e.target을 통해 현재 이벤트가 일어난 요소를 가져오고, 그 요소의 data-id로 저장한 데이터 값은 data 속성..

Javascript 2021.04.19

데이터 속성 값(data-)의 개념과 활용을 알아보자

Data 속성 기술문서에 따르면, HTML5 버전부터 추가된 개념으로, HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정 데이터를 DOM 요소에 저장하기 위함이 목적이다. 브라우저는 해당 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자 스스로 어떠한 요소에 특정 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. 여기서 속성명은 data-value이지만 HTML의 표준 속성인 value와 전혀 관계가 없다. 임의로 만들어진 사용자 지정 데이터이기 때문이다. JavaScript에서 Data 속성 접근하는 방법 dataset 속성을 통해 접근할 수 있다. 이때, 'data-' 속성의 뒷부분을 사용한다. // ES6 let article = document.getEl..

Javascript 2021.04.19

리액트(ReactJS) 컴포넌트 생성하기

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 본문에 들어가기 앞서, 리액트를 사용하지 않는다면 우리는 아래와 같은 코드를 작성한다. 나쁘지 않지만 코드가 100줄, 1000줄이 넘어가면 한눈에 들어오지 않는다. 이를 해결하기 위해 리액트를 사용한다. [목표] 위의 코드를 리액트를 사용하여 전환해보자 첫 번째, 태그를 이름의 사용자 정의 태그로 변경해볼 것이다. 이때, 왼쪽과 같이 return 안에 Subject 이름의 태그로 사용할 html 코드를 넣어주면 된다. 이후, 적용 시 App 컴포넌트에 생성한 Subject 컴포넌트를 넣으면 된다. * 컴포넌트를 생성할 때 해당 컴포넌트는 와 처럼 하나의 최상위 태그로 시작해야 한다. 위의 코드를 간단하게 설명하자..

React 2021.03.15

[취업사냥꾼] 카페24 코딩테스트 후기

카페24 코딩 테스트 관련해서 누군가에게 조금이나마 도움이 되거나 스스로 기록하고 다짐할 겸 정리해보려 한다. 예전부터 가고 싶었던 회사 중의 한 곳이었는데 좋은 기회로 서류 합격하게 되었다. 첫 관문은 넘었지만 코딩 테스트라는 아주 높은 벽(나에게😂)이 있었다. 사실 이력서 쓰랴 포트폴리오 준비하랴 다른 언어 공부하랴 코딩 테스트 준비는 뒷전으로 미뤘었다. 서류 제출 후 정확히 7일이 지나서 유선 상으로 전화가 오고, 메일로 코딩테스트 안내 메일이 날아왔다. 그동안 준비 안했던 것을 정말 뼈저리게 후회하며 연락받은 날 2일 후인 14일 코딩 테스트를 보게 되었다. 제한 시간은 5문제의 30분 그때까지 목표는 구름LEVEL 홈페이지의 정답률 높은 1,2단계 문제를 완벽하게 푸는 것이었다. 역시나 준비를 ..

ETC 2021.03.14

[구름LEVEL] 두부 자르기

문제 풀이 import java.io.*; import java.util.*; class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int k = sc.nextInt(); int cnt = 0; for(int i=k-2; i>1; i--) { cnt++; } System.out.print(cnt); } } 처음에는 서로 다른 경우의 수를 구하라해서 순열이나 조합을 생각해보았다. 그러나, 노트에 적어서 로직을 풀어봤다. (내 풀이방법이 무조건 정답은 아니다.) 입력 예시로 7을 넣었을 때 [5,1,1] [4,2,1] [3,3,1] [2,4,1] 총 4가지 경우의 수가 나왔다. 이 안에서 첫 번째 수..

코딩테스트 2021.03.13

[NewNeek] - 바쁜 사람들과 세상을 연결해주는 뉴스레터 '뉴닉' 구독후기

나는 평소 뉴스를 보는 것을 좋아한다. 그렇다고 TV를 틀어 보지는 않고, 어딘 가 이동할 때 즐겨본다. 시사와 사회문제에 관심이 워낙 많은 편이라 많은 정보를 알고 싶어 하면서도 일반 포탈에 올라오는 뉴스들을 보면 어려운 말들 투성이라 사실 이해가 잘 가지 않을 때도 있다. 그러던 중 엄청 귀여운 고슴도치가 나와서 뉴스를 보여준다는 광고를 보고 호기심에 당장 뉴닉을 구독하기 시작했다. 첫 느낌은 '진짜 술술 읽힌다', '진짜 재밌다'였다. 그래서 뉴닉을 모두에게 알리고 싶어 글을 작성해본다. 그래서 뉴닉이 뭔데? 2018년 여름, 바빠서 도저히 뉴스를 못 읽겠는 친구들이 시작했어요. 시사 이슈를 대화처럼 풀어내는 뉴스레터를 지난 12월에 처음 런칭했고, 바쁜 밀레니얼 세대가 사회와 연결될 수 있는 새로..

ETC 2021.03.13