본문 바로가기

전체 글

 (133)
(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; // 함수 그 ..
(CSS) 태그 id, class로 스타일링 차이 CSS 스타일링 지정할 때 태그에 id 혹은 class를 통해 스타일링 영역을 지정한다. id는 해당 HTML문서에서 한번만 지정이 가능하기에 사용에 주의를 기울여야 한다. 그런데 class도 이름만 다르게 하면 단독으로 사용이 가능하기 때문에 id 와 class를 분명한 차이를 인식하지 못하였다. 그런데 분명한 사용상의 차이를 발견하게 되었다. 이 차이는 CSS의 적용상의 흐름을 따라가다 자연스럽게 발생하는 문제 때문에 생겨나지 않았을까 짐작한다. class를 사용하는 이유는 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서이다. 그런데 한꺼번에 동일한 CSS를 적용하다 보니 개별 요소를 배타적으로 표현해야 하는 이슈가 있었을 것이다. 그러다보니 class의 분류외에 id라는 선택자를 사용해서 ..

티스토리툴바