풀사이클

프로젝트란? 일정한 기간 안에 일정한 목적을 달성하기 위해 수행하는 업무의 묶음, 하나의 프로젝트는 정해진 기간, 배정된 금액, 투입인력 등 일정한 제약조건 하에 각종 요구사항을 수행하는 방식으로

마크다운 사용법

git은 분산 버전 관리 시스템(DVCS)으로, 리누스 토르발스 라는 분이 기존 리눅스 커널 관리 툴을 개선하고자 만든 프로그램이다. git 자체는 로컬에 설치하는 프로그램이다. 단순한 파일을 명령어를 통해 git으로 관리하게 만들면, 커밋을 할 때마다 스냅

Github 사용법 정리

git에서 branch가 뭔가요? git branch기능을 원본(보통 main)에서 복사본을 만들어 원본에 영향없이 기능을 고칠 수 있는 명령어다. git branch [브랜치 명] 보통 "똑같은 가지를 새로 만든다"고 생각하면 될거같다.

웹을 이해하기 위해서는 먼저 인터넷(Internet)에 대해 알아야 한다.전 세계의 모든 컴퓨터를 하나의 통신망 안에 연결한다는 의미를 가진 International Network의 약자월드 와이드 웹(world wide web)은 인터넷에 연결된 컴퓨터를 통해 사람들

Hyper Text Markup Langguage 하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어이다.<>HTML은 <>괄호를 사용한다. 우리는 이걸 태그라고 부른다.태그는 웹 페이지의 구성 요소 하나하나로 역

기존 까지 배운 HTML과 css, js로 웹페이지의 화면을 담당하는게 프론트엔드 개발자라면 백엔드 개발자는 말 그대로 웹페이지의 뒷단, 눈에 보이지 않는 부분을 담당하게 된다. 서비스에 필요한 모든 데이터를 관리하며 대표적으로 로그인 창에서 입력된 로그인 정보가 맞는

데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 데이터베이스(DB)라고 한다. 데이터를 구조화하여 관리함으로써 데이터 중복을 막고, 효율적이고 빠른 데이터 연산을 가능하게 한다.웹에서는 웹 어플리케이션에 의해 데이터가 삽입, 삭제, 수정되는 곳을 말한다.

API로 웹페이지 만들기

Node.js란 Node.js는 자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼이다. node.js를 이용해서 자바스크립트로 백엔드를 구현할 수 있으며, 대부분의 자바스크립트를 실행할 수 있게 해주는 엔진이다. 공식 홈페이지에

Node.js의 프레임워크 node.js를 이용하는 사람들의 커뮤니티가 성장하면서, node.js의 불편한 점을 인지하고 그걸 개선하고자 프레임워크의 개발이 시작되엇다. 대표적으로 Express, NestJS, Fastify가 있다. 참고: 2024 Developer

* 패키지 매니저란?* 외부 라이브러리 및 모듈을 쉽게 관리하고 설치할 수 있도록 도와주는 도구

node.js동작원리에 대해서 자세히 알아보자 Node.js의 특징 > node.js는 javascript를 브라우저 외부에서 실행할 수 있도록 만든 런타임 싱글 스레드 > 한 개의 스레드에서 모든 작업을 처리한다. => 요리사가 한명 논블로킹 I/O > I/O 작

express를 사용하여 웹 애플리케이션을 개발할 때, 클라이언트로부터 전달받은 데이터를 URL로 부터 쉽게 추출할 수 있다. 이때 주로 사용되는 방법인 req.params와 req.query에 대해 알아보자

Express 홈페이지에 가면 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크로 웹 애플리케이션, API, 선능등을 지원해준다고 적혀있다.

자바스크립트의 4가지 함수방식과 잘 사용하지 않는 선언방식

이전 까지는 Get을 사용하여 데이터를 불러오는걸 했다면, 이번에는 postman과 post를 사용하여 데이터를 보내고 받는 방법을 사용할 것이다.

이번에는 삭제를 하는걸 해볼려고 한다. 기존에 만들었던 유튜브 데모에서 개별삭제와 전체삭제를 위한 api를 만들것이다. 그전에 전체 조회할때 사용한 forEach에 대해서 알아보고자 한다. forEach for + Each로 향상된 for문이다. 배열이나 객체에서 요소를 하나씩 꺼내어, 매개변수로 그 요소를 전달하여 콜백함수 로직대로 실행된다. 여기서 쓰...

