1. 리액트의 작동원리Context 와 여타 전역상태관리등 React 를 조금 더 자세히 다루고자 한다면 낯선 단어들을 보게 될 것이다.Context 관리와 다른 상태관리를 왜 하는지는 리액트의 작동원리와 함께 생각해보면 필요성을 느끼게 될 수 있다.  1. 컴포넌트 기반 구조   리액트는 컴포넌트로 구성이 되어있다는 말을 많이 들었을 것이다.    각 컴포넌트는 독립적이고 재사용이 가능하여 유지보수가 용이하다.     컴포넌트란?    리액트의 구성요소.    리액트를 이루는 가장 최소한의 단위    "props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.2. 상태(state) 와 속성(props)    상태(state):    쉽게 말해서 변..

0.라이브러리를 사용한 상태관리를 해야하는 이유?리액트 네이티브 프로젝트에서 여러 화면 간에 공유해야하는 상태가 있거나 한 화면이라도 컴포넌트 렌더 트리에서 서로 멀리 떨어져 있는 컴포넌트간에 상태를 공유할 때는 전역 상태를 관리해줘야한다. 이건 나중에 좀 더 자세히 포스팅하기로 한다...  초기상태 설정 -> 액션 생성 및 디스패치 -> 리듀서 호출(수행) -> 상태 업데이트 -> UI 업데이트  조금 더 구체적으로 동작원리를 설명해보도록 하겠다.  1. 동작원리 설명예시를 들어서 동작원리에 대해 설명해보겠다!사용자의 동작동작동작원리 단계사용자가 increment 버튼 클릭= 버튼 클릭등의 액션 발생1. View 에서 액션을 수행dispatch({type:"INCREMENT"}) = dispatch 함..

https://khw063011.tistory.com/46 [React] API 활용한 영화 웹페이지 만들기 (1)1. STEP1) 영화 API 가져오기 https://www.themoviedb.org/ The Movie Database (TMDB)Welcome. Millions of movies, TV shows and people to discover. Explore now.www.themoviedb.org  TMDB 의 API 를 활용하여 본인 API 를 발급받고, 현재 상khw063011.tistory.com 1편에 이어서 조금 디자인을 수정해보도록 하자.1편에서는 현재 상영중인 영화를 모두 가져왔다면, 이번에는 각 카테고리별로 다르게 가져오도록 했다. 기능설명 옆으로 넘기면 이런 식으로 넘어가는..

🤔 삼항연산자란?리액트에서는 if 구문을 걸 때 조건부연산자를 사용한다. 우리는 조건부연산자를 삼항연산자라고도 부른다.(물론 컴포넌트 내에서 If- else 구문으로 만들어도 된다.) 사용방법[조건식 ? 참일 때 : 거짓일 때]  예시: 사용자 로그인에 대한 참 거짓 판별const Login = true;const message = Login ? '환영합니다!' : '로그인이 필요합니다.';console.log(message); >> 환영합니당! (1) Login 이 참이면 환영합니다를 출력하고 거짓이면 로그인이 필요하다는 message 변수를 설정해주었다.(2) 이때 Login 이 true 로 설정되어있기 때문에(3) message 를 출력하면 환영한다는 말이 나온다. 💡 논리연산자와 함께 사용하기..

1. STEP1) 영화 API 가져오기 https://www.themoviedb.org/ The Movie Database (TMDB)Welcome. Millions of movies, TV shows and people to discover. Explore now.www.themoviedb.org  TMDB 의 API 를 활용하여 본인 API 를 발급받고, 현재 상영중인 영화 데이터들을 가져왔다.(이 과정은 생략하도록 하겠당)  발급을 받고 더미데이터로 json 파일로 저장하여 가져오는 방식과, 직접 API 를 입력하여 하나하나 가져오는 방식 중에 나는 후자를 선택하였다.  리액트에서는 API 를 가져오는 방식이 fetch 와 axios 가 있는데 나는 여기서 axios 방법을 사용하였다!(1) 라이브..

