data life

하나의 배열을 지정해주자. const topics = [ { id: 1, title: "html", body: "html is..." }, { id: 2, title: "css", body: "css is..." }, { id: 3, title: "js", body: "js is..." }, ]; 이때, title만 리스트 항목으로 만들고 싶다면 1. for문 이용하기 const liTag1 = []; for (let i = 0; i < topics.length; i++) { liTag1.push( {topics[i].title} ); } 2. 함수 이용하기 function mapFn({topic}){ return {topic.title} } const listTag2 = topics.map(mapFn)..

React란? SPA (Single Page Application) 일반적으로는 최초에 서버로부터 HTML을 받고 페이지의 변경이 필요하다면 다시 서버에 요청하여 HTML을 전달받음 이 과정에서 페이지를 처음부터 다시 불러옴(reload) 반대로 SPA의 경우, 최초 서버로부터 HTML을 받고 페이지의 변경이 필요하다면 변경이 필요한 부분만 JSON으로 전달받음 이 과정에서 페이지에서 변경된 부분만 계산하여 다시 그리게 됨! 이를 위해서, React가 쓰이는데 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 이때, JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공하는 JSX가 있다. 이는 HTML과 유사하여 개발자들에게 유용하다! 또한, UI를 구성..

전환(Transition) CSS에서는 전환 속성을 이용하여 요소의 속성값을 변화시킬 수 있다. 전환 속성은 다음과 같음. transition transition-delay : 전환 효과가 나타나기 전의 지연시간 설정 transition-duration : 전환 효과가 지속할 시간 설정 transition-property : 요소에 추가할 전환 효과 설정 transition-timing-function : 전환 효과의 시간 당 속도 설정 또한, 시간을 정해주어 효과의 시간 당 속도 설정도 가능하다. 1. linear : 일정한 속도로 진행 2. ease : 기본값(default)으로 slow-fast-slow 3. ease-in : 천천히 시작 4. ease-out : 천천히 끝남 5. ease-in-o..

:active 마우스 클릭 시 : hover 마우스가 위에 있을 시 : focus 키보드로 선택 시 : visited 방문한 사이트에 효과 적용 : focus-within 부모 요소에게 적용하여 자식 요소들 중 하나에 focus되었을 때 효과 적용

mongoDB?? 어플리케이션 개발자를 위해 만들어진 분산 데이터베이스로 어플리케이션 개발 및 확장이 용이하도록 설계된 문서 데이터베이스 Document-based(문서 기반) JSON-like-document 형태로 데이터를 저장할 수 있어서 굉장히 사용하기 쉽다! 설치하기 mongodb.com > Resources > Server > Installation > Install MongoDB Community Edition 각자 환경에 맞게 설치를 시작하면 된다! 현재 나는 macbook pro (M1)을 쓰고 있어서 macOS로 설치를 시작하겠음 ⭐️여기서 중요한건 ⭐️ 기본적으로 MacOS 유저들은 MongoDB 설치하기 전에 homebrew 설치가 필요하다. HomeBrew 설치 가이드 Homebr..

Node.js란? 주로 서버 프로그래밍에 사용되는 JavaScript 기반의 소프트웨어 플랫폼 HTTP 통신 관련 라이브러리가 내장되어 있고 NPM(Node Package Manager)을 통한 방대한 라이브러리를 제공하고 있다. 현재까지도 많은 업데이트를 통해서 프론트엔드 개발자의 서버 개발 접근성을 높이고 있다. 또한, CRA(Create React App)으로 프로젝트 생성 시 개발 환경 및 테스트 서버로 이용된다. npm 이란? Node.js 설치 시에 함께 설치되는 패키지라고 보면 된다. Node.js 환경에서 사용하는 각종 패키지들을 관리하는 저장소이며 패키지 뿐만 아니라 서버 실행 및 관리에 필요한 다양한 명령어들을 제공해주고 있다. package.json node.js 관련 정보를 담는 방..

box-shadow inset : 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려짐 offset-x, offset-y : 그림자의 위치를 설정 offset-x : 수평 거리를 의미하며 음수 값은 그림자를 요소의 왼쪽에 표시 offset-y : 수직 거리를 의미하며 음수 값은 그림자를 요소의 위쪽에 표시 blur-radius : 깂이 클수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아짐 spread-radius : 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듬 color : 색상 결정 Basic HTML 삽입 미리보기할 수 없는 소스 + blur-radius HTML 삽입 미리보기할 수 없는 소스 + spread-radius HTML ..

Canvas javascript를 통해 그래픽을 그리는데 사용하는 HTML 요소 그래프 그리기 사진 결합 간단한 애니메이션 제작 기본 size 300픽셀 × 150픽셀(너비 × 높이) >> 사용자 지정 크기는 HTML height및 width속성을 사용하여 정의 가능 CanvasRenderingContext2D = 🖌️ const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); .fillRect() : 채워진 사각형 그리기 .fillRect(x, y, width, height) or ctx.rect(x, y, width, height); ctx.fill(); .strokeRect() : 윤곽선이 있는 사각형 ..

그리드 형태를 자동으로 정의 : grid-auto-columns : grid-auto-rows grid-template-columns(또는 grid-template-rows)의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성 grid-auto-colums .container { display: grid; grid-template-columns: repeat(2, 30px); grid-template-rows:repeat(2, 30px); grid-auto-flow:column; grid-auto-columns:100px; gap: 3px; } HTML 삽입 미리보기할 수 없는 소스 grid-auto-rows .container { display: grid; grid-template-columns:..

개별 아이템 세로 정렬 : align-self .item { align-self: stretch; align-self: start; align-self: center; align-self: end; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스 2️⃣ start HTML 삽입 미리보기할 수 없는 소스 3️⃣ center HTML 삽입 미리보기할 수 없는 소스 4️⃣ end HTML 삽입 미리보기할 수 없는 소스 개별 아이템 가로 정렬 : justify-self .item { justify-self: stretch; justify-self: start; justify-self: center; justify-self: end; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스..