본문 바로가기

분류 전체보기

 (85)
프론트엔드 기초: React + TypeScript(3)-프로그래밍 기본 원리(C언어를 통한) 과정소개프로그래밍의 기본 원리코드의 내부 동작 구조를 이해하기기본원리를 이해하게되면 -> 알고리즘적인 사고 가능공통적인 로직 익힐 수 있음포인터의 개념 (사용하지 않더라도 이해는 해야함)함수 포인터 (변수에 담는 것)구조체, 공용체, 열거형객체지향 철학의 이해타입스크립트 기초타입스크립트를 쓰는 이유 이해하기타입스크립트 기반의 리액트프로그래밍 기본 원리왜 컴파일 기반 언어를 이해해야 할까?모든 프로그래밍 언어의 동작 원리는 거의 똑같다자바스크립트와 같은 스크립트 언어로는 동작 원리를 이해하기 힘든 구조이다C언어의 변수와 데이터 타입, 배열, 포인터 등의 동작 원리들은 자바스크립트 언어 동작의 근간을 이룬다.타입을 변수와 함수에 기본으로 사용해보면 타입스크립트를 더 쉽게 이해할 수 있다.프로그래밍의 개념프로..
프론트엔드 기초: React + TypeScript(2) ✨Flow control제어흐름, 흐름제어라고 한다명령형 프로그램의 개별 명령문, 명령 또 는 함수 호출이 실행되거나 평가되는 순서5가지 제어흐름의 종류가 있다.제어 흐름의 종류goto                                     다른 구문에서 시작 (💢개발설계에서 오류를 발생시길 수 있다.-강의에서 다루지 않음)choiceif-else, switch일부 조건이 충족되는 경우에만 일련의 명령문 실행loopcollection loop,general loop어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행continueloop continuation현재 실행 구문에서 떨어진 한 구문의 집합을 실행breakloop early exit,함수 실행 정지로그램 실행을 중단 표현식과 표..
프론트엔드 기초: React + TypeScript(1) 웹 프론트엔드 영역 구현 목표예시) 검색기능버튼을 클릭해서 검색한다 => 잘 모르는 정보를 얻기 위해 검색1. 알고 있는 키워드 넣어 (user input)2. 검색 기능 (feature) 활용하여3. 원하는 정보 (data) 얻는다. 브라우저와 디버깅이슈: 개발 중에 예기치 않게 발생한 상황디버깅: 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산을 찾아내어그 원인을 밝히고 수정하는 작업과정-중단점을 지정해서 확인하는 방법이나 콘솔을 찍는 방법이 있다.console.log();console.dir(); JavaScript 언어의 특징1. 인터프리터 언어🔸우리가 지금 사용하는 코드는 사람이 이해할 수 있는 언어이고,기계가 이해할 수 있는 언어는 작성된 코드가 기계어로 번역되어 기계에게 읽..
프로젝트: Node.js 기반의 REST API 구현(14)- jwt 검증 함수 모듈, SQL_CALC_ROUND_ROWS-fount_rows(), 외부 모듈 faker ❄️jwt 검증하는 ensureAuthorization 함수를 모듈로 빼서 관리하기utils 폴더로 따로 빼주고 파일을 만들어주었다❗jwtUtils.js ❄️jwt 모듈을 적용한 코드OrderController.js BookController.js지금의 jwt코드에서는 모듈내에서 err가 나면 response를 바로 보내주는 방식으로 구현되어있으므로,authoriztion이 있을때 id값을 user_id에 넣고, qeury문과 params도 있을때에만 넣어주게삼항연산자를 사용하여 코드를 구현했다❗ Headers가 없을 때 (비로그인) Headers가 있을 때(로그인) 전체 도서 조회시 현재 페이지와 총 도서의 수를 response로 보내주기  ✨SQL_CALC_FOUND_ROWS코드 실행으로 COUNT(..
프로젝트: Node.js 기반의 REST API 구현(13)-jwt token cookie header Authorization, try....catch, throw, instanceof, ❄️body에 받아서 넣어주던 user_id를 jwt token cookie로 받아header Authorization으로 넣어서 통신하기❗토큰 발행으로 토큰을 받아서 받은 토큰을 Authorization의 value값으로 넣어주면verify의 값이 찍히는 것을 볼 수 있다❗ ❄️좋아요 추가, 삭제 jwt 받아서 하기추가삭제 likeController.js cartController.js 💢우리가 생각해봐야 할 것1. TokenExpiredError: jwt expired유효기간이 지나서 나오는 에러아무 처리를 하지 않으면 500에러가 나오지만 (서버가 꺼지지는 않음)우리는 클라이언트단에서 에러가 아닌 메세지를 띄워줘야한다.예외처리 => res. '로그인(인증) 세션이 만료되었습니다. 다시 로그인 하세..
프로젝트: Node.js 기반의 REST API 구현(12)-order.js-TRUNCATE, SET FOREIGN_KEY_CHECKS=0;, DELETE WHERE IN(); MySQL 데이터 삭제하는 방법1. DELETE테이블은 남아있고 조건에 해당하는 행이 삭제 (조건이 없으면 전체 행 삭제되니 조심🔥)DELETE FROM 테이블명 WHERE 조건; 2. DROP테이블 전체 삭제DROP TABLE 테이블명; 2. TRUNCATE테이블 초기화 후 구조와 인덱스는 그대로 남아있고 테이블 행 전체 삭제 (조건을 줄 수 없음)TRUNCATE 테이블명; 차이점DELETETRUNCATE동작방식행 단위로 삭제 (조건 줄 수 있음)테이블 전체 삭제 (조건 줄 수 없음)속도느림매우 빠름로그 기록각 행 삭제 기록테이블 초기화 기록만 남음트리거트리거 발생트리거 발생❌트리거를 통해 처리하는 경우 사용 제한트랜잭션 처리트랜잭션 내에서 사용가능, 롤백가능일부 시스템에서 트랙잭션 내 롤백 불가AU..
프로젝트: Node.js 기반의 REST API 구현(11)-order.js-node.js 비동기(Promise 객체, async-await) ✨ver1의 설계로 DB, Node.js 코드 구현해보기node.js 비동기논 블로킹 I/O node.js 비동기 처리 방식-비동기 발생값이 나오는 시간을 기다리지않고 다음코드를 바로 실행함ex. setTimeOut(), setInterval(), query() -비동기 처리값이 나오는 시간을 기다렸다 다음 코드콜백함수promise (resolve, reject)then & catchES2017 promise => async & await❄️JS 데모 연습해보기promise-demo.jspromise-chain-demo.jsasync-demo.js 나는 원래 promise를 사용해서 보냈었는데강의를 듣다보니 import 할 때, promise로 불러올 수 있어서 수정했다.import { createCon..
프로젝트: Node.js 기반의 REST API 구현(10)-order.js-LAST_INSERT_ID(), node.js-results.insertId, ✨ver1의 설계로 DB, Node.js 코드 구현해보기Table deliveryTable ordersTable orderedBook결제하기에서 설계한 API에서 약속된 DB를 생성해줬다. 🗝️방금 INSERT한 데이터 PK가져오는 방법❗❗✨LAST_INSERT_ID()SELECT LAST_INSERT_ID();장점단일세션에서 안전하다.세션별로 작동하기 때문에 동시성에 문제가 없다.여러 클라이언트가 동시에 레코드를 삽입하더라도 각 클라이언트마다의 id 값을 가지고 온다.복잡한 트랜잭션이나 쿼리없이 삽입한 레코드의 id값을  쉽게 가지고 올 수 있다.AUTO_INCREMENT 필드와 호환되므로 DB에서 자동으로 생성되는 값에 유용하다.특히 기본키나 참조무결성을 유지하는 상황에서 많이 사용된다.트랜잭션 내..

티스토리툴바