파일을 선택할 수 있는 파일 입력창에서 선택한 이미지를 미리볼 수 있게 해보자.전체적인 코드는 다음과 같다.<input type="file"/>을 사용하면 사용자의 디바이스에 접근하여 사용자의 파일을 선택할 수 있게 해준다.이 때 <input type="fi

axios를 사용할 때, 서버 통신을 위해 해당 서버와 통신할 인스턴스를 만드는 사용되는 옵션들을 알아보자.axios.create라는 메서드를 통해 특정 서버에 대한 인스턴스를 생성할 수 있다.위와 같이 옵션이 설정되어있다고 했을 때 각 옵션에 대하여 살펴보자.base

브라우저에서 응답받을 문서에 대하여 알아서 인식하는데도 불구하고 http 서버에서 응답보낼 문서에 대한 헤더를 설정해줘야하는 이유가 뭘까요?다음 코드를 살펴봅시다.with headerres.wrieHead : 서버에서 클라이언트에게 응답해줄 데이터(body)에 대한 헤

로그인을 구현하기 위한 방법으로는 쿠키와 세션이라는 2가지 방법이 있습니다.로그인을 구현할 때 쿠키와 세션을 모두 사용할 수 있습니다. 둘 다 클라이언트와 서버 간의 인증을 관리하기 위해 사용되며, 보안적인 이슈와 편의성 등의 차이가 있습니다.쿠키는 클라이언트의 브라우

var,let,const는 2가지 맥락에서 차이가 있습니다.소스 코드 평가 과정에서 선언 단계와 초기화 단계의 차이함수 레벨 스코프와 블록 레벨 스코프의 차이var와 let와 const 차이를 설명하기 전에 우선 자바스크립트가 소스 코드를 실행하기 위한 단계를 알아야합

동기와 비동기 개념과 블로킹과 논블로킹의 개념은 서로 다른 개념입니다.동기와 비동기의 차이는 작업 완료 여부에 대하여 신경을 쓰냐,안쓰냐 여부의 차이입니다.a,b,c라는 함수가 차례대로 호출되고 있다고 가정했다고 해봅시다.동기 처리 같은 경우에는 a,b,c가 차례로 실

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됩니다.이를 이벤트 전파라고 하는데요.생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타켓을 중심으로 DOM 트리를 통해 전파됩니다.이벤트 전파 방향에 따라 이벤트 버블

미들웨어와 이를 활용한 리듀서미들웨어(middleware)란 무엇일까요?두 개의 개체 사이에서 원만히 통신할 수 있도록 돕는 역할을 합니다.리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다.즉, 리덕스 미들웨어는

상태 관리 라이브러리를 사용하는 이유

리액트는 순수 함수를 이용하여 UI를 렌더링합니다. 즉 , 컴포넌트를 순수 함수로 구성하려합니다. 그렇다면 순수 함수는 무엇이고 왜 컴포넌트를 순수 함수로 구성하려하는 것일까요? 순수 함수 순수 함수는 동일한 인수를 전달하면 항상 동일한 결과를 반환하는 함수입니다

리액트에서 state에서는 불변성을 유지해야한다는 말은 많이 들어보셨을 것입니다.그렇다면 불변성이라는 성질은 무슨 말이고 이를 유지한다는 것은 어떤 의미일까?불변성이란 불(아닐 불) 변(변할 변)으로써 변하지 않는 성질을 말합니다.그러면 무엇이 변하지 않으면 될까요?할

클로저는 상태를 안전하게 변경하고 유지하기 위해 사용합니다.다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.리액트의 컴포넌트는 내부적으로 클로저를 사용합니다.이는 위에서 언급했듯이 상태를 안전

script태그는 ``태그의 닫는 태그 바로 앞에 위치해줘야합니다. 서버로부터 응답받은 html문서는 렌더링되기 위해 파싱되어야합니다. > 파싱(parsing) 파싱이란 컴퓨터가 해당 문서를 인식하기위해 html문서의 텍스트들을 컴퓨터가 이해 가능한 언어로 변환하는

node.js에서 백엔드 프로그래밍을 하여 서버를 구축할 때 편리한 기능을 사용하기 위해 프레임워크를 사용합니다.그 중에 본인은 express와 koa를 둘 다 사용해보고 사용 경험을 적어보려합니다.결론적으로는 저는 express의 사용 경험이 더 좋았습니다.미들웨어

CSS에서 display 속성은 HTML 요소의 레이아웃을 지정하는 데 사용됩니다. 이 중에서도 inline, block, inline-block display 속성은 가장 많이 사용되는 속성 중 하나입니다. 이들 속성의 차이는 다음과 같습니다.inline텍스트와 같이

DOM과 Virtual DOM 리액트에서는 virtual DOM(가상 돔)이라는 것을 사용한다. 그렇다면 그냥 DOM을 사용하지 않고 왜 따로 가상 돔을 만들어서 사용하는 것인것일까? 그리고 그렇게 가상돔을 사용하면 어떠한 장점들이 있을까? DOM과 Virtual

브라우저 렌더링 과정과 브라우저를 구성하는 주요 요소들을 살펴보겠습니다.브라우저 렌더링 과정은 HTML, CSS, JavaScript 등의 코드를 받아 브라우저 화면에 그리는 일련의 과정입니다. 일반적으로 브라우저 렌더링 과정은 다음과 같은 단계를 거칩니다.HTML 파

HTML에서 h1 태그는 검색 엔진 최적화(SEO)와 관련이 있습니다. h1 태그는 헤딩(heading) 요소로서, 페이지 내에서 가장 중요한 제목을 표시합니다. 이는 검색 엔진이 웹 페이지의 구조와 콘텐츠를 이해하는 데 도움을 줍니다.검색 엔진은 웹 페이지의 구조와

프론트엔드 개발을 할 때 vanilla.js를 사용하여 개발하면 되는데 왜 굳이 react라는 프레임워크를 설치하여 사용할까?react를 사용하는 이유는 다음과 같다.컴포넌트 사용라우팅statevirtual dom반복해서 사용하는 UI를 컴포넌트화하여 효율적으로 관리할

aws 프리티어 서비스는 ec2 서버 이용 시간을 750시간으로 무료제공해준다.그 이후에는 과금이 되기 때문에 무료 제공 시간을 아껴 쓰기 위해 나의 프로젝트 인스턴스를 중지해놓았다.하지만 인스턴스를 다시 시작하려하니 접속이 되지 않았다.😲무엇이 문제인지 하나하나 살