전체 글

로컬 캐시 스토리지를 구현하려는데 생각보다 쉽지 않았다. 로컬 스토리지는 localStorage.setItem 등으로 쉽게 구현했는데, 캐시 스토리지 사용법은 잘 정리된 블로그를 찾기가 어려웠다. 따라서 크롬 블로그를 통해서 최대한 구현해보려고 했다! https://web.dev/i18n/ko/cache-api-quick-guide/ 나처럼 어려움을 겪는 사람들을 위해 캐시 스토리지를 구현하면서 발생한 에러와 설정하는 방법 디바운싱을 사용한 검색기능까지 공유해보려고 한다! [내가 구현하고 싶은 것] 1. 검색창 입력으로부터 API 응답 결과를 로컬 캐시 스토리지에 저장한다. 2. 검색창에 똑같은 입력이라면 API를 호출하지 않고 캐시된 데이터를 불러온다. => '뇌'를 입력하면 이미 캐싱된 데이터를 불러..

클린 코드에 대해서 많이 들어봤을 것이다. 그러나 개발자로서 왜 클린코드를 작성해야 하는지에 대해서 알고 있나? 많이 듣던대로 가독성과 유지보수를 위해서 라고 대답할 것 같다. 나 또한 그렇기 때문이다! 하지만 좀 더 심층적으로 알고 싶고 왜 클린 코드로 작성하면 유지보수가 쉬운지 클린코드를 어떻게 작성해야하는지 포스팅하려고 한다. # 1. Clean Code 개발자가 갖춰야하는 능력 중 하나는 좋은 코드(클린 코드)를 쓰는 것이다. 이는 매우 중요하며 나쁜 코드를 쓰지 않는 것은 더더욱 중요하다. 왜 좋은 코드를 써야할까? 코드는 소프트웨어의 근본이기 때문이다. 이 근본이 나쁜 코드로 이루어져 있다면 곧 망가지고 만다. 이는 더이상 기능을 확장하거나, 수정할 수 없다는 의미이다. 소프트웨어는 의미 자체..

서버는 백엔드 개발자만 알아야하는 지식일까요? 프론트엔드 개발자는 기획, 백엔드 등 다양한 직무의 사람들과 협업해야 하며 의사소통해야 합니다. 따라서 프론트엔드도 알아야 할 서버의 운영 방식과 클라우드 컴퓨팅에 대해서 알아봅시다! # 1. 서버란? 보통 우리는 인터넷을 통해 특정 웹사이트나 리소스에 접속하게 됩니다. 하지만 정확히 말하면, 우리가 접속하는 것은 해당 웹사이트나 리소스를 제공하는 컴퓨터에 접근하는 것입니다. 서비스를 제공하기 위해서는 일반적으로 컴퓨터를 작동시키고, 특정 프로그램을 실행시켜 네트워크를 통해 컴퓨터에 접속하면 원하는 리소스를 얻을 수 있습니다. 이 컴퓨터는 외부에서 접근 가능하도록 인터넷에 연결되어 있으며, 이러한 컴퓨터를 우리는 보통 "서버"라고 부릅니다. 서버는 물리적인 ..

1. 타입과 타입 별칭(Type Aliasing) 기존 타입에 대한 별명 부여 객체에 대한 새로운 타입 생성 type MyType = string; // MyType 이라는 별칭 부여 let a :MyType = "Hello"; type MyType2 = { name:string; age:number; } letb : MyType2 = { name:"홍길동", age:20 }; 1.1 선택적 필드와 읽기 전용 선택적 필드: 물음표를 사용 => age 필드는 값이 들어갈 수도 있고, 없을 수도 있다. 읽기 전용 : readonly 사용 => email 필드는 처음 값이 정해지면 변경할 수 없다. // 선택적 필드와 읽기 전용 type MyType3 = { name:string; age?number; rea..

