일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 비전공자
- react
- JS
- 생활코딩
- 프론트엔드
- 웹퍼블리셔
- 연산자
- github
- CSS
- 웹디실기
- JavaScript
- 세로메뉴바
- HTML
- 슬라이드전환
- PROJECT
- 코드공유
- 자바스크립트
- 리액트
- git
- hooks
- 실기
- jQuery
- 깃
- 코딩독학
- 렛츠기릿자바스크립트
- 타입스크립트
- web
- 웹디자인기능사실기
- 정보처리기사
- 웹디자인기능사
- Today
- Total
목록전체 글 (118)
코딩하는라민
[Frontend] 스웨거(swagger) API 사용하는 방법 (feat. 리액트) 프론트엔드 개발자로써 첫 회사에 들어가자마자 스웨거 API 링크를 받았다. 멋사에서 프로젝트할 때 서버리스로 Firebase 만 써본 입장에서 스웨거 API 는 너무 새로웠다. method 종류별로 색이 달랐고, url 과 Parameters, Pesponses, Responses 등등 낯설어서 익숙해지는 데 며칠이 걸렸던 기억이 있다. 지금은 시행착오를 거치면서 아주 잘 사용하고 있고, 이렇게 편한 도구가 있을까 싶을 정도이다. 🙂 스웨거(swagger)란? REST API를 설계, 빌드, 문서화 하는 것을 도와주는 오픈 소스 소프트웨어 프레임워크이다. API 를 문서화해서 사용하기 쉽게 만들며, 따로 API 문서 작..
[React] 리액트에서의 아토믹 디자인(Atomic Design)이란 Medium Out of nothing, something. You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories about finding what you didn’t know you were looking for will take you somewhere new? bootcamp.uxdesign.cc 본 게시글은 위의 글을 읽고 번역하여 정리한 내용입니다. 📌 아토믹 디자인(Atomic Design) 효율적이고 확장 가능한 웹 애플리케이션을 만드는 방법중의 하나는 아토믹 디자인 시스템을 사용..
[책 리뷰] 프론트엔드 성능 최적화 가이드 예전에 리액트 프로젝트를 하면서 성능 문제를 겪은 적이 있습니다. development 모드라 빌드 전이기는 했지만, 성능이 너무 낮게 나왔었습니다. 성능을 보고 모든 팀원들이 충격에 먹었었는데, 지금 생각해보니 코드를 남발하기만 하고 최적화 작업을 해주지 않았었습니다. 처음에 어떻게 하면 프로젝트의 성능을 끌어 올릴 수 있는지 몰라 막막했는데, 이 책을 읽고 나서 앞으로는 기능 구현만 신경쓸 것이 아니라는 것을 깨닫게 되었습니다. Lighthouse 분석 이 책은 제목 그대로 웹사이트의 성능을 리액트를 기준으로 최적화해주는 가이드북입니다. 이전에는 Lighthouse 의 전체적인 성능 수치만 확인했을 뿐 그 안의 요소 하나하나에 대한 분석은 하지 않았습니다. ..
[TypeScript] 함수의 기타 반환타입(unknown, void, never) 📌 unknown 타입스크립트에서 unknown은 JavaScript의 any 타입과 유사한 타입이다. unknown 타입은 컴파일러에게 해당 값에 대한 타입 정보가 없음을 알리는 역할을 한다. unknown 타입은 어떤 값이 들어올지 알 수 없는 경우에 사용된다. 즉, 변수나 매개변수에 할당되는 값의 타입을 정확히 알 수 없을 때 사용하는 것이다. unknown 타입을 가지는 변수나 매개변수는 어떤 타입의 값도 가질 수 있다. 하지만 unknown 타입의 값으로는 직접적인 조작이 불가능하고, 다른 타입으로 할당하기 전에 적절한 타입 검사나 타입 단언(type assertion)을 통해 원하는 타입으로 형 변환을 해줘야 ..
[TypeScript] 함수의 반환 타입과 함수 타입 구문(function type) 📌 반환 타입 함수의 반환문이 함수의 반환 타입으로 할당할 수 없는 값을 반환하는 경우, 다음과 같이 할당 가능성 오류를 표시한다. function home(todo: string): string | indefined { switch (todo) { case "러닝 타입스크립트": return `${todo} 공부하고 블로그 정리`; // Ok case "리액트 프로젝트": return 100; // Error 🔥: Type 'number' is not assignable to type 'string'. defualt: return undefined; // Ok } } 두번째 case 에서 반환값은 100인데, home..
[TypeScript] 함수의 매개변수(선택적 매개변수, 기본 매개변수, 나머지 매개변수) 📌 함수 매개변수 변수와 마찬가지로 타입 애너테이션으로 함수의 매개변수의 타입을 선언할 수 있다. function home(todo: string){ console.log(`오늘 할일 : ${todo}!`); } any 타입 매개변수 function home(todo){ console.log(`오늘 할일 : ${todo}!`); } 매개변수에 명시적 타입 정보가 선언되어 있지 않기 때문에 타입을 알 수 없다. 이 경우 매개변수는 any 타입으로 간주된다. 📌 필수 매개변수와 선택적 매개변수 ✏️ 필수 매개변수 자바스크립트에서는 인수의 수와 상관없이 함수를 호출할 수 있는 반면, 타입스크립트에서는 잘못된 수의 인수로..
[TypeScript] 객체 타입 유니언(|)과 교차 타입(intersection type, &) 📌 객체 타입 유니언 객체 타입 유니언이란 타입스크립트에서 두 개 이상의 객체 타입을 결합하는 방법이다. 객체 타입 유니언은 | 연산자를 사용하여 표현한다. ✏️ 유추된 객체 타입 유니언 변수에 여러 객체 타입 중 하나가 될 수 있는 초깃값이 주어지는 경우. const family = Math.random() > 0.3 ? { name: "june", age: 25 } : { name: "me", hobby: "piano" }; family.name; // string family.age; // number | undefined family.hobby; // string | undefined 타입스크립트는 ..
[TypeScript] 객체의 선택적 속성(Optional Properties, 옵셔널 프로퍼티) 📌 객체의 선택적 속성(Optional Properties) 선택적 속성은 인터페이스나 타입 정의에서 특정 속성이 필수적으로 존재하지 않아도 되는 속성을 의미한다. 즉 해당 속성이 있을 수도 있고 없을 수도 있는 경우에 사용할 수 있다. 이렇게 선택적 속성을 정의하기 위해 속성 이름 뒤에 물음표(?)를 추가할 수 있다. type Person = { name: string; age?: number; } // Ok const me: Person = { name: "ramin", } // Ok const you: Person = { name: "you", age: 27, } Person 타입은 name 은 필수 ..
[TypeScript] 초과 속성 검사 (Excess Property Checks) 📌 초과 속성 검사(Excess Property Checks) 초과 속성 검사란 객체 리터럴을 사용하여 새로운 객체를 생성할 때, 타입스크립트가 추가로 정의되지 않은 속성을 감지하는 기능을 말한다. 이 기능은 구조적 타이핑(structural typing) 개념에 기반한다. ✏️ 객체 리터럴의 타입 검사 type Person = { name: string; age: number; }; const me: Person = { name: "ramin", age: 20, hobby: "game", // Error } 위 코드에서 "hobby" 속성은 "Person" 타입에 정의되어 있지 않다. 이 경우 타입스크립트는 초과 속성 ..
[TypeScript] 객체 타입을 선언하는 방식과 별칭 객체 타입(Type alias) 📌 객체 타입 원시 타입을 제외하고 가장 많이 등장하는 타입. 객체는 프로퍼티를 가지는 자바스크립트 값이다. 객체를 정의하려면 해당 객체의 프로퍼티들과 각 프로퍼티의 타입을 나열하면 된다. const info = { name: 'ramin', favoriteNumber: 7, }; info.name; // 타입: string info['favoriteNumber']; // 타입: number info 가 가지고 있는 속성 외의 이름으로 접근하려고 하면 '타입 오류'가 발생한다. 📌 객체 생성 방법 - 객체 리터럴 객체 리터럴(Object Literal)은 중괄호({})를 사용하여 객체를 생성하는 것을 말한다. 속성값..