우당탕탕 개발일지

0. 방법컨테이너 혹은 서버를 새로 생성한 것 아님! 젠킨스도 사용 안함!!  naver server에 있는 리눅스에 nginx 설치리눅스에 react 프로젝트 build 폴더 위치nginx가 build 폴더 찾아가도 설정 즉, 서버 로컬을 통해 배포함.   1. nginx 설치   2. nginx 메인 환경 설정 파일 확인메인 환경 설정 파일/etc/nginx/nginx.conf  메인 환경 설정 파일에 nginx가 읽어올 수 있는 환경 설정 파일에 대한 정보 확인 아래 경로로 설정되어 있음.include /etc/nginx/conf.d/*.conf;include /etc/nginx/sites-enabled/*;  3. 환경 설정1. 리액트 프로젝트의 build 폴더를 원하는 위치에 붙여넣기로컬 PC에..

Count   Color   ChangeCount & ChangeColor  Counter

ReduxRedux와 React는 독립적인 별개의 다른 라이브러리자바스크립트 어플리케이션에서 흔히 쓰이는 상태관리 라이브러리Angular, Vue, Ember, jQuery 또는 Vanilla JavaScript와 같은 다른 라이브러리, 프레임워크에서도 사용 가능 특징컴포넌트들의 상태 관련 로직들을 다른 파일로 분리하여 효율적으로 관리글로벌 상태 관리 용이상태값을 컴포넌트에 종속 X & 상태 관리를 컴포넌트의 바깥에서 관리 가능 주요개념store모두 한 곳에서 집중 관리컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.actionAction(액션)은 앱에서 스토어에 운반할 데이터를 말한다. (주문서)Action(..

메인 화면  로그인유효성 검사: 아이디 & 비밀번호로그인 실패실패 팝업 발생실패 문구 노출로그인 성공로그인 -> 로그아웃로그인 계정 이름 노출 로그아웃로그인 팝업 발생사용자 이름 숨김  게시물 목록 게시물 작성로그인 전게시물 작성 불가로그인 후게시물 작성 화면 접근 가능유효성 검사: 제목 & 내용게시물 작성 후, 게시물 목록 이동   게시물 상세 내용게시물 목록에서 제목 클릭 시, 상세 내용 확인 가능

useReducer()React에서 컴포넌트의 상태 관리를 위해서 useState를 사용해서 상태를 업데이트를 하는데, useReducer를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태 관리를 할 수 있다. 즉, 현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용하게 사용할 수 있다.  [사용법] const [state, dispatch] = useReducer(reducer, initialState); state : 현재 상태dispatch : action을 발생시키는 함수reducer : state와 action를 받아 새로운 state를 반환하는 함수initialState : 초기값  Test01: useReducer (1) COLOR 값 설정  ..

웹 스토리지HTML5에서 추가된 기술로 로컬스토리지와 세션스토리지로 구분된다. 특징- 웹 스토리지는 Key와 Value 형태로 이루어졌다.- 웹 스토리지는 클라이언트에 대한 정보를 저장한다.- 웹 스토리지는 로컬에만 정보를 저장하고 쿠키는 서버와 로컬에 정보를 저장한다. 종류로컬스토리지 (localStorage) : 클라이언트에 대한 정보를 영구적으로 저장세션스토리지 (sessionStorage) : 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제장점- 서버에 불필요하게 데이터를 저장하지 않는다. (백엔드에 절대로 전송되지 않는다.)- 저장 가능한 데이터의 용량이 크다. (약 5Mb, 브라우저마다 차이 존재) 단점- HTML5를 지원하지 않는 브라우저의 경우 사용 불가. (현재는 거의 없..

[ day03 ]Test07  Test08 - img사진 클릭 시, 해당 정보 크게 보임  Test09 - src/image  Test10 - Ref  Test11 - 전체 선택 & 해제   [ day04 ]Test01 - useEffectuseEffect란?useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수이다.useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있다.렌더링 후 useEffect는 무조건 한번은 실행된다. [형식]  1. 컴포넌트가 나타날 때 딱 1번만 함수가 호출 useEffect( () => { }, [ ]); 2. 특정 props가 ..