RPG처럼 웹 개발하기

TypeScript 프로젝트를 진행할때 ts.config 어떻게 설정해놓으셨나요? 지금까지 CRA 또는 Next에서 설정해준 기본값 그대로 진행하셨나요? 저는 처음에 기본값 설정 그대로 진행했었는데요 처음 기본값으로 넣고 진행해본 이후에 후회했습니다. "공식 문서 꼼꼼하게 더 읽어보고 프로젝트열껄..." 하고 말이죠 물론 TypeScript를 아주 잘 알고, 아주 잘 사용하고 계시는 분들이 많으시지만, 저는 잘모르고 시작했었습니다. 어떤 설정을 줘야하고 어떻게 시작해야하는지요. 그래서 오늘은 제가 후회했던 첫 기본 설정에 대해 말씀드리려고 합니다. TypeScript를 사용하기 시작하신지 얼마 안되셨거나, 이제 사용해보실 생각이라면 도움이 더 될것 같습니다. 일단 기본으로 설정해주는 ts.config설정..

용어설명 1. undefiend 어떠한 값도 할당되지 않아 자료형이 정해지지 않은 상태입니다. 2. null 자료형이 정해진(defined) 상태입니다. null 값이 할당된 상태입니다. Null 과 Undefined 코드로 비교하기 console.log(null == null); // true console.log(undefined == undefined); // true console.log(null == undefined); // true console.log(null === null); // true console.log(undefined === undefined); // true console.log(null === undefined); // false null == undefined 결과가 t..

이 글을 읽으려고 들어오신 분들은 TypeScript를 사용하여 코드를 작성하시는 분이거나, TypeScript를 사용하기 위해 알아보기 위한 분들이실겁니다. 일단 저는 TypeScript 를 천천히 도입해보고 있는 개발자입니다. TypeScript 를 천천히 공부하며 사용해보고 있는 와중에 저는 의문이 생겼습니다. “Interface 그리고 Type alias 이것들은 대체 무엇이 어떻게 다른것이지?” 라는 의문 말이죠. 여러분은 Interface 와 Type alias 의 차이를 잘 알고 계신가요? 저는 대체 어떻게 무엇이 다른건지 알고 있지 못했습니다. 그래서 이번 글로 한번 무엇이 다른건지 정리를 해보려고 합니다. 잘 모르겠거나, 헷갈리는분들, 그리고 이미 알고 계시는 분들도 차근차근 보면서 같이..

들어가기 전 용어 정리! Blob → ( Binary Large OBject ) 의 앞 단어들을 따와서 만든 축약어 입니다. Binary → 이진법을 의미합니다. ( 1010011 ) Object → 말 그대로 객체입니다. 청크 → 데이터 덩어리입니다. Blob이란? Binary Large Object. 단어 그대로 이진수로 이루어진 큰 객체라는 뜻 입니다. JS 에서 Blob이 사용되는 이유? 이미지, 동영상, 등 멀티미디어 데이터를 다룰때 사용합니다. 프론트엔드에서 Blob은 보통 서버에 이미지, 동영상을 올리거나, 서버에서 Blob 형태의 이미지 파일을 받아와서 사용하는 형태로 사용이 되고 있습니다. 그리고 이미지를 업로드 하기전, 미리보기를 보여주는 형태로도 사용되고 있습니다. 저는 이번 글에서 ..

웹에서 푸시 알림을 보내야하는데 어떻게 보내는지 모르시겠나요? PWA 로 푸시 알림을 넣고 싶은데 대체 어떻게 하라는건지 하나도 모르시겠나요? 저도 하나도 몰랐지만 아래의 방법으로 기본적인 푸쉬 알림을 띄웠습니다! 제가 만들어본 푸쉬 알림 코드와 사용 방법을 최대한 간단히 적어보겠습니다! PWA 프로젝트를 진행할때는 처음부터 템플릿을 사용해서 프로젝트를 여는것이 편하고 좋습니다! npx create-react-app --template cra-template-pwa 먼저 index.js 파일에서 serviceWorkerRegistration.register(); 를 실행해줍니다. serviceWorkerRegistration.unregister(); → serviceWorkerRegistration.re..

시멘틱 태그 잘 사용하고 계신가요? 어떤 방식으로 시멘틱 태그를 사용하고 계신가요? 혹시 div 지옥처럼 section, article 지옥이 만들어지지는 않았나요? HTML 구조를 더 아름답고 보기 좋게 만들 순 없을까? 우리가 웹개발을 시작할때 가장 먼저 만들게 되는것은 무엇일까요? 바로 HTML 파일 일것이라고 생각합니다. ( React, Vue 등 프레임워크를 사용한다고 해도 HTML 코드를 작성하게 될것입니다. ) 새로운 프로젝트에게 건네는 첫인사처럼, 새로운 마음으로 인사를 하는곳이 바로 HTML이라는 뜻입니다. 어떤 일이든 첫 단추가 잘 채워져야 마지막 단추도 잘 채울수 있듯이 HTML이 아름답게 작성 되어야 CSS, JavaScript 또한 아름답고 보기 좋게 작성 할 수 있는것 같습니다...

웹사이트에서 평균적으로 용량을 가장 많이 차지하는 것은 무엇일까요? 용량을 많이 차지하는 것은 바로 이미지입니다. 그 뜻은 이미지의 용량을 줄이게 되면 웹 페이지 성능을 상당히 좋게 만들 수 있다는 뜻입니다. 일단 이미지의 용량을 줄이는 가장 빠른 방법은 이미지의 크기를 줄이는 것입니다. 이미지의 크기를 줄이시면 됩니다. ...? 하지만 현재 이미 필요한 만큼 딱 맞춰서 넣어놓은 상태이기 때문에 현 상태에서 이미지의 크기를 줄이라는 것은 적절하지 못한 방법이라고 생각합니다. 그럼 이제 어떤 방법들을 사용해야 할까요? 1. Lazy Load를 사용하기 첫 번째는 lazy load를 사용하는 것입니다. 일단 lazy load의 기본 원리는 사용자가 보고 있는 영역이 이미지가 있는 영역에 왔을 때 이미지를 로..

@media 를 사용하여 평화롭게(?) 반응형 스타일을 작업하던 어느날 "반응형을 꼭 이렇게 더럽고 귀찮게 작업해야할까...?" 라는 생각이 들었습니다. 아주 간단한 속성하나만 추가하는데 css가 이렇게나 더러워진다니.. "전혀 길지도 않고 눈에 잘 들어오면서 짧은데?" 라고 생각하실 수 있습니다. 하지만 이런 CSS 코드가 점점 많아진다면요...? 이런 CSS 코드가 점점 많아지고 이런 파일들이 점점 많아진다면요...? 저는 이런 CSS 코드를 보면 CSS 코드 파악하고 수정해야하는데 읽기 싫게 너무 길다는 생각이 들것 같습니다. 그래서 저는 "CSS에 쉽게 해주는 기능이 없을까?" 생각하고 찾아보다 clamp 라고 하는 CSS 함수를 찾아보게 되었습니다. clamp, 일단 어떻게 사용하는걸까? 백문이..