본문 바로가기

전체 글

 (134)
(Javascript 에러) Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' 트위터 클론 코딩 중이다. 게시물은 태그의 후손 선택자 로 열거되어있다. 리액트 onClick 이벤트 핸들러를 활용한 해당 게시물 삭제 기능을 구현하고 있다. 이벤트 핸들러 handleDeleteTweet로 value값 tweet.id를 전달하고 tweet.id의 값과 동일한 id 값을 가진 게시물을 (여기서는 삭제버튼을 클릭한 게시물) 변수 selected에 할당하고 삭제해주는 것이다. 이때 querySelector의 인자로 id를 넣어주었는데 SyntaxError 발생하였다. 해결방법을 찾아보았다. querySelector는 인자값으로 숫자를 받지 않는다고 한다. id는 고유의 값인데 숫자를 고유의 값으로 인식하지 않는다는 이유다. 그래서 id의 값이 숫자로만 이루어져있고 그 id값으로 태그를 선별해..
(CSS) CSS 사용자 속성 과거에는 SaSS, LESS, Stylus와 같은 CSS 전처리기를 통해 CSS 변수를 사용하였다. 그러나 최근들어 CSS 자체에 변수를 설정하고 사용할 수 있는 개념이 추가되어 CSS전처리기 없이도 변수를 사용할 수 있게 되었다. CSS 변수를 지정하는 이유는 반복되는 값의 재사용을 쉽게하기 위함이다. 카카오나 네이버를 보면 사이트의 브랜드를 위해 디자인이나 색상이 통일된 것을 볼 것이다. 루트 요소(:root) 선언 : root 는 CSS에서 가상으로 클래스를 만들어 웹페이지의 문서 구조 트리상에서 루트 요소를 선택하는 것이다. 웹페이지에서 루트는 이기 때문에 : root 는 과 같다. : root 에서 선언된 변수 스코프는 전역이다. 그래서 어디서든 불러와서 사용할 수 있다. 자세히 이야기를 하면 ..
(좋은 코드의 작성을 위해) getLongestElement getLongestElement 문제 문자열을 요소로 갖는 배열을 입력받아 배열에서 가장 긴 문자열을 리턴해야 합니다. 입력 인자 1 : arr string 타입을 요소로 갖는 배열 출력 string 타입을 리턴해야 합니다. 주의 사항 반복문(for, while) 사용은 금지됩니다. 가장 긴 문자열이 중복이 될 경우, 앞 쪽에 있는 요소를 리턴해야 합니다. 빈 배열을 입력받은 경우, 빈 문자열을 리턴해야 합니다. mine function getLongestElement(arr) { if(arr.length !== 0) { return arr.reduce((acc, cur) => { if(acc.length >= cur.length) { return acc; } else { return cur; } }) ..
(React) React에서 map으로 여러개의 엘리먼트 표시하기 React에서 브라우저에 여러개의 태그 엘리먼트를 표시를 할 때 map함수를 사용한다. 아래와 같은 posts 배열이 있고 post를 변수로 받아서 브라우저에 표시해주는 것이다. 방법은 return 안에 map을 사용하는 방법가 아닌 방법이 있다. return 문 안에서 map 메소드를 사용할 수는 없을까요? 사용할 수 있습니다. JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 메소드의 결과를 return문 안에 인라인으로 처리할 수 있습니다. 코드 가독성을 위해 변수로 추출할지 아니면 인라인에 넣을지는 개발자가 판단해야 할 몫입니다. const posts = [ { id: 1, title: "Hello World", content: "Welcome to learning Rea..
(Javascript) 실행 컨텍스트, 어휘 환경, 클로저 클로저함수, 고차함수, 재귀함수들을 공부하다보니 다소 유사한 개념이 반복되고 있다. 동시에 해당 개념의 차이에 대하여 알아보니 자바스크립트의 실행 컨텍스트, 어휘 환경에 대한 개념을 먼저 알아야지 좀 더 정확한 이해가 가능하여 그 부분의 내용을 정리하려고 한다. 참고로 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있기 때문에 JS에서 핵심적인 동작원리라고 할 수 있다. 1. 실행 컨텍스트란 무엇입니까? 우리는 일정한 공간에 코드를 작성한다. 그 공간을 실행 컨텍스트(Execution Context, 이하 EC)라고 한다. EC는 실행 가능한 코드가 실행될 수 있는 환경을 의미한다. 함수가 호출되면 새로운 EC가 생성되고 컨텍스트 스택에 쌓..
[React] 화살표 함수와 return 문 소괄호 처리 JSX 문법에서 return문을 사용할 때 그 뒤에 소괄호를 사용해야 하는 규칙이 있다. (리액트 공식 문서에서는 해당 내용을 확인하지 못하였으나 공식문서에 나오는 예제 코드나 다른 검색 내용들이 그러한 규칙이 있다고 명시한다.) const Features = () => { return ( ); }; 위의 코드에서 return 문 뒤에 소괄호를 적어 주었다. return 문 뒤에 소괄호를 넣는 이유는 어떤 요소를 반환하는지에 대한 가독성을 높이기 위함이라고 한다. 그리고 JSX에서 return 문 뒤에 소괄호를 넣는 용법이 있다. (참고 James Nelson, 2016년 8월 11일, “왜 자바스크립트의 return 문에 괄호를 사용하는가?(Why Use Parenthesis [sic] on JavaS..
(Javascript) 정규표현식(regular expression; regex, 뢔젝스) 정규표현식은 텍스트에서 우리가 원하는 특정한 패턴을 찾을 때 요긴하게 쓰일 수 있다. 특별히 유효성 검사를 할 때 조건문을 써주기 보다 한 줄의 정규표현식으로 판별 함수를 처리할 수 있다. 연습용 사이트 https://regexr.com/5ml92 Group and ranges | 또는 ( ) 그룹 [ ] 문자셋, 괄호안의 어떤 문자든 [^] 부정 문자셋, 괄호안의 어떤 문자가 아닐때 (?:) 찾지만 기억하지는 않음 Quntifiers ? 없거나 있거나(zero or one) * 없거나 있거나 많거나(zero or more) + 하나 또는 많이(one or more) {n} n번 반복 {min,} 최소 {min, max} 최소, 그리고 최대 Boundary-type \b 단어 경계 \B 단어 경계가 아님..
(Javascript) DOM 이벤트 객체 코드 작성 3가지 예 어떤 버튼(btn)이 존재하고, 버튼을 클릭할 때 콘솔에 "버튼이 눌렸습니다!"가 출력되게 만들려고 하는 상황을 가정하고 이벤트 객체를 JS에 구현하는 코드 작성의 사례 3가지를 신속하게 알아보자. 1. on ~ 속성(onclick, onkeyup 등) 사용 btn.onclick = function() { console.log('버튼이 잘 눌려졌습니다!') } 2. addEventListener 속성 사용 btn.addEventListener('click', function()) { console.log('버튼이 잘 눌려졌습니다!') } 3. 함수 선언식 사용 function handler() { console.log('버튼이 눌렸습니다!'); } btn.onclick = handler; // 함수 그 ..

티스토리툴바