모던 자바스크립트 딥다이브 책의 내용을 기반으로 작성하였습니다.🌿 C나 Java의 경우 정수(소수점 이하 없는 숫자)와 실수(소수점 이하 있는 숫자) 구분이 가능한 다양한 숫자 타입을 제공한다. 하지만 자바스크립트는 모든 수를 실수로 처리하며, 정수를 위한 데이터 타

'모던 자바스크립트 딥다이브' 책의 내용을 기반으로 작성하였습니다.🌿 변수 변수란 무엇인가 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이며, 메모리 셀 하나의 크기는 1바이트(8비트

AWS TechCamp - AWS 핵심 서비스로 웹 애플리케이션 구축하기 3일동안 진행되는 온라인 AWS TechCamp를 신청했다. 실무에서 사용해오던 AWS 핵심 서비스들에 대한 깊은 이해와, 아직 사용해보지 않은 서비스들에 대한 지식의 확장을 기대하면서!

'모던 자바스크립트 딥다이브' 책의 내용을 기반으로 작성하였습니다.🌿 1995년, 넷스케이프 커뮤니케이션즈가 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기 위해 탄생한 것이 바로 브렌던 아이크가 개발한 자바스크립트이다. 1996년, 마이크로소프트는 자바스크립트

React에서 Youtube API 데이터 불러오기 구글 클라우드 플랫폼 Google Cloud Platform > API 라이브러리 > YouTube Data API v3 > 사용 클릭 ! 사용자 인증정보 들어가기 키표시 옆 API 키 수정 클릭 ! Restfu

Event onChangeMode 값으로 함수를 전달한다. html 문법은 똑같지 않다. 코드를 작성하면 리액트 개발환경이 최종적으로 브라우저가 이해할 수 있는 html로 컴버팅해주기 때문에

VSCode 사용 시 설치하면 편리한 익스텐션 정리! 이제 없으면 불편하다고 느낄정도. 한번에 정리해놓기 :) 배경 테마 정하기 아이콘 테마, 아이콘이 조금 더 생동감 있게 바뀜코드 포멧팅ctrl+, 눌러서 setting 창으로 이동 -> tab 2로 변경 괄호마다

img 태그에 src 속성이 있듯이 직접 정의한 나만의 태그(컴포넌트)에 속성을 넣을 수 있는데, 리액트는 그 속성을 props 라고 부른다. 그리고 props에는 객체-Object가 들어온다.📌 각각의 컴포넌트(사용자 정의 태그)를 만들어준 후 App()에 위치시켜

리액트 컴포넌트를 선언하는 두 가지 방식에는 함수형과 클래스형이 있다. 클래스형 이후에 함수형이 나왔지만, 클래스형을 쓰던 기업의 프로젝트 유지보수를 위해 개념을 알고 있어야 한다. 최근에는 함수형 + 클래스형의 장점을 넣은 리액트 훅을 사용하는 추세이다.클래스형 컴포

scaffolding 빠른생성 - 터미널 작성순서 - ls (위치확인) cd desktop (이동) npx create-react-app 폴더명 (scaffolding 생성) cd 폴더명 (생성한 폴더로 이동) code . (vscode열기 : 설정필요)

📌 Viewport는 웹사이트에서 보여지는 영역을 뜻하며 vh, vw는 현재 실행중인 스크린 크기를 기준으로 상대적인 크기를 반환하는 단위이다. 예를들어 현재 스크린 높이가 1000px이라면 1vh=10px, 50vh=500px 이 된다. 특징 1) vh 는 widt

settings에 들어간다. Search settings에 'explorer.compactFolders'라고 입력한다. 체크박스 해제하면 끝!

Nodejs.org에서 다운로드 터미널에서 버전확인 npx create-react-app 작성하여 설치 npm start로 페이지 연동Material Icon Theme : 확장자 아이콘 ES7+ React/Redux/React-Native : 자동완성문법Prettie

인간의 눈으로는 화소를 구분할 수 없는 화소 밀도를 가진 애플이 만든 브랜드의 이름이다. 애플의 레티나는 300PPI(Pixel Per Inch) 고해상도 디스플레이를 브랜드화한 것이며, 일반 맥북Pro보다 최대 4배 선명하고, Full-HD(1920X1080) 해상도

사이트를 마크업해보며 실수했던 것, 새로 알게된 것들을 정리해보았다. 웹접근성을 항상 염두해두고 작업할 것!! :)

Web Accessibility, 웹접근성 1. 대체텍스트 제공 (alt="") image 시각장애인은 이미지 안의 텍스트를 볼 수 없기 때문에 속성 안에 따로 텍스트를 입력해준다. 이 때 이미지의 텍스트를 그대로 전달하기보다, 내용의 주요 타이틀도 신경써서 함께

transform 다양한 도형의 변형을 구현하며, 애니메이션을 사용하기 위해서는 transition의 도움이 필요하다. 예를들어 hover시, 원래 요소에는 기본적으로 보여질 transform을, hover에는 변형될 transform을 각각 작성 후 transitio

Gradient background 속성으로 들어가며, 보통 를 사용한다. 은 방향을 나타내며, 오른쪽에서 마지막 색상으로 끝난다. 와 같이 각도를 넣어줄 수도 있음 > ❗️ 포토샵 디자인을 받을 때는 꼭 '레이어스타일'로 그라디언트를 받아야 정확하게 구현해낼 수

async & await 와 은 Promise를 조금 더 간결하게 그리고 동기적으로 실행되는 것처럼 보이도록 만들어준다. Promise chainig과 같이 난잡해진 코드 위에 사용하면, 동기식으로(순서대로) 코드를 작성하는 것처럼 간편하게 만들 수 있다. 이렇게 기