Frontend

오늘은 웹스톰에서의 React 프로젝트 초기세팅에 대해서 알아보려고 합니다👩🏻‍💻🎀 그럼 바로 시작해봅시당  그전에!!!!!!!React를 사용하기 위해서는 node와 npm이 설치되어 있어야 하니아래의 명령어로 확인해보시고 없다면 설치를 부탁드립니다.# node가 설치되어있다면 해당 명령어를 입력했을 때 node.js의 버전이 나오게 됩니다.node -v# npm의 버전을 확인하는 명령어npm -v   0. 깃허브 repository 생성 후 웹스톰에서 열기개인 프로젝트를 할 때도 협업을 진행할 때도 깃허브는 굉장히 유용하므로 사용하는 것을 추천 아니 강요합니다.  아래와 같이 repository를 생성하였다면  웹스톰 상단탭에서 파일>새로만들기>버전 관리에 있는 프로젝트... 로 깃허브에 있는..

🍥 컴포넌트란?컴포넌트(component): 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)컴포넌트의 장점화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다.화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기 편리하다.모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다.뷰에서는 웹화면을 구성할 때 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다.ex) 내비게이션 바, 테이블, 리스트, 인풋 박스, Header, Content(Aside, List), Footer 또한 컴포넌트 간의 관게는 뷰에서 화면을 구성하는데 매우 중요한 역할을 하며, 웹 페이지 화면을 설계할 때도 이러한 골..

03-1 뷰 인스턴스뷰 인스턴스의 정의와 속성뷰 인스턴스(instance): 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 - 뷰 인스턴스 생성아래의 코드는 화면에 'Hello Vue.js'를 출력하는 코드이다.이 코드에서는 먼저, 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성하였다.그리고 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정하였다.마지막으로 data 속성에 message 값을 정의하여 화면의 {{message}}에 연결하였다. {{ message }}  - 뷰 인스턴스 생성자뷰 인스턴스 생성자는 new Vue()로 인스턴스를 생성할 때의 Vue를 말한다. 이는 뷰 라이브러리를 로딩하고 ..

01-1 Vue.js란 무엇인가?- Vue.js란?Vue.js란 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다.뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공되므로 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있는 점진적인 프레임워크(progressive framework)라고 불린다. - Vue.js의 장점1. 배우기가 쉽다.2. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.3. 리액트의 장점(가상 돔 기반 렌더링)과 앵귤러의 장점(데이터 바인딩 특성)을 가지고 있다.  01-2 Vue.js의 특징- UI 화면단 라이브러리vue.js는 UI 화면 개발 방법 중 하나인..

오늘은 자바스크립트에서의 데이터 타입과 데이터를 처리하는 과정을 알아보겠습니당 #변수 #데이터 #불변성 01. 데이터 타입의 종류 데이터타입 (data type) 기본형 (Primitive type) ➡️ 불변성을 띈다 숫자 (Number) 문자열 (String) 불리언 (Boolean) null undefined 심볼 (Symbol) 참조형 (Reference type) 객체 (Object) 배열 (Array) 함수 (Function) 날짜 (Date) 정규표현식 (RegExp) Map, WeakMap Set, WeakSet +) 파란색으로 표시된 부분은 ES6에 추가된 내용입니다. 그렇다면 기본형과 참조형의 차이점은 무엇일까요 ⁉️ -> 기본형은 값이 담긴 주솟값을 바로 복제하지만, 참조형은 값이 담..

📍 자바스크립트 패키지 매니저(JavaScript Package Manager) 자바스크립트 프로젝트에서 사용되는 의존성 관리 도구 프로젝트에 필요한 외부 라이브러리, 모듈, 플러그인 등을 손쉽게 설치하고 관리(갱신/삭제)하는 역할을 합니다. 대부분의 자바스크립트 패키지 매니저는 Node.js 실행 환경(runtime)에서 돌아가며 package.json이라는 파일에 프로젝트가 의존하고 있는 패키지 목록을 명시합니다. 일반적으로 패키지는 프로젝트의 node_modules 디렉토리에 저장되는데, 주로 공개 npm 저장소(registry)로 부터 다운을 받지만 회사의 경우 사내망 내의 사설 저장소를 운영하는 경우도 있습니다. ex) npm, yarn, pnpm, bun 📍 npm(Node Package Ma..

📍더미 데이터(Dummy Data)란?유용한 데이터가 포함되지 않지만 공간을 예비해두어 실제 데이터가 명목상 존재하는 것처럼 다루는 정보를 의미합니다.즉, 실제 데이터와 비슷한 형태를 가지지만 실제 의미나 가치를 가지지 않아서 주로 테스트나 프로토타이핑을 위해 사용되는 가상의 데이터를 말합니다.  📍더미 데이터(Dummy Data)를 왜 사용할까?개발 초기 단계에서 테스트 : 실제 데이터베이스나 외부 API 연동이 준비되기 전에 애플리케이션의 기능을 테스트할 때 사용할 수 있습니다. 즉, 더미데이터를 사용하면 실제 서버와의 통신 없이도 프론트엔드 기능을 테스트할 수 있기 때문에 백엔드 개발자가 API를 만들동안 프론트엔드 개발자가 데이터가 필요한 경우에 더미데이터를 사용하는 것입..

📌 전역 상태 관리Props Drilling에서 발생하는 문제를 해결하기 위해 상태를 컴포넌트에서 선언하지 않고 전역으로 관리전역 상태 관리 저장소에서 중간 컴포넌트를 거치지 않고 바로 사용 → 효율적인 개발 가능Ex) Context API, Redux, Recoil💡Props Drilling이란?- 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것- 단점: 중간 컴포넌트는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 해당 값을 사용하지 않는 경우에도 프로퍼티를 받고 전달해야합니다.    📌 RecoilFacebook에서 개발한 전역 상태 관리를 위한 라이브러리다른 라이브러리(Redux, Mobx)와는 달리 React..