[TIL(Today I learned)] 정의

블로그 하기전 읽고 지나가버려서 다시 복습, 정의정리할겸 작성함.여러 값을 순서대로 저장할 수 있는 객체 타입으로, 각 값에는 0부터 시작하는 인덱스가 할당됨. 배열을 사용하면 여러 데이터를 하나의 변수에 그룹화하여 관리할 수 있음리터럴 방식: 가장 간단하고 일반적인

블로그 생성전 읽고 지나가버린 부분을 복습겸 정리특정 조건을 만족할 때만 특정 코드 블록을 실행하도록 하는 구문조건은 참(True) 또는 거짓(False)으로 평가될 수 있는 표현식이어야 함.조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행,false면 해

요소추가,삭제,교체 가능splice(인덱스 위치,삭제할 갯수(0도가능),추가할내용(여러개가능))arr.splice(0, 3, "Let's", "dance");alert( arr ) // "Let's", "dance", "right", "now"let arr = 1, 2

배열의 요소를 재정렬함. 배열자체가 바뀌고 난후 그 값을 반환함다만, 재정렬시 요소들을 문자열로 취급해서 재정렬함. 사전편집순.그래서 문자열로 정렬하는걸 원하지않으면, 따로 정렬기준을 함수로 만들어서 넘겨줘야됨.넘겨줄때 반드시 함수는 두 개의 비교값이 필요하고, 반환값

객채와 배열을 구분할때 씀Array.isArray(value) 에서 value가 배열이라면 true, 아니라면 false를 반환함.콜백 함수 내에서 this로 참조될 객체를 지정하는 매개변수.콜백 함수 내에서 특정 객체의 메소드나 속성에 접근해야 할 때 유용.콜백 함수

개발자들이 자신의 코드를 저장하고 다른 사람들과 공유하는 곳내 블로그 글 정리하면서 본 reduce메소드 예시다.짚고 넘어가야할 부분이 있었다. 오늘은 이거 하느라 시간을 다쓴듯.논리 연산에서 주로 사용되며, 논리 연산자 &&와 ||를 사용할 때 발생하는 특별한 연산

강의를 둘러보던 도중, 핸드북 보면서 가끔 나왔던 O(n)이런 구문이나왔다. 프로그래머스 코딩문제에도 시간관련해서 무엇인가 눈에 밟히는 부분이 있어서 정리하면서 짚고 넘어가면좋겠다 싶었는데, 잠깐의 검색만으로는 이해할 부분이 아니라고판단, 한번정도 인지만 하고 넘어가

특정 조건(condition)이 참(true)인 동안 코드 블록을 반복해서 실행하는 구문반복문 조건엔 비교뿐만 아니라 모든 종류의 표현식, 변수가 올 수있음. 조건은 while에 의해 평가되고, 평가 후엔 불린값으로 변경반복문 내에서 조건이 언젠가는 거짓이 될 수 있도

