HTML&CSS&Javascript 📚53 [CSS-in-JS] Styled Component의 개념 및 사용법 1) CSS in JS 복습 CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다. 기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌었습니다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹개발의 패러다임이 바뀌고 있습니다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 '컴포넌트 기반 개발 방법'이 주류가 되고 있습니다. 따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HT.. 2023. 2. 14. SPA(Single Page Application)의 개념과 장단점 1) SPA의 등장 배경 과거의 웹사이트에서는 사용자가 웹 사이트를 방문할 때 웹 브라우저는 서버로 부터 HTML 전체 페이지를 요청받아와야 했습니다. 현재 페이지와 중복되는 부분이 존재함에도 불구하고, 전체 페이지를 로딩해야 하는 '비효율적인 방법'으로 페이지를 렌더링하고 있었던 것입니다. 이런 비효율적인 통신은 매번 같은 페이지를 로딩하면서 사용자의 대기시간은 늘어나게 되고, 서버의 부담도 클 수 밖에 없습니다. 즉, 서버와 클라이언트의 상호작용이 늘어나면서 자연스럽게 트래픽 과부화로 이어지게 되는 것입니다. 이러한 문제를 해결하기 위해 Javascript의 AJAX 기술이 도입됩니다. JS에서 동적으로 페이지를 요청하고 받아오는 방식으로 애플리케이션이 대체되기 시작하였고, 현재의 SPA의 토대가 마.. 2023. 2. 13. [JS] Array.prototype.map() 함수 알아보기 map() 함수의 역할 const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // Expected output: Array [2, 8, 18, 32] 어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있습니다. 이 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공하는 Array.map() 메소드를 사용하면 됩니다. 이 Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줍니다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행됩니다. 즉, map() 메.. 2023. 2. 13. [CSS] CSS-module / CSS-in-js 에 관하여 저희가 CSS를 작성할 때, 전통적으로는 style.css라는 별도의 파일을 생성하고 HTML의 태그를 사용해서 적용하였습니다. 하지만 웹이 점점 복잡해지고 동적 기능 요구가 증가하면서 HTML과 CSS만으로는 화면의 모든 스타일을 제어할 수 없는 상황에 이르게 됩니다. 이를 해결하기 위한 여러 가지 웹 애플리케이션 스타일 구성 방식이 나타났으며 크게 두 갈래로 나뉘어집니다. CSS-in-JS와 CSS-in-CSS가 그것입니다. 또한 React에서는 컴포넌트(Component) 단위로 아키텍처를 설계하기 때문에 컴포넌트 간의 의존성을 최소화하고, 내부 응집도를 높이는 것이 중요시 되기 때문에 기존의 방법보다 css-module이나 css-in-js로 Javascript를 이용하여 CSS를 만드는 것이 좋.. 2023. 2. 9. [JS] Module의 개념 및 import/export 정리 Javascript Module 이란? 개발을 하면서 애플리케이션의 규모가 커지다보면 파일을 여러 개로 분리해야 하는 시점이 오는데, 이때 분리된 파일 각각을 모듈(Module)이라고 부릅니다. 모듈은 대부분 하나의 Class나 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈은 하나의 파일, 하나의 스크립트라고 할 수 있는데, 모듈에 import/export를 적용하면 다른 모듈을 불러와서 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. 모듈은 크게 두 종류로 나뉩니다. 복수의 함수가 있는 라이브러리 형태의 모듈 개체 하나만 선언되어있는 모듈 대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현됩니다.. 2023. 2. 9. fetch() API 의 사용법 fetch('http://example.com/movies.json') .then((response) => response.json()) .then((data) => console.log(data)); fetch 함수는 XMLHttpRequest 객체보다 최근에 나온, HTTP 요청 전송 기능을 제공하는 Web API다. fetch 함수는 HTTP response 객체를 래핑한 Promise 객체를 반환한다. 따라서 프로미스의 후속 처리 메서드인 then()을 사용하여 resolve한 객체를 전달받을 수 있다. (물론 catch, finally도 마찬가지) fetch 함수로 받은 Response 객체에는 HTTP 응답을 나타내는 프로퍼티들이 있다. 그 중 json() 내장 함수가 있는데, response.. 2023. 2. 5. 이전 1 ··· 5 6 7 8 9 다음
