Frontend/웹 관련 지식

javascript IOC

요즘 일하면서 기능은 다 만들 수 있지만 좋은 코드에 대해 놓쳤던 것 같다 ㅇㅇ아래처럼 IOC나 여러 방법을 이용해 유지보수를 용이하게 할 수 있는데 맨날 쭈우우욱 코드를 작성만 했던 것 같다.문득 생각나서 기록을 하나 남겨본다  dependentFunction은 외부에서 의존성을 주입받은 후에 그 의존성을 실행한다.간단한 함수이지만, 실제로는 함수의 인자로 많은 의존성을 주입받아 사용할 수 있다.의존성 주입을 통해 함수 간의 의존성을 완전히 분리하고, 테스트 용이성과 코드의 재사용성을 높일 수 있을 것 같다.// 의존성 주입을 통해 함수를 실행하는 예시function dependencyFunction() { console.log("의존성이 하는 일");}function dependentFuncti..

Semantic Web (시맨틱 웹)

시맨틱 웹이란? Semantics : 의미 혹은 의미론 Semantic Web: 의미를 이해하는 웹 👉 인터넷의 각종 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계를 의미 정보로 만들어 컴퓨터가 처리할 수 있는 온톨로지(개념 간의 연관 관계) 형태로 표현하고 이를 처리하도록 한 프레임워크 혹은 기술 온톨로지(ontology) 개념간의 연관 관계, 시맨틱 웹의 핵심적인 기술 데이터에 대한 모든 의미를 컴퓨터가 이해하고 처리할 수 있는 방식으로 번역하는 기술, 지식, 수단의 총체 시맨틱 웹 배경 HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존..

SPA, MPA, MVC

SPA : Single Page Application 는 한 개(Single)의 Page로 구성된 Application 웹 어플리케이션 구동에 필요한 정적 리소스를 최초에 한번만 다운로드하고, 새로운 페이지 요청이 있을때만 페이지 갱신에 필요한 데이터만 전달(Virtual DOM)받아서 페이지를 갱신한다. SPA를 CSR(Client Side Rendering) 방식으로 렌더링 첫 요청 시 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정(Virtual DOM)해서 보여주는 방식. 필요한 부분만 갱신하기 때문에 자연스러운 페이지 이동과 UX 제공한다 장점 자연스러운 사용자 경험 (UX) 전체 페이지를 업데이트 할 필요가 없기 때문에 새로고침을 누르지 않는 이상 빠르고 깜빡거림이 없다. Vi..

브라우저 작동 원리/Reflow+Repaint/Virtual dom

브라우저란? 네트워크상의 사이트나 정보(World Wide Web)에 엑세스하는 데 사용되는 컴퓨터 프로그램 World Wide Web? 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. 클라이언트(사용자)와 웹 서버(서버)의 양방향 통신을 지원하고 주고받는 HTML 문서, 파일, 이미지 등을 연동하고 출력을 담당하는 소프트웨어이다. 즉, 컴퓨터에 설치되어 있는 하나의 프로그램으로, 이 프로그램을 다운받고 실행하게 된다면 주소창을 입력할 수 있는 도구가 되는 것이다. 주소창에 URL를 통해 서버의 자원을 요청하면 화면에 띄워줌 크롬, 사파리, 파이어폭스 등이 있다 브라우저 구성 사용자 인터페이스 ..