프론트엔드

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 태그(semantic tag)가 새롭게 만들어졌다. 그렇다면 시맨틱(semantic)은 무슨 뜻일까? '의미의', '의미론적인'라는 뜻을 가진 형용사로, 시맨틱 태그를

많아도 너무 많은 Array 메소드.. 그래서 내가 기억하고자 정리한다..!push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.Syntaxarr.push(element1\[, ..., elementN]);매개변수는 배열 끝에

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.\*기존 배열을 변경하지 않고 추가된 새로운 배열을 반환하는 것array.concat(\[value1\[, value2\[, ..., valueN]]])slice() 메서드는

아주 간단한 식이었는데도 불구하고 값이 나오지 않거나, 분명 맞게 작성했는데도 콘솔창이 빨갛게 물든 경험이 있는가?그렇다면 자료형이 올바르게 되어있는지 확인해볼 필요가 있다.자바스크립트의 자료형은 크게 원시(primitive) 자료형과 객체(object)형으로 나뉘는데

메모리에 데이터를 저장하는 방법으로, 이름이 있는 저장소라고 생각하면 된다.변수를 선언(declaration)함으로 name이라는 이름을 가진 메모리 공간을 확보하고,메모리 공간에 데이터를 할당(assignment)해 문자열 'kim'을 저장할 수 있다.그리고 아래와

하나 이상의 영어 단어로 구성된 식별자를 만들 때 단어를 한눈에 구분하기 위해서 규정한 명명 규칙이다. 대표적으로 카멜 케이스, 파스칼 케이스, 스네이크 케이스, 케밥 케이스, 헝가리안 케이스 등이 있다. 네이밍 컨벤션을 잘 지키면 가독성이 좋아지고 식별자의 역할도 명

🤔 반복문이란? 말 그대로 한 동작을 여러 번 반복할 수 있게 해주는 것이 반복문이다. 다양한 반복문 메커니즘은 여러 방법으로 반복문의 시작점과 끝나는 점을 정할 수 있다. 대표적인 Javascript 반복문은 for 문,for ..of 문, for ..in 문, w

함수 선언문으로 정의한 함수function declared () { console.log(‘함수선언문’) };함수 선언분은 함수를 정의 할 때 function 키워드를 사용한 것이다. function 키워드 다음에는 함수명, 그 뒤에는 소괄호(())를 입력해야 한다.

구글 V8 자바스크립트 엔진으로 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 JavaScript를 사용한다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하고,

JavaScript에서 자료형(type)이란 값(value)의 종류다. 각각의 자료형은 고유한 속성과 메서드를 가지고 있다. 자료형은 크게 두 가지로 구분할 수 있는데, 바로 원시 자료형(primitive type)과 참조 자료형(reference type)으로 구분된

원시 자료형을 할당한 변수를 다른 변수에 할당하면 값 자체의 복사가 일어난다. 값 자체가 복사된다는 것은 둘 중 하나의 값을 변경해도 다른 하나에는 영향을 미치지 않는다는 것을 의미한다.예시반면, 참조 자료형은 임의의 저장공간에 값을 저장하고 그 저장공간을 참조하는 주

자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에 arguments 객체와 this를 암묵적으로 전달 받는다. 이때 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수 호출 방식은 크게 네 가지가 있다.글로벌 영역에 선언한 일반

객체 지향 프로그래밍(Object Oriented Programming)을 쉽게 비유하자면, 하나의 모델이 되는 템플릿을 만들고 그것을 베이스로 한 객체를 만들어 프로그래밍 하는 패턴이다. 자바스크립트는 프로토타입 기반(prototype-based) 객체 지향 언어다.

순차적 (비구조적) 프로그래밍순서대로 동작을 추가하며 프로그밍 방식이다.간단한 프로그램의 경우, 이렇게 코드를 짜게 되면 흐름이 눈으로 보이기 때문에 매우 직관적이지만, 규모가 커지게 되면 복잡해지기 쉽상이다.절차적 (구조적) 프로그래밍 \- 절차적 프로그래밍에서

자바스크립트는 객체의 프로퍼티(메서드 포함)에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는데 이를 프로토타입 체인이라고 한다. 프로토타입 체인은 자바스크립트가 객체 지향 프로그래밍의 상속

프로젝트 세팅 프로세스는 프로젝트 마다, 작업자 마다 상이할 것이다. 부트캠프를 듣고 있는 지금, 과제 수행을 위한 가장 보편적인 세팅 방법은 이렇다.프로젝트를 fork 받고 원하는 디렉토리에 clone을 받는다.터미널을 실행해 npm init필요한 패키지들을 npm

프로젝트 세팅 프로세스는 프로젝트 마다, 작업자 마다 상이할 것이다. 부트캠프를 듣고 있는 지금, 과제 수행을 위한 가장 보편적인 세팅 방법은 이렇다.프로젝트를 fork 받고 원하는 디렉토리에 clone을 받는다.터미널을 실행해 npm init필요한 패키지들을 npm

