자곰

전역변수를 선언하고 그것을 JS로 조작하는 방법에 대해서 다루겠습니다. HTML and CSS 제가 조작할 값은 전체 화면의 주요 색, 이미지의 padding(Spacing), filter값입니다 입력을 3개를 두고 값을 변화를 통해 전체 변수를 조작하여 UI 변화를 조작하는 것입니다 컨트롤러인 input에 각각 커스텀속성을 주어서 suffix를 붙일 수 있도록 하였습니다. JavaScript 설명 const inputControllers = document.querySelectorAll(".controls input"); const valueUpdate = (e) => { // suffix 판별 const suffix = e.target.dataset.sizing || ""; document.docu..

setInterval을 통한 일정주기로 변하는 애니메이션을 구현해보고자 합니다 HTML and CSS 간단하게 시 분 초를 나타내는 침과 시계모양을 만들었습니다 JavaScript 설명 // 현재 시간을 가져와 각 시계 바늘의 각도를 계산하고 적용하는 함수입니다. function setTime() { // 현재 시간을 가져옵니다. const now = new Date(); // 현재 시, 분, 초를 추출합니다. const hours = now.getHours(); const mins = now.getMinutes(); const seconds = now.getSeconds(); // 각 바늘의 각도를 계산합니다. const secondsDegree = (seconds / 60) * 360 + 90; ..

주제 키를 눌렀을 때, audio 파일 소리를 재생시켜 악기처럼 연주를 해보는 간단한 JS를 구현해보고자 한다. 밑에 같은 사운드 플레이 파일이 필요합니다 A clap S hihat D kick F openhat G boom H ride J snare K tom L tink 이 처럼 html 코드를 작성해줍니다 data 속성을 통해서 div태그와 audio태그를 매칭시켜주었습니다 key 속성: key 속성은 눌린 키의 실제 값(문자)을 나타냅니다. 예를 들어, A 키를 눌렀을 때는 "A"가 됩니다. code 속성: code 속성은 눌린 키의 물리적인 위치를 나타냅니다. 이 값은 브라우저와 운영체제에 따라 다릅니다. 예를 들어, A 키를 눌렀을 때는 "KeyA"가 됩니다. 저는 여기서 code를 이용할 것..

먼저 두가지에 대해서 간략한 설명을 하고 비교를 해보며 학습을 해보겠습니다. Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스입니다. 모던 브라우저에 내장되어 있어 따로 설치할 필요가 없습니다. Axios는 서드파트 라이브러리로 CDN 혹은 패키지 매니저를 통해 설치하여야 사용할 수 있습니다. 두 가지 모두 promise 기반의 HTTP 클라이언트입니다. 즉, 네트워크를 요청하면 resolve, reject 할 수 있는 promise를 반환합니다. 두 가지는 모두 네트워크 요청을 하고 promise를 반환합니다. 무엇이 다를까요? 문법 1) fetch fetch(url, { method: "GET", // 다른 옵션도 가능합니다 (POST, PUT, DELETE, e..

이번 글에서는 초보자를 위해 도커 명령어를 배우고 기본적인 사용법을 알아보겠습니다. 1. 도커 설치 및 환경 설정 도커 설치 및 환경 설정 도커를 사용하기 위해선 먼저 도커를 설치하고 환경을 설정해야 합니다. 아래 명령어를 통해 도커를 설치합니다. sudo apt update sudo apt install docker.io 2. 이미지 다운로드 및 실행 도커는 이미지를 기반으로 컨테이너를 생성하고 실행합니다. 아래의 명령어로 "hello-world" 이미지를 다운로드하고 실행해보겠습니다. docker pull hello-world docker run hello-world 3. 컨테이너 관리 컨테이너의 상태를 관리하고 실행 중인 컨테이너를 확인하는 방법을 알아봅시다. 실행 중인 컨테이너 목록 확인: doc..

도커 파일(Dockerfile)은 도커 이미지를 빌드하는 데 사용되는 핵심 도구입니다. 도커 파일은 어플리케이션의 구성 요소, 설정, 환경 변수, 라이브러리 등을 정의하여 도커 이미지를 구성하는 데 도움을 줍니다. 이를 통해 개발자는 코드와 함께 어플리케이션의 실행 환경을 코드화할 수 있습니다. Dockerfile을 통한 작업은 다음과 같이 진행됩니다. dockerfile을 작성 dockerfile build해서 웹서버 이미지를 생성 빌드한 이미지를 컨테이너로 실행하며 구동 어떻게 도커 파일을 작성하고 사용하는지에 대해 자세히 알아보겠습니다. Dockerfile 옵션 FROM : Docker Base Image (기반이 되는 이미지, : 형식으로 설정) MAINTAINER : 메인테이너 정보 (작성자 정..

도커 명령어를 통해 컨테이너를 띄어보는 것이 이번 목표입니다. 먼저 과정을 설명하면, 이미지 다운로드 ⇒ 컨테이너 생성 및 실행 이거만 할줄 알면 우리는 컨테이너를 띄울 수 있습니다. 이미지 다운로드 도커 이미지 찾기 먼저, 이미지는 Docker Hub에서 찾을 수 있습니다. node 이미지를 설치하기 위해서 검색해보면 아래 그림과 같이 결과를 확인할 수 있습니다. 또는 터미널에서 docker search 이미지_이름 명령어를 통해서 검색이 가능합니다. 이미지 내려 받기 docker pull 이미지 이름[:버전] 이미지를 검색하고 명령어로 다운을 받을 때는 pull 명령어를 사용하면 됩니다. 버전을 붙이지 않으면 위와같이 latest tag가 붙어진 이미지가 다운됩니다. 이미지 목록 보기 docker i..

Docker는 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼입니다. Docker는 앞에서 배운 리눅스 컨테이너를 만들고 사용할 수 있도록 하는 컨테이너화 기술입니다. 이제 우리는 도커 없이 개발하며 이상할지도 모르는 세상입니다. 무조건 알아둬야 하는 개념이고 쓰면 단점이 없는 기술이라고 생각합니다. 그래서 여러분들이 깊게는 몰라도 개념과 자신의 개발환경 정도는 로컬에서 띄어볼 수 있도록 만들어 보는 것은 상당히 중요하다고 생각합니다. 생각보다 어렵지 않으니 개념을 익히고 제가 React 개발 할때, docker 환경 셋팅(정말 간단함)도 보여드리도록 하겠습니다. 이미지 컨테이너 실행에 필요한 파일과 설정 값등을 포함하는 것으로, 서비스 운영에 필요한 서버 프로그램, 소스코드 ..

현대의 소프트웨어 개발과 배포는 점점 더 복잡하고 다양한 환경에서 이루어지고 있습니다. 개발자들은 이러한 다양성과 복잡성에 대응하는 방법을 찾고 있습니다. 이러한 문제를 해결하는 한 가지 강력한 기술이 바로 "컨테이너화(Containerization)"입니다. 애플리케이션과 그 종속성들을 격리된 환경에 배치하여 호스트 시스템과 분리함으로써 안정성과 이식성을 향상시키는 기술인 컨테이너에 대해 알아보고 그 이전의 기술은 VM에 대해서도 언급하고 비교해보며 도커에 대해 공부해보기로 하죠. 가상화 VM 원래 처음에는 하나의 서버에 하나의 어플리케이션만 구동시켰다고 합니다. 이렇다 보니 하나의 서버에 남는 비효율성을 있고 극복하기 위해 등장한 기술이 가상화 기술입니다. 그 중 하이퍼바이저 기반의 가상화가 가장 많..

html에 자바스크립트를 적용 시킬 때는 2가지를 고려해야 합니다. 첫 번째는 태그와 태그 중 어디에 넣을 것인가? 두 번째는 async 방식과 defer 방식중 어떤 것을 선택할 것 인가? 스크립트 파일 입력 시기에 따른 차이 ( head vs body ) 스크립트를 태그 내에 포함하는 경우 스크립트 파일이 HTML 문서의 파싱 과정 중에 로드되고 실행됩니다. 따라서, 스크립트 파일을 로드하는 동안에는 HTML 파싱이 일시 중단됩니다. 이는 스크립트 파일이 크거나 다운로드 시간이 오래 걸릴 경우 웹 페이지의 렌더링이 지연될 수 있는 단점이 있습니다. 과정 : parsing HTML → js script 파일 만남 → fetch → excute → parsingHTML → 페이지 준비! ( fetch +..