TIL

풀스택 데브코스 OT를 마치고 첫 날은 프로젝트의 정의부터 README와 버전 관리 시스템에 대해 공부했어요.프로젝트란 일정한 기간 안에 일정한 목적을 달성하기 위해 수행하는 업무의 묶음을 말해요기획부터 설계, 개발, 테스트를 거쳐 배포까지 포함하는 전체 프로세스를 의

지난 시간에 버전 관리 시스템의 개념을 배웠다면, 오늘은 실제로 가장 많이 쓰이는 분산형 VCS인 Git과 이를 더 강력하게 만들어주는 GitHub에 대해 알아봤어요.Git은 내 컴퓨터(로컬 환경)에서 유의미한 수정 사항인 '버전'을 관리할 수 있게 해줘요. 매번 파일

CSS & Javascript 오늘은 html에 스타일을 입히는 CSS와 html 요소를 제어하여 동적인 요소를 줄 수 있는 JS에 대해 배워봤어요. 인라인 CSS 인라인 CSS는 "HTML 태그 안에 직접 스타일을 적어주는 방식"이에요. 이와 같이 html 태그에

GitHub 연동부터 브랜치까지 오늘은 로컬에서 벗어나 커밋을 GitHub에 Push, Pull, Clone 하는 법과 Branch를 배워봤어요. 📖 GitHub 계정과 레포지토리 📄 레포지토리? 위키백과 정의를 보면 '메타데이터를 저장하는 자료 구조'라고

브랜치 전략과 병합, 충돌 해결하기 오늘은 브랜치를 어떻게 사용하면 좋을지, 네이밍과 깃 플로우, 병합과 PR에 대해 배워볼 것이에요. 📖 브랜치 전략 (네이밍, Git flow) 브랜치의 이름은 해당 브랜치에서 하고자 하는 것을 명확히 나타내야해요 main : 최

협업툴들 알아보기 오늘은 협업 간에 유용하게 사용할 수 있는 도구들을 알아봤어요. 트렐로 한마디로 깃허브 연동되는 칸반보드 깃허브 프로젝트랑 같지 않나 싶지만, 다른 플랫폼도 볼 수 있다는 게 큰 장점 같아요. 노션은 팀원의 깃허브 PR이나 이슈가 연동되지 않아서

웹의 이해 웹은 월드 와이드 웹의 줄임말이에요. 인터넷을 통해 정적인 하이퍼텍스트 문서를 주고받으며 사람들이 쉽게 정보를 검색하고 접근할 수 있도록 생겼어요. 우리는 브라우저를 통해, 하이퍼텍스트로 이루어진 웹 문서에서 다양한 콘텐츠에 접근할 수 있게 되었어요. 웹의

❗️필수 포함 내용 : 메인페이지 브라우저 화면 캡쳐, start() 함수 실행시 브라우저에 본인이름 보이게 코드 작성해서 실행 화면 캡쳐노드는 자바스크립트 런타임 환경이에요. 기존 웹브라우저에서만 사용 가능했던 자바스크립트를 브라우저 외에서 사용할 수 있게 만들어줘요

DB와 Docker, SQL 오늘은 쇼핑몰 프로젝트의 백엔드 부분을 구현하기 위해서 필수적으로 요하는 DB를 공부해볼거에요 데이터베이스란? 데이터를 통합하여 효율적으로 관리하기 위한 집합체를 DB라고 해요. 이런 DB를 구조화하여 관리함으로써 중복을 막고, 효율적이고

API, REST API API란? REST API란?

Node.js와 npm, 그리고 HTTP Method 오늘은 웹 개발의 기초가 되는 HTTP Method를 간단하게 알아보고, Node.js가 왜 탄생했는지, 어떤 특징이 있는지 알아볼 예정이에요. 추가로 실습하면서 마주쳤던 모듈과 npm, 라이브러리와 프레임워크의

데브코스를 하면서 내가 사용하는 노드에 대해 글로 정리할 필요가 있다고 생각이 들었어요.Node.js의 동작 원리에서 가장 중요한 건 "싱글 스레드(Single Thread) 기반의 이벤트 루프(Event Loop)와 비동기 I/O(Non-blocking I/O)"에요

