본문 바로가기

Development47

[21.08.06] 웹의 성능 성능이 좋다는 건 웹 애플리케이션(이하 웹 앱) 구현에 어느 정도 익숙해지는 단계가 되면, 언젠가는 맞닥뜨려야 할 산이 있다. 바로 성능이다. 개발자의 관점에서 성능이 당최 무엇을 의미하는지는 몰라도, 누구든 성능이 좋은 앱을 그렇지 않은 앱보다 선호할 것이다. 그렇다면 여기서 말하는 성능이란 과연 무엇일까? 사전적으로 성능은 '기계 따위가 지닌 성질이나 기능'을 뜻한다. 언뜻 봐도 포괄적이다. 이해를 돕기 위해 웹 앱의 맥락에서 성능이라 칭할 만한 요소 몇 가지를 추려 보자. 콘텐츠를 받아오는 이벤트 혹은 그에 따른 서버의 응답이 안정적으로 실행되는가? 사용자의 이목을 끌 수 있는 콘텐츠가 충분히 렌더링 되는가? 콘텐츠를 받아오는 중이거나 받아온 후에도 여전히 사용자와 상호 작용이 가능한가? 앱 조작이.. 2024. 1. 8.
[21.06.14] Prototype, 그리고 Class JS에서 프로토타입이란, 객체의 특성을 다른 객체로 상속하는 것을 가능하게 하는 메커니즘이다. (엄밀히 말하자면 '상속'이라는 단어는 적절치 않을 수 있다. 그 이유는 밑에서 다시 다루어 보겠지만, 일단은 일관된 이해를 돕기 위해 이 표현을 계속 사용하려고 한다.) [[Prototype]] 간단한 예시 코드를 살펴보자. 여기서 Object.create()는 지정된 프로토타입 객체와 연결된 빈 객체를 반환하는 메서드이지만, 여기서는 서로 다른 두 객체를 이어주는 연결 고리 정도로만 생각해도 좋다. const obj = { a: 2, }; const anotherObj = Object.create(obj); console.log(anotherObj); // {} console.log(anotherObj.a).. 2024. 1. 8.
[21.05.24] Iteration Protocol ES6가 출현하면서 여러 문법뿐만 아니라 Iteration Protocol이라는 규칙이 추가되었다. 이것은 JS 자체의 독자적인 특징이라기보다는 여러 언어에서 반복 동작을 수행하기 위해 정의하는 방법에 가깝다. 다만 이번 아티클에서는 JS에 한정하여 해당 규칙을 다루어보고자 한다. Table Of Contents Iteration Protocol이 필요한 이유 JS에서 Iteration Protocol을 정의하는 방식 Why? 프로그래밍을 하다 보면, 어떤 구조/객체의 내부에서 반복 동작을 수행하고 싶을 때가 있다. 이때 사용할 수 있는 방법이 for..of문과 spread operator인데, 이 문법을 사용하기 위한 전제가 바로 Iteration Protocol이다. 현재까지 확인된 바로는, yiel.. 2024. 1. 8.
[21.05.15] React로 생각하기 리액트로 생각하기 제목이 약간은 어색해 보인다. '리액트에 대해서 생각하기'가 더 자연스러울 것 같은데 리액트로 생각하자는 말은 어떤 의미일까? 최근에 리액트를 공부하며 그 방대한 생태계에서 끊임없이 헤매는 중이지만, 그나마 알게 된 사실이 있다면 이것은 그저 '자바스크립트 앱의 구조화를 돕기 위한 도구'라는 점이다. 도구를 잘 사용하기 위해서는 도구의 철학을 이해하는 것 못지않게 시의적절하게 사용할 수 있는 방법에도 초점을 맞추어야 한다고 생각한다. 그래서 좀 더 리액트의 관점으로 프로그래밍 방법론을 바라보고자 위와 같은 워딩을 제목으로 선정하게 되었다. 리액트를 이해하기 A JavaScript library for building user interfaces 리액트 공식문서 초기 화면에서 확인할 수 .. 2024. 1. 8.