시작하며...카드 영역을 hover 했을 때, title 에 글자에 밑줄이 쳐지고 색상이 적용되는 것을 만들고 싶었다. 카드를 클릭하면 해당 게시물로 가는데 사용자 경험성 측면에서 이걸 클릭해야 게시물을 갈 수 있다는 걸 명확하게 알 수 없다고 생각이 들었다. 그래서 카드 영역을 hover 했을 때, title 에 밑줄과 색상을 적용해 보기로 했다! 적용하기참고로 Next.js + Tailwind CSS 이다. group, group-hover 클래스 작성부모 요소를 hover 했을 때, 자식 요소에 스타일을 지정해야 한다. 그러면 이를 아래 코드처럼 작성을 한다. group 은 부모 요소로 적용하고, group-hover 는 자식 요소에 적용하여 hover 를 했을 때 자식 요소에 특정 스타일을 적용할..

시작하며...모달창이 열렸을 때 아래 방식으로 스크롤을 없앨 수 있다.document.body.style.overflow = 'hidden';  그런데 나는 원래 스크롤이 있던 화면에 모달이 열렸다고 스크롤이 사라지고 모달이 닫히면 다시 생기는 게 먼가 살짝 불편했다. 😅그래서 다른 방법으로 해결해 보았다! 기존 모달과 스크롤기존에는 모달창이 열려있으면 스크롤을 마음대로 움직일 수 있는 상황이었다.  스크롤 방지위에 말했다시피 useEffect 를 사용하여 열렸을 때 아래 코드를 적용해서 해결할 수 있다.document.body.style.overflow = 'hidden'; 전역 스타일 수정그런데 다른 방법 찾아보았다!바로 전역 스타일에서 아래 코드를 추가하면 된다. 그러면 페이지 높이가 고정되어 스..

시작하기 앞서현재 모던 리액트 Deep Dive 라는 책으로 스터디를 진행하고 있는데, 책에서 "any 대신 unknown을 사용하자" 라는 내용이 있었다. 사실 지금까지 타입스크립트를 작성하다가 모르겠는 타입은 any 로 지정했었다. 그런데 이 책을 읽고 unknown 이라는 타입을 알게 되고 any 보다는 unknown 을 사용하는 게 더 좋다 하여 해당 내용에 대해 자세히 알아보기 위해 글을 작성하게 되었다. any[타입스크립트 공식문서(한국어) - any] Documentation - Everyday Types언어의 원시 타입들.www.typescriptlang.org간단하게 any 는 모든 타입을 허용한다. 그래서 모든 타입을 허용하여 타입 에러가 발생하지 않는다. any 단점any 는 편해 보..

Q. 질문JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #12) A. 답변현재 상황요즘 채용 공고를 보면 대부분 타입스크립트를 할 수 있는 사람을 우대하는 것을 쉽게 볼 수 있다.그만큼 타입스크립트가 중요하고 대부분의 기업에서 프론트엔드 개발을 할 때 타입스크립트를 채택해 사용하고 있다는 것을 알 수 있다. 타입스크립트 사용 이유그렇다면 자바스크립트 대신 왜 귀찮게 타입스크립트를 사용하는 것일까? 바로 프로그램의 안정성 을 위한 것이다. 자바스크립트는 알다시피 동적 언어라서 고정된 타입 없이 자유롭게 변수를 선언하고 사용할 수 있다.이게 자바스크립트의 장점이 될 수 있지만 타입 오류가 코드를 실행하기 전까지 알 수 없..

Q. 질문 1이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #5) A. 답변1. 이벤트 버블링이벤트 버블링이란 무엇일까?이벤트 버블링이벤트가 발생하면, 같은 타입 이벤트를 가진 부모 핸들러도 동작즉, 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 한다. 버블링 적용이런 코드가 있을 때, content 오늘 할 일 list 자바스크립트 공부 유튜브 시청 저녁 약속  요소를 클릭했을때, 실제 핸들러 이벤트가 동작하는 요소(currentTarget)와 문구를 출력하도록 자바스크립트 코드를 만든다.const content = document.querySelector('#content');const title = docu..

