Youtube : 이해하면 인생이 바뀌는 TCP 송/수신 원리 위의 영상을 보시면 TCP의 기본 흐름을 이해하기 훨씬 수월합니다. 위의 영상을 시청하신 후, 다음 글을 보는 것을 추천드립니다. TCP 란 무엇인가? TCP 는 IP 위에서 동작하는 프로토콜 데이터의 전달을 보증 하고 보낸 순서대로 수신할 수 있게 해주는 신뢰성...

개발과 글쓰기의 (with 글또) 요즘 개발 과 글쓰기 는 같은 맥락의 성격을 갖고 있다는 생각을 계속 한다. 좋은 코드를 쓰는 생각의 흐름은, 좋은 글을 쓰는 흐름, 읽기 좋고 이해가 잘되는 글을 쓰는 흐름과 같지 않을까 하는 생각을 갖고 있다. 글쓰기와 개발을 연관짓게 된 계기 요즘 데브코스 최종 프로젝트를 진행하면서, 팀원과 협업을 하고...

Nest.js 에 husky + lint-stage 설정 husky를 사용해보는 이유 개발자들과의 협업 과정에 있어서 설정해서 개발자들이 편해질 수 있는 방법은 가능한 다 시도해보고 싶었다. BE 리드를 맡게 된 이상, 세팅은 나의 영역이라는 마음에 husky도 사용해보게 됐다. 이전 프로젝트와 지금 진행중인 프로젝트에서 FE 리드 분...

CS 기초 - 3 디지털 데이터 통신의 이점 정보의 손실이 적다 통신 잡음에 대하여 강건성이 높다 신호 지연 및 손실에 대한 보완이 가능 자가 오류 정정이 가능한 기법 도입이 가능 매체를 다중화하여 대역폭 활용도를 높일 수 있다. 정보의 암호화가 용이하다 데이터 전송 방식의 분...

CS 기초 - 2 컴퓨터 구조의 설계와 구현 컴퓨터 HW구성 중앙 처리 장치 : CPU 주 기억장치 : Memory (RAM / ROM) 보조 기억장치 : Storage (HDD, SSD) 입출력 장치 : I/O Devices (Keyboard, Mouse, Display) 중앙처리 장치 (CPU) 제어장치 : 명령어를...

