프론트엔드/자바스크립트 (34) 썸네일형 리스트형 프로젝트 - 가위 바위 보 도마뱀 스폭 게임 가위, 바위, 보 업데이트 버전 게임이라고 합니다. index.html rock paper scissors and so on CSS @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: space-around; font-family: 'Poppins'; } .card { min-height: 400px; width: 450px; margin: auto; display: flex; flex-dire.. 프로젝트 - 계빨 게임 (Math Sprint) 가장 짧은 시간 안에 주어진 문제의 답이 맞는지 맞추는 게임입니다. math sprint 10 questions best score: '' 40 questions best score: '' 70 questions best score: '' 120 questions best score: '' 1 2 3 Go 1 1 1 1 YOUR TIME '' base time: '' penalty: '' start wrong correct try again CSS @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100.. 연산자 (Operators) 다른 언어와 마찬가지로 자바스크립트도 다양한 연산자를 가집니다. 연산자의 종류 수학연산자 (arithmetic operators) 1. 더하기 addition ( + ) const result = 2 + 3; 더하기 연산자의 경우 문자를 연결하는 기능 (concatenation)도 합니다. 주의할 점은 문자와 숫자를 연결할 경우 결과는 텍스트로 표시됩니다. const result = "one" + " " + "and" + " " + 2; 따라서 문자형태의 숫자와 일반 숫자를 +로 연결하면 연산된 결과가 아닌 결합된 문자의 형태로 반환됩니다. const result = "1" + 2; 2. 빼기 subtraction ( + ) const result = 2 - 3; 3. 곱하기 multiplication .. 모듈 (Module) 프로젝트의 규모가 커지면 코드의 양이 늘어나고 가독성이 떨어지죠. 많은 언어에서 라이브러리, 패키지 등 다양한 이름으로 같은 기능을 하는 코드들을 분산해서 저장하고 필요할 때 불러와 쓰는 방식으로 이러한 문제를 해결하는데, 자바스크립트에서도 모듈화를 통해 효율적으로 코드를 작성할 수 있습니다. 모듈은 작성된 코드를 저장하는 별개의 자바스크립트 코드인데요. 어떻게 사용하는지 알아보겠습니다. 사용방법 index.html 파일에서 불러오는 메인스크립트에 type="module"을 추가합니다. 이후 모듈 자바스크립트 파일에서 내보내기 (export)와 이를 사용하고자 하는 자바스크립트 파일 (여기서는 index.js)에서 가져오기 (import)를 통해 사용합니다. module.js function hiWorl.. 웹팩 (webpack) 개발환경의 발전에 따라 JavaScript로 주기적으로 새로운 기술을 도입하고 있는데요. 증가하는 애플리케이션의 규모에 발맞추기 위해 다른 언어들처럼 module방식의 도입하였습니다. 이는 파일 사이즈의 증가로 이어졌는데요. 이를 효과적으로 관리하기 위해 webpack이 등장하였습니다. webpack은 정적모듈번들러 (static module bundler)인데요. webpack은 모듈 간에 의존관계를 파악하여 의존성 지도 (dependency map)을 생성하고 이를 바탕으로 연관된 모듈들을 그룹화하여 번들의 수를 줄여줍니다. 주요 개념들 Entry 의존성지도를 만들기 위한 시작점으로 기본 경로는 './src/index.js'입니다. 'webpack.config.js' 파일에서 아래와 같이 설정을 통해.. Declarative Code VS Imperative Code Declarative coding과 Imperative coding은 프로그래밍에 대표적인 두 가지 파라다임인데요. 차이점에 대해서 알아보겠습니다. Declarative 내가 무엇을 원하는지만 말하고 구현방식은 컴퓨터에 맡기는 방식 Imperative 목적과 더불어 목적에 도달하는 세부 단계까지 세세하게 지시하는 방식 데이터 요청 데이터를 요청하는 방법에 대해 알아보겠습니다. 먼저, 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 2 3 4 5 다음 목록 더보기
