React

오늘날 우리가 사용하는 사이트에는 보이는 것(UI: User Interface)과 할 수 있는것 (UX: User Experience)이 많습니다. 뿐만 아니라 문서 작성, 쇼핑, SNS, 게임 들의 기능을 웹 브라우저에서 이용할 수 있습니다. 이처럼 사용자가 별도의

Sass의 뜻은 Syntacically Awesome Style Sheets, 즉 문법적으로 엄청난 스타일 시트라는 의미입니다. 그 정도로 기존 CSS 파일에서 겪었던 불편한 부분들이 Sass를 사용하며 해결할 수 있습니다.Sass를 작성하는 문법은 두 가지로 나위어

Route는 ‘경로' 라는 의미를 담고 있고, Routing은 ‘경로를 찾는 행위', Router는 Routing을 해주는 ‘도구’라고 할 수 있습니다. 웹 프론트엔드에서 Routing은 다른경로(url 주소)에 따라 다은 view(화면)를 보여주는 것을 의미합니다.기

함수 컴포넌트에서만 사용이 가능합니다hook의 이름은 반드시 use 로 시작합니다내장 hook이 존재합니다(useState, useEffect)커스텀 훅이 사용가능하다사용규칙hookd은 함수 컴포넌트 혹은 커스첨 훅안에서만 호출할 수 있다훅은 함수 컴포넌트 내의 최상위

전개 구문(Spread Syntax)sms EXMAS Script6(2015)에서 새로추가된 문법으로, 간단하게 이 문법은 분법 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해준다.전개 연산자는 배열 또는 객체를 하나하나 넘기는 용도로 사용된다.push를 이용할 때

위의 코드를 보면, 버튼을 누르면 숫자가 증가하는 함수를 만들었다. 코드상에서는 한번 클릭할 떄마다 3씩 증가할 것같지만, 실제로 결과값을 보면 1씩 증가하는 것을 확인할 수 있다.그 이유는, 동일한 state를 연속적으로 업데이트 하는 경우, 리액트는 setState

프로그래밍에서는 side Effect 라는 용어가 있습니다. === 부작용, 일상생활에서 접하는 부작용이라는 단어의 어감은 다소 부정적입니다. 부작용은 부수효과라고도 표현할 수 있ㅅ브니다. 부수효과란 말을 해석해보면 주요한 효과에 따라서 발생하는 효과라고 할 수 있습

상수 데이터란? 페이지를 구성하다 보면 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해 가져올 필요가 없는 데이터들이 있다. 이런 데이터들을 상수 데이터로 만들어 UI를 구성할 수 있습니다. 즉 상수 데이터란 이름 그대로 변하ㅏ지 않는 정적인 데이

모든 웹사이트를 방문해서 로그인 페이지를 들어가보면 거의 다 위의 사진같은 형식으로 되어있을 것이다. 물론 위치나, 디자인 등등은 각각의 웹페이지의 특성과 스타일에 맞게 다르겟지만, 기본적으로 두개의 입력값을 받을 <input> 창이 있을것이다. 이 입력창에는 각

특정정보가 필요할 때 클라이언트는 서버에 HTTP 통신으로 요청(request)을 보내고, 정보를 응답(response)을 받을 수 있습니다. 이때 사용되는 메서드가 fetch 메서드입니다. 클라이언트는 fetch 메서드로 서버로 데이터를 요청해서 받을 수도 있고(re

Css-in-Js는 자바스크립트 파일 안에서 css를 작성할 수 있는 방법입니다.Css-in-Js는 js파일 안에서 css 코드를 작성하기 때문에 css의 변수와 함수를 그대로 사용할 수 있습니다. 그리고 css 클래스면을 해시 값으로 자동으로 생성하여 클래스 이름 작