컴포넌트는 다른 컴포넌트와 별개인 부분으로 따로 독립적으로 생각하기데이터는 최상위에서 관리하고 하위 컴포넌트에는 따로 state 생성없이 위에서 받아온 state를 적용하여 ui를 보여주기단순하게 만들 수 있는 컴포넌트는 단순하게 만들기!!(순수 함수 사용: 내부에 s

\*\*> - 페이지를 이동시켜 주는 함수 navigate(2)처럼 안에 숫자넣으면 앞으로가기, 뒤로가기 기능개발 가능페이지를 이동시켜 주는 함수 \*\*> - nested routes: 서브경로를 만들 수 있는 라우트로 <Route>안에 <Route>를

작업을 진행하면 가장 많이 접했던 에러메세지는 data가 null값 또는 undefined로 뜨는 것이였다. 데이터를 받아올때 비동기적으로 받아오기 때문에 생기는 문제였다. useEffect로 데이터를 받아오기 전에는 return문 안의 JSX에 우선적으로 렌더링이 되

재귀(Recursion)는 자기 자신을 호출하는 함수나 알고리즘의 과정을 말합니다. 재귀는 다음과 같은 경우에 사용됩니다.하위 문제가 상위 문제와 동일한 구조를 가지는 경우주어진 문제를 하위 문제로 쪼갤 수 있는 경우재귀적인 알고리즘은 주어진 문제를 여러 하위 문제로

className htmlFor이벤트핸들러: 두번째 문자 첫글자 대문자로 작성onBlur onFocus onMouseDown ...

import { useState } from 'react'; import styled from 'styled-components'; export const ModalContainer = styled.div` display: flex; justify-content : center; align-items: center; height : 3...

부모요소에 a 태그 링크가 걸려있을때 자식 요소에 클릭이벤트를 주고 e.preventDefault를 주면 자식 요소를 클릭해도 부모의 a 태그의 링크로 넘어가지 않는다.e.preventDefault는 이벤트의 기본적인 다음 동작을 방지하는 속성이다. a 태그나 sub

웹 서버(Web Server)는 클라이언트(사용자)의 요청(Request)에 대해 적절한 응답(Response)을 반환하는 소프트웨어입니다. 웹 서버는 HTTP(HyperText Transfer Protocol)를 통해 웹 브라우저와 통신하며, HTML, CSS, Ja

로컬저장소에서 원격저장소와의 동기화를 위해 pull을 하였지만 아래와 같은 에러가 뜸.error: Your local changes to the following files would be overwritten by merge로컬에서 변경한 파일이 원격저장소의 파일 내

CSS에서 background 이미지에 마우스를 올려 hover 효과를 주고 싶을 때가 있습니다. 보통은 transform: scale(1.1)처럼 사용하게 되면 transition효과가 적용되어 자연스럽게 커지는 효과를 받을 수 있지만, transform scale이

트리(Tree)는 데이터 구조 중 하나로, 계층 구조를 나타내는 비선형 구조입니다. 루트(Root) 노드에서 시작하여 가지(branch)로 이어진 노드들로 구성되어 있습니다. 각 노드는 하나의 부모(parent) 노드와 여러 개의 자식(child) 노드를 가질 수 있습

HTML의 <form> 태그에는 데이터를 서버로 제출하는 역할을 하는 submit 버튼이 필요합니다. 이 때, <form> 태그 내부에 submit 버튼을 생성할 수 있는 방법으로 <button> 태그와 <input> 태그를 모두 사용할 수 있습니

강남역에 엄청난 폭우가 쏟아진다고 가정합시다. 정말 재난 영화에서나 나올 법한 양의 비가 내려서, 고층 건물이 비에 잠길 정도입니다. 그렇게 되었을 때, 건물과 건물 사이에 얼마큼의 빗물이 담길 수 있는지 알고 싶은데요. 그것을 계산해 주는 함수 trapping_rai

재귀 > \`\`\`function sumTo(num) { if (num <= 1) { return num; //만약 num 이 1 이하이면 num을 반환한다. } return num + sumTo(num - 1); //그렇지 않으면 num과 s

AJAX(Asynchronous JavaScript And XML)란 비동기적으로 서버와 브라우저 간의 데이터를 주고 받는 기술입니다. AJAX를 사용하면 페이지를 새로고침하지 않고 필요한 데이터만 서버에서 비동기적으로 받아올 수 있습니다. JSON, XML, HTM

인풋 박스 텍스트 자동완성시 배경색이 바뀌는 문제자동완성시 기본 스타일 에이전트에 색상이 바뀌는 코드 작동기본 스타일 에이전스에 배경색은 !important로 설정이 되어 있으므로 autofill 선택자에 box-shadow로 배경색을 제어할 수 있다.

onclick 중복사용시 뒤에 있는 값으로 적용됨Element.addEventListner('type', 'handler') 권장되는 방식, 중복사용 가능Element.addEventListner('type', 'handler') 메소드로 이벤트 핸들러 등록시 Ele

window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다.자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부릅니다.어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체

let myDate = new Date() 객체 생성한 시간 출력let myDate = new Date('YYYY-MM-DD') 특정 시간 객체let myDate = new Date(YYYY, MM, DD, hh, mm, ss ,ms) YYYY,MM 필수 나머지 생략가

설치 : sudo apt update > 비밀번호 입력 > sudo apt install 설치프로그램 > Y 제거 : sudo apt remove 설치프로그램\*mc : 홈디렉토리 gui로 보여줌 (F10 종료)설치 : homebrew 설치(명령어 터미널에 붙여넣기)