자바스크립트에서는 값이 항상 특정 자료형, 예를 들어 문자열이나 숫자와 같은 형태로 존재한다.그리고 자바스크립트 언어 레벨에서 값으로 취급하는 것은 무엇이든 변수에 넣을 수 있다는 원칙이 있다. 자바스크립트에서는 값으로 취급하는 범위가 매우 넓은데 숫자나 문자열뿐만 아니라 함수, 배열 등도 모두 값으로 취급한다.또한, 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며 모든 타입의 값으로 할당 및 재할당이 가능하다.let foo = 42; // foo는 Number 타입이었다가foo = "bar"; // 이제 foo는 String 타입이 되었고foo = true; // 지금은 Boolean 타입이 되었다. 이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 변할 수 있는 언어를 "동적 타입 언..
✅ 자바스크립트에서 식별자(Identifier)란? 코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열이다. 즉 변수, 함수, 속성 명을 지을 때 사용하는 이름이다.let age = 31function setAge() {}const o = { day: 6,}// age, setAge, o, day가 식별자 - 대소문자를 구별하며 유니코드 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없다.- 공백문자는 사용할 수 없다.- 자바스크립트 예약어(if, else, for 등..)는 사용할 수 없다.- 길이 제한은 없으나 통상적으로 길게 쓰지는 않는 편이다.- 식별자는 코드의 일부이지만 문자열은 데이터이기 때문에 식별자와 문자열은 다르다.- 식별자를 문자열로 변환하는 방법은 ..
원티드에서 진행하는 4월 프리온보딩 프론트엔드 챌린지 내용이 React 랜더링, 최적화에 관한 내용이라 들어보고 싶어서 신청하였다. 사전과제로 아래와 같은 4가지 질문이 있어서 공부하면서 내용을 정리해보았다. React는 컴포넌트 기반의 View를 중심으로 한 라이브러리이기 때문에 각각의 컴포넌트에는 생명주기가 존재하고 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. 클래스 컴포넌트에서는 라이프사이클이 컴포넌트 중심에 맞춰져 있다. 컴포넌트가 마운트되려 할 때, 마운트 되고나서, 업데이트 되었을 때, 언마운트 될때 실행된다. 모든 컴포넌트는 여러 종류의 "생명주기 메서드"를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할..
ChatGPT에게 사람들이 React를 사용하는 이유가 무엇인지 물어보았다. chatGPT의 답변을 정리해보자면 사람들이 React를 사용하는 이유는 다음과 같다. 1) 재사용이 가능한 컴포넌트 기반 개발이 가능하여 복잡한 UI를 쉽게 관리할 수 있다는 점. 2) Virtual DOM (가상돔)을 사용함으로써 페이지의 나머지 부분에 영향을 주지않고 UI 변경사항을 빠르게 업데이트하고 렌더링하여 성능을 향상시킬 수 있다는 점. 3) 선언적 구문을 사용하여 코드 작성 및 추론이 쉬워진다는 점. 4) 온라인 포럼 및 리소스를 통해 지원을 제공하는 대규모 개발자 커뮤니티가 존재한다는 점. 5) 다른 라이브러리 및 프레임워크와 함께 사용할 수 있어 유연하고 다양한 프로젝트와 호환된다는 점. 6) 확장가능하도록 설..
프로토타입(Prototype) 이란? 자바스크립트에서는 객체를 상속하기 위해 프로토타입(prototype)이라는 방식을 사용한다. 자바스크립트의 모든 객체들은 메서드와 속성을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수 있고 그 상위 프로토타입 객체도 마찬가지이다. 이를 프로토타입 체인(prototype chain)이라 부르며, 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이 된다. → 상속되는 속성과 메서드들은 각 객체가 아니라 객체의 생성자의 프로토타입이라는 속성에 정의되어 있는 것이다. 자바스크립트에서는 객체 인스턴스와 프로토타입 간의 연결이 구성..
아래와 같은 jsx코드가 있다고 했을 때 {user.name} {board[0]} {board[1]} 화면에는 아래처럼 그려진다. 윤두준 잘생겼다. 귀엽다. 그런데 데이터에 수정이 생기면, 예를 들어 "윤두준"을 "양요섭"으로 바꾸면 화면을 다시 그려야 화면에 보여지는게 바뀐다. 화면을 다시 그리기 위해 h1, ul 모두 다시 그릴 필요없이 바뀐 h1의 텍스트("윤두준")부분만 바뀌면 가장 좋을 텐데 리액트는 React Element로 되어있기 때문에 최소한 Element 단위, 여기서는 h1 Element를 다시 그린다. JSX는 아래와 같은 형태의 자바스크립트 코드로 컴파일되는데 React.createElement(component, props, ...children) 그럼 위 jsx의 h1과 ul은..
1️⃣ React 앱 배포 Overview 인터넷에서 내가 만든 앱에 접근할 수 있어야 한다. 지속적으로 앱을 수정하고 배포해야 한다. Public IP 주소로 직접 접근할 수 있도록 해야 한다. IP를 부여받은 서버에 React 앱을 배포 → 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달 → 사용자는 IP를 통해 앱에 접근 ▶ React 앱 배포 프로세스 1) IP를 부여받은 서버(VM)에 React 앱을 배포 2) 앱을 빌드하고, 웹서버를 세팅 3) 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달 4) 사용자는 필요한 데이터를 받아 앱을 로딩 💡 프론트엔드 앱 배포 시 유의할 점 - 서버와 통신 시, CORS가 허용되었는지 점검해야 한다. - 브라우저, 디바이스별로 앱이 정상적으로 동작하는지 점..
1️⃣ Server Side Rendering 소개 ▶ Server Rendering , Client Side Rendering, Server Side Rendering Server Rendering - React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드했다. - 클라이언트는 별도의 처리 없이 웹페이지 노출한다. Client Side Rendering - Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 되었다. - 데이터는 XML, JSON 형태로 클라이언트에 전송된다. 장점 - CSR은 자바스크립트만으로 완전히 페이지를 만들 수 있다. - 자바스크립트를 최대한도로..
1️⃣ React 테스팅 ▶ 코드 테스트가 필요한 경우- 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 한다.- 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 한다.- 코드를 리팩토링하면, 원래대로 동작하는지 테스트한다. 리액트 앱의 컴포넌트가 늘어날수록 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다.→ 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다. ▶ 테스팅 코드 작성의 이점- 언급한 상황들에 대한 테스팅 코드를 작성하여 미연의 에러를 방지한다.- TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상한다.- 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다.- ..
나는 React를 처음 배울 때부터 useState나 useEffect 등의 Hooks을 사용하여 함수 컴포넌트를 작성하는 것부터 배웠지만 React에서 Hooks를 사용한 함수형 프로그래밍이 가능하게 된 것은 2019년 React 버전 16.8부터로 그렇게 오래되지 않았다. 이 Hooks의 역사는 recompose라는 라이브러리에서 시작되었다. recompose 깃헙 레포지토리는 현재 읽기 전용으로 변경되었지만, 아래 README 내용을 보면 우리가 알고있는 useState와 비슷한 형태로 사용이 가능다는 것을 알 수 있다. 이 recompse라는 라이브러리가 리액트 팀에 인수되었고, 리액트에서 Hooks가 릴리즈된 것이다. 먼저, 간단한 카운터 예제를 통해 class를 사용한 코드과 hook..