Props & state는 React 라이브러리에서 데이터를 다루는 방법이다.Props는 부모 컴포넌트에서 자식 컴포넌트로 전달된다. 이는 데이터의 흐름이 하향식으로, 그리고 한 방향으로(one-way data flow) 흐르기 때문이다. 부모 컴포넌트로부터 받는 데이

리액트는 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 State로부터 왔는지, 하드코딩으로 입력한 내용인지는 알 수 없다.그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해

재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴.이 개념을 함수에 넣으면 자기 자신을 끝없이 호출해 같은 코드를 반복해서 실행할 것이다. 이렇게 자기 자신을 호출하는 함수를 재귀 함수라고 한다. 재귀 함수를 활용하면 반복적인 작업을 해야 하는 문제를 좀 더 간결한

UI는 사용자 인터페이스, 즉 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다.요즘에는 스마트폰, 컴퓨터,

useRef란 원하는 특정 DOM을 직접 선택해서 컨트롤 할 수 있게 해주는 Hook이다. useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있습니다. 그리고 useRef는 값이 바뀌어도 리렌더링 하지 않는다. 컴포넌트의 속성만 조회

컴포넌트3, 컴포넌트6에서만 사용되는 상태가 있다면 React의 데이터 흐름에 따라 최상위 컴포넌트에 위치시키는 것이 적절하다. 하지만 이런 상태 배치는 다소 비효율적이게 느껴진다.해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를

웹이란 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간이다.간혹 인터넷과 웹의 개념을 혼동하는데 인터넷이 웹보다 좀 더 포괄적인 개념이다. 인터넷은 ‘전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망’을 의미하며, 웹뿐만 아니라 온라인 게임

React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM이라는 가상의 DOM 객체를 활용한다.이는 실제 DOM의 가벼운 사본 같은 개념으로, React는 Real DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM

타입스크립트는 일반 변수, 매개 변수(Parameter), 객체 속성(Property) 등에 : TYPE과 같은 형태로 타입을 지정할 수 있다.TypeScript에서 튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.객체의 프로퍼티 타입들을 각기

TypeScript에서 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용이 된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다. JavaScript는 인터페이

CI/CD의 "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미한다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의

인증에 필요한 정보들을 암호화시킨 JSON 토큰JWT 기반 인증은 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별하는 방식이다.JWT는 JSON 데이터를 Base64 URL-safe Encode 를 통해 인코딩하여 직렬화한 것이며,

Axios는 브라우저 및 Node.js를 위한 Promise 기반의 HTTP 비동기 통신 라이브러리이다.axios interceptor는 애플리케이션에서 처리하기 전에 Axios 라이브러리에서 수행한 HTTP 요청 또는 응답을 가로채고 수정하는 데 사용할 수 있는 기능

Next.js는 Vercel에서 만든 React를 기반으로 한 오픈 소스 프레임워크이다. 리액트와 달리 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 다양하고 풍부한 기능을 제공한다. 또한 개발자들이 쉽게 빠르고 확장 가능

자바스크립트를 사용하여 브라우저에서 직접 페이지를 렌더링하는 것을 의미한다. 모든 로직과 데이터 패치, 템플릿 및 라우팅이 서버가 아닌 클라이언트에서 처리된다.CSR에서 서버는 빈 HTML 페이지와 모든 로직을 처리하는 자바스크립트 번들을 반환한다.CSR은 SEO에 크

프리 렌더링(Pre-rendering)은 웹 브라우저가 페이지를 로딩하기 이전에 렌더링하는 걸 말한다. 크게 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)으로 나뉘는데, Next.js에서는 기본적으로 모든 페이

React란? Facebook(현재 Meta)에서 만든 Javascript 사용자 인터페이스(UI) 라이브러리이다. React 자체는 Framework라 부를 수 있는 기준인 라우팅, 상태관리 기본 제공을 충족하지 못하기에 '라이브러리'이지만, React의 생태

타입스크립트 (TypeScript)란? Javascript + Type을 지정해 에러 방지 TypeScript는 Javascript에 타입을 부여한 언어로, Javascript의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한

useState를 이용한 상태 관리 컴포넌트3, 컴포넌트6에서만 사용되는 상태가 있다면 React의 데이터 흐름에 따라 최상위 컴포넌트에 위치시키는 것이 적절하다. 하지만 이런 상태 배치는 다소 비효율적이게 느껴진다. 왜 비효율적일까?

DOCTYPE 이란 무엇인가? DOCTYPE은 document type의 약어로, 문서의 유형을 정의하기 위해 사용하는 선언문이다. 웹 문서의 시작을 알려주며, 웹 브라우저에서 처리할 문서가 HTML이며 어떠한 버전으로 사용했으니, 해당 방식대로 해석하라

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.요소를 일반적인 문서 흐름에 따라 배치position이 static인 경우 top, right, bottom, left, z-index 속성들이 효과 X요소를 일반적인 문서 흐름에 따라 배치자기