이번 글에선 자바스크립트로 개발을하면서 유용하게 사용한 문법에 대해 알아보겠습니다. 여기서 유용하다는 것은 생산성증가, 안정성증가, 가독성증가를 기준입니다. 1. 함수 표현식 자바스크립트는 함수를 선언하는 방식과 표현하는 방식으로 함수를 사용할 수 있습니다. 함수 선언식과 함수표현식의 결과에 대한 차이가 보이시나요? 네, 전혀 보이지 않을 것입니다. 출력한 값도 같고 실행시간도 비슷하기 때문이죠. 하지만 우리는 코드의 안전성을 위해 함수 표현식을 사용해야합니다. 함수의 호출 위치에 따라 그 차이는 명백히 드러납니다. 함수 표현식은 호이스팅이 되지 않고, 함수 선언식은 호이스팅이 가능합니다. 호이스팅이란 : 선언된 변수 또는 함수를 실행가능 범위의 최상단으로 끌어올리는 것 호이스팅은 개발 중 경계해야하는 ..
리액트는 VirtualDom을 사용하여 바뀐 요소들을 브라우저에 표시합니다. 때문에 직접적인 Dom접근은 권장하지 않죠. 리액트에서 사용하는 VirtualDOM에 대해 알아보자 리액트는 직접 DOM에 접근하지 않고 값을 변경해야하는 규칙을 가지고 있습니다. 그렇기 때문에 이런 규칙을 이해해야 올바른 개발을 할 수 있습니다. 이런 코드를 본 적 있을 것입니다. document.ge blog.doyeonism.com 위 글을 보면 알 수 있듯이 리액트는 VirtualDom에서 먼저 변경한 후 Dom의 값을 바꿔줍니다. 때문에 VirtualDom에서 값이 변경됐다는 신호를 받아야만 렌더링이 시작된다고 말할 수 있습니다. 직접적으로 Dom을 조작한다면? - VirtualDom에서 값이 변경됐다는 신호가 없었기 ..
React+Typescript를 이용한 날씨 프로젝트입니다. 지역이름을 적고 '날씨보기' 버튼을 클릭하면 해당지역의 날씨에 맞는 배경화면으로 바뀌는 프로젝트입니다. 프로젝트 시작하기 앞서 데이터를 받아올 수 있는 api가 필요했는데요. https://openweathermap.org/api 위사이트에서 데이터를 받아서 사용했습니다. 저번 프로젝트와 다르게 이번엔 스타일값을 주기 위해 styled-components를 사용했습니다. api를 호출하기 위해 axios를 사용했습니다. npx create-react-app wetherproject --template typescript 로 프로젝트를 진행했으며 assets와 type파일을 집어 넣었습니다. assets는 6가지 배경화면이 들어있으며 pixaba..
사용자들은 대부분의 인터넷 요소들을 브라우저라는 창을 통해 보게 됩니다. 브라우저에 무언가 보이는 건 너무나도 자연스럽기 때문에 그 과정에 대해 궁금해하거나 의심하지 않을 것입니다. 하지만 모든 프론트엔드 개발자들은 브라우저 작동 원리에 대해 알고 있어야합니다. 그래야 사용자가 불편해하지 않을 홈페이지를 만들 수 있기 때문입니다. 지연되는 홈페이지, 느리게 반응하는 홈페이지 등 최적화되지 않은 홈페이지들이 너무 많습니다. 다양한 이유가 있겠지만 DOM을 이해한다면 그런 홈페이지의 문제를 어느정도 이해할 수 있습니다. 브라우저에 그림이 그려지는 과정 1. HTML소스를 DOM트리로 파싱한다. 일반적으로 html안에 내용들을 이용해 트리를 만듭니다. html이라는 태그안에 head와 body라는 자식태그가 ..
