프론트엔드

vs codecode hello.js 2. 터미널nano hello.js nano nano를 종료하지 않고, 파일을 저장하는 법^O WriteOut파일 편집 후 종료^X Ctrl + X파일 열기^R

프로그래밍 언어가 실행되는 환경JAVASCRIPT 런타임: 웹브라우저(크롬, 사파리), Node.js과거 java script의 주된 용도: 웹페이지를 구성하는 것node.js 등장 이후: 웹 브라우저가 아닌 곳에서도 js를 실행할 수 있게 되었고, 웹페이지 구성을 넘

절대경로와 상대경로 절대경로: pwd로 확인 상대 경로: 특정 폴더 또는 파일의 위치를 현재 위치를 기준점으로 나타냄. 현재 위치한 폴더는 점(.)으로 표현하고, 상위 폴더는 두 개의 점(..)으로 표현 점(.)은 현재 폴더를, 슬래시(/)는 폴더 내부를 나타냄. .

obj.hasOwnProperty(key) obj.hasOwnProperty(key)는 객체 obj가 속성 key를 직접 소유하고 있는지 여부를 판별하는 메서드resultkey = objkey;resultkey = objkey는 객체 result에 속성 key를 추가하

배열, 객체, 함수에 넣을 때 가능구조 분해 할당

Unit9 - JavaScript 핵심 개념과 주요 문법 다시풀고, Koans 공부하기

깊은복사 object.assign({}. obj); 얕은복사 - 얕은 복사는 top property는 복사(고유 값을 가짐)가 되지만, 그 안에 내장된 속성에 대해서는 주소를 공유하게 됨.

내부 함수에서 외부 함수의 매개변수에 접근 가능함. function(x) => function(y) => {return x+y}

스코프 주의하기주소값 주의하기바나나 코드 주의하기

arguments: 유사배열 객체 그냥 외워라 유사배열객체 return arguments; 하면 key랑 value값이 설정됨. Array.from() 배열로 만들 수 있음 document.body.childNodes / Arguments

HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 ModelDOM을 객체의 모습으로 출력 node.parentElement.style.color = "red";}element와 node의 차이

