확장자가 .md(mark down)인 텍스트 파일ex) README.md왜 사용하는가 : 가독성의 증대 (읽기 쉽게, 쓰기 쉽게)어디서 쓰는가 : github, velog, notion, TISTORY, Discord 등결과\\개행 : github에서는 공백두칸+엔터n
CLI (command Line Interface) : 셸/터미널에서 글자를 입력해서 컴퓨터에게 명령하는 것GUI (Graphic User Interface) : 그래픽(버튼 아이콘 ui)으로 컴퓨터에게 명령을 내릴 수 있도록 사용자에게 화면을 제공etc)디렉토리 (리
GitHub Repository : GitHub에서 프로젝트를 관리(백업/협업 등)하기 위한 공간계정 생성 후 GitHub 메인화면 좌측상단 부분에서 'Create Repository', 'New' 버튼을 눌러 생성할 수 있다.<생성버튼><생성화면>Repos
git의 branch에 대한 개념과 명명규칙, 전략과 활용방법, 그리고 발생할 수 있는 문제해결에 대한 내용을 공부했습니다.브랜치 (branch) : 하나의 프로젝트에서 '기능개발'이나 '버그수정' 등을 할 때, 각각의 브랜치들을 독립적으로 진행되어, 다른 브렌치에 영
2025-01-24 Git 프로젝트 내 브랜치 생성 후 결과git add 파일명으로 해당파일을 스테이지에 올렸습니다.스테이지 : git이 해당 파일을 다음 커밋실행시 포함시키는 공간입니다. git branch로 현재 존재하는 브랜치를 확인합니다.git branch fe

웹의 기본적인 개념과 구조에 대해 공부하였습니다.HTML 태그를 사용하여 간단한 로그인페이지를 실습하였습니다.웹 (WEB)World Wide Web 줄여서 WWW 또는 3W 라고 하며, 간단히 Web이라고 합니다.인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수
chrome의 V8 엔진으로 만들어진 자바스크립트 런타임(실행환경)입니다.예전에는 자바스크립트는 브라우저에서만 작동했습니다. -> node.js로 여기저기서 사용 가능해진 것. 각 브라우저 별 엔진보충 (node.js)Node.js는 서버도 아니고, 백엔드 프레임 워크
HTTP methodNode.js에 특징모듈과 라이브러리 그리고 프레임워크의 관계인터넷 상에서 클라이언트와 서버는 HTTP 프로토콜로 데이터를 주고 받습니다.HTTP 에서의 Method는 클라이언트가 서버에게 보내는 요청의 종류입니다.자바스크립트를 스크립트 언어 이상으
Node.js의 express 모듈GET으로 데이터 요청하기객체와 jsonexpress : http모듈처럼 node 환경에서 웹 서버의 기능을 제공하는 웹 서버 '프레임워크'입니다.설치 : npm 사이트에서 express 검색시 나오는 'exact match'가 붙어
(Node Package Manager)package : npm에 업로드 된 Node Module 입니다.npm은 자바스크립트용 패키지 매니저 입니다. 모듈들을 모아두는 저장소의 역할을 합니다.Node.js 에서 프로젝트를 진행하면서 필요한 많은 패키지들을 사용, 업데
req.params, req.query자바스크립트 객체와 배열의 비구조화객체 2개 생성 후 api 테스트자바스크립트 네이밍 룰Map자바스크립트 언어는 동적타입 언어입니다.자료형을 지정하지 않아도 변수를 선언할 수 있습니다.실행 중 한 변수에 다른 자료형의 값이 들어갈
1) 커피 객체를 생성2) 조건문으로 파라미터에서 받은값에 일치하는 .json 내용을 출력합니다.해당값의 커피 레시피가 출력됩니다.일치하는 값이 없는 경우 "not a coffee"메시지를 출력합니다.
MapMap과 REST API 설계JavaScript의 함수맵의 특징Map은 '객체'처럼 '키-값'으로 데이터를 저장합니다.Map의 키는 객체와 다양한 자료형이 가능합니다. (객체의 경우 '키'의 자료형으로 문자열'String'만 허용합니다.)속성들의 순서가 정해져있습
MapMap과 REST API 설계JavaScript의 함수맵의 특징Map은 '객체'처럼 '키-값'으로 데이터를 저장합니다.Map의 키는 객체와 다양한 자료형이 가능합니다. (객체의 경우 '키'의 자료형으로 문자열'String'만 허용합니다.)속성들의 순서가 정해져있습
웹 서비스를 구현하는데 필요한 모든 기능을 해당 틀 안에서 제공합니다.웹 애플리케이션 :Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.API : 자유롭게 활용할 수 있는 수
이전까지 app.get 을 사용하여 브라우저에서 url로 요청을 보냈던 방식으로 아래와 같은 app.post코드를 실행하면 응답받는 것도 없고, 에러메시지도 나오지 않습니다.POST는 등록, 생성을 요청하는 기능으로, 예를 들어 회원가입(등록)시 name, id, pw