🤨 SPA 란? Single Page Application 의 약자로 React 의 특징이다. 우리가 구글 페이지를 들어가면 구글 페이지 그대로 보인다. 이때 우리가 검색을 누르든, 지메일을 누르든 서버에 어떤 요청을 하면, 서버는 이 페이지를 다시 보여주게 된다. 이때 기존의 페이지는 매번~~~ 우리의 요청마다 페이지가 구성이 되어있고, 요청에 맞는 페이지를 다시 구성해서 보여주게 되는데 이는 시간이 오래걸리는 과정이다.  하지만 SPA 로 이루어진 홈페이지는 이름 그대로 single! 한 페이지로 구성이 되어있다. 즉 요청에 따라서 페이지 전체가 아니라, 필요한 부분만 바뀌어서 보여주게 되고 이는 시간과 데이터를 효율적으로 활용할 수 있는 방법이다. 💡 랜더란? 쉽게말해서 보여준다는 것이다. 이..

이전 글에 이어서 회원가입 UI 를 완성시켜보자!!!  [React] 회원가입 폼 UI 만들기 (1)1. 회원가입 폼 만들기 handleSubmit() 폼이 제출될 때  실행되는 함수 여기서 나는 아직 백엔드랑 연결을 시키지 않았기 때문에!!어떤 데이터가 입력이 되었는지를 보기 위해서 console.log에만 뜨도khw063011.tistory.com  4. 비밀번호 정규표현식 만들기 ** 정규표현식이란??문자열의 패턴을 표현하는 데 사용되는 형식이다. 이를 사용하면 특정한 문자 조합을 찾거나 문자열을 검색하거나, 대체하거나, 추출하는 등의 다양한 작업을 할 수 있다.정규표현식은 / 기호로 감싸고 있는 패턴으로 표현이 된다. 패턴은 문자열의 일치 여부를 확인하고자 하는 조건을 나타내는데 예를 들어 이메일..

1. 회원가입 폼 만들기 handleSubmit() 폼이 제출될 때  실행되는 함수 여기서 나는 아직 백엔드랑 연결을 시키지 않았기 때문에!!어떤 데이터가 입력이 되었는지를 보기 위해서 console.log에만 뜨도록 했다.  e.preventDefault() 란?--> 이벤트의 기본 동작을 취소하는 메소드이다. 폼을 제출할 때 브라우저는 기본적으로 페이지를 새로고침하거나 새로운 페이지로 이동 동작을 수행한다.이러한 동작을 하게 되면 계속해서 브라우저가 새로고침을 하게되어 제대로 폼이 제출되지 않을 수 있다.! * e.preventDefault()가 없는 코드일 경우--> 이렇게 폼 제출을 눌러도 console에 아무것도 저장되지 않는 것을 확인할 수 있다.(왜??)--> 브라우저가 서버를 새로고침해버려..

1. React란? 쉽게 말하면 사용자 인터페이스를 받아 동적인 웹페이지를 쉽게 만들기 위해서이다. 사용자 인터페이스(UI) 를 구축하기 위한 선언적이고 효율적인 유연한 자바스크립트 라이브러리 SPA(Single Page Appplication)을 위한 사용자 인터페이스를 구축하는데 사용 웹, 모바일 앱 등의 레이어를 처리하는데 사용 더보기 1. 여기서 UI란? User Interface: 사람과 컴퓨터가 정보를 쉽게 주고받을 수 있도록 하는 수단으로 사용자와 컴퓨터 프로그램이 의하소통을 할 수 있도록 하는 매개체 더보기 2. 여기서 SPA 란? Sigle Page Application 의 약자로 단일 페이지로 구성된 웹페이지 즉 예전의 방식으로는 어떤 버튼을 클릭하면 페이지의 일부 영역이 조금만 변경되..

Visual studio Code 설치를 하여 터미널 내에서 create-react-app react-project 라고 입력을 했더니 이러한 오류가 뜨는 상황이었다. 챗지피티 선생님과 구글에 오류를 계속해서 서치해 본 결과... 시스템 자체에서 스크립트를 허용하지 않아 패키지 모듈이 4개 정도만 설치되는 상황이었다. ※ 해결방법 window 검색에서 Window PowerShell 을 입력해준다. 관리자로 실행을 눌러서 창을 열어주고 Get-ExecutionPolicy 로 현재정책을 확인해보았다. 으앗 AllSigned로 나온다! AllSigned는 모든 스크립트가 디지털 서명되어야만 실행이 허용된다는 것을 의미한다. 그래서 이걸 허용으로 다 바꾸어줘야 한다. Set-ExecutionPolicy Rem..