Express 오늘은 http를 내장 모듈로 하는 express로 rest api 실습을 진행했어요. Express로 서버 띄우고 JSON, Params 다루기 저번 시간에는 Node.js와 모듈의 개념에 대해 배웠어요. 이번 시간에는 내장 모듈인 http 대신,

개발을 하다 보면 다른 개발자들은 npm 말고 yarn이나 pnpm 같은 걸 쓰는 걸 종종 볼 수 있어요.오늘은 Node.js 생태계의 대표적인 패키지 관리자 3대장, npm, yarn, pnpm의 특징과 차이점을 아주 쉽게 비교해 보겠습니다.Node.js를 설치하면

express 에서는 파라미터를 request 의 params 에서 추출해낼 수 있어요.js에서는 string을 number로 변경하려면 parseInt(), Number(), 혹은 + 를 사용할 수 있어요.Express에서 쿼리 스트링 값을 받아올 때 다음과 같이 해

지난 시간에 Express의 쿼리 스트링 사용법과 네이밍 규칙을 알아봤습니다. 이번 시간에는 Map에 Object 데이터를 넣는 실습을 해보고, Express에 대해 더 자세히 알아보겠습니다. 추가적으로 JS의 함수도 알아보겠습니다간단한 실습으로 기본적으로 set 함수

Express에서 Params를 빼올 때 req.params를 했던 것처럼 처음에는 req.body를 해보려고 했는데이럴수가 req.body가 undefined라고? 그러면 어떻게 빼올 수 있을까?해답은 app.use(express.json()); 를 넣어야하는 것이다

지난 주에 구현했던 Express CRUD 중 전체 조회랑 Update, Delete 를 해보려고 해요. JS에서 Map 다루기

이번 시간에는 핸들러와 조금 더 진화된 예외처리를 해보려합니다. 그리고 JS의 == 과 === 의 차이, 미니 프로젝트 기획과 API 설계 및 구현을 해볼 예정이에요.HTTP Request가 오면 자동으로 호출되어 실행되는 메서드(Method)를 의미합니다. Sprin

오늘은 어제 다 못한 로그인 api를 마저 구현해봤어요.강의에서는 hasUserId 를 var로 전역변수화해서 예외처리를 하는데, 저는 전역변수 사용을 최소화하고 early return을 사용하는 게 가독성 측면에서 더 좋다고 생각했어요.안 그래도 전역변수 때문에 if

라우터 이전에 라우팅(Routing)을 먼저 알아보고 넘어가겠습니다.라우팅은 URI(또는 경로)와 특정 HTTP 요청 메서드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방식을 결정하는 것쉽게 이야기해서 요청에 대해 적절한

