일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- HTML
- JS
- PROJECT
- hooks
- 웹디자인기능사실기
- git
- 프론트엔드
- 코드공유
- 웹퍼블리셔
- jQuery
- 슬라이드전환
- CSS
- react
- 세로메뉴바
- 실기
- 리액트
- 연산자
- 생활코딩
- github
- web
- 렛츠기릿자바스크립트
- 비전공자
- 웹디실기
- JavaScript
- 코딩독학
- 웹디자인기능사
- 타입스크립트
- 깃
- 정보처리기사
- 자바스크립트
- Today
- Total
목록전체 글 (118)
코딩하는라민
[TypeScript] 구조적 타이핑으로 타입 호환성 확인하기, 덕 타이핑이란? 📌 구조적 타이핑의 정의 구조적 타이핑은 객체나 데이터의 구조에 기반하여 타입 호환성을 결정하는 타입 시스템 구조적 타이핑은 객체가 특정한 타입으로 정확히 명시되어 있지 않아도, 객체의 구조가 타입과 일치하는지를 확인하여 타입 호환성을 결정한다. 즉, 객체의 속성 구조와 타입이 일치한다면 타입 호환성이 성립된다. 이러한 특성은 코드의 재사용성과 유연성을 높일 수 있다. 📌 구조적 타이핑 예시 type Cafe = { menu: string; } type Home = { todo: string; } // 특정 타입으로 정확히 명시되어있지 않더라도 const homeCafe = { menu: "cake", todo: "sleep..
[TypeScript] 리터럴 타입(literal types) 📌 리터럴 타입(literal types) 특정한 값 자체를 타입으로 지정하는 기능이다. 리터럴 타입은 값의 정확한 타입을 나타내기 위해 사용된다. const friends = "dana"; friends = "udin"; // ❌ error: Cannot assign to 'friends' because it is a constant. 변수 frineds 는 "dana" 만 값으로 가질 수 있다. 다른 문자열들은 friends 와 호환되지 않는다. 문자열 뿐만아니라 숫자, 불리언, 객체 등의 다양한 값에 대해 사용할 수 있다. type MyFavoriteNumber = 3; type MyBoolean = true; type MyInfo = ..
[TypeScript] 유니언 타입(Union Type)과 내로잉(narrowing) 📌 타입스크립트의 추론 유니언(union) : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 내로잉(narrowing) : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것 📌 유니온 타입 둘 이상의 타입을 허용하는 타입. 함수 매개변수 또는 반환 타입으로 여러 타입을 허용하고자 할 때 유니언 타입을 사용할 수 있다. function yourMenu(menu: boolean | string) { console.log(`menu: ${menu}`); } menu 매개변수에는 불린 또는 문자형을 받을 수 있다. 예를 들어 yourMenu(false) 이 될 수도 있고, yourMenu("..
[TypeScript] 타입 애너테이션(Type annotation) 📌 타입의 종류 타입스크립트의 타입은 자바스크립트의 기본 원시 타입과 일치한다. null undefined boolean string number bigint symbol 📌 오류의 종류 오류의 종류 설명 구문 오류 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우 타입 오류 타입 검사기에 따라 일치하지 않는 것이 감지된 경우 📌 타입 애너테이션 초깃값을 할당하지 않고도 변수 타입을 선언할 수 있는 구문을 말한다. 진화하는 any : 초기 타입을 유추할 수 없는 변수 let name: string; name = "ramin"; 📌 불필요한 타입 애너테이션 타입을 즉시 유추할 수 있는 변수에도 타입 애너테이션을 사용할 수 있다. 하..
[책 리뷰] 그림과 작동 원리로 쉽게 이해하는 웹의 기초 얼마전 4개월에 걸친 부트캠프를 무사히 수료했다. 하지만 부트캠프에서는 HTML/CSS, Javascript, React 등에 대해서만 배웠고, 정작 웹의 기초는 배우지 않았다. 꼭 알아야할 웹에 대해 전혀 다루지 않고 넘어갔기 때문에 결국은 교육을 수료한 후 따로 공부해보고자 했다. 막상 마켓컬리, 당근마켓을 클론코딩했는데 내가 짠 코드가 어떤 원리로 브라우저에 렌더링되고 그려지는지 전혀 알지못했다. 아무리 프론트엔드 개발자가 눈에 보이는 페이지를 만든다고 해도, 그 브라우저에 그려지는 페이지의 기초가 담긴 웹의 개념에 대해서 모른다는 것은 있을 수 없는 일이었다! 이 책은 제목에 걸맞게 웹의 기초에 대해서 다루고 있다. 처음 웹을 접하는 사람이..
[책 리뷰] 개발자가 되고 싶습니다 내가 개발자가 되기 위해 준비하기 시작한지는 1년이 채 되지 않았다. 10살의 나는 동네 컴퓨터 학원을 다니면서 워드프로세스 자격증을 배우기 위해 한글 및 영어 타이핑 연습을 하고, 한글 프로그램을 익혔다. 주변의 언니, 오빠들이 나모웹에디터로 홈페이지를 만드는 모습을 보면서 나도 홈페이지를 만들어보고싶다! 라고 생각했었는데 학원 선생님이 내가 너무 어리다는 이유로 알려주지 않았었다.. 이때 당시에 내가 배우고 싶은 걸 다 못배웠던 기억이 있는데, 이때도 '개발자가 되고 싶습니다'와 같은 가이드북 같은 존재가 있었다면 얼마나 좋았을까 생각이 들었다. 나는 비전공자로 개발자가 되기 위해 공부를 시작한건 작년 7월부터였다. 처음에는 개발의 종류도 모르고, 기술 스택도, 무..
[React] React router 와 React router dom 에 대해 📌 React router 와 React router dom ? 리액트 팀 프로젝트를 하고있을 때였다. 리액트 라우터로 SPA(Single Page Application) 를 구현했다. 그러던 중 package.json 에 아래의 사진처럼 react-router 와 react-router-dom 이 두 가지가 설치되어 있는 것을 발견했다. 왜 두가지나 있는거지? 하고 구글링을 했다. 요약하면, React Router는 라우팅을 처리하는 핵심 라이브러리이고, React Router DOM은 React Router를 웹에서 사용하기 쉽도록 확장한 라이브러리이다. 즉 React Router DOM 은 React Router 을 포..
[Web] HTTP Request Methods 란? 🧶 HTTP Request Methods 란? 클라이언트가 웹 서버에게 요청하는 목적 및 그 종류를 알리는 명령어를 말한다. HTTP 요청 메서드는 서버에게 어떤 동작을 수행해야 하는지 알려준다. 가장 흔히 사용되는 HTTP 요청 메서드에는 GET, POST, PUT, DELETE, HEAD 가 있고, 이외에도 OPTIONS, TRACE, CONNECT 등의 다른 HTTP 요청 메서드가 있다. javascript 에서는 이 HTTP Request Methods 를 사용하기 위해서 XMLHttpRequest 객체 또는 Fetch API를 사용할 수 있다. XMLHttpRequest 보다는 간결하고 강력한 기능을 제공하는 Fetch API 를 더많이 사용..
[Web] 쿠키(Cookie)와 세션(Session) 이란? 🧶 HTTP(Hyper Text Transfer Protocol) 세션과 쿠키는 HTTP 프로토콜과 관련이 아주 깊다. HTTP 는 웹에서 데이터를 교환하기 위한 통신 규약이다. 세션과 쿠키는 HTTP 프로토콜을 기반으로 동작하며, 웹 개발에서 상태 정보를 유지하고 사용자를 식별하기 위해 사용한다. HTTP 프로토콜은 기본적으로 상태를 유지하지 않는 Stateless 프로토콜이다. 즉 서버는 클라이언트의 각 요청을 독립적으로 처리하고 요청 간의 연관성을 알지 못한다. 이로 인해 쿠키와 세션이 필요해지는 것이다! 🧶 Cookie 란? 쿠키(Cookie)는 클라이언트 측에서 상태 정보를 저장하는 작은 데이터 조각이다. 서버는 클라이언트에게 응답을 ..
[Web] 웹 브라우저가 어떻게 동작하는가? 이번 포스팅에서는 주소창에 github.com 을 입력하고 브라우저 화면에 github.com 페이지가 표시될 때까지 어떤 일이 일어나는지 확인해볼 것이다. 🧶 브라우저의 동작 원리 우리가 자주 사용되는 주요 브라우저에는 Chrome, Internet Explorer, Firefox, Safari, Opera 이 있다. 그 중에서 Chrome, Firefox, Safari 가 전 세계 데스크톱 브라우저 사용량의 71%를 차지할 만큼 많이 사용된다. 브라우저는 웹 리소스를 서버에 요청하고, 브라우저에 표시하는 기능이 있다. 웹 리소스는 보통 HTML 문서이다. 하지만 이 외에도 PDF 문서나 이미지 또는 기타 콘텐츠 유형일 수도 있다. 이 리소스의 위치는 사용자..