이번에 리액트 기초 공부 시작을 위해 수강하게 된 강의에서 MVC패턴을 사용하여 코드를 짜게 되었다. MVC패턴이 무엇인지, 다른 디자인 패턴의 종류도 궁금했고 본질이 궁금하여 알아보게 되었다. History of MVC 1979년 MVC의 탄생 1979년, Xerox Parc(Palo Alto Research Center) 연구원들은 현재 우리가 누리고 있는 IT 기술의 여러 원형을 개발, 연구 중이었다. 그 중 TrygveReenskaug 트라이브 린스케이지는 다이나북(Dynabook) 팀에서 일하게 되었다. 다이나북은 최초의 태블릿 PC로, 전문 지식의 여부나 남녀노소에 상관없이 모두가 직관적으로 사용할 수 있어야한다는 철학을 내세우고 있었으며 프로그래머들이 쓸 수 있는 CLI가 아닌 일반 사람들의..

2023.09.29 - [JavaScript/TypeScript] - Type의 근원을 알아보고 타입스크립트의 Type System 바라보기 🔼 이전 글을 읽고 읽어보면 더욱 이해가 잘 될 것이다. Top Type, Bottom Type TypeScript에서는 any와 unknown이라는 Top Type(최상위 타입: ⊤)과 never라는 유일한 Bottom type(최하위 타입)이 있다. 이것은 모든 타입들의 상한(Upper bound)과 하한(Lower bound)를 나타낸다. TypeScript의 모든 Type은 계층 구조를 기반으로 자리를 잡고 있다. Supertype, Subtype ✔️ 일반적인 타입을 슈퍼타입Supertype, 특수한 타입을 서브타입Subtype이라 한다. 어떤 타입이 다른..

타입스크립트에서의 타입은 자바스크립트의 타입과 무엇이 다를까? 이전에 배운 객체지향에서의 타입, 타입시스템이 반영되어 있는 걸까? 타입은 프로그래밍에서 어떤 의미인가 🤔 코드보다 이론 위주의 포스팅이 될 것이라 유의바람. 타입 Type 타입을 알기 위해선 추상화 Abstraction에 대한 이해가 선행되어야 한다. 추상화 抽象化 어떤 양상, 세부 사항, 구조를 명확하게 이해하기 위해 특정 절차나 물체를 의도적으로 생략하거나 감춤으로써 복잡도를 극복하는 방법. 복잡성을 다루기 위해 추상화는 두 차원에서 이루어진다. 1. 구체적인 사물들 간의 공통점만 취하고 차이점을 버리는 일반화를 통해 단순하게 만드는 것. 2. 중요한 부분을 강조하기 위해 불필요한 세부 사항을 제거함으로써 단순하게 만드는 것. ➡️ 이 ..

DNS는 "DNS 서버에게 IP주소를 받아온다"로 퉁쳐지는 경우가 많다. 이전에 공부를 했으나 네트워크의 경우 직접 사용하지 않으면 휘발되기 때문에 복습 + 조금 더 깊게 알아보려 한다! What is DNS? DNS, Domain Name System은 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대의 변환을 수행할 수 있도록 하기 위해 개발되었다. 특정 컴퓨터 또는 네트워크로 연결된 임의의 장치의 주소를 찾기 위해, 사람이 이해하기 쉬운 도메인 이름을 숫자로 된 IP주소로 변환해준다. 일반적인 DNS 조회를 할 경우 UDP, Zone Transfer(영역 전송)을 수행할 경우 혹은 512Byte를 초과하는 DNS 패킷을 전송해야 할 경우 TCP를 사용한다. 흔히 전화번호부에 비유되는..

프레임워크와 라이브러리의 차이점은 무엇일까? 개발자들은 흔하게 접할 수 있는 단어다. 다만 그 차이를 명확하게 한 줄로 설명할 수 있는가,,? 나는 못한다. 그래서 정리하기 위해 포스팅을 해본다! Framework와 Library 프레임워크는 다양한 라이브러리의 모음이라고 대답하는 경우가 많다. 하지만 이 정의는 전적으로 사실이라 할 수 없다. 정확한 구분을 위해선 "누가 누구를 호출하는가?" caller/callee를 정의해야 한다. Framwork 🖼️ 프레임워크는 사용자가 사용자 지정 애플리케이션을 만들기 위해 작성하는 개방형, 또는 구현되지 않은 함수 또는 객체를 정의한다. 프레임워크는 그 자체로 애플리케이션이기 때문에 범위가 더 넓고 사용자의 필요에 따라 사용자 애플리케이션을 만드는 데 필요한 ..

