cascade는 계단이 있는 폭포를 의미한다. CSS에서는 규칙을 순서에 따라 계단식으로 합치는 것을 cascade라고 한다. 여러개의 규칙이 적용될 때, 순서에 따라 합쳐진다.cascade를 할 때에는 가장 핵심적인 아래 세가지 요소를 가지고 순서를 정한다.스타일 시
시맨틱 태그(semantic tag\_\_semantic: 의미론적인)란 HTML에서 의미를 가지는 태그를 뜻한다. 이름만 의미를 가지고 있을 뿐, 성질은 div와 똑같다. 그럼 이러한 시맨틱 태그에는 어떤 것들이 있을까? 가장 대표적인 몇가지만 정리하겠다.개발을 하면
CSS에서 제공하는 position 속성은 웹 페이지 상에서 요소들을 배치하는 방법을 지정한다. 기본적으로 position 속성을 지정하고, top, bottom, left, right 속성 값으로 최종 배치할 자리를 결정한다.position 속성의 종류들과, 각 특징
JS의 변수 선언 방법 JS에는 변수를 선언하는 방법이 대표적으로 세가지가 있다. 원래는 var로 변수를 선언했지만, ES6 문법에서 var의 문제점을 보완하기 위해 let과 const가 등장하였다. 세가지 변수 선언 방법의 차이점을 중복 선언 허용, 스코프, 호이스
JS의 데이터 타입은 기본적으로 원시값과 참조값으로 나뉜다.원시값 : Number, String, Boolean, Null, Undefined참조값 : Object, Symbol원시값의 경우 복사해서 할당할 때 각각 다른 메모리에 할당되므로 원래의 값과 복사된 값이 서
JS에서 이벤트를 걸어주면, 브라우저에서 어떤 동작을 했을 때 이벤트를 감지하고 이벤트를 발생시킨다. 브라우저에서 이벤트를 감지하는 방식인 이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임을 정리해보고자 한다.이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전파되
HTTP란 HyperText Transfer Protocol의 약자로, 뜻 그대로 HyperText를 통신하기 위한 규약이다. 웹 브라우저와 서버 사이에 통신을 하기 위해 정해놓은 약속이라고 이해하면 된다.이 HTTP에 보안성을 더한 것이 HTTPS이다.HTTP 메소드
특정작업을 시작하고 마무리 되기 전에 다음 코드로 넘어간 후, 나중에 콜백이 실행되는 것을 비동기 실행이라고 한다. 반면 한 번 시작한 작업을 모두 처리하고 난 후 다음 코드로 넘어가는 것은 동기 실행이라고 한다. 예를 들어 다음과 같은 코드가 있을 때, 콘솔에는 'S
Virtual DOM은 리액트 사용의 장점 중 하나로 알려져있다. Virtual DOM이 무엇인지, 왜 Virtual DOM이 장점으로 작용하는 지 정리해본다.Virtual DOM에 대해 알아보기 전 DOM에 대해 알아보자.DOM(Document Object Model
리액트로 개발을 하면서, 위와 같은 경고 메시지를 만날 수 있다.보통 배열 데이터의 요소를 map 함수를 통해 렌더링할 때, key 프로퍼티를 지정해주지 않았을 때 나타난다.사실 지금까지는 크게 신경쓰지 않고 개발을 해왔던 터라, 이번 기회에 왜 이러한 경고가 나타나고
리액트 컴포넌트에는 생명주기(Life Cycle)이라는 것이 존재한다. 한 컴포넌트의 수명은 화면에 렌더링 되기 이전 ~ 화면에서 사라질 때 이다.컴포넌트를 처음으로 렌더링 할 때, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하고 싶을 경우, 생명주기 메소드, Li
웹 페이지 렌더링 방식에는 대표적으로 CSR, SSR, SSG 세가지가 있다.각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 조사해본다.웹 브라우저에서 자바스크립트로 HTML을 만드는 방식이다.리액트로 할 수 있는 가장 기본적인 방식의 렌더링이며, 자바스크립트로
코드잇 프론트엔지니어 부트캠프 '스프린트'에서 2~3월 약 3주간의 첫 프로젝트를 마무리하고, 프로젝트 과정을 회고해보고자 한다.
Taskify 배포 링크일정을 관리해주는 플랫폼이다. Trello와 거의 유사한 기능과 UI를 가지고 있다.로그인을 통해 계정을 생성 후, 일정을 관리하는 대시보드를 만들 수 있다.프로젝트 별로 대시보드를 만들고, 그 안에 일정 카드들을 생성하여 간편하고 직관적으로 일
정보처리기사 시험도 끝났겠다.. 코드잇 교육 과정도 끝났겠다..(마지막 프로젝트 빼고) Part3 멘토님이 입이 닳으시도록 강조하셨던 개인 프로젝트를 진행해보기로 했다. 내가 진짜 재미있어하는 주제로 진행해보고 싶어서 정한 주제는 바로바로... * 무도 짤을 찾을
기획 당시 쓰고자 했던 기술 스택을 다시 정리해보자면 아래와 같다.기본Next.jsTypeScript코드 스타일링prettierESLint디자인Tailwind CSSstorybookapi & 데이터 상태관리Axiosfirebase카카오톡 공유 APIreact-query