데이터들을 관리하기 용이하도록 DBMS를 사용해요.DBMS란 DataBase Management System의 약자로 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어 도구의 집합이다.장점으로는 다음과 같아요.제약 조건과 규칙(PK, Null 구분, FK

오늘은 실제로 sql을 통해 테이블을 만들고 pk와 fk로 연결해보기로 했어요도커 컴포즈로 mariaDB로 띄워봤어요.posts 테이블도 만들고유저 테이블도 다음과 같이 만들었어요.DESC 테이블명 을 통해 테이블 칼럼 정보를 조회 가능해요만약 NOT NULL 로 설정

이번에는 DDL이 아니라 직접 GUI에서 테이블을 만들어봤어요.GUI 상에서 직접 row를 수정할 수도 있고, 생성할 수도 있어요.이렇게 sub_num과 video_count는 null 시 default로 0을 지정할 수 있어요.참조 무결성이란 부모 테이블에 존재하지

지금까지는 일일히 입력값을 검증했지만, express-validator 를 외부 라이브러리를 npm에서 받아 사용하기로 했어요.body 에 올 속성을 메소드 체이닝으로 직접 접근해서 검증할 수 있어요.isint() 를 걸어놨더니 errors 객체의 msg 를 가져왔어요

users.js 리팩토링 users.js도 channels.js에 적용한 validate 미들웨어를 모두 적용했어요. body의 유효성을 검증했으니 기존 유효성 검사 부분을 제거했어요. 인증과 인가 > 인증(Authentication)은 참이라는 근거가 있는 무언가

API 설계저번 시간 화면 별 주요 기능을 토대로 API를 설계 해볼 예정입니다.👉🏻화면소개 및 주요 기능 확인하기 "email" : "사용자가 입력한 이메일", "password" : "사용자가 입력한 비밀번호"}\` || Response Body | JWT_

지난 시간에서 추가된 API를 확인해볼게요.저는 DELETE의 성공으로 204가 맞다고 생각하여 204를 붙였어요.여기서 created_at이 주문일자를 말해요.결제 금액이 orders에 있어야, 나중에 책 가격이 바뀌어도 예전 가격을 보여줄 수 있어요.이건 게시판이

우선 여태껏 진행했던 대로 의존성을 모두 설치하고, users 모듈부터 시작했어요.추가로 books, likes, carts, orders 또한 모듈화를 진행했어요.우선 users 테이블만 만들고 datagrip으로 테이블을 만들었어요.

이 코드에서 가장 아쉬운 건 상태코드의 하드 코딩이에요.NestJS에서는 throw new NotFoundException(e.message); 등으로 처리하던 것을 생각하고 express를 구현하니 res 을 직접 사용하는 게 어색했어요.NestJS처럼 이미 상수화된

도서 테이블 생성 books 테이블을 만들고, 4개의 더미 데이터를 넣어놨어요. BookController 떼어내기 도서 전체 조회, 상세 도서 조회 piksum, 이미지 경로 추가 카테고리별 도서 목록 조회 카테고리 테이블 생성 카테고리 전체 목록 조회

category 테이블의 id 와 books 의 category_id 를 fk로 연결하고 db 다이어그램에도 추가했어요.join을 통해 books를 조회할 때 카테고리 이름도 보이게 되었어요.DATE_ADD(), DATE_SUB() 함수를 사용하여 시간을 원하는 간격에

fk를 두 개 갖고있는 좋아요 테이블을 만들었어요.원래라면 헤더에서 추출한 jwt로 user_id를 req 객체에 넣어줘야하지만, jwt를 req 객체에 넣는 기능을 추후에 개발하고 일단은 body로 받기로 했어요.SQL을 사용해서 구현했어요.count()를 사용하면

지난 시간 좋아요 API를 추가하고 책 API를 수정했어요. 이번에는 장바구니 API를 추가해 볼게요.여러 조건을 확인하기 위해서 OR 을 사용할 수 있습니다. 하지만 조건이 간단한데 많아진다면 SQL만 길어지고 가독성이 떨어지게 돼요. OR 을 여러 번 사용하는 대신

지난 시간 장바구니 API를 추가했어요. 이번에는 주문 API의 결제하기(주문하기)를 어떻게 처리해야 할지 고민해 보고 일부를 직접 구현해 볼게요.LAST_INSERT_ID()는 이름 그대로 마지막으로 insert한 id를 불러오는 함수예요.하지만 이 함수를 사용할 때

지난 시간은 주문 API를 구현하는 중이었어요. 하나의 주문을 처리하기 위해 여러 개의 쿼리가 순서대로 안전하게 동작해야하기 때문에, 비동기 처리 개념을 먼저 정리할게요.동기(Synchronous)와 비동기(Asynchronous)는 요청한 작업이 끝날 때까지 기다릴지

지난 시간에는 비동기 처리에 대해 알아봤어요. 이번 시간에는 비동기 개념을 본격적으로 활용해 주문 API 를 구현해 볼게요본격적인 구현에 앞서 데이터를 지우는 3가지 SQL 명령어에 대해 먼저 정리해 볼게요.DELETE: WHERE 조건을 사용해 조건에 맞는 데이터만

## JWT와 예외 처리를 활용한 API 리팩토링 지난 시간에는 비동기를 활용해 주문 API를 완성했고, 이번 시간에는 JWT와 Request의 Headers를 활용해서 API 전반에 JWT를 적용하는 방향으로 코드를 수정해 볼게요. 추가적으로 `try...catc