이전에 공부했던 키워드이지만 명확하게 한마디로 정의할 수 없어서 복습을 위해 다시 공부해본다! Programming Paradigms 프로그래밍 패러다임 Paradigm은 어떤 문제를 해결하거나 어떤 작업을 수행하는 방법 어떻게 프로그래밍을 할 것인가? Programming Paradigm은 특정 프로그래밍 언어를 사용하여 문제를 해결하는 접근 방식, 또는 특정 접근 방식에 따라 사용할 수 있는 도구와 기술을 사용하여 문제를 해결하는 방법이다. 프로그래밍 언어는 알려진 것이 많지만 모두 구현할 때 몇 가지의 전략을 따르는데, 이 방법론/전략이 패러다임이다. 프로그래머에게 프로그래밍 관점을 갖게 하고 코드를 어떻게 작성할지 결정하는 역할을 한다. 새로운 프로그래밍 패러다임을 통해서 새로운 방식으로 생각하는..

아무리 JavaScript 파일을 빠르게 들고온대도 서버에서 리소스를 가져오는 시간은 어쩔 수 없다. 로딩이 길어질수록 UX는 부정적으로 될 것이고 이탈자도 생길 것이다. 그리하여.. Weather API로 받아오는 시간이 꽤 걸리는 것 같아 로딩 스피너를 추가하게 되었다! 하지만 최선으로 구현했는지에 대해 의문이 남았다. Optimistic UI, React Query를 공부하면서 어떤 식으로 개선하는 게 효과적일지 생각해보아야겠다. 로딩스피너 테스트 영상 Roading Spinner 웹사이트/앱을 사용하는 동안 우리 모두가 직면할 수 있는 일반적인 상황은 진행 상태, 혹은 무언가가 로드될 때까지 기다리는 것이다. 이런 상황 중에 가장 간단한 해결책은 Loader나 Spinner를 사용하여 백그라운드에..

이전에 배운 preload, preconnect, prefetch로 리소스 우선순위를 변경하는 것을 배웠는데 next.js에서 이걸 어떻게 차용했고 어떤 효과를 이루어 냈는지를 알아볼 것이다. 우선 next.js에 대해서 먼저 알아보자. Next.js 란? The React Framework for the Web 빠른 웹 애플리케이션을 만들 수 있는 빌딩 블록을 제공하는 유연한 React 프레임워크이다. React 구성요소를 사용하여 UI를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행한다. 내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성하여 구성에 시간을 낭비하는 대신 애플리케이션 구축에 집중할 수 있게 해준다. 주요 특징 Next..

CSS 렌더링 방식과 선언 순서를 공부하고나서 코드를 보니 클래스명 정의에 대해 모호함을 느꼈다. 프로젝트에서 시멘틱 태그로 선언을 못했다. 로컬에 설치되는 거라 SEO가 필요없고, 단일페이지라 일반적인 웹구조를 갖고 있지 않아서 더욱 고민이었다. BEM을 중심으로 CSS에서 확보해야할 가독성에 대해 알아보자. Computer Sciene에는 두 가지 어려운 문제가 있다. 캐시 무효화(cache invalidation)와 이름 붙이기 - Phil Karlton CSS 방법론 소규모 사이트에서는 스타일을 구성하는 방식이 일반적으로 문제가 되지 않는다. 하지만 프로젝트가 업데이트 될수록 코드의 복잡도가 상승되면서 세 가지 측면의 효율성이 중요해진다. 코드를 작성하는 데에 걸리는 시간, 필요한 코드의 양, 브..

HTML 파일 아래 ✶ 스크립트를 비동기적으로 로드하도록 지정한다. ✶ 스크립트를 불러오는 과정에서 DOM 렌더를 차단하지 않도록 보장한다. ✶ 오직 파일을 불러오는 것만 병렬적으로 실행한다는 것이 중요. ✶ 실행되는 시점은 다운로드가 완료되는 순서에 따라 다를 수 있으므로 스크립트 간의 의존성이 있는 경우 조심해야 된다. ✶ 파일의 로딩을 마치게 되면 즉시 DOM 렌더를 멈추고 async 방식으로 불러온 스크립트 파일의 해석을 시작한다. ✶ 실행 순서가 보장되지 않음. ✶ 독립적으로 동작하는 스크립트 파일에 사용된다. ✶ DOMContentLoaded 이벤트 콜백으로 load를 보장할 수 없음. ⭕️ async 스크립트는 DOM에 직접 접근하지 않거나, 다른 스크립트에 의존적이지 않은 스크립트들을 독립..