프론트엔드 개발

웹 폰트를 무작정 가지고 올 때는 CDN을 이용하여 폰트를 가져오고 있었습니다. 매번 폰트를 가져오기 위해서 CDN 네트워크 통신을 하게 되는 점과, 웹 폰트를 가져올 때의 UX를 개선시킬 수 있을까 하는 고민을 했습니다. 이용하는 cdn 서버가 가깝지 않다면? 처음 웹에 들어갔을 때 폰트가 없어졌다가 생기는 것과같이 불편하게 보여진다면? cdn 서버가 멀게 되면 폰트를 직접 다운로드하여서 사용하면 네트워크 비용을 줄일 수 있지 않을까?라는 생각을 했고, 브라우저에서 렌더링 차단 처리 방식을 이해하여 웹 폰트 최적화하는 방법을 알고 적용시키고자 합니다. 웹 폰트의 사용 방법 naver D2의 글에서는, 웹폰트의 기본 사용방법을 설명합니다. CSS의 @font-face 규칙 font-family: 사용할 ..

전 글에서 쿠키와 세션에 차이점을 알아보았다. 이번에는 직접 함수를 구현하여, Javascript로 쿠키를 읽어보고, 생성 및 삭제를 알아보겠다. 쿠키 저장 function setCookie(name, value, day) { const date = new Date(); date.setTime(date.getTime() + day * 24 * 60 * 60 * 1000); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; }; 쿠키 읽기 function getCookie(name) { const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|..

디버깅이란? 디버깅 또는 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 그 원인을 밝히고 수정하는 작업 과정을 뜻합니다! 기존에는 console.log를 넣고 매번 수동적으로 컴파일을 하고 나서 확인하는 방법이었는데... 이번 시간에는 코드 에디터를 사용하여 디버깅을 할 수 있는 Debugger에 대해서 알아볼 거예요. 저는 드림코딩 엘리님의 유튜브를 보면서 따라 해 보았습니다. 여기서 말하는 Debuugger는 주로 원하는 코드에 중단점(Break Point)을 지정하여 프로그램 실행을 정지하고, 메모리에 저장된 값을 살펴보며, 실행을 재개하거나, 코드를 단계적으로 실행하는 등의 동작을 하는 것을 말합니다! 다양한 개발툴(브라우저, 인텔리 제이, 비쥬..

자바스크립트를 써왔지만, 타입 스크립트를 써야 하는 이유가 무엇일까? 에러의 사전 방지 타입 스크립트는 프로그래머가 타입을 지정해준 타입이 아닌, 다른 타입을 할당하게 된다면, 컴파일 때, 오류 메시지를 준다. 자바스크립트는 Runtime 때, 타입이 결정된다. 이 말은 즉 프로그래머가 변수에 어떤 데이터, 어떤 타입을 갖는지 명확하지 않은 단점이 있다. 개발 생산성 향상 프론트엔드 개발자들이 사용하는 코드 에디터 중 하나인 Visual Studio Code는 툴의 내부가 타입 스크립트로 작성되어 있어 타입 스크립트 개발에 최적화되어있다. 또한, 객체지향 프로그래밍을 이용하여 고 퀄리티의 코드를 만들고, 객체 위주로 모듈성 있는 코드를 작성할 수 있다. 크로스 플랫폼 지원 자바스크립트가 실행되는 모든 플..

비트와 바이트 컴퓨터가 이해할 수 있는 최소의 정보 단위: 0과 1 컴퓨터는 0과 1을 조합으로 이루어진 정보들을 처리할 수 있다. 컴퓨터가 처리할 수 있는 가장 최소 정보 단위 : Bit Bit는 0 또는 1이라는 정보를 담을 수 있다. 0과 1이라는 정보들을 처리할 수 있다. 컴퓨터는 신호가 없고(0) 있고(1) 로만 다룰 수 있다. 1bit: 0, 1 1 bit당 2가지의 경우를 나타낼 수 있다. 2 bit (2X2) = 4가지 경우를 나타낼 수 있음 3 bit (2X2X2) = 8가지 경우를 나타낼 수 있음 1 Byte = 8 bit (2*8) = 256가지 경우 [0, 255]까지의 숫자를 나타낼 수 있음 문자코드 ASCll (아스키 코드) 1Byte로 표현 가능 한계점: 세상의 모든 언어의 문..

React 프로젝트를 Bitbucket pipeline 이용하여 AWS S3에 배포하기 1. pipeline 클릭 2. pipeline select 3. Configure => 템플릿 설정 4. bitbucket-pipelines.yml # This is an example Starter pipeline configuration # Use a skeleton to build, test and deploy using manual and parallel steps # ----- # You can specify a custom docker image from Docker Hub as your build environment. image: node:10.15.3 pipelines: branches: master..

비쥬얼 스튜디오 코드 터미널에서 npm install -g ts-node npm을 이용하여 설치하고 ts-node main.ts 다시 터미널에서 위와 같은 코드를 입력했을 때, 이와같이 오류가 나타나는데, 스크립트 실행 권한이 제한되어 있는 상태이기 때문이다. 이를 해결하려면 Window PowerShell을 관리자 권한으로 실행하고, 권한 설정을 바꿔줘야 한다. Window10 기준: 시작에서 windows PowerShell을 검색해서 관리자로 실행 Set-ExecutionPolicy RemoteSigned 으로 정책 설정 RemoteSigned : 로컬 컴튜퍼에서 본인이 생성한 스크립트만 실행 가능 또는 인터넷에서 다운로드 받은 스크립트는 신뢰된 배포자에 의해 서명된 것만 실행 가능한 정책 이후 정..

타입스크립트란? JavaScript and More TypeScript는 세계에서 가장 많이 사용되는 도구 중 하나 인 JavaScript를 기반으로하여 정적 타입 정의를 더한 오픈 소스 언어입니다. 타입은 객체의 모양을 설명하는 방법을 제공하고 더 나은 문서를 제공하며 TypeScript가 코드가 올바르게 작동하는지 확인할 수 있도록합니다. TypeScript에서 타입 작성은 선택 사항 일 수 있습니다. 타입 추론을 사용하면 추가 코드를 작성하지 않고도 많은 이점을 얻을 수 있기 때문입니다. A Result You Can Trust 유효한 JavaScript 코드는 모두 TypeScript 코드입니다. 타입 검사 오류가 발생할 수 있지만 결과 JavaScript 실행이 중단되지는 않습니다. 더 엄격한 ..