지난 시간에는 JWT를 활용해 API를 수정해 보았어요. 이번 시간에는 인가(Authorization) 로직을 모듈화 하고 나머지 API들에도 적용해 볼게요. 추가로 API 설계 문서와 실제 구현 코드를 비교하면서 어색한 네이밍이나 부족한 부분도 함께 수정해 보려고 해

지난 시간까지는 백엔드를 진행했고, 이번 시간부터는 프론트엔드 영역에 진입할 예정이에요.본격적으로 프론트엔드를 배우기 전에, 기초를 다지기 위해 자바스크립트의 핵심 개념들을 먼저 정리해 볼게요.자바스크립트는 인터프리터 언어이자 동적 타입 언어예요. 함수를 일급 객체로

지난 시간에 이어서 자바스크립트의 기본적인 내용을 마저 정리해 볼게요.조건문, 반복문, continue , break 등 코드의 실행 흐름을 제어하는 방법들이에요.조건문을 작성할 때는 중첩된 조건문보다는 보호 구문(guard clauses) 형태로 구현하는 것이 가독성

지난 시간까지 자바스크립트의 전반적인 내용을 훑어봤어요. 이번 시간부터는 프로그래밍의 기본 원리부터 시작해 TypeScript를 활용한 리액트를 배워볼 예정이에요.프로그래밍의 기본 원리를 알아야 코드를 작성하다 문제가 생겼을 때 어디서 발생한 것인지 쉽게 파악하고 이해

C언어에는 포인터라는 개념이 있어요. 포인터 변수를 줄여 부르는 말로, 메모리 주소를 가리키는 변수예요. \* 기호와 함께 사용되는데, 선언할 때와 호출할 때의 의미가 달라져요. 선언할 때 사용되는 \* 은 해당 변수가 포인터 변수라는 것을 의미하고, 호출할 때 사용되

지난 시간에 이어서 프로그래밍의 기본 원리를 마무리해 볼게요.기존 포인터 변수가 변수의 메모리 주소를 저장했던 것처럼, 함수의 주소를 받아서 사용하는 것을 함수 포인터라고 해요.위 코드를 보면 함수 포인터를 사용해서 함수를 호출하는 것을 볼 수 있어요. 함수 포인터를

지난 시간까지 프로그래밍의 기본 원리를 다루었어요. 이번 시간부터는 타입스크립트에 대해 정리해 볼게요.데이터의 자료형(타입)을 미리 알 수 있기 때문에 버그를 줄이고 생산성을 높일 수 있어요. 타입을 명시하기 때문에 유지보수 또한 쉬워져요.타입스크립트는 자바스크립트의

지난 시간에 이어 타입스크립트의 다양한 데이터 타입과 클래스 문법에 대해 알아볼게요.특정한 값 자체를 타입으로 지정하는 리터럴 타입이 있어요. 이 타입을 사용하면 코드의 의도를 명확하게 표현할 수 있고, 허용되지 않은 잘못된 값이 들어오는 것을 사전에 방지할 수 있어요

지난 시간까지 타입스크립트에 대해 배웠어요. 이번 시간부터는 타입스크립트를 활용한 리액트의 기본 동작 원리와 프로젝트 생성 방법, 그리고 JSX 문법에 대해 정리해 볼게요.리액트는 프레임워크가 아닌, 웹과 네이티브 인터페이스를 만들기 위한 라이브러리예요. 페이스북에서

지난 시간에는 리액트의 기본을 배웠어요. 이번 시간에는 리액트에서 중요한 개념인 컴포넌트에 대해 알아보고, state를 활용해 화면의 데이터를 변경하는 방법을 정리해 볼게요.컴포넌트는 리액트가 HTML, CSS, 자바스크립트를 하나로 묶어 만든 재사용 가능한 UI 요소

지난 시간에 이어 리액트 컴포넌트 사이에 데이터를 전달하는 props 에 대해 알아보고, 프론트엔드의 기초를 마무리해 볼게요.리액트의 컴포넌트는 props 를 통해 서로 데이터를 주고받아요. 모든 부모 컴포넌트는 props 를 통해 자식 컴포넌트 방향으로 데이터를 전달