미니프로젝트 만들기

미니프로젝트 미니 프로젝트(?)에서 회원 api를 앞에 했으니, 여기서는 채널에 대한 api를 만들려고 한다.

router에 대해 배워보고, 이전에 만든 파일들을 모듈로 만들어서 연결할것이다.

저번에 배운 데이터베이스 여러 개념들을 다시 설명해주심

SQL은 외우는게 아니다! 필요할 때 마다 구글링 해야한다

workbench사용해서 이전에 한 프로젝트 db랑 연동하기

jwt

프로젝트 진행 전에 준비해야하는 내용들에 대해 정리해보자.

이전에 혼자 만든 api와 강의에서 만들어주는 api가 어떤 차이가 있는지를 중점으로 비교 분석해보고자 한다.

이번 강의를 통해 jira, notion, trello와 같은 협업 도구를 활용한 에자일/스크럼 방식의 업무 관리 방법을 배웠습니다.

express-generator와 프로젝트 구조 비교 bin www: 포트번호 등과 같은 웹 서버를 구축하는데 필요한 설정 데이터가 정의되어 있는 파일 => .env파일과 같이 설정 값을 가지고 에러 처리, 기타 추가 설정을 해주는 파일 node_modules:

오늘은 회원가입 api와 관련하여 기존에 작성한 회원가입을 토대로, 패키지 구조를 컨트롤러를 이용하여 분리하고, 비밀번호 암호화까지를 추가적으로 구현한다.

도서API를 통해 전체조회, 개별조회, 카테고리별 조회, 카테고리 조회를 구현할 예정

이번에는 book과 category의 연관관계를 연결하고, join의 사용방법과 신간, 카테고리, 페이징을 설정하는 방법에 대해서 배웠다.

오늘은 좋아요 테이블을 만들고, 책을 조회할때 마다 해당 정보를 보여줄 수 있도록 만들어 주는것을 했다.

이번에는 장바구니 테이블을 만들고 구현하는 것을 했다.

오늘은 orders, orderBooks, delivery 테이블을 만들고 이전과 같이 order에 맞는 로직을 작성하였다.

어제는 order.js파일에서 주문하는 로직을 위해서 여러 sql문을 한번에 사용할려고 했다.그래서 db에 multipleStatements: true를 이용해서 사용하였는데, 이번에는 async/await를 배워 주문들이 차례대로 사용될 수 있도록 하면서...

오늘은 이전에 다 구현하지 못한 주문 로직을 끝낼 수 있었다.

이번에는 기존에 만든 jwt토큰을 이용해서 인증절차를 만들 수 있도록 할 예정이다. jwt 사용해서 user조회하기 req.header."Authorization"을 사용할것이다. 먼저 헤더에 토큰 담는걸 연습한 후에 시도해보자

주문 api의 회원인증을 추가 및 프로젝트 이후에 추가할 것들을 정리했다. 또한 프로젝트를 위한 추가와 수정을 할 예정이다.

화면을 유저에게 보여주기 위해서는 다음과 같은 전체적인 흐름을 따른다. > [데이터 가공] --데이터 처리--> [화면 표현] [유저] 데이터 가공: 변수, 자료형, 함수(ex. flow control, 빌트인 객체) 등으로 데이터를 처리한다. 실행을 위해서는 엔진,

개발자는 컴퓨테에게 무언가를 명령하고, 컴퓨터는 이를 수행한다. 명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서이다. goto:다른 구문에서 시작, 권장하지는 않음 choice: 일부

자바스크립트부터 배우게 되면 스크립트 언어이기에 일반적인 프로그래밍 언어와 약간 다르다.컴파일 기반 언어를 이해해야 하는 이유는 모든 프로그래밍 언어는 기본적인 동작 원리가 거의 같기 때문이다.

연산자 정적인 데이터들을 유기적으로 행동하게 하여 새로운 가치를 창출해 내는것, 예를 들어 학생들 과목당 성적 데이터는 그 자체로 의미가 없지만, 총점 및 평균을 산출해내어 데이터화 하면 그 의미가 있다. 연산자의 종류 산술 연산자 사칙연산이 기본인 연산자이다.

함수 포인터 구조체 공용체, enum 동적 메모리 할당 객체 지향 프로그래밍 방식 추상화 캡슐화 클래스의 기본 생성자 상속성 오버로딩 오버라이딩 인터페이스 람다