CS 기초 - 1 컴퓨터 과학 (기초) 는 왜 공부해야 할까? 컴퓨터 과학이라는 것은 추상화 의 연속 적인 작용이 일어나는 분야 이다. 그래서 탑다운 방식으로 공부를 하게 되면, 코드나 알고리즘 까지는 우리가 공부할 수 있지만, 더 저수준의 지식들에 대해서는 알기 쉽지 않다. 추상화가 많이 된 분야의 지식은 즉각적으로 사용할 수 있는 부분 (...

웹 기반 문서 편집기 프로젝트 - 4 백엔드의 단위 테스트 독립적으로 테스트 할 수 있는 함수. 메서드 들은 모두 테스트 몇개의 모듈이 조합하여 결과를 만들어야 하는 경우가 많음 발생할 수 있는 요청 각각에 대한 테스트 케이스들을 마련하는 것이 합리적 대부분의 요청에 대해서는 데이터베이스 및 쿠키 등 상태를 ...

웹 기반 문서 편집기 프로젝트 - 3 mysql : prmgs, prgms 구조 설계서 소프트웨어의 구조 설계를 기술하고 정의하는 문서 소프트웨어 개발 과정에 있어 가장 중요한 기준 프로젝트 초기 단계에서 필수적으로 산출해야 하는 문서 BE 패키지 구조 (express) ...

웹 기반 문서 편집기 프로젝트 - 2 응용구조 설계 FE React 응용으로 만들어져 UI에 해당 하는 부분을 서비스 BE 로 향하는 API 호출은 JS 실행에 의해서 이루어짐 BE Express 응용으로 만들어져 데이터베이스를 이용한 데이터 모델을 서비스 JWT 를 이용한 사용자 인증을 통해 데이터 접근을 보호 ...

웹 기반 문서 편집기 프로젝트 - 1 React, Express 를 통한 통합 프로젝트 수행 개발환경과 프로덕션 환경의 차이를 염두에 둔 프로그래밍을 중점으로 진행 E2E 테스트 기술스택 FE React.js (v18) Tiptap Library JWT Library ...

오픈소스 기여하기 - 6 npm에 오픈소스 게시하기 (배포하기) npm 회원 가입 해놓기 순서 npm 로그인 npm init type, keyword, license 등 필요한 부분을 사전에 설정 .npmignore 작성 node_modules/ test/ webpa...

오픈소스 기여하기 - 5 오픈소스를 만들 때 중요한 것 README.md 리드미 파일은 오픈소스 세계에 있어서 필수라고 볼 수 있다. README 파일을 통해 해당 오픈소스(프로젝트) 에 관심이 있는 사용자가 정보를 얻을 수 있다. 오픈소스를 통해 사용자 자신이 어떤 부분의 이득을 취할 수 있는지,...

오픈소스 기여하기 - 4 도전적인 오픈소스 기여 도전 할 수 있는 추천 오픈소스 프로젝트 React-Icons React-DatePicker React-Storybook 대중적으로 사용되는 라이브러리를 써보는 것이 좋다! 오픈소스 기여에 가져야 할 마인드 오픈소스 기여는 개발자에게 있어 언제든, 어느때든 생각날 때 찾아...

오픈소스 기여하기 - 3 https://github.com/firstcontributions/first-contributions 오픈소스 기여 방법 Repository Fork 원본 저장소를 가져오는 과정 Local PC 에 해당 Fork 한 Repository Clone 새로운 Branch ...

오픈소스 기여하기 - 2 github 문서 템플릿 github 에서 제공해 주는 템플릿 기능 issue Template, Pull Request Template 등이 있다. 공통된 규칙을 적용하여 운영자 (또는 maintainer) 가 해당 프로젝트의 issue 및 PR을 관리하고 읽기가 편해진다. github 문서 템플릿 만들기 ...

오픈소스 기여하기 - 1 MDN 번역 기여 가이드라인 (KO) 오픈소스 기여의 장점 좋은 코드에 대해 경험할 수 있다. 협업 방식에 대해 배울 수 있다. 포트폴리오가 될 수 있다. 영어 독해실력 향상! 오픈소스 기여 시 가져야할 마인드셋 오픈소스 기여 과정은 마라톤과 같다고 볼 수 있다고 한다. 명확한 목표를 세우는...

웹 개발 파이프 라인 구축 - 5 IaC (Infrastructure as Code) 인프라 스트럭쳐 를 생성 변경 관리 수작업에 의하는 것보다 안정성 일관성 재현 가능성을 향상 시킬 수 있음 프로그래밍과 유사하게 코드 를 이용하여 인프라 리소스를 정의하고 조합하는 형태로 관리 Teraform 과 같은 IaC 도구를 통해 사용 가능...

웹 개발 파이프 라인 구축 - 4 (UAT) 인수 테스트 (UAT : User Acceptance Test) 요구사항대로 기능이 구현되었는지를 확인하는 과정 전체 시스템을 사용자 관점에서 시험하며, 블랙박스 테스트 를 포함 CI/CD 구축을 위해 반드시 필요 UAT 를 자동화 하는 것이 어려운 요인들 ...

웹 개발 파이프 라인 구축 - 3 (Jenkins) Jenkins CI/CD 시나리오 CI (Continuos Interfration : 지속적 통합) 단계 일반적으로 개발자가 소스 코드를 커밋하고 푸시 하는 것으로 시작 응용소프트웨어를 자동으로 빌드 통합 (자동) 테스트를 통하여 배포할 수 ...

웹 개발 파이프 라인 구축 - 2 (k8s) 쿠버네티스란 Kubernetes (A.K.A k8s) 컨테이너 오케스트레이션 솔루션 다수의 컨테이너 관리 자동배포, 배포된 컨테이너의 동작 보증, 부하에 따른 동적 확장 등의 기능 담당 도커와 잘 어울리는 실행 환경 구성 도구 ...

모운게 project : Mock 서버 세팅 프로젝트에서 Mock 서버를 사용하기 위해 postman 이 아닌 msw 를 사용하여 Mock 서버를 구축하기로 했다. (프로젝트는 React+Vite+TS+ SWC) 환경이다. 설치 msw 공식 사이트 설치 스크립트 npm i msw --save...

웹 개발 파이프 라인 구축 - 1 배우는 내용 CI/CD (지속적 통합과 지속적 배포) 컨테이너 가상화 Docker 도커에 대해 아주 다양히… 배포/인도 자동화의 중요성 전통적 인도 프로세스의 한계점 느린 인도 기간 느린 피드백 주기 자동화 미비 핫픽스 위험성 개발...

React 로 하는 동적 UI 개발 - 10 React-Slick Docs 해당 라이브러리는 Swiper 같이 특정 엘리먼트 목록을 슬라이드 형식으로 표현할 수 있게 도와준다. 모바일 대응을 위한 반응형 웹 만들기 모바일 대응을 위한 3요소 viewport 뷰포트 상대값을 가진 레이아웃 ...

React 로 하는 동적 UI 개발 - 9 Mocking 서버 구축 msw 존재하지 않는 API에 대한 응답을 모킹 service worker 에서 요청을 처리 설치 script npm i msw --save-dev MSW 사용해보기 npx init msw public/ --s...

React 로 하는 동적 UI 개발 - 8 생산성 기능 단위 작업 파악을 하면 명확히 어떤 작업을 진행 할지 알 수 있다. 스스로 하나의 기능을 만들어내는데에 대한 루틴? 성 흐름을 만드는 것도 좋은것 같다. 강사님의 기능 개발 흐름 회고를 통한 추가 적용건 alias 적용 중복코드...

React 기반 동적 UI 개발 - 7 navigate 와 Location을 통한 Router간 state 전송 현재 진행중인 프로젝트에서 /cart 에서 주문을 완료 했을 때, /order 화면으로 navigate 전환을 수행하도록 되어 있는데 이때 해당 주문건에 대한 정보를 useState나 다른 방법으로 들고 가는 것 보다 React-R...

React 기반 동적 UI 개발 - 6 BookDetail Page 개발 Router 설정 App.tsx const router = createBrowserRouter([ { path: "/", element: <Layout />, errorElement: ( ...

React 기반 동적 UI 개발 - 5 로그인 flow zustand를 통한 전역 상태 관리 Zustand 설치 npm install zustand authStore 작성 src / store / authStore.ts import { create } from "zustand"; import { devtools, St...

React 기반 동적 UI 개발 - 4 이번 시간에 주로 배운 기술 React-Router (V6) Axios React-hook-form React-Router 사용하기 설치 npm install react-router-dom @types/react-router-dom --save 적용 import React, { use...

React 기반 동적 UI 개발 - 3 간단한 테스트 강의에서 Jest 를 이용한 FE 유닛 테스트 를 진행하였다. 테스트 방법 컴포넌트 이름.spec.tsx 테스트 파일 생성 테스트 코드 작성 @testing-library/react 에서 render, screen import 실제 수행 코드와 ...

React 기반 동적 UI 개발 - 2 레이아웃은 왜 필요할까 프로젝트의 기본적인 화면 구조를 잡기 위해 반복적으로 들어가야 하는 Header, Footer 를 매 화면마다 제공 상황과 필요에 따라 레이아웃이 변경될 수 있도록 대비 가능 스타일 적용하기 글로벌 스타일을 왜 필요할까 프로젝트에 일관된 스타일링을 적용 “u...

React 기반 동적 UI 개발 - 1 React 앱(프로젝트) 생성 React 프로젝트 생성 방식에는 2가지가 존재 CRA npx create-react-app 프로젝트이름 --template typescript webpack node.js express Server...

Effic 개발 9일 차 참고 swiper React 사용 공식문서 : https://swiperjs.com/react#usage 블로그 : https://xionwcfm.tistory.com/331 할 일 MyTodo 구현 컴포넌트 작성 zustand→ t...

오픈소스 생태계 - 4 오픈소스 활동을 통해 발전시킬수 있는 부분 협업 능력 : 코드 소통, 이슈 토론 프로젝트 문해력 : 기획, 설계, 구현, 테스트, 리팩토링 개발문화 속에서의 성장 코드에 한정되지 않은 기여 활동으로 인한 기타 스킬 능력 up! 오픈소스 저작자가 되기 위한 최소 체크 리스트 오픈소스의 저작자가 되기위한 자...

Effic 개발 8일 차 개발 내용 Home 페이지 작성 할 일 (Todo) card 컴포넌트 작성 그리드를 이용한 렌더링 레이아웃 오늘은 프로젝트 Home 부분 개발을 하는데 시간을 전부 할애 했다.. 개발을 하면 할 수록, 그저 감자가 된 느낌이다. 심지어 반응형도 입히지 못해서, 화...

오픈소스 생태계 - 3 오픈소스에 라이선스 제시하기 딱히 고려할 것이 없는 오픈소스의 경우 MIT 라이센스 기업이 사용하기를 원한다면 웹 관련 Apache 오픈소스 커뮤니티, 프로젝트 구성원, 컨트리뷰터 등등 히스토리 까지 모두 공개 GNU ...

Effic 개발 일지 : 7일차 할 일 zustand redux 개발자 도구 설정 zustand store에 immer 적용하여 state 업데이트 zustand 에서 TS를 이용해 redux-devtools를 이용하는 방법 zustand에서는 크롬 확장 중 하나인 redux-devtools를 이용해 redux와같이 크롬 개발자 도...

오픈소스 생태계 - 2 오픈소스의 구성원 저작자 : 프로젝트 제작 조직, 개 사용자 : 오픈소스 프로젝트르 사용하는 사람 Maintainer 프로젝트를 관리 하는 사람 (대빵은 아님) 프로젝트를 관리하는 컨트리뷰터 컨트리뷰터 오픈소스 프로젝트에 기여하는 활동을 하는 모...

오픈소스 생태계 - 1 오픈소스 문서의 구조 오픈소스 구조에 정답은 딱히 없다. 기본 문서 ⭐ LICENSE.md 오픈소스 라이센스 전문 명시 문서 README.md 프로젝트 코드의 목적, 사용방법, 설명문서 COPYRIGHT Contribute ...

오픈소스, 개발 문화 1 참여형 지식 공유 플랫폼 StackOverFlow Github 오픈소스 오픈소스란 공개 되어 있는 소스코드 누구나 특별한 제한 없이 공개 되어 있는 소스코드 검사(+리뷰), 수정 등 개입할 수 있는 소스 코드 오픈소스는 일부 유료인 것도 있으며 대부분이...

Effic 개발 6 일 차 변경사항 프로젝트 명 변경 : Efficieneer ⇒ Effic 스타일 라이브러리 변경 : Tailwind ⇒ vanilla-extract 스타일 라이브러리 변경 건 기존에 Tailwind를 사용했을 때, 처음에 편하기는 진짜 편했는데, className도 너무 길어지고, 무엇보다 css 문법이 좀 더 ...

React 로 만드는 Task Management App 4 React Beautiful Dnd 로 드래그 앤 드랍 개발 Login 기능 구현 Dnd 기능 실습 React-Beautiful-Dnd Github 설치 : npm i react-beautiful-dnd 간단하게 CRA로 프로젝트를 하나 만들어서 실습을 진행 ...

React 로 만드는 Task Management App 3 에러 : Task 삭제, 업데이트 Reducer 작동 불량 처음에 작성했던 Reducer import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { IBoardItem, IList, ITa...

Efficieneer 개발 5일차 Quill.js 와 Mantine-RichTextEditor 비교 Mantine-RichTextEditor Quill.js 하루종일, React Wysiwyg(워지윅) 라이브러리를 찾아보고 직접 구현한 케이스들도 찾아봤다. 실제로 현업을 하게 되면, 이런 라이브러리를 찾는 시간들이 오래걸리기보다는 ...

React 로 만드는 Task Management App 2 Project Github 오늘 중점적으로 집중했던 부분은, 컴포넌트의 작성이나 스타일링이 아니라 Redux-Toolkit 의 원리와 그 사용법에 집중했다. 현재 강의에서는 Redux-Toolkit을 사용하여 상태관리를 진행하는데, 기존 JS로만 다뤄보았던 Redux를 TS...

Efficieneer 개발 4일 차 2024-06-25 (화) 있었던 일 코스를 같이 듣고 있는 팀원들과, 프로젝트 회의를 하면서 팀 프로젝트로 진행할지 개인 프로젝트로 진행할지에 대해 꽤 긴 시간 얘기를 나누었다. 이야기의 전반에서는 팀 프로젝트로 굳혀져서 다른 프로젝트를 진행할 것 같은 생각에 진행하고 있는 이 개인 프로젝트는 잠...

React 로 만드는 Task Management App 1 Trello 같은 웹 사이트를 제작! 프로젝트 생성 CRA 와 Vite중 Vite를 이용하여 프로젝트 생성 npm init vite framework : React variant : Typescript 위의 기술로 프로젝트 생성 생성 후 npm ins...

검색 알고리즘 선형 검색 이진 검색 KMP 문자열 검색 알고리즘 선형 검색 가장 간단한 검색 방법 모든 요소를 순회하면서 내가 원하는 값인지 확인하는 것 이 방법도 데이터 분류 상태에 따라 나쁜 방법은 아니다. JS의 선형 검색 내장 함수 indexOf, find, includes, findIndex 간단한...

Efficieneer 개발일지 : 3 일차 먼저 느낀점! Main 페이지의 레이아웃을 구성하다가, Flex와 Grid의 사용해야할 시점에 대해서 아주 조금 깨달음이 왔다. Flex는 확실히 컴포넌트 단위에서는 강력한 스타일링 기능이다. 그러나, 페이지 하나의 레이아웃을 구성하기에는 축 1개에 대한 방향성만 설정할 수 있는 것이 꽤나 제약이라고 ...

React로 ToDoList 만들어보기 2 React의 Props React에서 Props는 부모 컴포넌트에서 자식 컴포넌트로의 값을 전달하기 위한 객체이다. 함수 또한 일급 객체이므로 값 으로써 props 통신에 포함 된다. props는 함수형 컴포넌트에서는 인수의 형태, 클래스형 컴포넌트에서는 객체의 속성의 형태로 호출 된다. ...

React로 ToDoList 만들어보기 1 클래스형 컴포넌트와 함수형 컴포넌트 클래스형 컴포넌트 리액트 초기에 사용했던 컴포넌트방식 생명주기 메서드가 있어 다양한 단계에서의 렌더링 조작이 가능하다. 간단한 클래스 컴포넌트 작성 // ClassComponent.tsx import { Compone...

React 알아보기 1 React 공식 문서 (구) : https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html React 공식 문서 (신) : https://ko.react.dev/reference/react React JS SPA 라이브러리 페이스북 개발 React...

Efficieneer 개발 2 일차 2024-06-18 (화) Card Item 컴포넌트 개발 Home 화면에 각 서비스별 링크를 보여주기 위한 CardItem 컴포넌트를 작성하였다. Home.tsx import CardItem from "../components/CardItem"; typ...

TypeScript 알아보기 2 리터럴 타입 지정 특정 값 만을 허용하는 타입을 지정하는 방식 type Gender = "male" | "female" let gender : Gender = "male"; 리터럴로 지정한 타입은, 해당 값 과 정확하게 일치해야 한다. /...

Efficieneer 개발 1 일차 2024-06-17 (월) 개발 branch 현재 Home 페이지를 제작중이므로 “feature/메인페이지” 브랜치에서 개발 Root Layout Page 만들기 tailwind.config.js 에 bg 컬러 커스텀 색상 설정 하기 /** @type {import(...

타입스크립트란 (Type Script)? 자바스크립트의 슈퍼셋 언어이다! TS 환경에서 JS는 돌아가지만, JS 환경에서 TS코드는 수행되지 않는다. 자바스크립트에 타입 체크 기능을 포함한 언어이다. 타입 스크립트란 왜 필요한가? JS 코드는 타입이 지정되어 있지 않기 떄문에, 자유도가 높아 코드가 지저분해질 확률이 높다. 코...

24년 6월 10일 ~ 6월 16일 회고록 👍 Keep 개인 프로젝트 기본 환경 세팅 React, TS, Vite, SWC, Tailwind의 라이브러리로 개발 하고자 해당 스택으로 환경설정을 완료했다. Tailwind의 경우 배워본적이 없지만, SSR 프레임워크인 Next.js와의 호환성도 좋다고 들어서 해당...

C언어로 프로그래밍 근간 알아보기 3 함수 포인터 함수명 앞에 * 만 붙여주면 함수 포인터가 선언된다. 함수 포인터도 포인터이므로 주소값을 저장한다. // 자료형 (* 함수 포인터 이름) (인자 목록) int (*func) (int a); #include <stdio.h> int Plus (int a, int b) { ...

C언어로 프로그래밍 근간 알아보기 2 개발을 할 떄, 무작정 키보드로 손이 가는 개발 보다는, 조금 더 고민해보고, 코드 흐름을 생각하며 차근차근 개발하는 습관을 들이는 것은 생각보다 더 중요하다. 연산자 정적인 데이터들을 유기적으로 행동하게 하여 새로운가치를 창출해 내는것 기능 연산자 ...

C언어로 프로그래밍 근간 알아보기1 개발자는 동작 원리를 이해 해야 한다! 배울 내용 프로그래밍 기본 원리 겍체지향 철학의 이해 타입스크립트 기초 타입스크립트 기반의 리액트 컴파일 언어를 이해해야 하는 이유 모든 프로그래밍 언어의 동작원리는 같다. JS와 같은 ...

JS 알아보기 2 Flow control(제어흐름)의 이해 flow control 예시 하나의 버튼을 두고 해당 버튼이 동작하는 flow를 구상해보았을 때의 flow는 버튼이 클린된다. 버튼 옆의 check box가 활성화(checked) 되어 있다면, 버튼이 빨간색이 되고, ...

Javascript 입문 실습환경 Setting 강의에서는 MAC 기준으로 세팅을 설명 현재 나는 WIndows 운영 체제를 사용중이므로 운영체제에 맞게 실습환경 세팅 IDE : VSCode 브라우저 : Chrome 브라우저 브라우저의 종류 (제조사) 크롬 엣지 사파리 ...

24년 6월 3일 ~ 6월 9일 회고록 👍 Keep 개인 프로젝트 시작 개인 프로젝트를 6월 8일 시작 했다. FE에 집중한 프로젝트이고, 배포환경은 ServerLess 환경에서 배포하는 것을 염두 해 두고 개발. FE 스택은 Vite, React, SWC, React-Router로 기본 스택이며...

TS + React 프로젝트 만들기 프로젝트 github : https://github.com/ykdman/Study/tree/main/React-TS-practice Vite 시작하기 vite CLI를 이용하여, React + TS + SWC 로 프로젝트를 생성 npm create vite...

TypeScript 맛보기 타입 스크립트를 써야하는 이유 기존 동적언어인 JS에서 타입 명시 구문을 추가하여 개발 시, 컴파일 단계에서 에러 상황을 미리 인지 할 수 있어 개발 단계에서의 예외 처리가 유용하다. 즉, 런타임 에러 를 방지하기 좋다. 공통적으로 TS를 사용해야 하는 이유는 다음과 같다. 버그 예방 향상된 개발자 경험과...

Bookkio 프로젝트 11일차 Github : https://github.com/ykdman/Programmers-DevCourse/tree/main/bookkio 프로젝트를 마무리 하며… 프로젝트를 어느정도 마무리 한 후… 현재 데브코스에서 진행했던 Bookkio (도서 구매 서비스) 의 백엔드 API 기능을 전부 실행은 되도록 마...

Bookkio 프로젝트 10일차 인증이 필요한 API 에 auth 추가 하기 도서 조회 API 수정 auth 를 적용시켜, 사용자 로그인 상태(token이 존재) 일 때는 조회하는 도서의 좋아요 수를 표시하고, 아닐 때는 좋아요 수를 제외한 정보만을 표출하도록 수정하였다. jwt인증을 수행하는 auth.js 파일에서 /b...

Bookkio 프로젝트 9일차 JWT 를 통해 구분을 해야하는 기능 로그인 좋아요 추가 좋아요 취소 장바구니 auth 유틸리티 함수 작성 (강의를 따라치지 않고, 개별적으로 생각해서 진행하였습니다) 이번 강의 과정에는 JWT 인증을 통해 기능을 사용할 수 있게 하는 부분에 대해 진행 되었는데, JWT인증이 필요한 기능이 몇...

2024-05-27 ~ 2024-06-02 회고록 공부한 내용 백엔드 데브코스 강의를 통해 DB 연결 된 백엔드 API 구성 (Node.js) express : mysql2 dbformat, 다중 쿼리 작업 프론트엔드 React-Router React-Query (현 TanstackQuery) JS 비동기 프로그...

Bookkio 프로젝트 8일차 주문 목록 조회, 주문 목록 개별 조회 API 구현 MySQL 테이블 데이터를 삭제하는 방법 1) DELETE DELETE FROM 테이블명 WHERE 삭제조건 조건 절이 존재하면 조건에 해당하는 행만 삭제 조건이 없으면 모든 행이 삭제된다. 모든 행이 삭제 되어도 테이블은 ...

Bookkio 프로젝트 7일차 github 비동기 프로그래밍과 Promise, async/await ykdman.github.io : JS Promise와 async/await 알아보기 오늘은 데브코스에서 JS의 비동기 프로그래밍과 Promise, async/await 사용에 대해 알아보았다. 해당 내용은 TIL 정도로 끝낼게 ...

모든 과정 참고 : JSINFO JS의 Promise와 async/await 알아보기 Promise는 시간이 소비에 상관없이 약속 한 결과를 만들어내는 문법이다. 기본적인 Promise 형태 const promise = new Promise(function(resolve, reject) { // executor }) ...

Bookkio 프로젝트 6일차 주문(결제) API 만들기 결제 하기 API API Method : POST URI : /orders HTTP Status Code : 200 Request Body { "items": [ { "cartItemId": "장바구니 도서 ID...

Bookkio 프로젝트 5일차 장바구니 기능 구현 cartItems Table 만들기 유저가 장바구니에 아이템을 추가하면, 해당 유저의 DB상 ID와 해당 도서의 ID, 추가된 갯수 (Count) 해당 장바구니 항목의 ID 정보를 저장하는 Table을 생성한다. cartItems Table Column 설정 ...

Bookkio 프로젝트 4일차 👍좋아요 API 구하기 likes 테이블을 위와 같이 생성하여, user_id는 users.id를 FK로 book_id는 books.id를 FK 설정하여준다. likes 테이블의 각 컬럼은 각각 users, books 의 id에 대해 N 개를 받아들이므로 N : 1 의관계가 성립한다. 좋아요 API 설계 ...

2024-05-20 ~ 2024-05-26 회고록 공부한 내용 백엔드 MySQL 워크 벤치를 통한 Table 및 Schema 생성, 수정, 삭제 관리 API 설계에 대한 방법론 URI 설정 및, 요청 Method 설정 방식에 대한 고민 프론트엔드 React-Router를 통한 연계된 페이지 만...

출처 : 본 실습은 Udemy : React 2024 완벽가이드 과정을 수강하며 클론 하였습니다. 코드 Github : Study/react-routing-practice at main · ykdman/Study 현재 리액트 라우터를 사용하여 간단히 페이지 라우팅과, params 사용, NavLink를 이용한 페이지 전환을 적용한 상태 ...

Bookkio 프로젝트 3일차 books Table에 FK 설정하기 현재 books 테이블은 category_id 의 값이 category 테이블의 id 값을 참조해야 하는데, 해당 설정이 되어 있지 않다. MySql Workbench에서 books 테이블의 category_id를 category테이블의 id 값으로 FK 설정을 진행 한다. ...

Bookkio 도서 관련 API 작업 books 테이블 생성 mysql workbench 내 bookkio DB에 books 테이블 생성 전체 도서 조회 API 스크립트 books.controller.js let sqlQuery = `SELECT * FROM books`; d...

Bookkio Project - 2일차 전체 DB 연결 코드 model \ mysql.js const dotenv = require("dotenv"); dotenv.config(); const mysql = require("mysql2"); const connection = mysql.createCon...

프로젝트 깃헙 bookio Github 도서 구매 서비스 API 설계 및 서버 사이드 스크립트 작성 회원가입, 장바구니, 주문에 대한 기본 API 명세를 작성하여, 해당 API를 기반으로 서버를 구성한다. 회원 가입 API 회원 가입 Method : POST URI : /join HTTP Status Code ...

fantom 프로젝트 구성 언어 : JS (추후 리팩토링 필요시 TS로 전환 예정) 라이브러리 React TailwindCSS 프로젝트 설명 우선 fantom 사이트의 목적은 팬이 자신이 좋아하는 아티스트나 연예인의 아카이브를 생성하여 그곳에 사진이나 TMI 를 posting 할 수 있는 ...

좋아요 API 및 DB ERD 설계 기존 좋아요 API는 좋아요 추가시 PUT, 취소 시 PUT으로 진행했었는데, 이번 강의에서는 좋아요 생성을 POST, 취소는 DELETE로 즉, 좋아요 테이블에서, 좋아요 행위에 대한 행을 추가 또는 삭제함으로써 그것을 관리하는 방식으로 전환했다. 이 방법이 기존의 메서드를 사용한 API 보다 낫다고 생각되...

재귀 함수란 자기 자신을 호출하는 함수를 말한다. 재귀 함수의 필수요건 종료 조건 (라인을 끝내는 지점) 다른 입력값 JS 에서 함수를 호출할때 발생하는 일 JS는 call Stack이라는 구조 안에서 함수가 실행 된다. call Stack은 이름 그대로 stack 자료구조를 사용하고...

공부한 내용 프론트엔드 React-Router react-router-dom Route RouteProvider <Link /> <NavLink /> createBrowserRouter ...

프로젝트 : https://github.com/ykdman/fantom API 설계 해보기 데브코스 강의에서는 도서관 웹 서비스를 만드는 과정을 진행 중인데, 해당 프로젝트에 데브코스만의 저작권도 걸려있고, 그동안 강의같은것을 들을 때, 그대로 따라했던것들이 조금 아쉬운 면도 있어서, 내가 생각한 자체적인 서비스를 지금까지 강의를 들으면서 응용하...

npm cookie-parser npm : cookie-parser Request로 전달되는 cookie를 parsing할 수 있게 하는 라이브러리 서버는 기본적으로 응답에 쿠키를 동봉하여 응답한다. 클라이언트 사이드인 브라우저는 응답받은 쿠키를 가지고 여러 API를 요청하는 등의 요청을 수행 할 수 있다. ...

프로그래머스 데브코스 TIL : 2024-05-14(화) 참고 블로그 및 글 https://velog.io/@dkvlg/Express-js의-next-함수는-무엇일까 https://velog.io/@ddangle/Session세션과-Token토큰의-차이는 Express 의 next() 인증과 인가 인증 서비스에 가입된 사용자...

CSS를 Module로 사용하기 wikidocs : DRF + React, Next 프로젝트 CSS 모듈은 React 에서 컴포넌트의 지역적 범위 스타일을 지정하는 방법 특정 컴포넌트에 대한 로컬한 CSS를 작성할 수 있다. CSS 작업시 발생하는 이름 충돌 및 고유성 문제를 해결할 수 있다. CSS 모듈은 CSS 파일내의 클래스 ...

리액트 라우팅 맛보기 라우팅이란 웹 브라우저의 동작구조를 어느정도 알아야 한다. url 중 도메인을 제외한 하위 url 의 정보를 토대로 컨텐츠를 로드 리액트에서 라우팅을 사용하기 위해서는 특정 라이브러리를 활용해야 한다. 페이지가 변경되면 Client Side의 리액트 코드가 페이지 변환을 핸들링 해야 하며, 표시되는 컨텐츠 들을 fetc...

프로그래머스 데브코스 TIL : 2024-05-13(월) 유효성 검사 Validation express-vaidator 라이브러리 사용 [Getting Started express-validator](https://express-validator.githu...

24년 5월 2주차 회고록 (2024-05-06 ~ 2024-05-12) 💻잘했다고 생각하는 것 1. 데브코스 강의를 완전히 따라하지 않은 것 데브코스 강의를 들으면서 실습을 하게 되는 경우가 있는데, 최근에는 하나의 실습 프로젝트를 계속 진행하는 중이다. 강의에서 강사가 작성하는 코드를 그대로 안쓰고, 조금 변형하여 아예 다른 실습을 진행...

mysql workbench 를 통해 기존에 작성한 fantom 프로젝트를 DB와 연결하여 CRUD 재작성 이번에 동원예비군을 다녀오면서 진도를 많이 놓쳤다… 5/7 ~ 5/9 일 진도가 오늘 (5/10) 진행하는 강의의 구축 단계였는데, 해당 과정을 시간제한으로 인해 주말에 들어야 해서, 필요한 부분만 짧게 보면서 참고하여 DB 생성 및 연동...

오늘 배운 내용 ERD 작성해보기 DB 설계? 해보기 간이 포트폴리오 웹 페이지 구축해보기 오늘은 프로그래머스에서 2개의 개인 과제가 나왔는데, 하나는 개인 포트폴리오 간단하게 만들어보기, 다른 하나는 페이지를 제시 받고, 페이지 기반 DB를 설계해보고 ERD를 작성해보기 DB설계 및 ERD 작성 제시된 페이지는 티몬의 ...

24년 5월 1주차 회고록 (2024-04-29 ~ 2024-05-05) 💻잘했다고 생각하는 것 1. 회고록을 꾸준히 쓰기로 결심한 것 회고록을 씀으로써 나의 일주일을 돌아보는 시간을 가지게 되는 것 같다. 내가 이번 주에 뭘 했지?, 어떤 걸 공부했지? 같은 사소한 생각부터, 이번 주에 내가 깊게 고민했던 것들을 녹여낼 수 있고, 그걸 내...

프로그래머스의 강의를 그대로 작성한 것이 아니고, 스스로 예제자체를 바꾸어 작성한 코드입니다. Server 와 Router 의 역할 Server : Client와 같은 요청 군의 Request 를 받고 응답을 돌려준다. Router : Request의 URL에 따라(요청경로) 에 따라 그에 맞는 응답 경로 (route) 를 정해준다. ...

새로운 프로젝트 만들기 팬카페 컨셉의 사이트 회원은 여러명의 아티스트의 팬이 될 수 있다. https://github.com/ykdman/fantom 기능 회원 로그인 회원 정보 조회 회원 가입 회원 탈퇴 팬 되기 회원이 팬을 맺은 아티스트를 위한 팬 개인의 기록소 만들기 기록소 수정 기록소 삭제...

redux-toolkit 을 이용한 실습 1 source coude git hub : ykdman/Study/react-redux-dive 제공받은 코드에서 다중 Slice를 만들어 보기 Header에 CartButton 컴포넌트를 누르면 Cart 컴포넌트가 보이게 하는 Slice 메인화면에서 상품 의 ‘Add to Ca...

핸들러 Request 가 발생 했을 때, http method와 url 에 따라 호출 되는 함수(기능) 핸들러 안에서 예외처리까지 수행해야 한다. express 로 god 멤버 요청해보기 그룹 god 의 멤버를 조회 할 객체를 만들어 놓고, 해당 객체에 접근하는 api 코드들을 작성한다. 전체 멤버조회 ...

article 전체 조회 : JSON 형식으로 응답 출력하기 이전에 작성하였던 코드를 기반으로 전체 조회 기능을 추가한다. JS 의 Array.object.forEach 를 통해, 새로운 iterator를 반환하는 것이 아닌, 배열의 item 수만큼 callback 을 수행 app.get("/articles", (req, res) =&...

Redux 상태 관리 패키지 Cross-Components 또는 App-Wide State 관리 State 의 종류 Local State 단일 컴포넌트에서 사용되는 State Cross-Component State 다수의 컴포넌트에 영향을 미치는 State ...

Postman Download Postman Postman API Agent 를 통해 API 테스트를 수행할 수 있다. 실제 API 사용 테스트를 정확히 수행할 수 있다. http Method, 및 메세지 에 대해 이해가 필요하다. Postman 으로 내가 작성한 API 테스트 해보기 Express로 서버사이드 코드 작...

24년 4월 4주차 회고록 (2024-04-22 ~ 2024-04-28) 💻좋았던 점 1. Modern React DeepDive 스터디 시작 React 관련 서적 스터디를 시작했다. 해당 서적의 내용을 기록하고 요약하며 스터디 목적으로 개설한 Github Organization에 업로드 하는 형식으로 진행 책을 읽은 후에, 다시 ...

map Object Key(Id) Value (Productname) 1 “Notebook”, 20000, 2 “Cup”, 7000 3 “Chair”, 100000 ...

참고 공식문서 state 로직을 reducer로 작성하기 – React Reduce useState의 이벤트 핸들러 함수들이 복잡해 질 때 사용하면좋다. 컴포넌트의 state 로직을 통합할 수 있는 장점이 있다. state 사용법에 대한 기초지식이 필요하다. reducer 를 사용하는 방법 state를 사용하고 있다면, act...

참고 공식문서 Context를 사용해 데이터를 깊게 전달하기 – React Context 란 prop drilling 을 방지하기 좋은 방법이다. context 로 제공되는 provider 컴포넌트 형식으로 자식 태그들을 감싸면, context 의 정보 (데이터) 에 접근 및 사용이 가능하다. 깊이가 얼마나 됐든, context.pro...

JS 숫자형 변환 parseInt 를 사용하여 문자열을 숫자형으로 변환 할 수 있다. 문자열 변수나 표현식 앞에 + 를 붙여도 숫자형 변환이 가능하다. JS 는 문자와 숫자 비교시에 타입을 변환하여 서로 비교가 되게 한다. ‘10’ == 10 ⇒ true 동등 비교 연산자 (==) 는 비교 값들의 타입을 변...

Express.js Express - Node.js 웹 애플리케이션 프레임워크 Node.js 기반의 웹 개발 프레임워크 Express.js 설치 새로운 프로젝트 생성 프로젝트 내부에서 npm init 으로 package.json 파일 생성 npm i express 명령어로 프로젝트에서 Express.js 설치 Hel...

모든 자료 출처 : O’REILLY - HTTP 완벽 가이드 HTTP 메시지 http 메시지는 무언가를 담아 보내는 소포 와 같은 역할을 한다. 메시지는 다운스트림 으로 흐른다. 클라이언트 -> (요청) 서버 flowchart TD A[클라이언트] --> B; B[프록시1] --> C; ...

HTTP method 생성 : POST 조회 : GET 수정 : PUT , PATCH PUT : 덮어쓰기 (값 존재 유무 상관없이) PATCH : 부분수정 삭제 : DELETE Javascript 작동 원리 Javascript 구성 요소 Javascript 엔진 ...

백엔드 기초 백엔드 구조 정적 페이지 화면의 내용 과 데이터 같은 부분이 변동이 없는 페이지 보통 웹서버 에서 컨트롤 동적 페이지 데이터 처리, 연산을 통해 화면의 내용 및 데이터가 변하는 페이지 보통 웹 어플리케이션 서버에서 컨트롤 API ...

이 과정을 위해 WSL2 를 설치하여 Linux CLI 환경에서 Docker 및 Maria DB를 사용하였다. 리눅스 짱 데이터베이스 (DB) 데이터를 효율적을 관리 하기 위한 데이터 집합체 데이터의 중복을 막고, 효율적이고 빠른 데이터 연산을 가능케 한다. 데이터는 데이터베이스 관리 시스템(DBMS) 에 의해 관리 된다. 데이...

빈도수 세기 패턴 Object 또는 Set을 사용하여 특정 문자열, 배열의 값 또는 값의 빈도를 수집해서 푸는 패턴 이 패턴은 때로, 중첩 루프 또는 O(N^2) 의 배열 / 연산 을 우회할 수 있다. 문제1 same 이라는 함수를 작성해라 이 함수는 배열 2개를 인자로 받는다. 1번째 배열의 요소의 제곱이 2번째 배열의 ...

백엔드의 구조 웹 서버 역할 정적 페이지에 대한 대응 동적 페이지에 대한 처리는 웹 어플리케이션 서버 에 전달 정적 페이지 화면의 내용 / 데이터 등의 변화가 없는 페이지 동적 페이지 사용자 상호작용, 데이터 처리 등으로 인한 화면의 내용 / 데이터가 변하는 페이지 웹 ...

인라인 CSS <h1 style="color: red">Login</h1> 스타일을 지정하는 방법 중 하나 태그 안에 style 속성을 추가 후, 해당 속성안에서 CSS 속성을 설정 한다. <!-- Login.html --> <!DOCTYPE html> <html> <he...

슬라이딩 윈도우 패턴 배열이나 문자열과 같은 일련의 데이터를 입력하거나 특정 방식으로 연속적인 해당 데이터의 하위 집합을 사용하여 일련의 조건을 검사하고, 그에 따른 Process를 진행하는 패턴 예시 문제 maxSubArraysum 함수를 작성하라 인수로 array (int) 와 n (int) 를 받는다. array 안애서 ...

다중 포인터 패턴 (투 포인터) 선형 자료구조에서 주로 사용된다. (배열, 연결 리스트) 인덱스나 위치에 해당하는 포인터나 값을 만든 다음 , 특정 조건에 따라 중간 지점에서부터 시작, 끝, 양쪽 지점을 향해 이동시키는 것이다. 기본 반복을 사용하면 (이중 루프) O(N^2) 의 시간복잡도를 나타낸다. 올바른 탐색 패턴을 사용하면 ...

시작 이제 JS로 알고리즘 및 자료구조 공부를 시작한다.(2024-04-16) 하필 왜 JS 냐? 라고 물어본다면… 내가 JS를 좋아하기도 하고, 개인적으로 JS를 제일 대단한 언어중 하나라고 생각하기도 하고, 무엇보단 나는 프론트엔드에 관심이 있다. (디자인 감각은 없다..) 다른 커뮤니티나 개발자 분들은 정적언어로 공부하거나 취준생이면 Python...

인터넷 (Internet) 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다. 💡 “우리는 모두 연결되어있다.” 웹 (Web) 월드 와이드 웹 (www) 인터넷에 연결된 컴퓨터를 통해서 사람들이 정보를 공유할 수 있는 공간 웹의 탄생 배경 1980년대에 스위스의 유럽 입자 물리 연구소 내에서, 연구원들 ...

출처 : indevlab.com Agile이란? Agile은 소프트웨어 개발 프로젝트에 대한 개발 방법론이다. (현재는 소프트웨어에 국한되지 않음) Agile이 가장 크게 중점은 두는 것은 User 즉, 사용자의 요청사항에 대한 기능 구현 이다. 기본적으로 Sprint 라고하는 짧은 주기를 가지면서 반복된 Sprint 를 수행하여 목표 값을 빠...

현재 구상도 Focus 타이머 시작 타이머 진행 (Pause 분기) Focus 타이머 끝 Rest 타이머 대기 상태 Rest 타이머 시작 타이머 진행 (Pause 분기) 타이머 끝 다시 Focus 타이머 준비 위의 Flow 가 돌아가게끔 개발을 하고자 간단하게 도식화 해보았다. 시간 설정은 추후 구상하여 ...

Git 브랜치 이름 규칙 예시 develope Branch 를 만들어서 기능 개발 착수 ? 기능 개발 : Fearute/Login, feature/select-product … 출시 준비 : Release-1.0.1, release-1.0.5, RB-1.0.5 긴급 수정 : hotfix-1.2.1 병렬 개발 및 원할한 PR을 위해...

💻 Today I Learned git github 사용법 branch merge PR (Pull Request) github에서 새로운 Repository 만들기 github에 가입부터한다 (나는 원래 있다!) ‘New’ 로 표시된 버튼을 눌러 New Repository 생성 페이지로 이동 새로 생성...

📚목차 📚목차 📖오늘의 주제 URL URL 의 기본적인 구조 URL이 등장하기 전 URL의 자세한 문법 URL 의 속성들 스킴 (Scheme) 호스트와 포트 사용자이름과 비밀번호 경로 (Path) 파라미터 (Parame...

목차 목차 Git 기본 CLI \& GUI git 기본 명령어 git history Extension git 명령어 사용해보기 💻회고 Git 기본 Git은 분산식 버전관리시스템 (VCS) Git 은 로컬 시스템이다. (설치해서 사용) 원격으로 중앙에서 프로젝트를 백업해두고, 버전관리 및 협업을 가능하...

목차 시작하며 HTTP 란 http 통신의 대표적인 예 리소스란? 미디어 타입 URI URL Method 상태 코드 (Status) 요청/응답 메세지 웹의 구성요소 Proxy (프록시) 캐시 (Cache) 게이...

💻 Today I Learned 간단 요약 💻 Today I Learned 1. 프로젝트 2. 버전관리 3. README (리드미) 1. 프로젝트 프로젝트 란? 하나의 프로그램 및 시스템을 만들기 ...

블로그 생성 과정 Ruby 설치 (3.1.x - x86 버전) git bash 를 이용하여 bundle 및 jekyll 설치 설치 $ gem install jekyll $ gem install bundle 버전 확인 (설치 확인) $ jekyll -v $ bundle -v 블로그 테마 Chirp...

블로그 첫 게시글 시도하지 않으면, 얻는 것도 없다. 처음으로 Github를 이용한 블로그를 개설 하였다. 이제 개발자가 되기 위한 공부를 진행하면서, 취업 또는 창업까지도 준비할것이다. 이 블로그에는 개발에 대한 기술, 트러블 슈팅, 새로운 지식, 공부한내용 을 주로 적고 나의 인생에 대한 얘기도 조금씩 적을 생각이다...