지난 시간까지 타입스크립트와 리액트의 기초를 다루었어요. 이번 시간부터는 리액트를 활용해 본격적인 업무 관리 프로젝트를 진행해 볼게요. 프로젝트의 기본적인 폴더 구조와 사용된 주요 패키지들을 정리했어요.폴더 구조components : 컴포넌트들을 모아두는 폴더예요.ho

지난 글에 이어 업무 관리 프로젝트를 계속 진행해요.이번에는 EditModal 과 LoggerModal 을 구현하면서, 함께 보였던 스타일 수정 내용도 정리해요.이번에는 EditModal 과 LoggerModal 을 구현했어요.기존에 만들었던 흐름과 크게 다르지 않아서

지난 시간에 이어 업무 관리 프로젝트를 계속 진행해 볼게요. 이번 시간에는 화면에 드래그 앤 드롭 기능을 추가하고, Firebase를 활용한 로그인과 로그아웃 기능, 그리고 호스팅을 이용한 최종 배포까지 정리해 볼게요.react-beautiful-dnd 라이브러리를 사

지난 방학에 이어 새로운 리액트 프론트엔드 프로젝트를 시작해 볼게요.리액트 프로젝트 생성을 도와주는 도구로는 크게 Create React App(CRA)과 Vite가 있어요. 두 도구의 주요 특징을 비교해 볼게요.CRA는 Webpack과 Node.js 기반의 Expre

지난 시간에 이어 새로운 프로젝트를 계속 진행해 볼게요. 이번 시간에는 기본적인 레이아웃과 테마를 적용하는 방법을 알아볼게요.레이아웃은 페이지의 한정된 공간에 구성 요소들을 효과적으로 배열하는 것을 의미해요. 리액트에서는 화면에 적절한 컴포넌트를 배치하기 위한 기본적인

지난 시간에 이어 타입스크립트를 활용한 동적 UI 개발을 진행해 볼게요. 이번 시간에는 화면 구성의 바탕이 되는 기본 컴포넌트들을 작성하고, 공통 레이아웃인 헤더와 푸터를 구현하는 과정을 정리해 볼게요.제목을 표시하는 공통 컴포넌트예요. 컴포넌트 내부의 텍스트는 chi

지난 시간에 이어 북스토어 프로젝트를 계속 진행해 볼게요. 이번 시간에는 라우팅을 설정하고, 데이터 모델(타입)을 작성하며 서버와 통신하는 과정을 정리해 볼게요.화면을 이동하기 위해서는 URL을 사용해요. URL과 화면 컴포넌트를 일치시키는 라우팅 작업을 위해 Reac

지난 시간에 이어 북스토어 프로젝트를 계속 진행해 볼게요. 이번 시간에는 전역 상태 관리를 통한 로그인 구현과 메인 화면의 도서 목록 화면을 만드는 과정을 정리해 볼게요.Zustand는 Redux와 같은 전역 상태 관리 도구예요. Redux와 목적은 같지만 사용 방법이

지난 시간에 이어 북스토어 프로젝트를 계속 진행해 볼게요. 이번 시간에는 도서 상세 페이지의 세부 기능들을 구현하는 과정을 정리해 볼게요.도서 상세 페이지는 서버에서 받아온 상품 정보를 화면에 렌더링하는 역할을 해요. 이때 단순히 화면을 구성하는 것을 넘어, 데이터 포

지난 시간에 이어 북스토어 프로젝트의 도서 주문과 주문 목록 화면을 구현하는 과정을 정리해 볼게요.useMemo 훅은 성능 최적화를 위해 연산된 값을 재사용할 수 있게 도와줘요. 연산된 값을 메모리에 저장해 두고, 의존성 배열에 있는 값이 바뀌지 않았다면 이전에 연산한

지난 시간에 이어 프로젝트 중간 회고를 진행하고, 부족했던 기능들을 추가로 구현해 볼게요.회고를 하는 궁극적인 이유는 프로젝트를 더 잘 수행하기 위함이에요. 성장을 도모하고 문제를 해결하며, 유연성과 퍼포먼스를 향상시키는 데 목적이 있어요.지금까지 진행한 학습 주제는