React

React란? 2014년 페이스북에서 개발한 Javascript 기반의 라이브러리 프로그램이다. 주 기능은 사용자 인터페이스(User Interface)를 만들기 위해 개발 되었다.

현재 우리가 사용하고 있는 Web Application은 보이는 것(UI: User Interface)과 할 수 있는 것(UX: User Experience)으로 구성되어 있고, UI/UX로 인해서 하나의 웹 페이지에서 문서 작성, 쇼핑, SNS, 게임 등의 기능을 이

1) 프레임워크(Framework)원하는 기능 구현을 위해 필요한 기능을 갖추고 있는 뼈대를 의미하며,앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분을 중점적으로 관리한다.프레임워크 기반을 사용하는 프로그램 종류1) Java 서버 개발 - Spring

JSX element는 자바스크립트 파일 어디에서나 필요한 곳에 HTML처럼 작성할 수 있으며,아래 예시처럼 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.JSX 내부에서 자바스크립트 값을 출력하고 싶다면, { ... JavaScript... } 와 같이 {

React를 사용하다가 input에 값을 입력 했을때, Console에 이런 문구가 나오는 경우가 있다.(즉, value type이 text값인 input에 value(String, Number)를 입력했을때 생기는 에러다.)(1) 발생 원인해당 기능은 이메일 inpu

Create React App의 약자로, Javascript 기반의 언어인 React App을 뜻한다.(1) CRA 초기 셋팅 방법1) 터미널 켜기사진과 같이 터미널을 켜서 터미널의 상태를 확인해준다.1-1) 프로젝트 폴더 생성하기mkdir 명령어를 이용해 생성하고 싶

React로 프로젝트를 셋팅하고 Git과 연동해서 사용한다. 참고로, Git은 파일을 기준으로 추적하기 때문에 폴더를 생성하고 빈 파일을 생성해야 Git으로 해당 파일과 폴더를 관리할 수 있다. 앱이 컴파일될 때 사용하지 않는 모든 것을 담는 파일을 말하며, 절대 경로

fetch와 axios는 비동기 HTTP 통신을 위한 메서드이다.(즉, HTTP 통신을 하기 위해 사용한다는 뜻이다.)fetch는 HTTP 비동기 통신을 처리하는 내장 라이브러리로, 웹 애플리케이션에서 서버와 데이터를 주고받을 때 사용된다.1-1) fetch의 장,단점

1) Router라우터는 html의 경로(path), 즉 url을 설정해주는 도구(즉, 한개의 페이지(SPA)안에서 다른 페이지로 이동할수 있도록 도와주는 매개체를 말한다.) Routing : 경로를 설정해주는 행위Tip. SPA(Single Page Applicati

state(상태) 관리와 lifecycle(라이프 사이클) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동(hook in)해주는 함수를 의미하는 것을 말한다(예전엔, Hook을 클래스 컴포넌트 에서만 사용할 수 있었지만, 지금은 함수 컴포넌트에서도 사용할수 있도

구조분해할당 이란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식을 말한다.예제 코드)1번 코드 요약)animal이라는 변수에 고양이, 강아지 라는 배열을 가진 문자열 값들이 있고, 여기서 각각의 요소를 출력하고자

Conflict란? Github의 다른 branch 에서 같은 파일의 같은 줄에 작업을 할때 코드가 중복되어 발생하는 충돌 상태를 의미한다. Git으로 프로젝트를 관리하게 되면 자주 발생되는 부분이다.(Conflict 발생 과정)개인 프로젝트를 제외하고 2명이상 팀 프

상수 데이터란? 이름 그대로 변하지 않는 정적인 데이터를 말한다.(특히, UI를 구성하다보면, 동적으로 변하지 않아서 백엔드 API로 가져올 필요가 없는 데이터들이 있는데, 상수 데이터는 변하지 않는 정적인 요소에 주로 많이 사용되기에 정적으로 변하지 않는 요소들에겐

Mock Data는 거짓이라는 뜻을 가진 데이터를 말한다. (실제 API에서 받아오는 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만든 데이터라고 이해하면 된다.)(1-1) Mock Data를 사용해야 하는 이유?프론트앤드 개발을 진행하다보면 UI 구성에 필요

React 컴포넌트가 화면에 랜더링 된 이후로 비동기적으로 처리되어야 하는 부수적인 효과를 SideEffect 라고 한다.(즉, 함수가 함수 내부의 값 외에 외부의 값을 읽어오거나, 수정하는 행위를 의미하는 것이다.) 뜻은 부작용 이라는 뜻을 가지고 있는데, 부수효과

React에서 라우팅을 설정하는 가장 기본적인 방법은 Router 컴포넌트에서 사용할 수 있는 경로들과 해당 경로로 접속했을때 보여줄 컴포넌트를 모두 정의해두는 방식으로 사용하고 있는데, 이를 정적 라우팅(static Routing) 이라한다. 하지만 복잡하고 규모가

로그인 페이지는 로고, 이메일 & 비밀번호 입력창, 로그인 & 회원가입 버튼 으로 나뉘어져 있다.(1) 필수사항이메일 입력비밀번호 입력로그인 버튼회원가입 버튼(2) 예외처리이메일, 비밀번호 입력후 로그인 버튼 활성화 처리(맨 처음엔 비활성화)(3) UI만 구현회원가입

회원가입 페이지는 신규 회원이 가입을 위해 필요한 필수 사항 정보와 선택 사항 정보를 구분지어 표시할 수 있도록 하였다.(1) 필수사항신규회원 기본정보 입력 이메일 입력비밀번호 입력비밀번호 확인 입력닉네임 입력(2) 예외처리이메일 입력 : @, .을 꼭 포함해야 함 (

초기 셋팅하고 실행한뒤에 개발자 도구에서 다음과 같은 에러가 발생되는 경우가 있는데, 이 상황이 발생되는 이유는 manifest 파일을 지워서 생기는 문제이다. manifest에 대한 태그는 index.html에 남겨져있는데 json 파일만 삭제했기 때문에 위와 같은