1. 올바른 초기값 설정const [count, setCount] = useState();const [list, setList] = useState(); 위의 초기값설정은 아래처럼 변경되어야 올바른 초기값 설정입니다.const [ count, setCount ] = useState(0);const [ list, setList ] = useState([]);왜 이렇게 값을 설정해야하는지 한번 알아보겠습니다. 초기값 ?가장 먼저 렌더링될대 순간적으로 보여질 수 있는 값이기도 하다. 당연히 초기에 렌더링 되는 값 초기값 지키지 않을 경우 ? 렌더링 이슈, 무한루프, 타입 불일치로 의도치 않은 동작 발생 -> 런타임 에러 초기값을 넣지 않으면 ? : undefined 상태를 CRUD => 상태를 지울때도 초..
클린코드란 1. 클린코드는 무적이 아니다 클린코드가 무조건 최고는 아니다 무조건 클린코드 === 좋은코드는 아니다 클린코드를 지켰다며 TDD를 통과했다며 기뻐하지만 React 앱이 동작하지 않음 성급한 기술 도입으로 과도한 추상화 팀원들에게 피해를 줌 2. 클린코드보다 중요한 것은 상당히 많다. 작성한 코드의 확장성 React 앱의 완성도 앱의 완성도가 떨어지는 경우 사소한 동작에도 잦은 버그가 발생 함께 개발하는 팀원들과의 코드를 두고 할 수 있는 소통 Vite란? 공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공 번들링 시, Rollup 기반의 다양한 빌드..
변수 변수초기화 변수를 선언하고, 선언한 변수에 처음으로 값을 저장하는 것을 변수 초기화라고 한다. 자바는 변수를 초기화 하도록 강제한다.(초기화 하지 않으면 에러가 발생) -> 지역변수 String 문자열을 다룬다. 큰따옴표를 사용해야 한다. 예) "hello java" String은 첫글자가 대문자로 시작하는 특별한 타입이다. 리터럴 코드에서 개발자가 직접 적은 100, 10.5, true, 'A', "Hello Java"와 같은 고정된 값을 프로그래밍 용어로 리터럴(literal)이라 한다. 변수의 값은 변할 수 있지만 리터럴은 개발자가 직접 입력한 고정된 값이다. 따라서 리터럴 자체는 변하지 않는다. 변수 타입 정리 아래 타입은 실무에서 거의 사용하지 않는다. byte : 표현 길이가 너무 작다...
지금까지는 사용자(로그인이 된 회원)의 권리를 가진 사용자만이 할수있는 좋아요추가/취소, 장바구니담기/조회 등을 Request(요청)할때 단순히 유저id 또는 이메일 등의 방식으로 요청을 했습니다. 이번에는 이러한 방식에서 벗어나 JWT를 이용해 Header에 JWT를 담아서 서버에 보내고 요청을 할 수 있도록 설계해보겠습니다. 이전에 한번 jwt가 무엇인지 어떻게 발행하고 어떻게 검증하는지에 대해 다뤄봤습니다. https://myeongsu0257.tistory.com/231 JWT 인증과 인가 인증(Authentication) = 로그인 : 관리자든 고객이든 인증을 통해서 사이트에 가입된 사용자라는 걸 증명하는 것 ex) : ID, PW로 로그인 하는 행위 인가(Authorization) : 인증 이..
주문하기컨트롤러를 설계하면서 3개의sql문을 한번에 실행해야하는 코드가 있습니다. const order = (req,res)=>{ const {items,delivery,totalQuantity,totalPrice,userId,firstBookTitle}=req.body; let delivery_id; let order_id; let sql ="INSERT INTO delivery(address,receiver,contact) VALUES(?,?,?)" let values = [delivery.address, delivery.receiver, delivery.contact]; conn.query(sql,values, (err,results,fields)=>{ if(err){ console.log(err)..
도서 전체 도서 조회 전체도서조회입니다. query로 4개의 값을 받는데 이 중 필수적으로 받아야 하는 값들은 limit와 currentPage입니다. category_id는 카테고리별로 도서의 개수를 알고 싶을때, news는 현재 날짜로부터 1달이내에 출간된 도서를 조회하고 싶을때 받아서 사용합니다. 따라서 category_id와 news의 값이 있는 경우들을 if문으로 작성하여 기본적인 sql문( 모든책조회) 에 WHERE로 조건을 걸어주었습니다. const allBooks = (req,res)=>{ const {category_id,news,limit,currentPage} = req.query; // limit : page 당 도서 수 ex. 3 // currentPage : 현재 몇 페이지 ex..
Express-generator 프로젝트 구조 bin/www : 포트번호 등과 같은 웹 서버를 구축하는데에 필요한 설정 데이터가 정의되어 있는 파일 .env파일과 같이 설정값을 가지고 에러처리, 기타추가 설정을 해주는 파일 node_modules : Node.js, Express에 필요한 모듈들이 설치되는폴더 public : images, javascripts, stylesheets -> 정적(ex. 로고, 회사 소개 페이지) 파일 routes : 각 경로를 담당하는 모듈들이 들어있는 폴더 = 라우팅 로직을 구현하는 모듈들 : 클라이언트에서 어떤 요청을 주냐에 따라서 어떤 로직을 수행할 지 파일별로 분할 해서 관리하는 정도 자바의 controller 역할 views : 클라이언트에게 html코드로 "화면..
회원 API 회원가입 Method POST URI /users/join HTTP status code 201 Request Body { email : "사용자가 입력한 이메일", password : "사용자가 입력한 비밀번호" } Response Body 로그인 Method POST URI /users/login HTTP status code 200 Request Body { email : "사용자가 입력한 이메일", password : "사용자가 입력한 비밀번호" } Response Cookie JWT token 비밀번호 초기화 요청 Method POST URI /users/reset HTTP status code 200 Request Body { email : "사용자가 입력한 이메일" } Respo..
인증과 인가 인증(Authentication) = 로그인 : 관리자든 고객이든 인증을 통해서 사이트에 가입된 사용자라는 걸 증명하는 것 ex) : ID, PW로 로그인 하는 행위 인가(Authorization) : 인증 이후의 프로세스로, 인증된 유저가 어떠한 자원에 접근할 수 있는지 확인하는 절차 ex) : 같은 사이트 내에 관리자/고객에 따라 접근할 수 있는 페이지가 다르다, 쿠키 vs 세션 vs JWT 쿠키 쉽게 말하면, 로그인을 하면 서버가 쿠키를 구워서 준다. 그 후 사용자랑 서버가 쿠키를 가지고 핑퐁한다. 웹에서 서버와 클라이언트가 주고받는 데이터 중 하나 생성은 웹 서버에서 하여 웹 브라우저에게 주면, 브라우저가 자기 메모리에 저장한 후 다음번에 같은 웹서버 방문할 때 쿠키를 들고 요청한다...
https://myeongsu0257.tistory.com/229 토이프로젝트 유튜브4(회원API,채널API sql적용) 이전 회원 API 설계 토이프로젝트 유튜브1(회원API설계), router 유튜브 회원 로그인 회원가입 회원정보조회 회원탈퇴 회원은 계정 1개당 채널 100개를 가질 수 있다. 채널 채널 생성 채널 수정 채널 myeongsu0257.tistory.com 이전 포스팅까지 api를 설계하면서 body에 담겨온 값들을 그냥 무조건 사용하는 방식으로 했는데 이러한 방식은 좋지않습니다. 따라서 유효성검사에 대해 알아보고 코드에 적용해보겠습니다. 유효성검사 유효성 : "사용자가 입력한 값" 유효성(타당성)을 확인하는 것 express-validator https://express-validato..
이전 회원 API 설계 토이프로젝트 유튜브1(회원API설계), router 유튜브 회원 로그인 회원가입 회원정보조회 회원탈퇴 회원은 계정 1개당 채널 100개를 가질 수 있다. 채널 채널 생성 채널 수정 채널 삭제 회원 API 설계 로그인 POST /login req : body (id,pwd) res : 000님 myeongsu0257.tistory.com 로그인 POST /login req : body (id,pwd) res : 000님 환영합니다 , 메인페이지 회원가입 POST /join req : body(id, pwd, name) res : 000님 환영합니다 ,로그인 페이지 회원정보(개별)조회 GET /users/:id req : URL (id) res : id,name 회원 개별 탈퇴 DEL..
https://myeongsu0257.tistory.com/227 Docker MariaDB db생성 및 테이블생성(삽입,수정,join) https://myeongsu0257.tistory.com/226 토이프로젝트 유튜브2(채널 API 리팩토링) https://myeongsu0257.tistory.com/225 토이프로젝트 유튜브1(회원API설계), router 유튜브 회원 로그인 회원가입 회원정보조회 회원탈퇴 myeongsu0257.tistory.com 저번포스팅에서는 CLI로 MariaDb에 접속해 테이블을 생성하고 Insert, Update 등의 sql문을 작성해 실습까지 해보았습니다. 적용을 하기위해 이번에는 저번에 하던 유튜브 토이프로젝트의 DB를 생성해보겠습니다. https://myeongs..
https://myeongsu0257.tistory.com/226 토이프로젝트 유튜브2(채널 API 리팩토링) https://myeongsu0257.tistory.com/225 토이프로젝트 유튜브1(회원API설계), router 유튜브 회원 로그인 회원가입 회원정보조회 회원탈퇴 회원은 계정 1개당 채널 100개를 가질 수 있다. 채널 채널 생성 채널 수 myeongsu0257.tistory.com 저번 포스팅까지 해서 회원 API와 채널API를 만들었습니다. 하지만 지금까지는 그저 db라는 맵겍체를 생성해서 데이터를 임시적으로 저장하고 활용하는 방법밖에 하지 못했습니다. 그래서 오늘은 MariDb에 데이터를 생성하고 활용해보겠습니다. 먼저 db입니다. 순서 mariadb 접속 Board 스키마 생생 CR..
https://myeongsu0257.tistory.com/225 토이프로젝트 유튜브1(회원API설계), router 유튜브 회원 로그인 회원가입 회원정보조회 회원탈퇴 회원은 계정 1개당 채널 100개를 가질 수 있다. 채널 채널 생성 채널 수정 채널 삭제 회원 API 설계 로그인 POST /login req : body (id,pwd) res : 000님 myeongsu0257.tistory.com 유튜브를 보면 한유저(회원)이 가질 수 있는 채널은 여러개입니다. 따라서 채널을 여러개 가질 수 있도록 설계해보겠습니다. 그러기위해서 ERD를 그려보겠습니다. 회원테이블입니다. user_id password name testId1 1234 tester1 testid2 5678 tester2 채널테이블입니다...
유튜브 회원 로그인 회원가입 회원정보조회 회원탈퇴 회원은 계정 1개당 채널 100개를 가질 수 있다. 채널 채널 생성 채널 수정 채널 삭제 회원 API 설계 로그인 POST /login req : body (id,pwd) res : 000님 환영합니다 , 메인페이지 회원가입 POST /join req : body(id, pwd, name) res : 000님 환영합니다 ,로그인 페이지 회원정보(개별)조회 GET /users/:id req : URL (id) res : id,name 회원 개별 탈퇴 DELETE /users/:id req : URL(id) res : 000님 다음에 또 뵙겠습니다. 메인페이지 express환경을 셋팅해준 다음 db Map객체를 선언하고 id를 전역적으로 선언해주겠습니다. a..
