first react project

Node.js 최선 버전 설치Visual Studio Code 설치React 프로젝트 생성 새 터미널을 만들고 나는 'secret' 프로젝트를 만들었다.node_modules : 라이브러리 모음 폴더public : 이미지 파일과 같은 static 파일 보관함. 빌드

ORM(Object Relational Mapping)객체와 데이터베이스의 관계를 매핑해주는 도구이다.데이터베이스 접근을 프로그래밍 언어의 관점에서 맞출 수 있다.SQL 문을 직접 작성하지 않고 엔티티를 객체로 표현 할 수 있다.객체를 통해 간접적으로 데이터베이스를 다

맥을 사용중이기 때문에 Mac OS mysql GUI인 Sequel Ace 설치를 해준다.생성한 유저 정보로 데이터 베이스에 접속해준다.나는 사이트의 로그인, 회원가입 구현을 위해 사용자의 정보 테이블을 생성했다.react project 의 server 폴더를 따로 만

암호화의 종류에는 여러가지가 있다.ISO-27001 보안 규정을 준수해야하는 상황이면 PBKDF2를 사용일반적으로 규정을 준수해야할 상황이 아니면 구현이 쉽고 비교적 강력한 Bcrypt를 사용보안 시스템을 구현하는데 많은 비용을 투자할 수 있다면, Scrpyt를 사용나

react 프로젝트를 하는 중 서버가 다운되면서 로그인이 풀리는 현상이 계속해서 일어났다. reudx 쪽에서 logoutUser의 return 값에 isInit: true 를 추가해줬다. 헤더쪽의 로그아웃을 눌렀을때 logout 액션을 취해주고 authguardc

react의 컴포넌트 구조는 상위 컴포넌트와 하위 컴포넌트의 상호작용이 가능하다.하지만 컴포넌트에서 제공하는 상호작용 방식으로는 여러 계층을 가진 컴포넌트간 상호작용은 복잡한 단계를 거쳐야 한다.이러한 한계를 극복하기 위해서 Redux 가 만들어지게 됐다.react 에

비밀번호 확인 로직을 만들기 위해 코드를 간단하게 작성을 했는데 오류가 발생했다.오류는 다음과 같다.실행이 안되는 치명적인 오류는 아니지만 콘솔창을 깔끔하게 하기 위해 문제를 해결해보자.password 필드가 폼에 포함되어 있지 않다고 한다.그래서 input 태그를 f

오늘은 nodemailer 모듈을 이용하여 메일 인증을 보내보려고 한다.nodemailer는 node서버에서 메일을 보낼 수 있는 메일 전송 모듈이다.나는 사용자가 비밀번호를 잊어버렸을때 사용자가 입력한 메일을 통해 임시 비밀번호를 받게 하고 그 임시 비밀번호로 로그인

소셜로그인이란 소셜 사인 인 (Social Sign-in) 또는 소셜 사인 온 (Social Sign-on)이라고도 하는 소셜 로그인은 소셜 네트워킹 사이트의 정보를 이용해 타사 애플리케이션과 플랫폼에 손쉽게 로그인할 수 있는 프로세스를 말합니다. 이 프로세스는 계정을

게시글들을 드롭다운의 메뉴에 의해 정렬을 구현을 하려 했다.드롭다운에 표시 되어 있는 필터 중 하나인 '조회순' 정렬하기.데이터베이스에 기존에 없는 column 인 view 를 추가해주었다.숫자가 증가해야하기 때문에 int로 설정.서버에서의 model도 재설정을 해주었

프로젝트를 진행하면서 state가 변경됐음에도 화면의 출력에서는 state가 변하지 않는 현상이 발생했다.이유는부모 컴포넌트에서 전달받은 props를 useState의 초기값으로 설정했기 때문이다.useState는 최초 한번만 호출되기 때문에 props 값이 변경되더라

html 요소에 contentEditable 속성을 추가하면 input 요소처럼 수정이 가능하게 만들 수 있다.이러한 요소를 추가 한 뒤 콘솔창에는 알 수 없는 오류가 발생했다.이 경고는 contentEditable 속성이 설정된 컴포넌트에서 React로 관리되는 ch

북마크 기능 구현을 위해서 우선적으로 생각을 해봐야 할 것이 있었다. 바로 테이블간의 관계형성. 내가 만든 테이블중에서 관련 지어야 할 것은 'recipe', 'user', 'bookmark' 이다. 'recipe'는

탈퇴 페이지를 만들게 되면서 탈퇴 사유에 관한 여러개의 버튼을 만들고 싶었다.여러 컴포넌트를 사용하면 코드도 많아지기 때문에 탈퇴 사유를 list에 담아 map으로 구현하고 싶었다. (+ 버튼을 눌렀을 때 해당 버튼의 스타일만 변경하게 만들고 싶었다.)구현된 버튼들사용

EC2 시작하기 AWS 콘솔 로그인 리전을 아시아 태평양(서울)로 변경해준다. 검색창에 EC2 입력하고 클릭 인스턴스 생성. 인스턴스의 이름을 설정한다. 인스턴스 유형 선택 - 나는 ubuntu 를 선택했다. 키 페어 생성 인스턴스의 고유 보안 증서로 안전한 곳에

AWS access key, secrety key 발급받기 aws console 검색창에서 'IAM' 을 검색한다. 카테고리에 보이는 '엑세스 관리' - '사용자' 를 누르고 등록한 사용자가 없으면 사용자 추가를 해준다. 사용자 이름을 입력하고 다음 버튼을 눌러준

현재 보여지는 레시피에서 재료를 한줄 한줄 추가 하거나 이미 등록 되어 있는 레시피의 세부사항을 추가, 삭제할 것이다.우선 등록을 해보자.클라이언트쪽 부분이다.ingredientList를 변할 수 있는 state 값으로 설정을 하고 input 태그에서는 onChange