타입스크립트는 자바스크립트 + 타입체크 라고 생각하면 된다. 타입스크립트 환경에 자바스크립트를 코딩하면 동작한다. => 타입스크립트는 런타임에 가기 전에 자바스크립트로 컴파일을 한번 한다. 자바스크립트 환경에서는 타입스크립트를 코딩하면 동작하지 않는다.

getter와 setter

리액트란? react.js는 자바스크립트 라이브러리의 하나임 사용자 인터페이스를 만들기 위해 페이스북에서 개발 싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 가능 2011년 페이스북의 뉴스피드에 처음 적용, 2012년 인스타그램닷컴에 적용 2013년 발표, 오픈

클래스형 컴포넌트 초기에 사용하던 컴포넌트 형태로 Component 클래스를 상속하여 컴포넌트를 작성한다. 이 방식은 상태 및 라이프사이클 관리가 내장되어 있으며, 컴포넌트 내부의 메서드를 통해 기능을 구현한다. 단점으로는 코드가 장황해지고 재사용성이 떨어진다.

만들고자 하는 앱 살펴보기 게시판 버튼 각 게시판마다 리스트가 있음 리스트 요소는 드래그 앤 드롭으로 이동 가능 게시판 삭제 게시판 활동 로고 표시 프로젝트 초기 설정 및 폴더 구조 or 앱이 생성된 후, 의존성 설치를 위해 다음 명령어를 실행합니다: 이로써 p

이전에 만들어둔 파일 구조를 기반으로 다음의 컴포넌트들을 만들었다. 컴포넌트 구성 BoardList SideForm: 보드를 추가할 때 사용하는 입력 폼 ListContainer List: 각 리스트를 개별적으로 나타내는 컴포넌트 Task: 리스트 내 작업 항목을 나타내는 컴포넌트 ActionButton: 리스트 또는 작업 추가를 위...

오늘은 모달이랑 로깅 컴포넌트를 따라 만들었다. ModalEdit 컴포넌트 생성 ModalEdit.ts파일을 통해 ui틀을 만들었다. Redux에서 modal을 꺼내와 수정할 task를 가져옴 디스패치로 수정, 삭제, 모달 닫기, 로그추가같은 액션을 log에 기록 그

React Beautiful Dnd(현재는 hello-pangea/dnd) 를 이용한 간단한 앱 만들기

이전에 백엔드로 만들었던 색판매 프로젝트의 프론트를 만들어볼 예정이다. 구현 순서는 다음과 같다. 폴더 구조 pages - 라우트에 대응하는 페이지 컴포넌트(컨테이너) components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트 utils - 유틸리티 hooks - 리액트 훅 model - 모델(타입) api - api 연동을 위한 fetche...

레이아웃은 왜 필요할까? 프로젝트의 기본적인 화면 구조를 잡는다. 반복적으로 들어가야 하는 헤더, 푸터 등을 매 화면마다 제공한다. 상황과 필요에 따라 레이아웃이 변경될 수 있도록 대비한다.

오늘은 3가지 기본 컴포넌트를 만들 예정 Title 컴포넌트 테스트 파일 Button 컴포넌트 테스트 파일 Input 컴포넌트 테스트 파일 이제 진짜로 시작한다 헤더와 푸터 해당 사진을 기준으로 헤더와 푸터를 제작하였다. > 이걸 볼 사람이 있을지는 모르겠는데, 지금 react-icons@5.5.0버...

asdf

비밀번호 초기화 및 로그인과 전역상태 관리 로그인 후 상태관리를 위해서 zustand를 사용함 store/authStore.ts 에서 create로 간단한 전역 스토어 구현 token, getToken(), setToken(), removeToken() 메서드를 구현하여 토큰 관리 > Axios 인터셉터로 인증 헤더, 오류 처리 추가 http.ts파일에...

도서 상세 화면 요구 사항 각 도서 상세 정보를 노출 좋아요 버튼을 클릭시 좋아요 또는 취소 기능 수량을 입력하여 장바구니 담기

장바구니 목록 장바구니 내역 조회 /cart 경로에서, 서버로부터 fetchCart()를 통해 사용자가 담은 모든 아이템을 가져와 렌더링합니다. 수량·가격 합계 표시 각 CartItem 컴포넌트에서 수량을 변경하거나 삭제했을 때, CartSummary 컴포넌트가 전체 합계를 계산해 보여줍니다. 아이템 삭제 deleteCart(cartId) 호출로 특정...

