프론트엔드 23

[스터디 with 실전 리액트 프로그래밍] 1편 - 리액트 시작하기

- 리액트 우선 리액트가 무엇인지 간단히 짚고 넘어가자면, 리액트는 페이스북에서 만든 UI 개발을 위한 자바스크립트 라이브러리다. 웹이 발전하면서 싱글 페이지 어플리케이션에 대한 수요가 증가했고, 리액트를 사용하면 효율적인 싱글 페이지 어플리케이션을 개발할 수 있다. https://www.npmtrends.com/react-vs-vue-vs-angular 프론트엔드에서 가장 유명한 세가지 라이브라리를 비교해 봤을 때, 리액트의 다운로드 수가 압도적으로 많은 것을 알 수 있다. 나도 그래서 자연스럽게 리액트를 시작한 것 같다. 리액트는 api통신이나 클릭과 같은 이벤트로 상탯값이 변경되었을 때, 변경된 값을 자동으로 UI에 업데이트(렌더링) 해준다. 이때, 효과적인 렌더링을 위해서 리액트는 가상돔(Virt..

[스터디 with 실전 리액트 프로그래밍] 0편 - 시작하며

웹 개발을 리액트로 처음 입문해서 지금도 인턴을 하며 리액트를 사용하고 있지만 사실 리액트를 이해하진 못한채 사용해 왔다. 왜 리액트를 사용하는지, 어떻게 리액트가 작동되는지 모른채 리액트를 사용하다 보니, 실력이 느는 느낌이 안들었다. 오류가 나면 구글링을 통해 해결하고 어찌어찌 작동은 하는데 코드는 점점 스파게티코드가 되어갔다. 이렇게 계속하는 것은 밑 빠진 독에 물 붓는 것과 같아서 이참에 책 한권을 사서 공부하기로 결심했다. 리액트뿐만 아니라 redux, nextjs, typescript도 다르고 있어서 마음에 들었다. 오늘은 5월 5일 어린이날, 매일매일 공부해서 5월 안에 끝내보자. 성장하는 개발자가 되자.

자바스크립트로 DOM 조작하기

자바스크립트로 할 수 있는 것 중 하나가 DOM을 조작하는 것이다. DOM을 조작하기 앞서, 우선 DOM이 무엇인지 간단히 알아보자. DOM 이란 Document Object Model (DOM) - Web APIs | MDN The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or X developer.mozilla...