DOM에서 이벤트는 마우스를 클릭하거나, 키보드를 누르는 등의 사용자 액션에 의해 발생함.브라우저 창 크기를 조절하거나, 스크롤하는 것도 DOM 이벤트의 일종이벤트가 발생할 때 실행되는 함수를 이벤트 핸들러라고 부름.이벤트와 관련된 속성은 on이라는 접두어가 붙음. (

https://css-tricks.com/centering-css-complete-guide/

javascript의 객체(object)와 OOP의 객체(Instane)는 다르다.청사진 = 설계도(대체로 동일하게 적용): 자동차가 기능하기 위해 필요한 네 바퀴, 핸들, 좌석, 엔진클래스는 차를 만드는 자동차 공장 & 설계도에 가깝다.대문자로 시작하며 일반명사로 만

프로토타입 체이닝은 자바스크립트 문법의 코어임.자바스크립트는 프로토타입 언어 기반이다. 프로토타입 체이닝은 한 번 정도 파볼만 함.DOM도 상속 관계로 이루어져있습니다.DOM도 상속관계로 이루어져 있음. proto 를 활용하여 상속 관계를 확인할 수 있음.자료구조 알고

붕어빵틀(클래스)과 붕어빵(인스턴스)steve.\_\_proto\_\_steve.\_\_proto\_\_constructor(창조물에 접근하는 방법)구체적인 부모 속성의 값까지 받으려면 super라는 값을 이용해서 지정된 값을 가져올 수 있음. 선택적으로 값을 가져올

\---- 구체적인 파일 경로를 지정해줌. chaining하고 계속하는 건 직관적으로 와닿지 않음.묶어서 처리하는 게 더 직관적임.이런식을오 chaining하면 코드가 복잡해짐..그런데 Promise.all은 코드가 간결해짐. 그리고 배열로 묶어서결과값을 return해

npm install underscore

함수명 정의배열명 호출고차함수 메소드(.filter, .map, .reduce 등)사용할 함수 호출사용할 함수명 정의함수 정의 시 사용할 전달인자: 2에서 호출한 배열 내의 요소그것을 무엇이라고 칭할 것인지 정의(cartoon)함수에 따른 실행결과 정의

reduce 메소드의 콜백 함수의 매개변수 순서는 다음과 같습니다:accumulator (누적값): 이전 콜백 호출에서 반환된 누적값입니다.currentValue (현재 요소): 처리 중인 현재 요소입니다.currentIndex (현재 인덱스, 선택적): 처리 중인 현

compose는 여러 개의 함수를 인자로 전달받아 함수를 리턴하는 고차 함수입니다.function compose(...funcArgs)

개발단계: main branch에 안하고, 새로운 branch에 함dev branchproduction 단계: 다수의 사람이 ㅇ여러 사람이 협업하는 branch에 자기 작업내역을 커밋하면 꼬임. 그럼 기능이 섞여내 원격 브랜치에 포크해와서 막 작업을 하고, 중간중간 작

초기값 설정 시 {}: 빈 obj"": 빈 str\[]: 빈 배열인가?

만약 사용자가 지정된 주소인 “/’, “/mypage”, “/dashboard” 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있습니다. 이럴 때 사용할 수 있는 속성이 path=”\*”입니다. 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는

내가 작성한 코드 {MyPage}에러가 발생한 원인은 React 컴포넌트를 element prop에 직접 할당하는 대신 컴포넌트를 참조했기 때문입니다.즉, 이 코드에서 MyPage는 React 컴포넌트를 참조하고 있지만, 실제로는 컴포넌트 인스턴스(즉, JSX 형태)

React Router v6에서는 <Routes>의 자식 컴포넌트로 <Route>를 사용함.각 <Route>에는 path와 element prop이 필요함. 여기서 element prop에는 렌더링하고자 하는 컴포넌트의 인스턴스를 할당해야함.이는 Rea

주석 보기

<input>: <input> 엘리먼트는 사용자로부터 텍스트, 숫자, 이메일, 비밀번호 등 다양한 형태의 입력을 받을 수 있는 텍스트 상자를 생성합니다. type 속성을 사용하여 원하는 형식을 선택할 수 있습니다.예시:<input type="text">

onChange onChange는 폼(Form) 엘리먼트에서 발생하는 이벤트 값입니다. 이벤트 핸들러를 등록하여 해당 엘리먼트의 값이 변경될 때 실행되는 함수를 지정할 수 있습니다. onChange 이벤트는 주로 `, ` `` 와 같은 사용자 입력을 받는 엘리먼트

다음 코드도 삭제기능을 구현한 것인데, 이해가 안감. 찬찬히 뜯어보며 이해하기.Input에서 Default value 설정 자체를 parkhacker로 바꾸기보다는 useState의 initial value를 ‘parkhacker’로 설정하는 것이 바람직함.value=

200 : OK, 성공적으로 응답을 마침302 : Found, 리다이렉트할 URL을 확인함404 : Not Found, 클라이언트가 잘못된 페이지를 서버에 요청하여 페이지를 찾을 수 없음406 : Not Acceptable, 클라이언트가 응답 코드를 받을 수 없음500

처음 사용할 때는 바로 활성화되지 않을 수 있음. 안되더라도 오류가 아니라 몇 시간 지난 후에 해보면 됨!

GET /restaurants?coordinate=126.9178889,37.5561619&type=korean

How to catch asyncronous error in React Errorboundary얘만 class 처리해야함.axios로 api call 하는 걸 많이 씀.

상태관리 library redux ..공부해놓기

// Spread Syntax를 이용해서 일부 데이터만 바꾸기. // 1. 전체 항공편 리스트에서 해당 uuid를 가진 항공편의 인덱스를 찾기 // 2. 그 인덱스를 통해 항공편 데이터를 참조함 // 3. 이 참조된 데이터를 펼쳐서(

function sumOfArraysInArray (arr) { const joinedArr = arr.reduce((acc, val) => acc.concat(val)); const filteredNumber = joinedArr.filter(function (e

substr() 메서드는 문자열에서 특정 위치부터 일정 길이의 문자열을 추출하는데 사용됩니다. substr(1)은 현재 단어의 첫 번째 문자 이후의 부분을 추출하는 것을 의미합니다. 따라서 wordsi.substr(1)은 현재 단어에서 첫 번째 문자 이후의 문자열을 추

// factorial(n) = nfactorial(n-1)// factorial(5) = 5factorial(4)// factorial(4) = 4factorial(3)// factorial(3) = 3factorial(2)// factorial(2) = 2\*fac

// factorial(n) = nfactorial(n-1)// factorial(5) = 5factorial(4)// factorial(4) = 4factorial(3)// factorial(3) = 3factorial(2)// factorial(2) = 2\*fac

HTTP와 HTML 차이가 뭐지?

(1) n === 1 (2) 1 (3) n \* fac(n - 1)

변화는 감지하지만 그 변화가 렌더링을 발생시키면 안되는 상황에서 사용함.

target과 currentTarget은 이벤트 객체에 속하는 속성입니다. 이들은 이벤트가 발생한 요소와 이벤트 리스너가 등록된 요소를 나타냅니다.target: 이벤트가 실제로 발생한 요소를 나타냅니다. 예를 들어, 클릭 이벤트가 버튼 위에서 발생했다면 target은

컴포넌트 상태 이해하기

중복코드를 많이 사용하게 되면 유지보수에 있어서 힘들게 됨.공통요소를 사용하지 않을 수 없음.: 공통요소를 쓸 때 산탄총 수술을 안하게 해야함.그래서 컴포넌트 단위로 관리함.재사용되어야 하는 요소. 공통적으로 다른 페이지에서 사용하는 요소를 컴포넌트로 만들어서 사용하는

Redux를 사용하기 위해서는 redux와 react-redux를 설치해야합니다.DEPENDENCIESredux, react-redux가 설치되어 있는 것을 확인하실 수 있습니다.index.js안내한 순서에 따라 index.js를 완성해주세요!import { Provi

props으로 전달할 값들을 객체로 만들면 더 깔끔하게 전달가능함.props로 만들어준 후에 spread 시켜서 return 값에 넣어주기.ex) {...counterProps}App.js 에서 props를 전달인자로 받아올수 있음.props는 전달받을 때 객체 형태로

alert를 주는 것은 좋지 않은 UI 그 대신 focus를 주는 방식으로 전개해나가는 것이 좋음. useRef html 돔요소에 접근할 수 있는 useRef 기능을 통해서 focus 기능을 만들 수 있음. 레퍼런스 객체, 즉, 돔요소를 선택하는 useRef라는 기능

삭제기능구현하는 방법 [App.js 에서] 1. filter 해줌 2. setData로 state을 업데이트 해줌 [DiaryList.js에서] 3. onDelete 함수를 받아오기 [DiaryItem.js에서] 4. 전달할 prop에 onDelete 추가하기 5. 삭제하기 button 만들고, onClick이벤트로 onDelete(id)로 동작하...

다양한 정보를 여러사람들과 공유할 수 있는 공간전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함.웹에서 표준적으로 사용되는 기술이나 규칙사용자가 어떤 브라우저를 사용하더

1) aria-label2) aria-live속성 값으로는 polite, assertive, off(default)가 있습니다.polite : 스크린 리더가 현재 읽고 있는 내용을 모두 읽고 나서 변경된 내용을 사용자에게 전달합니다.assertive : 스크린 리더가

useCallback을 사용하면 해당 컴포넌트가 렌더링 되더라도 그 함수가 의존하는 값(deps)들이 바뀌지 않는 한 기존 함수를 재사용할 수 있음.useState의 2번째 인자인 setData에 함수형을 써줘야함.: 함수형 업데이트(값 대신 함수를 전달하는 것)를 통

fonts.google.com

만들때 가져온 쿠키를 전달해야 로그아웃할 때 쿠키가 잘 삭제된다.

재귀는 함수가 자기 자신을 호출하는 것을 의미합니다. 예를 들어, 트리 구조나 그래프의 깊이 우선 탐색(DFS)에서는 재귀를 통해 간결하고 이해하기 쉬운 코드를 작성할 수 있습니다. 또한, 피보나치 수열이나 팩토리얼 계산 등에서도 재귀를 사용할 수 있습니다.UI(Use

typescript의 특징: : 타입스크립트의 모든파일은 글로벌 모듈로 취급받기 때문에 파일이 나누어져 있어도 하나의 통합된 파일로 인식을 해서 변수가 겹치면 Redeclare하지 말라고 한다.해결방법: 개별모듈 만들기1) file마다 import, export를 써주

!! 다음에 이어지는 코드에 대한 boolean 값을 반환하겠다즉, 맞으면 true아니면 false 반환 vertex를 포함하면 true, 포함하지 않으면 false

{id? number; name: string}readonly apiKey

동일한 타입을 정의해줄 때는 타입만 따로 빼서 정의가능함.function scope 안에 type이 똑같이 정의된 경우에는 전역 글로벌 scope의 type과 별개로 정의됨.규칙을 위반하지만 않으면 오류가 뜨지 않음.// 따라서 빈 객체를 넣어도 위반하지 않은 것이라

여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입값을 할당해주지 않아도 저절로 제일 위는 0번부터 할당해줌. 만약 제일 위를 10으로 할당해주고, 나머지 할당안해줘도 밑에는 순서대로 11, 12가 할당됨.만약에 중간에 20을 할당하면, 다음 guest는 21

특정 변수의 타입을 우리가 확실히 모를 때 사용함.any 타입은 안쓰는 것이 좋음.: any는 저장 및 꺼내쓰는 것 모두 다 돼서 변환 시 typeError를 일으키게 되는 문제가 있음.any와의 차이점: unknown값은 any타입과 똑같이 모든 값을 저장할 수 있지

void를 이해하기 전에 return문과 console.log의 차이점을 알아보자. return으로 반환하는 값과 console.log로 출력하는 값의 차이점은 다음과 같습니다: 반환 값의 용도 : return은 함수에서 값을 반환하기 위해 사용됩니다. 함수 내부에

앞으로 개발을 해나갈 때 그 컴포넌트들이 어떤 방향으로 나아갈지를 생각하고 컴포넌트로 묶는 것이 중요함.예를 들어서, 현재는 비슷한 기능으로 보이지만 다른 방향으로 나아갈 컴포넌트들이라면, 애초에 다른 컴포넌트로 묶어서 개발하는 것이 나음. 그래야 개별적으로 유지보수를

동일한 속성과 특징을 모아둔 집합이다.20 number literal type 집합은 numbertype의 부분집합임.부분집합이기 때문에 아래와 같은 계층을 이룸더 작은 타입의 값을 큰 타입에 할당하는 것은 가능함.더 큰 타입의 값을 더 작은 타입의 값에 할당하는 것은

npm initnpm i @types/nodetsconfig.json 작성{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true,

animal 타입: 수퍼타입dog 타입: 써브타입property가 많은 애가 subtype이 되는 것: 넘 당연한 이치같긴하지만 메모해둠..ㅋ변수를 초기화할 때, 초기화하는 값으로 객체 리터럴을 사용하면 발동하는 검사임.객체 타입을 초기화할 때 아래와 같이 객체 리터럴

반환값 기준매개변수는 초기값 타입 기준타입스크립트는 웬만한 변수는 타입을 추론하고, const로 선언된 상수가 아닌 이상 넓은 범위의 타입으로 추론해줘서 범용적으로 사용할 수 있게함.

deepCopy하는 방법은 변수를 선언한다음에, let variable = ...spread문법

백엔드 배포 프론트엔드 배포

이런 오류가 떴을 때 대처법: 훅을 체크해본다1차적으로 함수 안에서 혹을 썼는지, 아니면 함수 밖에서 선언하고 있어서 오류가 나는지 체크해보면 됨.그래도 안되면?: 안될 리 없음. 우선 함수 안에서 선언하고 있는지 꼼꼼하게 체크하여라.400 오류: redirect_ur

쓸 경우에는 둘 중 하나만 쓰기

헤더와 푸터가 있고, 그 사이에 내용을 페이지별로 만들었음그 때 푸터가 내용 상태에 따라 왔다갔다하는 경우가 있었음따라서 메인 내용 부분을 Wrapper로 감싸주었고, height를 100%로 설정하면 해당 부분 내용이 브라우저에 모두 반영된 후 푸터가 나오게 돼서,

입력 시 변경되는 값을 동시에 화면에 반영하면서 저장하기 위해서는 useState를 써야함.1) 변경값 동시 화면 반영2) 변경값 동시 저장화면에 즉각즉각 내가 사용하는 변수가 반영이 안된다useSelector에 맛들려서 바로바로 변경되어야하는 값들을 redux의 se

그냥 원래 자바스크립트는 평상시엔 동기적으로 실행이 되며 비동기 실행을 지원하는 특수한 함수들 덕분에 가끔 비동기적 실행이 될 뿐임

해당 함수를 프로미스 객체로 만들겠습니다.프로미스를 모두 실행할 때까지 기다려~ 라는 뜻임await은 프로미스 실패시 에러나고 동작이 멈춤.그래서 try {} catch{}문을 쓰게 됨.try{성공시 경우}해보고 나서 안되면 catch{실패시 경우}해주세요 이렇게 사용