특정 작업을 수행하는 코드의 집합함수는 프로그래밍에서 데이터를 입력 받아, 그 데이터를 처리하고, 결과를 출력하는 과정을 단순화하고, 코드의 재사용을 가능하게 함. 사전적 의미로는 '입력을 받아 그에 따른 출력을 반환하는 수학적 객체'기본구문function 함수이름(매

함수를 변수에 할당하는 형태로 사용하는 방법. 이름이 없는 익명 함수를 사용할 수도 있고, 이름이 있는 명명된 함수를 사용할 수도 있음.함수 표현식은 실행 흐름이 해당 함수 표현식에 도달했을 때 평가되어 함수가 생성됨.이점이 함수 선언문(Function Declarat

나머지 매개변수 > **함수의 매개변수가 정해지지 않았거나 가변적일 때, 함수로 전달된 인수들을 배열로 처리할 수 있게 해주는 문법 세개의 점(...)을 매개변수 이름 앞에 사용하여 나타냄. 함수에 전달된 인수들 중에서 나머지 매개변수 앞에 오는 매개변수들을 제외한 나

자료형중에 하나로, 키(key)-값(value) 쌍으로 구성된 프로퍼티(property)들의 집합.여기서 키는 문자열이거나 심볼(Symbol)이 될 수 있으며, 값은 자바스크립트에서 사용할 수 있는 모든 값(다른 객체를 포함)을 말함.객체는 데이터(변수들)와 그 데이터

원시값(문자열, 숫자, 불린 값 등)은 값 자체가 변수에 저장되는 반면,객채는 메모리에 저장된 후 변수에서 그 메모리 주소를 참조하는 참조 값이 저장됨.객채를 또 다른변수에 할당하면, 두 변수는 같은 객체를 가리키게됨.객체는 메모리에 저장되고, 변수는 그 메모리 주소를

메서드 : 객체 내에서 특정한 행동을 할 수 있도록 함수를 프로퍼티로 할당하는 것.두 방법은 완전히 동일하진 않음.단축 구문을 사용한 메서드 정의는 super 키워드를 사용할 수 있는 능력을 포함하는 반면, 일반 함수 표현식으로 정의된 메서드는 그렇지 않음. 객체의 메

객체와 관련된 데이터를 다룰 때 유용하게 쓰는 메서드.이 메서드들은 객체의 데이터를 배열 형태로 반환하여, 객체의 데이터를 순회하거나 다루기 쉽게 해줌.Object.keys(obj) : 객체의 모든 키를 문자열 배열로 반환.Object.values(obj) : 객체의

pwd : 현재 내가 작업하고 있는 폴더를 보여줌.ls(list) : 내 폴더 안에 있는 폴더 & 파일 내역 보여줌.ls -a(list all) : 숨겨진 파일(보통.으로 시작함)도 모두 볼 수 있음.cd(change directory) : ls 명령어로 확인된 폴더로

깃 & 깃허브로 "협업"하는 법 브렌치 활용하기 복사본 === 브렌치 브랜치생성 명령어 git branch : 브랜치이름 git branch : 브랜치 확인 명령어 \*초록색 :내가 위치한 브렌치 q로 빠져나가기 git switch : 브랜치이름 브랜치로 이동

기록 내가 무엇을 배웠는지 기록 성장 학습한 것을 정리하며 이해도를 높이고 , 복습 활용

1995년 Livescript (Javascript) 탄생2005년 AJAX등장자바스크립트 기반 AJAX쓰게 된 이유: 그전에는 효율성, 속도면 부족. 버튼하나 눌러서 어떤 동작을 실행시 페이지 전체 새로고침 했었음.ajax는 해당되는 영역만 새로고침일어난 현상: UX

여러 데이터 값을 순차적으로 나열한 자료구조. 객체의 특수한 한 유형 각 요소들은 위치값(index)를 가짐. 시작위치값은 1부터 시작이 아니라 0부터.1\. 배열생성기본적인 배열생성배열을 만들 때는 대괄호(\[])를 사용하며, 각 요소는 쉼표(,)로 구분배열의 크기

1\. 데이터 타입의 종류값의 저장 방식과, 불변성 여부에 따라 기본형과 참조형으로 나뉨.기본형값이 담긴 주소값을 바로 복제하고, 불변성을 띔.참조형값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제, 불변성을 띄지않음2\. 메모리와 데이터에 관한 배경지식비트

둘다 없음을 나타냄.undefined값이 있어야 하는데 없는 경우 ex)\-변수에 값이 지정되지 않은 경우\-return문이 없는 함수\-.이나\[]로 접근시 해당 데이터가 없는경우사용자가 직접 선언 할수도 있지만 일반적으로는 지양. Null을 씀Null없다를 명시적으

record : 식별자정보를 컨택스트에 기록.수집대상정보는 함수안의 매개변수 식별자, 함수자체, var로 선언된 변수 식별자.수집이된다 => 호이스팅이 된다.수집방법 => 컨텍스트 내부를 처음부터 끝까지 순서대로 수집수집만 할뿐 실행을 하는게 아님!호이스팅 = 식별자

자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법첫 번째 매개변수에 this로 binding할 객체를 넣어주면 명시적으로 binding할 수 있음.call 메서드와 같음. 단 this에 binding할 객체는 똑같이 넣어주고 나머지

다른코드의 인자로 넘겨주는 함수.콜백함수는 콜백함수를 받는 주체가 있음(forEach,setTimeout등)콜백함수를 넘겨받은 주체들은 필요에 따라 적절한시점에 콜백함수를 실행 => 콜백함수에 대한 제어권이 주체들에게 있다.setInterval : 반복적으로 매개변수로

변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법백틱(\`)을 사용하여 문자열을 구성하고, ${expression}을 통해 변수나 표현식을 삽입객체나 배열의 속성을 보다 쉽게 추출할 수 있게 해주는 문법객체 Destructuring에서는 obj안의 ‘key

논리 연산자를 사용하여 조건문을 처리할 때, 전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식주로 && (논리곱), || (논리합) ?? (null 병합 연산자)를 사용할 때 발생falsy 값 : false, 0, "", null, undefined,

웹과 네이티브 UI를 위한 '라이브러리'하나의 페이지로 이루어져 있는 애플리케이션이미지 출처MPA : 전통적인 웹 애플리케이션으로, 사용자가 새로운 페이지로 이동할 때마다 서버로부터 새로운 페이지를 로드하여 보여주는 방식\-검색엔진에 잘 인식됨, 페이지 분리해서 작업가

자식 컴퍼넌트에 정보를 전달하는 또 다른 방법컴포넌트 태그에 자식함수 이름을 넣고 태그사이에 전달할 값을 입력 자식컴포넌트에서 받을때 'props로 들어오는 값.children'props로 자식컴포넌트에 내려주는 값이 한개가 아닐때 좀더 쉽게 접근하는 방법'구조분해할당

과제제출후 커밋메세지로만 어떤 기능이 구현되었는지 보기 힘들다는 피드백을 받음. 커밋 메세지 컨벤션을 추천해주셨다. Commit Convention 깃허브에 커밋을 할때 커밋 메세지에 작성할때의 규칙,약속 사용하는 이유 가독성 향상 : 일관된 형식의 커밋로그는

Styled-components JavaScript 기반의 프론트엔드 라이브러리에서 CSS를 작성하고 관리하는 데 도움을 주는 라이브러리 CSS-in-JS 방식을 사용하여 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸밀 수 있음. 장점 스타일과 로직이 같

컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정부수 효과(side effects)를 수행하기 위해 사용.리액트 외 외부시스템과 동기화 시킬때 주로 사용ex) fetching, Dom수동조작 등의존성 배열(dependencies array)?dependencie

리액트에서는 리랜더링이 불필요하게 발생하는 경우를 줄여 성능 최적화를 하기 위해useMemo와 useCallback이라는 훅을 사용계산결과를 저장후 동일한 반복을 해야할 경우 저장된결과를 재사용하는 개념컴포넌트를 캐싱한다 = memo값을 캐싱한다 = useMemo함수를

npm install react-reduxnpm install @reduxjs/toolkityarn add react-reduxyarn add @reduxjs/toolkitsrc 폴더 내에 redux라는 폴더를 생성하고, store라는 파일을 만듬.이 파일에서 Redu

자바스크립트 기반의 HTTP 클라이언트 라이브러리로,http를 이용해서 서버와 통신하기 위해 사용하는 패키지yarn add axiosornpm install axiosimport axios from 'axios';Axios는 Promise 기반의 API를 제공하여 비동

간단한 REST API를 쉽게 만들 수 있도록 해주는 도구Backend에서 실제 DB와 API Server가 구축될 때까지 Frontend 개발에 임시적으로 사용할 mock data를 생성.클라이언트-서버 통신에서 HTTP 메서드와 URL을 통해 요청을 식별하고 자원을

서버 상태 관리 라이브러리React 애플리케이션에서 비동기 데이터를 효율적으로 가져오고, 캐싱하고, 동기화하고, 업데이트를 하며 서버 상태와 관련된 다양한 문제를 해결npm: npm install @tanstack/react-queryyarn: yarn add @tan

React에서 상태 관리를 위해 사용되는 라이브러리Redux와 같은 복잡한 상태 관리 라이브러리와는 달리, 간단하고 직관적인 API를 제공하여 상태 관리를 쉽게 할 수 있음npm install zustandyarn add zustandimport create from

유틸리티 퍼스트(Utility-First) CSS 프레임워크.CSS 클래스 이름을 직접 작성하는 대신 미리 정의된 유틸리티 클래스를 사용하여 UI를 구축.npm install -D tailwindcss postcss autoprefixernpx tailwindcss i

Custom Hooks? 재사용 가능한 기능을 만드는 방법 기존의 리액트 훅을 조합하거나 새로운 기능을 만들어내어 컴포넌트 간에 공유 코드의 재사용성을 높이고 복잡한 로직을 캡슐화 커스텀 훅의 특징 1. 이름 규칙 커스텀 훅의 이름은 일반적으로 "use"로 시작하는

반응형 웹 디바이스와 화면 크기에 맞추어 웹 페이지의 레이아웃, 콘텐츠, 기능 등을 자동으로 조정 특징 유연한 레이아웃 화면 크기에 따라 레이아웃이 유연하게 변경. 그리드 시스템, 유동적인 이미지와 미디어, 유동적인 폰트 크기 등을 활용. 미디어 쿼리: CSS

타입스크립트는 자바스크립트의 상위 집합(superset)으로, 자바스크립트에 정적 타입 시스템을 추가한 언어.자바스크립트는 동적 타입 언어이기 때문에 개발 과정에서 타입 관련 오류를 쉽게 발견하기 어려움. 타입스크립트는 정적 타입 시스템을 통해 이러한 문제를 해결정적

디자인 시스템을 구성하는 방법론.사용자 인터페이스(UI)와 사용자 경험(UX)을 효율적으로 설계하기 위해 작은 구성 요소에서 시작하여 점차 복잡한 구조로 발전시키는 접근 방식 이 방법론은 브래드 프로스트(Brad Frost)에 의해 제안됨원자(Atoms): 가장 기본적