작업 중간 회고 회고를 하는 이유 성장과 학습 문제 해결 유연성과 적응성 퍼포먼스 향상 결론적으로 "더 잘 할려고" 하는 것이다. 주요 학습 주제 타입과 모델 color: Record; [key in HeadingSize]: {} export in

모킹 서버 작성 MSW Mock Service Worker 백엔드가 아직 완전히 준비되지 않았을 때, 프론트가 사용할 수 있는 말 그대로 묵 서버이다. 존재하지 않는 API에 대한 응답을 모킹 실제 서버대신 MSW 핸들러를 등록한다. service worker 에서 요청을 처리 브라우저 네트워크 요청을 가로채고, 미리 정의한 JSON 데이터...

메인화면 리뷰 useState로 댓글 목록과 입력 폼 상태 관리 useEffect 없이 순수 onSubmit 핸들러에서만 상태 업데이트 하기 댓글 최신순 혹은 등록순 정렬 로직 입력 검증 후 다이얼로그(alert) 띄워 UX 보강 신간 & 베스트셀러 map()으로 동적 리스트 렌더링하기 styled-components 로 컴포넌트별 스타일 캡슐화 카드 그리...

과정 제목에 포함된 "풀사이클 개발"이라는 것이 무엇을 뜻하는 것이었을까?(웹 서비스 개발의 관점에서)과목 제목에 포함된 "파이프라인"이 무엇을 뜻하는 것일까?CI/CD란 무엇이고 이것은 왜 필요한 것일까?여기에 이용되는 도구들이 여러 가지 있던데, 각각의 역할이 무엇

쿠버네티스 소개 쿠버네티스(Kubernetes)란? 줄여서 k8s라고 표기하는 것을 자주 보게됨 컨테이너 오케스트레이션 솔류션 다수의 컨테이너들을 관리하면서 자동배포, 배포된 컨테이너의 동작 보증, 부하에 따른 동적 확장 등의 기능을 담당 도커와 잘 어울리는

오픈 소스와 친해지기 오픈소스를 배우기 전에 배워두면 좋을것들을 배워보자 오픈소스란? >누구나 자유롭게 접근하고, 수정하고, 배포할 수 있는 소스코드를 말한다. 쉽게 말해서 집단 지성의 결과물! 넓은 관점에서 보면 위키피디아 같은 온라인 백과사전도 오픈소스라고 볼 수 있다. 오픈소스에 기여를 하면 어떤것들이 좋은가? 좋은 코드에 대해서 배울 수 있다. 협...

MDN 번역 저장소에서 기여 가능MDN 기여 가이드 참고Fork & Clone작업 브랜치 생성 및 체크아웃환경 변수 설정 .env 파일 생성 및 내용 추가:open in your editor 오류 발생시대부분 맥에서 오류가 나는데, command+shift+p눌러서 명

문서 템플릿 제작해보기 >GitHub 문서 템플릿이란? GitHub에서 제공해주는 템플릿 기능 Issue template, Pull Request template 등이 있다. 문서 양식 제작해보기 템플릿 만들기 .github 폴더 만들기 issue_template.md pullrequesttemplate.md test.md config.yml 모던 ...

기여할 프로젝트 찾아보기

실전 오픈소스 프로젝트 기여 방법 for challengers react-icons react-datapicker react-storybook 등을 추천 받았다.

오픈소스 프로젝트 주제 선정 가장 좋은 오픈소스는 개발 과정에 필요성을 해소하는 주제! 정한 주제가 없다면 복잡한 구동과정 없이 결과를 확인할 수 있음 확장서 있는 기능 lodash.js underscore.js immer.js

과목 개요 React 와 Express 를 이용한 통합 프로젝트 수행 지금까지 배운 기술을 활용하여 데이터베이스와 사용자 인터페이스를 포함하는 웹 응용 개발 실제 사용을 염두에 둔 서비스를 개발 및 통합 (빌드, 테스트, 배포) 하는 과정을 자동화 파이프라인으로 구축 웹 개발 프로세스를 개발자 관점에서 이해 소프트웨어 개발자 (프론트엔드, 백엔드) 로서 직...

응용 구조의 설계(1) 응용 구조의 설계(2) 개발 환경과 배포 환경 개발 계획 수립

123