팀 노션페이지에 작성이지만.팀 노션페이지에 올릴 공간이 보이지 않아. 임시로 벨로그에 작성 등록합니다.2025-02-17지금까지 node와 관련하여 http와 express의 기본개념과 차이에 대해 알아보고GET 메소드만을 사용하여 API 설계와 통신을 간단하게 해보며
GET과 POST에 이어서 DELETE와 PUT까지 postman으로 각 메서드의 API설계부터 통신까지 실습해보았습니다.이번 학습에서는 다음과 같은 내용을 알게되었습니다.조회, 추가, 삭제, 수정의 요청시 URL의 차이가 적거나 없더라도, HTTP 메소드로 구별하기에
API 설계 중 로그인을 제외회원가입회원조회회원탈퇴각각의 API 생성 후 postman으로 테스트 하였습니다.GET 비어있는 회원목록 200POST 회원 추가 201DELETE 회원 삭제 200다시 GET 으로 삭제 확인 404
생성 POST /cahnnels수정 PUT /cahnnels/:id개별 삭제 DELETE /channels/:id개별 조회 GET /channels/:id전체 조회 GET /channelsObject.keys() // 문자열의 경우 객체처럼 가능하지만, 숫자의 경우도
코드req.body로 들어온 userId와, password값을 받아 저장하고forEach문으로 user객체에서의 userId가 req.body로 받은 userId와 일치한지 비교하고일치하다면 그 요소(객체)를 loginUser에 저장이후 isExist 함수로 logi
지금까지는 한개의 .js 파일에서 express 서버와 api생성 두 기능을 실행하였지만.각 api파일을 생성하고 모듈화 하여 서버파일에 라우터로 연결하여 작동하는 방법에 대해 학습하였습니다.users.js, channels.js에 각각 회원관리 API와 채널관리 AP
2025-02-21 router사용에 대한 실습을 진행을 하면서express로 서버를 생성하여 api 설계, 모듈화, 라우터별 분리 후 연결 과정을 통해Express만으로 서버의 기능을 대부분 만들어 사용이 가능하다는 것을 알 수 있었습니다.서버기능의 파일에서는 기존과
DBMS 개념PK, FK & 데이터 중복relationshipDataBase Management System데이터베이스를 운영하고 관리하기 위해 사용합니다.데이터를 통합, 구조화 하여 관리함으로서 데이터 중복을 막고, 효율적이고 빠른 데이터 연산이 가능한 데이터 집합체
2025-02-25학습2025-02-25학습2025-02-25학습
MySQL Workbench CMD 창에서의 CLI방식의 기능과 동일하게 DB관리가 가능한 GUI를 제공하는 프로그램 입니다. DML, TCL 등 SQL문 사용가능 합니다. MySQL Workbench를 MySQL서버에 연결하여 사용하기 위해서는 다음과 같은 방법이
유효성 (=타당성) 링크입력받은 데이터가 규칙/조건에 맞는지 확인하는 과정.정의된 항목에 대한 입력을 제한하며, 유효성 검사에 대한 설명과, 오류메시지를 전달하여 정확한 데이터를 유지합니다.if문을 사용하여 유효성을 검사하는 방법은, if문이 길어질 경우 복잡해지며 가
20250228학습 (next(), 쿠키, 세션, JWT)
학습내용 다음 프로젝트인 node.js기반 도서사이트 RESTapi 설계 구현을 위한 학습 진행하였습니다. 블로그 참고 및 Node express, DBMS, API설계 개념 복습. 기타 강의로 mongodb 사용하여, 간단하게 서버생성과 데이터베이스 컬렉션연결 get과 post로 DB에서 데이터 가져오고, 저장하는 실습 진행하였습니다. ejs파일과...
\[7-2] 도서판매 사이트 ERD1\. 회원가입2\. 로그인3\. 비밀번호 초기화(=수정)3-1 이메일이 존재하는지 확인3-2 비밀번호 초기화(수정)전체 도서 조회2\. 개별 도서 조회3\. 신간 도서 조회좋아요 추가좋아요 취소1\. 장바구니 담기2\. 장바구니 조회
협업도구들에 대해 간단하게 알아보기ATLASSIAN 사이트 여기에 설명 잘되어있으니까 참고ATLASSIANTrello기본적인 칸반보드(kanban board) 형식이 중점인 툴스프린트 백로그마다 체크리스트를 사용하여 세부테스크를 관리라벨, 일정, 파일, 설명, 담당자
8-2 도서 판매 사이트 (회원가입, 로그인 API 구현 결과)1) HTTP status code 모듈을 설치하여, 상태코드를 좀 더 직관적인 방식으로 작성2) 라우터 내부에 작성했던 기능들을 별도의 Controller.js로 옮기고 모듈화 한 뒤, 각 라우터에서 모듈
8-1-Express-generator-구조
8-2 http-status-codes 모듈, controller, password
8-3 도서/카테고리 API, picsum
8-4 도서목록 조회, 카테고리, 페이징 sql
8-5 좋아요 API와 서브쿼리 좋아요 API LikeController.js에서 좋아요 추가, 취소(제거)기능을 구현 모듈화하여 likes.js에서 연결하였습니다. likes.js LikeController.js Book API mariaDB로 MySQLwor
9-1 장바구니 테이블, 테이블 제약조건 명명, 장바구니 API※cartItems 테이블에서는 count -> quantity로 작성됨RelationshipREF: cartItems.book_id > books.idREF: cartItems.user_id > users
9-2 주문 DB ERD, API, Bulk INSERT주문을 위한 주문, 주문된 책, 배송 Table을 설계9-1에서 했던것 처럼 9-2에서 주문관련 테이블을 생성하면서, 제약조건의 이름이 중복되지 않도록 약속을 만들어서 진행합니다.ex) fk\_기준테이블명\_참조테
9-3 비동기, Promise, async & await동기 : 동시에 일어나는 것, 요청과 결과가 동시에 일어남. 순서에 따라 작업이 진행되므로, 여러가지 요청을 동시에 처리하지 않음(느린처리).비동기 : 흐름의 순서와 관계없이(이벤트가 완료될 때까지 기다리지않고)
9-4 DROP & DELETE & TRUNCATE테이블을 삭제합니다.테이블 구조 자체를 삭제합니다. (데이터, 제약조건 등 전부)테이블의 데이터를 삭제합니다.테이블명 뒤에 WHERE 로 조건이 존재하면, 해당 조건에 맞는 행만 제거됩니다.테이블명 뒤에 WHERE 로
10-1 faker
자바스크립트는 인터프리터 언어입니다.컴퓨터의 동장사람이 이해할 수 있는 언어를 컴퓨터가 이해할 수 있는 기계어로 번역해야합니다.컴파일러 언어\-코드작성 > Pre-processing > 기계어로 변환 > processing > 실행인터프리터 언어\-코드작성 > Proc
10-4 syntax, error, object, data, collection, class, this
10-5 변수와 상수 자료형 (C)프로그램을 만드는 과정프로그래밍 개발의 3단계1\. 구상2\. 설계3\. 구현프로그래밍 언어란언어란 사람과 사람간의 통신 수단컴퓨터 언어란 사람과 컴퓨터 간의 통신 수단프로그래밍 언어의 종류저급 언어(기계 중심)e.g. 기게어, 어셈블
11-1 기본문법 2 (연산자, 분기문(조건문), 반복문, 배열, 포인터, 등정적인 데이터들을 유기적으로 행동하게 하여 새로운 가치를 창출해 내는 것.e.g. 학생들 과목당 성적 데이터는 그 자체로의 의미가 없지만, 총점 및 평균을 데이터화 해야 그 의미가 있다.연산자
함수명 앞에 \*를 붙여주면 함수 포인터가 선언됩니다.함수 포인터도 포인터이므로 주소값을 저장합니다.직접 함수를 호출하면 되는데 왜 함수 포인터를 사용하나함수 포인터를 사용하는 이유메모리의 크기 및 위치가 결정되는 시점은 컴파일 타임 또는 런타임 시점.컴파일 타임 시점
11-3 타입스크립트 타입스크립트 TypeScript 자바스크립트의 단점(오류(컴파일단계에서 타입검사가 없어서, 대부분 실행중(런타임) 오류가 발생함), 싱글스레드 동작, 어지러움(프로젝트의 규모가 커질 수록 관리의 어려움))을 보완하기 위해 나온 언어. // Microsoft 에서 개발 자바스크립트 기반보다 버그를 줄일 수 있고, 유지보수가 용이합니다....
타입스크립트에서 타입을 리터럴 형식으로 생성하면, 정해진 값만을 가질 수 있습니다.cf. 타입지정 : 타입을 명시해서 해당 타입의 값만 가질 수 있게 제한하는 것.리터럴 타입특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 한다.문자열 리터럴 타입숫자 리터럴 타
React (웹 프레임워크) 공식페이지React.js는 JS 라이브러리 중 하나페이스북에서 사용자 인터페이스를 만들기 위해 조던 워크가 개발싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 가능초기 렌더링 (화면)가상 DOM 변경재조정실제 DOM 업데이트 (변경된
12-2 리액트 component, state / TodoList.tsx리액트에서 기능을 추가, 확장할 때마다 하나의 파일에서만 작성 관리하게 되면, 모듈화도 안되고, 가독성도 떨어지면서 유지보수의 난이도가 올라가게됩니다.다른 프로그램언에서도 함수를 사용하거나, 별도의

12-4 Redux|패키지|각 패키지의 기능ES7+ React/Redux/React-Native snippetsReact파일의 기본구조를 쉽고 빠르게 생성해주는 확장프로그램 (html에서 !tab하는 것처럼 편함)|단축키워드|default로 내보내는 경우 이름 없이 바
12-3 props
12-5
13-1 Trello project컴포넌트나 스타일을 불러 올 때 자동으로 상단에 자동으로 추가가 안되거나, 자동완성 추천기능이 안될 때VSC > Ctrl + shift + p > setting json 으로 들어간뒤 아래에 다음 코드를 추가해 주면 해결
13-2 DnD, Log in/out What I Learn Drang n Drop 기능 react-beautiful-dnd 라이브러리를 사용하여 지난번 만든 trello 게시판에 드래그 앤 드랍 기능을 추가하는 방법에 대해 학습. > 해당 라이브러리는 리액트
공통HMR (Hot Module Replacement) : 개발 시 코드변경 사항을 새로고침 없이 즉시 반영하면서 런타임에 업데이트 할 수 있는 기능입니다.create-react-appcra 사이트에서 제공하는 방식을 참고하여 터미널에 입력하여 설치합니다.타입스크립트
13-4 Layout, style, theme레이아웃의 필요프로젝트의 기본적인 화면 구조를 잡는다.반복적으로 들어가야 하는 헤더, 푸터 등을 매 화면마다 제공한다. (반복요소 최소화, 일관성 유지)상황(페이지마다의 차이)과 필요(권한 같은)에 따라 레이아웃이 변경될 수
13-5 컴포넌트 테스트 컴포넌트 테스트 단순하더라도 공용으로 사용되는 컴포넌트 일수록 테스트가 중요합니다. 참여자가 늘어나거나, 프로젝트가 확장될수록 props의 양도 늘어나고, 렌더방식이 바뀔수도 있기때문. React Testing Libray CRA 방식으로
14-1 React Router, ModelReact Router각 경로로 요청이 오면 해당 페이지가 렌더되어 보여집니다.작성이 안된 /login으로 접근하는 경우 잘못된 접근이라는 메시지를 주기위해라우터 설정의 "/" 경로에서 errorElement를 작성합니다.해당
14-2 도서 목록 페이지도서(book)의 목록을 fetch 하여 화면에 렌더페이지네이션을 구현검색 결과가 없을 때, 결과 없음 화면 노출카테고리 및 신간 필터 기능을 제공목록의 view는 그리드 형태, 목록 형태로 변경 가능도서 목록 페이지 구조Books : 페이지
14-3 상세 페이지각 도서 상세 정보좋아요 버튼과 좋아요/취소 기능수량을 입력하여 장바구니 담기(추가)라우터에서 bookId를 통해 각 도서에 해당하는 상세페이지를 보여줍니다.bookList의 책들 중 클릭한 bookItem의 도서의 상세정보를 보여주려면Link to
14-4 장바구니 목록상세 페이지와 동일하게 레이아웃으로 감싸서 라우트 등록
14-5import alias중복제거useAuthreact query스니펫추가
14-5 스니펫
15-1 모킹 (MSW)
15-2 메인화면과 모바일 대응
15-4 오픈소스와 라이선스누구나 특별한 제한 없이 공개 되어 있는 소스 코드검사(리뷰), 수정 등 개선사항을 (무료로) 마음껏 펼칠 수 있는 소스 코드다른 개발자의 시선에서 아이디어, 버그발견/수정 등으로 코드의 업그레이드를 기대가능ex) Node.js, React,
15-5 오픈소스 2 오픈소스 문서 구조 contribute code of conduct 커뮤니티 건전성 체크리스트 깃허브 이슈 pull request 깃허브 Discussions (토론게시판)
16-1 Contribution저작자 : 오픈 소스 프로젝트를 만든 사람.메인테이너 : 프로젝트의 방향을 알고있고, 직접 설정한 프로젝트를 관리하는 사람(컨트리뷰터). ( 저작자 ⊃ 메인테이너 )사용자 : 오픈 소스 프로젝트를 사용하는 사람.컨트리뷰터 : 오픈 소스 프
16-2 오픈 소스 탐색깃 허브의 좌측 상단 메뉴아이콘을 클릭하면 여러 메뉴가 나오는데 Explore탭을 클릭하여 여러 종류의 오픈 소스 레포지토리들을 확인 할 수 있습니다.Topics(주제별), Trending(트렌딩), Collections(깃 허브가 큐레이션한 모
16-3 오픈 소스 etc어디서 찾나구글 코드인네이버 오픈 소스 처럼 가고싶은 회사의 오픈 소스 구글링코드트리아지(Code Triage)무엇을 보여줄 수 있나협업 능력 : 코드 대화(소통) 가능 // 작성한 코드를 다른사람이 주석없이도 얼마나 해석이 되는가프로젝트 문해
17-1full cycle, CI/CD, pipeline,Docker(도커), Kubernetes(쿠버네티스), Jenkins(젠킨스)전통적 인도 프로세스의 한계점느린 인도 기간개발 요 구사항이 정의된 때로부터 제품 전달이 완료되기까지 긴 시간 소요느린 피드백 주기개발
17-2 쿠버네티스 (개념)Kubernetes 쿠버네티스 링크(ko)마이크로서비스 아키텍처 (Microservice architecture; MSA)응용 시스템 개발 및 구성을 위한 아키텍처 스타일의 하나이에 비교하여 전통적인 방식의 아키텍처를 모놀리식(monolith
17-3 젠킨스(작성중)
17-4 인수테스트프레임 =워크

17-5 IaC 와 테라폼구성 관리 (Configuration Management)구성 (또는 형상; configuration)은 의존성 때문에 코드에 못지 않게 소프트웨어 시스템에 큰 영향을 미침따라서 구성 관리(또는 형상 관리)는 잦은 빌드, 통합, 릴리스로 이루어
18-1 오픈소스 Ⅱ오픈소스란?누구나 자유롭게 접근하고, 수정하고, 배포할 수 있는 소스코드다수가 참여하여 만드는 집단지성의 결과물넓은 관점에서 위키피디아 같은 온라인 백과사전도 오픈소스의 일종오픈소스 기여 시도를 통해 얻는 장점좋은 코드에 대해 학습이 가능협업 방식에
18-3 MDN Web Docs와 Contribution 그리고 IssueMDN (Mozila Developer Network) Web Docs다양한 웹 개발 자료를 담고 있는 개발자 커뮤니티 웹사이트MDN웹 개발 문서와, 기여 방법이 명확하게 나와 있고 쉽다.(단순
18-4 github 문서 템플릿github에서 제공해주는 템플릿 기능issue template, pull request template 등.github 폴더 만들기 (루트경로)해당 디렉토리에 다음과 같은 마크다운 형식의 파일을 생성 (대소문자 상관x)issue_tem
18-5 contributions for beginnerfirst-contributions기여에 대한 설명과 연습을 위한 깃허브 페이지특정목표x 기여난이도(낮음)해당 레포지토리에서 readmd.md 부분에서 언어를 선택가능합니다.제공되는 설명을 따라 기여에 대한 절차를
18-6 contribution practicalfor challengers유지보수나 안정화가 되어있는 프로젝트는, 팔로우업도 힘들고, 참여 가능 여부도 확신할 수 없음.React처럼 자주 사용해봤던 라이브러리의 서드파티 기능 같은 난이도를 권장. // 관심있거나, 사
19-1 PR
19-2 npm과 오픈소스 배포(Node Package Manager) npm자바스크립트 프로그래밍 언어를 위한 패키지 관리자.자바스크립트 런타입 환경 Node.js의 기본 패키지 관리자.// 패키지 등록을 위해서 가입이 되어있어야함.mkdir (폴더 이름) // 폴
19-3 요구사항과 명세서
19-5 웹 파이프라인세부 UI 컴포넌트 설계와 구현
20-1 단위테스트와 컨테이너화테스트코드단위테스트컨테이너화이전에 테스트 코드 관련해서 노션에 정리했던 내용 추가함작성한 코드가 예상대로 동작하는지 자동으로 확인해주는 코드사용방법의 이해배포 전 품질 검증리펙토링시 안정감버그를 조기에 발견팀 개발에서 신뢰성 확보Jest
20-3 AWS 활용, 배포 환경의 설정(Amazon Web Service)아마존에서 제공하는 클라우드 컴퓨팅 서비스 플랫폼.여러 가지 응용의 실현에 필요한 infrastructure를 on-demand 로 서비스장점유연한 이용, 안정적 서비스, 다중화와 스케일링Pay
20-4 코드 커버리지, 빌드 및 패키징인수 테스트
21-2 디지털 정보의 표현
21-3 컴퓨터 구조의 설계
21-4 통신망과 네트워크
21-5 클라우드 컴퓨팅 클라우드 컴퓨팅용어가 처음 등장한 것은 1996년의 논문에서 사용됨. 2000년대 중반 Amazon 이 내부 사용 자원을 이용해 클라우드 사업을 개시하면서부터 널리 사용됨. 메인프레임 (60's ~ 80's) 터미널 이용, 시분할 시스테