Typescript 컴파일러와 loader - 컴파일러(트랜스파일러): tsc 1. 타입스크립트 설치 npm install -D typescript // -D는 --Save-dev와 같음 2. 아래 명령어를 순서대로 따라하기! 1. mkdir typescript-test // 디렉토리 만들기 2. cd typescript-test // 디렉토리 들어가기 3. npm init // 패키지 생성(엔터로 기본값 설정하기) 3. npm install -D typescript // 개발자 의존성 설정으로 타입스크립트 npm 설치 4. // VSCode 실행 후 '보기'-'터미널' 을 열고 다음 명령어 실행 npx tsc --init //tsconfig.json 파일을 만들어주는 명령어 5. // package.j..

1. JS에서의 this는 현재 호출중인 메서드를 보유한 객체를 가리킴 (default) var obj = { result: 0 }; obj.add = function(x,y) { this.result = x+y; } obj.add(3,4) console.log(obj)// { result: 7 } 2. 그러나 아래 코드 처럼 호출될 때 add2() 메서드를 보유한 객체가 없으므로 Global (전역) 객체가 this가 됨. var obj = { result: 0 }; obj.add = function (x, y) { this.result = x + y; }; var add2 = obj.add; console.log(add2 === obj.add); //true add2(3, 4) // 전역 변수 res..

자바스크립트 파일 실행해서 console.log() 확인할때마다 브라우저에서 확인했던 나,, vsc 터미널에서 결과를 확인하고 싶어서 Code Runner 익스텐션을 설치했다! 그리고 다시 마주친 에러,, /bin/sh: node: command not found 해결 방법! 1. (cmd + shift + p) 하고 검색창에 Preferences: Open User Settings (JSON) 을 클릭해서 setting.json 파일을 열자! (setting.json파일 여는 방법 2 ==> vsc > Preferences > Settings 로 들어가 setting.json 파일을 열자!) 2. json파일에 아래 코드 추가 후 저장하기! "code-runner.runInTerminal": true ..

Java Script에서 큰 숫자를 사용할 때 BigInt를 사용하는데요. 왜 BigInt를 사용해서 계산하면 생각과는 다른 결과가 나오는 걸까요?!! 어떤 경우에 계산 결과가 다른건지! 그리고 해결 방법은 무엇인지 알아봅시다! BigInt 정의(MDN 공식 문서) **BigInt**는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다. BigInt는 정수 리터럴의 뒤에 n을 붙이거나(10n) 함수 BigInt()를 호출해 생성할 수 있습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt MDN 공식 문서에 표기되어 있는 것 처..

자바스크립트의 String 메서드를 알아보자!! 코딩 테스트 볼 때 중요한 것 같아서 공부하고 정리해본다! 누군가에게도 도움이 되길! 🙏 1. slice(시작인덱스, 종료인덱스) : 시작인덱스부터 종료인덱스-1까지 반환 * slice의 시작 인덱스 값 > 종료 인덱스 값 이면 작동하지 않는 것에 주의하자! 2. substring(시작인덱스, 종료인덱스) : 시작인덱스부터 종료인덱스-1까지 반환 * slice와 달리 substring은 시작 인덱스 값 > 종료 인덱스 값 이여도 작동한다! 3. substr(시작위치, 길이) : 시작인덱스부터 길이만큼 반환 * substr()은 명세에서 사라질 수 있기 때문에 slice, substring 사용을 권장한다고 한다! 4. replace(바꿀문자열, 바뀔문자열)..

Float 사용 시, 자식 요소가 부모 요소의 범위를 벗어날 때 해결하는 방법 3가지를 공유하려 합니다! 사실 내가 까먹을까봐 기록하는 것이지요 ㅎㅎ 먼저 아래와 같은 코드를 봅시다! 1. container 라는 클래스명을 가진 부모요소 내에 자식 요소(item1 ~ item4)가 있습니다. 2. 부모요소(container)에 height(높이)값은 지정하지 않았기 때문에, 자식요소의 text높이 만큼이 부모의 높이가 될 것입니다. 3. 부모요소(container) padding 속성을 주었습니다. item1 item2 item3 item4 따라서 코드를 실행하면 아래와 같이 블럭이 만들어집니다. 부모 요소에 padding 값을 주어 자식 요소들이 padding 영역 안으로 item들이 정렬된 것을 알 ..