프론트엔드 (108) 썸네일형 리스트형 Declarative Code VS Imperative Code Declarative coding과 Imperative coding은 프로그래밍에 대표적인 두 가지 파라다임인데요. 차이점에 대해서 알아보겠습니다. Declarative 내가 무엇을 원하는지만 말하고 구현방식은 컴퓨터에 맡기는 방식 Imperative 목적과 더불어 목적에 도달하는 세부 단계까지 세세하게 지시하는 방식 앵귤러 콤파일러 저스트 인 타임 VS 어헤드 오브 타임 앵귤러에서 작성된 HTML과 Component (TypeScript), Declarative code, 는 JavaScript로 변환 (compilte)을 거쳐야만 브라우저에 시 인식이 가능합니다. 변환하는 시기에 따란 JIT와 AOT가 있는데요. 그 차이점을 알아보겠습니다. JIT (Just In Time) Compiler 브라우저가 작동할 때 해당코드를 변환 (runtime compilation). 파일 별로 변환하는 방식이고 브라우저가 코드를 변환하기 위해 ㅇ앵귤러 콤파일러를 다운로드하기 때문에 속도가 느리고 용략이 커짐. 로컬 개발환경에 적합. AOT (Ahead Of Time) Compiler 브라우저가 작동하기 전에 작성된 코드를 사전에 변환하는 방식 (build time compliation.. 앵귤러 프로젝트 폴더구조 생성된 앵귤러 프로젝트의 각 파일에 대해서 알아보겠습니다. 생성된 프로젝트 기본구조 앵귤러 씨엘아이를 통해 프로젝트를 생성하면 아래처럼 자동으로 깃과 관련된 파일을 포함한 아래 파일들이 생성됩니다. .editorconfig 코드 편집기 구성파일 EditorConfig. .gitignore 깃 레포에 올릴 때 제외되는 파일 README.md 리드미 파일 angular.json CLI 구성파일 package.json npm dependency 리스트 package-lock.json dependency 버전 이력 src/ 어플리케이션 제작에 필요한 모든 파일 저장 (데이터, assets,...) node_modules/ 모든 npm package 저장 tsconfig.json TypeScript 파일. 어플리.. 앵귤러 - 씨엘아이 앵귤러 씨엘아이는 (커맨드라인 인터페이스)는 앵귤러 어플리케이션을 만들고 관리하는데 권장되는 도구입니다. CLI 설치 npm install -g @angular/cli CLI 업데이트하기 npm uninstall -g @angular/cli npm install -g @angular/cli@latest 글로벌환경에서 업데이트를 하더라도 프로젝트에서 사용하는 버전이 우선적용되기 때문에 기존에 생성해 둔 프로젝트는 따로 업데이트를 해야 합니다. 방법은 해당 프로젝트 파일에서 아래 명령어를 실행하면 됩니다. rm -rf node_modules npm uninstall @angular/cli --force npm install @angular/cli@latest --force npm i --force 비주얼 스.. CSS 컴포넌트 - 토글버튼 HTML과 CSS로 토글 버튼을 만들어보겠습니다. 구현 코드 방법 1 HTML CSS /* toggle */ label { height: 30px; width: 60px; border-radius: 30px; } input { display: none; } input:checked + span { background-color: gray; } input:checked + span::before { left: 30px; } .toggle-circle { height: 100%; width: 100%; display: block; border-radius: 30px; transition: 0.4s ease; border: 1px solid black; position: relative; } .toggle-c.. CSS 컴포넌트 - 카운트다운 CSS animation을 활용해서 카운트다운을 구현해 보겠습니다. 구현 코드 HTML 카운터로 표시될 만큼의 숫자를 추가합니다. 1 2 3 Go CSS 애니메이션에서 delay를 통해 순차적으로 작동하도록 구현합니다. /* count */ .count { height: 50px; width: 50px; position: relative; margin: auto; overflow: hidden; } .count .num { height: 40px; position: absolute; bottom: -5px; left: 50%; transform-origin: bottom; transform: translateX(-50%) rotate(180deg); font-size: 1.5rem; } .count .n.. 데이터 요청 데이터를 요청하는 방법에 대해 알아보겠습니다. 먼저, XML을 객체를 통해 전송하는 방법을 보겠습니다. XML은 화면을 구현하는 HTML을 보완하여 데이터의 저장과 전송을 전담합니다. 일반 문자의 형식으로 데이터를 전송하게 때문에 데이터를 받는 거의 모든 대상이 이를 이해할 수 있어 데이터의 유실 위험이 적은 장점으로 많이 사용되었던 방식입니다. XML 이전에는 애플리케이션에 불러오는 데이터의 변동이 있을 때마다 화면을 다시 로딩해야 했는데요. XML의 사용으로 데이터 관리와 화면 구현의 분리로 데이터가 변동되더라도 화면의 재 로딩이 필요가 없어졌습니다. 또 비동기 방식을 제공하기 때문에 데이터 요청 후 요청이 완료되기를 기다릴 필요 없이 다른 작업을 병행 가능합니다. XMLHttpRequest 작동은 .. 자바스크립트로 주간 / 야간 모드 바꾸기 요즘 많은 웹 애플리케이션 야간, 주간 모드로 바꿀 수 있는 기능을 제공하는데요. HTML, CSS, JS를 사용하여 구현해 보겠습니다. 보편적인 기능이라 따로 도입하는 이유에 대한 별다른 설명은 생략하고 바로 코드를 보도록 하겠습니다 (해당 코드에 집중하기 위해 이해를 위해 필요한 코드만 작성) 구현하기 HTML Custom welcome CSS /* 전역변수 지정 */ :root { --bg-light-alt: rgba(0, 0, 0, 0.4); --font-primary: aliceblue; --font-alt: #000; --bg-primary: transparent; --btn-primary: rgb(255, 92, 92); --btn-secondary: #03dac5; } /* data-the.. 이전 1 ··· 10 11 12 13 14 다음