Q. 질문var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요. (코드잇 스프린트 위클리 페이퍼 #4) A. 중복 선언 허용var - 중복 선언 Ovar 은 정상적으로 중복 선언이 가능하다. let - 중복 선언 Xlet 은 중복 선언이 불가능하여 SyntaxError  가 발생한다.const - 중복 선언 Xconst 도 let 과 마찬가지로 중복 선언이 불가능하여 SyntaxError 가 발생한다.추가적으로 const 는 let 과 다르게 재할당 시 TypeError 가 발생한다.A. 스코프함수 스코프함수 안에서 정의된 변수는 해당 함수 내에서만 접근 가능블록 스코프중괄호 {} 로 둘러싸인 블록 내에서만 접근 가능var - 함수 스코프var 은 함수 스코프로..

Q. 질문자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #4) A. 기본 배경자바스크립트에서 기본형 데이터는 불변값이고, 참조형 데이터(객체)는 가변값이다. 불변객체변하지 않는 객체 자바스크립트에서 객체는 가변값인데, 원본 객체가 변하지 말아야 할 상황에 불변 객체가 필요하다. 불변 객체가 필요한 상황student1 객체에서 name 만 수정한 새로운 객체를 만들기 위해student1 객체를 newStudent 에 복사하고, newStudent 의 이름을 변경하고 리턴하였다.결과는 student2 에서 바뀐 이름이 나올 것 같지만, 실제로는 둘 다 Lee 로 변경되었다. 결론위에 코드처럼 객체의 가변성 에 따른..

☘️ 기본 코드 작성하기 absolute 를 적용하기 위해 부모와 자식을 만들어주었다. HTML 코드 CSS 코드 .parent { width: 500px; height: 500px; background-color: aquamarine; position: relative; } .child { width: 30%; height: 30%; background-color: pink; position: absolute; } ☘️ 자식 요소 가운데 배치하기 ❌ top, left 50% 자식 요소를 가운데 배치하려면 어떻게 해야할까? top(또는 bottom) 이랑 left(또는 right) 를 50% 로 하면 될 것 같다. 부모 기준으로 위에서 50%, 왼쪽에서 50% 이니깐 가운데에 배치 될 것 같기 때문이다!..

Q. 질문 1시맨틱 태그를 사용하면 좋은 점을 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변 1시맨틱 태그란?시맨틱(semantic)이라는 단어의 뜻은 '의미의, 의미론적인` 이라는 뜻을 담고 있다.그렇다면 시맨틱 태그란 의미를 가지고 있는 태그라고 이해할 수 있다. 시맨틱 태그 (Semantic Tag)포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그 시맨틱 태그는 기존 HTML의 태그와 기능이 똑같다. 하지만 시맨틱 태그는 단순 태그가 아니라, 태그의 의미를 부여하여 웹사이트의 구조를 쉽게 파악할 수 있게 도와준다. 시맨틱 태그의 종류시맨틱 태그의 종류는 크게 다음과 같다. (이 외에도 다양한 종류가 있음)태그설명문서의 머리말, 상단 ex) 로고, 제목 등을 포함문서의 내..

☘️ 시작하기 앞서 티스토리 블로그는 사용자가 자유롭게 커스텀할 수 있다는 장점이 있다. 그래서 티스토리 블로그의 기본 글씨체 폰트를 본인이 원하는 대로 수정을 해보겠다. ☘️ 폰트 선택하기 먼저 사용할 폰트를 선택해야 한다. 나는 주로 눈누 라는 사이트를 사용하며 프로젝트를 진행할 때에도 주로 눈누에 있는 폰트를 사용한다. 눈누 상업용 무료한글폰트 사이트 noonnu.cc 다양한 폰트들이 있는데 거기서 원하는 폰트를 골라준다. 나는 오뮤 다예쁨체 를 선택하였다. 라이선스 사용하기 앞서, 먼저 이 폰트가 웹 사이트에서 사용할 수 있는지 라이선스를 확인해야 한다. 다행히 이 폰트는 웹 사이트에서 사용 가능한 폰트이다. 웹 폰트 티스토리 블로그에 사용하기 위해 오른쪽에 있는 웹폰트로 사용 안에 있는 내용들을..