데브코스

파일이 바뀌면, 그 프로젝트의 버전도 하나 올라간다고 생각하면 돼.버전 1.0 1.1 1.2 중에서 1.2를 내 컴퓨터에서만 사용하고 싶은데,나머지는 안갖고싶어. 근데 있기는 해야 나중에 문제가 생기거나 그러면 복구를 해야하니까깃허브에 1.0, 1.1 를 올려둬서 형상

git push origin master - 이게 뭘까용 보통 깃허브에서 레포지토리르 새로 만들면, 이렇게 명령어가 뜬다. 하지만 이렇게 명령어를 쳤을 경우 이런 오류를 볼 수 있다. 이런 오류는 왜 뜨는 걸까? git checkout -b main git

기능 개발 : feature/login, feature/selecet-product출시 준비 : release-1.3, release-1.4긴급 수정 : hotfix-1.2.1저번 글에서 작성하지 못했던 것이 있는데, 브랜치를 만드는 법에 대해서는 설명했지만, 브랜치를

메모장! 같은 친구. 이 프로그램이 무엇인지, 어떻게 사용하는건지, 방법이 뭔지 등을 서술해 놓거나 동작법을 기술해 논 글.TXT로도 가능하구나. README.md README.txtMD가 MARKDOWN임 이거 h1, h2 ,h3, h4가 이건 보근 느낌 씩으로안녕

스프린트란?스프린트(Sprint) 는 작은 주기 단위로 빠르게 프로젝트를 점진적으로 개발해 나가는 방법이야. 애자일 방법론의 핵심이지!투명성 (Transparency)모든 업무가 투명하게 공유되어야 해투명한 공유 → 지식 공유 → 정보 획득 → 빠른 스프린트 & 목표

Cascading Style Sheete 의 약자로, HTML을 꾸며주는 언어입니당문서를 통째로 한번에 꾸며주는 것이 아니라, HTML태그를 하나하나 꾸며줍니다.HTML에 CSS를 적용하는 방법은 다음과 같이 3가지가 있습니다.인라인 : HTML태그 안에 같이 작성합니

독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 "(프로그램 내부의 구성 요소 중 하나로) 프로그램을 제어하느 스크립트 역할을 하는 언어"최근 빠르게 발전하는 런타임 환경 덕분에 스크립트 언어만으로도 충분히 프로그래밍이 가능해져, 역할이 확장되고 있습니다.f

웹 서버 : 정적 페이지에 대해 대응합니다. 동적페이지에 대한 처리는 직접 처리하지 않고, 웹 어플리케이션 서버에게 전달합니다.정적 페이지란 : 화면의 내용/데이터 등의 변동이 없는 페이지를 말하고(데이터베이스란 소통도 안해! 그냥 만들어두면 끝!)동적 페이지란 : 데

URL : Uniform Resource Locator= 인터넷 상에서 웹 페이지가 어디있는지 "위치"를 알려주는 주소 입니다.쉽게 말해서, 웹 페이지 주소라고 할 수 있다.그래서 localhost 라는 것이 내 컴퓨터 주소를 나타낸다.pathname : http&#x

DBMS 우리는 데이터베이스를 운영하고 관리하기 위한 DBMS를 통해 데이터베이스를 사용합니다. 그럼 종류는? 운영 회사는 다르지만, 데이터베이스에 연산을 요청하기 위해 사용 되는 주요 명령어는 동일하다! ORACLE 과 MYSQL , MARIADB 정도가 있는

이거 하나 product 테이블 이렇게 해서 하나 만들고 이렇게 테이블 안에 데이터 넣어주면 돼.

웹 서버 : 웹서버는 정적 페이지에 대응 서버 (정적 페이지: 화면의 내용/데이터 등의 변동이 없는 페이지를 말함.백엔드 개발자는 API를 만듭니다.어플리케이션 프로그래밍 인터페이스 API: 라이브러리에 접근하기 위한 규칙들을 정의한 것을 API라고 한다. 서울 교통

위에 부분은 프론트엔드를 말하는 것이고, 아랫부분은 프론트엔드와 백엔드 사이를 말하는거야.헤드에는 이런 정보들이 들어가고 그럼 바디에는 어떤 정보들이 들어갈까?Body에는 1) 전달해줄 데이터/화면2\. 이 데이터 좀 줄래? + "목적"! 이 있어야해! 전체 상품을 보

1\. http://localhost:8888/상품 등록 => http://localhost:8888/post-products 인가? :: (정답은) "POST"(등록이라는 메소드) http://localhost:8888/product2\.

아래의 사진과 같은 문제가 있다고 했을때, 이걸 sql를 이용해서 db를 만들어보자.먼저 각 페이지마다 테이블을 만들고, 그 다음에 페이지 안에 있는 요소들을 하나하나 만들어주면 될 것 같애. \- img TEXT (여기서 이미지는 URL를 넣기때문에 엄청 길어질 수

목적을 영어로는 method!HTTP = 규약 = 정해둔 용어가 있어요."외울 필요는 없어!! 대신 적절한 method를 찾아서 사용해줘!!"\-생성(=등록) : POST\-조회 : GET\-수정 : PUT/PATCH\-삭제 : DELETE//HEAD, OPTIONS,

node.js는 백엔드에만 쓰이는 게 아니에요! 특정 로직은 넘어서서 자바스크립트들을 위한 운동장을 깔아주는 기술이다 라고 한다즉, Node.js는 자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼(운동장)이다.그래서 우리는

모듈? 내가 만든 게 아니라, 선배 개발자들이 미리 만들어둔 코드 덩어리 다른 사람들은 모듈을 라이브러리 라고도 해! 그럼, 선배들이 만들어둔 모듈을 가져다 쓰고 싶으면 어떻게 해야해?? setTimeout() 같은 모듈을 (내장 모듈, 표준모듈)이라고 하고 외부

// 2초 뒤에 second함수를 실행합니다.// 함수의 매개변수로 변수 또는 값을 전달하는 것이 아니라, 함수를 전달하는 것!!딱 한 번만 사용하려는 함수니까 함수이름 없이 익명함수로 사용해도 된다. console.log(${num1} X ${num2} = ${num

요즘에는 node.js로 express를 붙여서 백엔드를 만들고 있다고 함.메소드는 GET이고 URL은 /이거 여러 API만드는 법!!만약 //API : GET + "http://localhost:1234/test"이렇게 만들어주고 싶다 하면!이걸 적어주면 돼

데이터를 하나씩 X => 데이터를 모아모아 덩어리로 보내겠다!!"객체" 라는 뜻이며,우리 세상이 객체로 이루어져 있습니다.'주어 자리에 왔을 때, 만들어지면 그건 다 객체다' - 김송아객체ex) "Node.js를 공부해보자. 라는 책이 있다 치면상품명: Node.js를

어떤 웹사이트의 주소를 나타내고싶을땐, 이렇게 표현하면 되는데, /:nickname이란 패턴? 구조? 같은걸 만들어줘. /: 이거 뒤에는 http://localhost8888 이게 있을거야.하튼 웹 주소 뒤에 붙은 url를 만들어주는건데, 저렇게 res.jso

이 구조 외워놔.

지금 말할 것은 폴더나 파일명, 변수명 등을 네이밍하는 규칙에 대해서 설명하는 것인데, 여러 강의들과 실습을 해보면서 나도 어느정도 익히 알고 내용이지만 그래도 나중에 협업을 위해 도움이 될테니 따로 적어본다.ex. demo-apiex. objexct-api-demo.

실행코드랑, 결과 잘 봐봐.이 map이라는 놈은 키랑 밸류 형식으로 값을 꺼내주네. 아까 배운 json이랑은 달라 ㅇㅋ?이걸 가지고 내가 공부를 한건데, 이거 다시 공부해봐야할 것 같아. 하나하나 코드 따라가면서 해석하면서 읽어봐야할 것 같애

복습한 번 해주고node.js는 자바스크립트를 밖에서 구동시킬 수 있는 플랫폼같은 느낌. 웹 프레임 워크 = 내가 만들고 싶은 웹 서비스를 구현하는 데 필요한 모든 일을 틀 안에서 할 수 있는 것!이제는 읽히지? 아래는 내가 전에 간단하게 한 youtuber.js 이제

데이터를 보내는 방법들인건데, 지금까지는 GET를 사용해서 URL로 데이터를 보냈어.근데 만약에 회원가입을 하기 위해 id,password, name ,email등을 적어서 이 정보들을 사이트에 보낼건데, 어떻게 보낼거야??get처럼 url로 보내면 내 id,passw

url를 적을때는 전체조회를 생각해서, 복수형으로 적어둔 다음에 (예를들어 상품들 보여주거나, 유튜버들 보여주거나 할때)id값을 각각 부여해서 각 상품이나 유튜버들을 보여주는 것이 더 맞아. 그래서 복수형을 보통 많이 사용하고, 전체 조회를 할때는 req는 따로 필요없

for each문도 for문이긴 for문인데, 좀 더 사용하기 편리한 for문이라는 것이구향상된/개선된 for문 정도로 생각해두면 될 듯 해.처음에 for each문이 만들어질때는 배열에 사용할려고 만들어졌다고 하더라고.첫번째는 배열안에 있는 요소 값을 불러와주고, 두

map 함수에 대해서 알아보는 시간과 forEach 함수과의 차이 알아보는 시간

여기서 3번을 잘 봐라. 이제 값을 삭제하는 방법에 대해서 볼 것이다.전에 했던 get방식처럼 똑같이 해주면 된다!

리팩토링 - 내 코드에 나쁜 부분이 있는지 확인하고, 더 나은클린 코드로 바꾸기 위한 작업에러(문제점)가 n회 발견되었을때, 리팩토링을 해야한다.리팩토링을 하면서, 에러를 역으로 발견할 수 있다.기능을 추가하기 전에 리팩토링을 하고 추가를 한다.코드 리뷰할때배포, 운영

개별 유튜버 "수정" => PUT/youtubers/:id\- req : params.id과 db에 각 객체마다 내가 수정할 수 있는 요소는 channelTitle밖에 없으니 채널타이틀도 바꿔주자.(body에 채널타이틀이 있어서 꺼내와야 해)\- res : "(이전)c

HTTP란 뭐냐!인터넷 상에서 통신할때 사용하는 규약이 있는데, 그걸 지키면서 작성하면 되는데,상태 코드란 이 HTTP의 상태가 정말 어때? 상태를 보여주는 코드야.종류는 이렇게 있어. 하지만 가장 많이 볼 수 있는 상태 코드는 3개정도인데, 200 대의 상태 코드가

cf. 스프링 : 컨트롤러노드 : 콜백함수로, app.HTTPMETHOD(path, 핸들러)지금 우리가 정말 많이 작성한 것 중에 하나가이 문법인데, 여기서 저 function이 콜백함수이고,"/youtubers/:id" : 이건 path라고 하며,function (r

예를 들어 아래와 같은 한가지 배열을 만들 예정이야자 이런 다음 각각의 id값을 가지고 해당 과일을 불러오면 되는데,이렇게 하면 값이 나와.지금 이렇게해서 postman에서 돌려보면 localhost:1234/fruits/1 이렇게 돌리면,id값을 빼왔음에도 불구하고

자 지금까지 배운 것들로 회원 API를 설계해볼 예정이야!기능은 딱 정말 필요한 로그인, 회원가입, 마이페이지, 메인페이지? 정도로만 구성을 해두고, 각각의 기능을 만들어보자요건 깃허브에 내가 한 파일들을 올릴려고 하는데, express를 다운받으면서 node_modu

이런식으로 일단 코드를 짰고, 이제 회원 API 로그인, 회원가입을 할 수 있도록 해줬으니그리고 이제 채널 API를 설계해보도록 하자.

라우팅 : Request(요청)이 날아왔을 때, 원하는 경로에 따라 적절한 방향으로 경로를 안내해주는 것URL, method => 호출"콜백 함수라우터 설정을 해줄때 보니까, 기존에 있던 const express = require("express");const app

channels.js users.js app.js

DBMS란?데이터베이스 관리 시스템은 데이터베이스를 생성, 관리, 조작하는 소프트웨어입니다. 데이터의 저장, 검색, 수정, 삭제 등을 효율적으로 수행하며, 데이터의 무결성과 보안을 보장합니다.RDBMS 쓰는 이유관계형 데이터베이스 관리 시스템(RDBMS)을 사용하는 주

설명:CREATE DATABASE: 새로운 데이터베이스를 생성합니다USE: 작업할 데이터베이스를 선택합니다. 이후 모든 명령은 이 데이터베이스에서 실행됩니다2\. 사용자 테이블 생성테이블 명명 규칙복수형 사용 권장: user ❌ → users ✅이유: 테이블은 여러 레

CLI로 Docker mariaDB 실행 Docker 프로그램 실행 터미널 실행 docker exec -it mariadb /bin/bash : mariadb가 있는 컨테이너 접속 mariadb -u root -p / Enter password: root exit

CREATE DATABASE Board;USE Board;CREATE TABLE users ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(30) NOT NULL, job VARCHAR(100), birth DATE,

DB를 연동하는 법.시간대 맞추는 법timezone : 'Asia/Seoul'이거 안돼.SELECT @@global.time_zone, @@session.time_zone;이걸로 지금 글로벌 타임 존이 잘 되어있는지 확인하고,안되어있다면SET time_zone = 'A

한 데이터가 글자만 들어왔는지, 숫자가 없는지, 숫자로 지정해뒀다면 문자가 들어오지 않고 숫자만 잘 들어왔는지. 등 유효성에 대한 검사를 해주는 것이 중요하다."사용자가 입력한 값" 유효성(=타당성)을 확인하는 것 ex)userId : 값이 있어야 함, 숫자여야 함사람

자소서 쓸때, 서류에서 과소평가하지 말기.cf. 대기업, 빅테크, 중견/중소,스타트업블로그를 하는 이유=> 내 이야기를 뱉어보는 거=> 내가 '정리'가 됩니다.블로그에 주 2회라도, 이슈에 대해서 작성 (트러블 슈팅)인것을 작성 그러면서 문제가 있고 그걸 선택애서 고민

전에 코드를 올려둔 것 처럼하니,포스트맨에서 값을 불러오지 못하고 계속 값을 찾는 오류가 생겼었다.그래서 그 문제를 해결하기 위해 next라는 새로운 방식을 사용해보려고 한다.이렇게 하나의 검사를 변수에 담아서 기능을 사용하려고 하면next를 통해서 값이 없다면 오류를

오늘은 로그인과 인증, 인가에 대해서 알아볼려고 한다. 인증(=로그인) : Authentication언제 로그인이 필요해? 쇼핑몰 상품 볼 때 필요해? => X쇼핑몰 장바구니 담을 때 => O쇼핑몰 상품 구매, 마이 페이지 들어갈 때 => O즉 로그인을 하는 이유나,

json에서 사용하는 웹 토큰이다. 개념 : JSON 형태의 데이터를 안전하게 전송하기 위한 웹에서 사용하는 토큰cf. 토큰 : (인증용) 입장 가능한 유저야 / (인가용)그리고 난 사실 관리자 아니면 일반 유저 권한을 가졌어.를 바로 보여줄 수 있는 친구야.= 즉,

\- 개념 : 개발을 하다가 포트넘버, 데이터베이스 계정, 암호키 등등 나만 알아야하거나, 외부에 노출되면 안 되는 중요한 환경 변수들을 따로 관리하기 위한 파일cf. 깃허브에 올라가면 안되는 값파일 확장자가 : envcf. txt, jpg.env 파일은 환경 변수 파

나중에 내가 백엔드를 맡게 되어서 스키마 라던가, 구성을 해야한다면 실제 서비스할 그림? 프로토타입을 만들어가면서 스키마를 작성하는 것이 가장 알기 쉽고 바람직하다.이런 식으로 book store를 만들어 볼 건데, 처음부터 전부 만들어볼 예정이다. 이미 디자인과 파일

일단 간단하게 api설계를 짜보려고 합니당지금은 딱 생각나는 필요한 것들만 짜보고,나중에 코드로 구현할때, 더 고도화해서 손 봐보겠습니당Method : POSTURL : /joinHTTP status code : 성공 201Request Body : Method : P

image.png

bin/www : 포트 번호 등과 같은 웹 서버를 구축하는 데에 필요한 설정 데이터가 정의 돼 있는 파일 ⇒ .env 파일과 같이 설정 값을 가지고 에러 처리, 기타 추가 설정을 해주는 파일 node_modules : Node.js, Express에 필요한 모듈들이

bin/www : 포트 번호 등과 같은 웹 서버를 구축하는데에 필요한 설정 데이터가 정의되어 있는 파일=> .env 파일과 같이 설정 값을 가지고 에러 처리하거나, 기타 추가 설정으 해주는 파일node_modules : Node.js, express에 필요한 모듈들이

npm i dotenv express-validator jsonwebtoken mysql2npm i express새로운 폴더를 만들어서, 저것들을 전부 깔아줘.그런 다음에 해주고 dotenv를 해주면 되는데, 아직 env파일이 없으니까 .env 파일 하나 만들어주고,

여기에서는 mariadb와 연결을 해주고, 첫번째로 회원가입 API를 구현을 해볼려고 해.mariadb.jsmariadb에서 작성한 값을 가져오려면, mysql 모듈을 불러오고, DB와의 연결 통로를 생성해줘야해. 그걸 해주는 코드가 이것이며, 이렇게 mariadb.j

HTTP 상태 코드(200, 404, 500 등)를 숫자 대신 의미 있는 상수 이름으로 사용하게 해주는 라이브러리401 : Unauthorizedapp.js : 프로젝트의 메인 라우터 역할/user.js : 하위 라우터 역할 = 경로를 찾아주는 역할/books.js :

categoryController.jscategory.js (라우터)

여기서 보면 1\. 솔트 생성crypto는 암호화하게 해주는 모듈이고, 랜덤한 바이트를 생성해주는 함수야. 그걸 스트링 즉, 문자열로 만들건데, base64형태로 바꿀거야. 이게 우리가 기본적으로 많이 쓰는 인코딩 방식 중 하나야.2\. 해시된 비밀번호const has

bookeController.jscategoryController.jscategory.js (라우터)

ERD 설계도좋아요 API 설계 likeController.jslikes.js (라우터)const express = require('express')const router = express.Router();const {addLike, removeLike} = requi

결제(주문) API 설계 orders.js

비교 예시

DATE_ADD(기준 날짜, INTERVAL)여기 SQL문을 자세히 보면2024년 1월 1일 기준으로 1일을 더한 1월 2일이 나옴예를 들어 1 DAY가 아닌 MONTH로 해보면이런식으로 나와! 이젠 2월 1일이지?그럼 지금 날짜로 저 NOW를 찍어보면 어떨까? 계속

\- 비동기 발생\- 비동기 처리콜백 함수 : 할 일 다 하고, 다음 함수 실행해줘(⇒ 순서 맞춰서 뒤에 실행해달라고 요청)promise (resolve, reject)then&catchES2017 promise ⇒ async & awaitPromise 함수Promis

orderController.js서버가 한 번만 파싱하기 때문에 실행 속도가 빠름같은 쿼리 여러 번 실행 시 유리단일 행, 단일 쿼리에 자주 사용됨서버가 매번 구문 파싱하기 때문에 execute에 비해 실행 속도가 더딤한 번에 여러 행을 삽입가능여러 행을 한 번에 IN

JWT에 문제가 생길 경우 if/else ⇒ try/catch로 예외처리 해줘야함JWTTokenExpiredError⇒ 토큰 유효기간 종료(만료)된 경우JsonWebTokenError⇒ 토큰에 문제가 있는 경우try … catch개발자가 예상하지 못한 에러(개발 오류

response 포맷 통일(snake →camel), status code … 등데이터베이스 중복 코드 ⇒ 모듈화 ex) userController ⇒ user(데이터 모듈 = Model) - CRUD cf. DB 모듈 : mysql ⇒ 몽구스, 시퀄라이즈 패키지

변수, 형태, 함수, 실행이벤트 심기(scroll, click)코드를 잘 관리하는 방법서비스 개발을 위하여 계획하기변수의 타입함수의 특징상속의 형태패러다임 지원변수에 들어가는 값에 따라서, 런타임에 타입이 추론된다.함수는 일급객체의 특징을 가진다.함수는 객체와 동일하게

코드의 내부 동작 구조를 이해하는 것이 정말 중요하다.원리를 이해하게 되면 알고리즘 적인 사고가 가능공통적인 로직을 익힐 수 있음.포인터의 개념함수 포인터를 공부하고구조체, 공용체, 열거형에 대해서 배움.모든 프로그래밍 언어의 동작 원리는 거의 똑같다.자바스크립트와 같

반복문은 같은 코드를 여러 번 실행할 때 사용하는 기능이에요. 매번 똑같은 코드를 복사-붙여넣기 하는 대신, 반복문으로 간단하게 처리할 수 있어요.break는 반복문을 완전히 중단하고 빠져나올 때 사용해요.continue는 현재 반복만 건너뛰고 다음 반복으로 넘어갈 때

자료구조는 데이터를 효율적으로 저장하고 관리하기 위한 방법입니다. 프로그램에서 데이터를 어떻게 조직하고 저장할지 결정하는 것으로, 적절한 자료구조를 선택하면 프로그램의 성능을 크게 향상시킬 수 있습니다. 자료구조는 크게 선형 구조와 비선형 구조로 나뉘며, 각각의 특징과

왜 필요할까?JS 코드가 너무 지저분함코드 스케일이 커지면 코드 관리가 잘 안됨쓰면 좋은 점JS 기반보다 버그를 줄일 수 있음유지보수가 쉬움강력한 높은 퀄리티의 코드 생산 가능타입스크립트 = 자바스크립트 + 타입체크TS환경에서 JS를 코딩하면 동작 <-> JS 환

리터럴 타입(내가 정한 값들만 들어올 수 있어) 리터럴 타입은 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 한다. 타입스크립트에서 사용되는 리터럴 타입에는 다양한 종류가 있다. 문자열 리터럴, 숫자 리터럴 타입, 불리언 리터럴 타입, 객체리터럴, 타입 별칭 리터럴 타입을 사용하면 좋은 점 코드의 가독성이 높아짐! (정해진 값만 사용하니까) ...

리액트란 무엇인가 리액트의 동작 원리 초기랜더링 가상 DOM 번경 재조정 실제 DOM 업데이트 npx create-react-app todolist --template typescript 이거하면 리액트 기반 타입스크립트를 다운 받아서 사용할 수 있어.

클래스형 컴포넌트와 함수형 컴포넌트가 있음.클래스형이 초기에 많이 사용됐고, 현재는 함수형이 많이 권장됨.가독성이나 코드 양 등에서 함수형이 더 좋음. 다만, 레거시 코드들 이해하려면 클래스형도 알아야 됨.먼저 클래스형 컴포넌트는 이런 식으로 짜면 된다.저렇게 clas

Props(프롭스) 매개변수랑 비슷한 개념인데, 넘겨준 다는 거야. 함수도 넘겨줄 수 있고, 변수도 넘겨줄 수 있어. 예를 들어, 이런 코드가 있다고 할때, 하나하나 다 뜯어 보면 React 라이브러리를 가져오는 부분이에요. TypeScript에서 React.FC 같은 타입을 사용하려면 필요해. 2. Props 타입 정의 interface란? ...

타입스크립트에서 클래스를 만들려면이런식으로 적어주면 돼.근데, 뭔가 이건 공부를 하기 위해 작성한 코드이고, 실제 코드에선 이런식으로 클래스를 이용하진 않을 것 같애.만약 저 empName, age, job을 private로 변수를 지정해주고 싶다면앞에 private를

리액트에서 부트스트랩을 사용해보고 싶으면이걸 해서 다운 받고사용하려는 리액트 파일에 들어가셔서이렇게 import를 해주면 된다.그런 다음에 index.html 파일 같은 링크를 담을 수 있는 곳에이걸 붙여넣어주면 된다.그런 후에 실제 코드에서 어떻게 사용하면 되냐면,보

NPM (Node Package Manager)패키지를 node_modules에 설치해서 사용프로젝트에서 계속 사용할 패키지에 적합예시: npm install reactNPX (Node Package eXecute)패키지를 임시로 다운로드해서 실행하고 삭제일회성 명령어

@reduxjs/toolkitredux clsx@vanilla-extract/css@vanilla-extract/css-utils@vanilla-extract/vite-pluginreact-icons uuid react-beautiful-dnd

참고로 과제 보면 github에 올린 코드를 제출해야 돼서 github에 현재 프로젝트를 올려뒀는데, 문제가 있다.firebase Configuration을 firebase 폴더의 index.ts에 쓰게 되는데, 여기 API KEY가 있기 때문에 보안상 문제가 된다.

CRA : create-react-appnpx create-react-app book-store-c --template typescript여기서 book-store-c 는 프로젝트 명이고npm run 해서 쓸 수 있는 명령어들 볼 수 있고,npm create vite@

프로젝트 폴더(디렉토리) 구조pages - 라우터에 대응하는 페이지 컴포넌트(컨테이너)components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트utils - 유틸리티hooks - 리액트 훅model - 모델(타입)api - api 연동을 위한 fetcher

리액트에 보면 children이라는 컴포넌트가 있는데 이게 무엇인지 알려줄게이런 코드가 있다고 치면,이 코드는 Layout 컴포넌트임. Header와 Footer를 고정으로 두고, 그 사이에 다른 내용을 넣을 수 있게 만든 거임.TypeScript에서 "이 데이터의 모

global = 프로젝트 전체에 적용 = 프로젝트에 일관된 스타일링을 적용"user agent stylesheet"로 표시되는 브라우저의 기본 스타일이 차이를 만든다.브라우저 간의 스타일 차이를 극복하기 위해 사용에릭마이어의 reset cssnormalize.csssa

전역 충돌의존성 관리 어려움불필요한 코드, 오버라이딩압축상태 공유 어려움순서와 명시도캡슐화그리고사용할 곳에 임포트 해주면 돼.하다 보면 이렇게 사용하는 것 같던데, css를 백틱을 사용해서 하더라고? 왜 그럴까 알아보니JavaScript의 "템플릿 리터럴" 문법임.CS

UI,UX의 일관성 유지유지보수가 용이확장성재사용성사용자정의지금 하는 것이 무엇이냐면!!그 웬만한 사이트 들어가면 다크모드, 라이트 모드 전부 이렇게 지정이 되어있잖아.그래서 그걸 해주는 방식인건데!이걸 써줘야해!

요게 Title.tsx이고 이걸 Title.spec.tsx으로 테스트를 해보려고 하는데 어떻게 하냐면,"Title 컴포넌트가 제대로 동작하는지 자동으로 확인하는 코드"describe: "이 컴포넌트에 대한 테스트들이야" 라고 묶어주는 거임안에 여러 개의 it 테스트가

내가 지금 처음 타입스크립트 라는 것을 공부하다보니, 자바스크립트나 리액트와는 다르게, 타입을 정말 하나하나 전부 다 지정을 해두더라고,그리고 타입을 또 만들어서 이 타입은 이런 이런 타입만 있고, 이런 걸 만들어주던데, 그거에 대해서 어떻게 작성하는지 정말 많이 만들

로그인 /login회원가입 /signup비밀번호 초기화 /reset도서 목록 /books도서 상세 /books/{id}장바구니 /cart주문서 작성 /order주문 목록 /orderlist이게 리액트 라우트 돔이라는 건데, 이걸 이용하면 정말 쉽게 라우터를 지정해줄 수

"폼 관리를 쉽게 해주는 라이브러리"문제점:입력값마다 state 필요에러 상태도 따로 관리코드 길고 복잡함장점:코드 짧음유효성 검사 자동성능 좋음 (리렌더링 최소화)"이 input을 react-hook-form이 관리하게 해줘"해석:register("email"): 이

.

"여러 컴포넌트에서 공유하는 데이터를 관리하는 것""가장 유명한 상태관리 라이브러리 (2015년)"보일러플레이트 많음 (작성할 코드 많음)Action, Reducer, Store 다 따로 만들어야 함규칙이 엄격함"간단하고 가벼운 상태관리 라이브러리 (2019년)"코드

오픈 소스란? 누구나 특별한 제한 없이 공개 되어 있는 소스 코드 검사(리뷰), 수정 등 개선사항을 마음껏 펼칠 수 있는 소스 코드 장점 : 원래는 내 머리 하나로만 생각했던 문제를 다른 사람들의 생각이나 코드를 보고 내 문제를 해결할 수 있어. 다른 개발자에게 아이

\-License.md/.txt : 오픈 소스 라이센스 전문 명시 문서즉, 이 파일이 프로젝트에 있으면 = 이 프로젝트는 이 오픈 소스 라이센스 하에 배포된다, 되어야 한다."오픈 소스 프로젝트 최상위 디렉토리"\- README.md : 프로젝트 코드의 목적, 사용 방

🌟 오픈소스 컨트리뷰션 가이드 👥 오픈소스 구성원의 역할 🎨 저작자 (Author) 오픈소스 프로젝트를 만든 사람 또는 조직 💻 사용자 (User) 오픈소스 프로젝트를 사용하는 사람 🔧 메인테이너 (Maintainer) 프로젝트를 관리하는 사람 (대장은 아니고 책임이 있는 사람!) 프로젝트의 방향을 알고 있는 사람 직접 방향을 설정한 사람...

라이센스가 없는 프로젝트는 오픈소스가 아닙니다!이는 곧 기여 권한이 없다는 의미입니다."이 프로젝트가 너무 좋아 보이는데... 자유롭게 사용하고, 수정하고, 배포하고 싶어!"이럴 때는 개발자에게 오픈소스로 전환할 것을 제안해보세요!💡 제안할 때 팁: 적절한 라이센스

금융권 : 시큐어 코딩, 오픈 소스를 활용을 어떻게 하는지, 관리는 어떻게 하는지 안내서가 있음.by 금융감독원, 금융보안원오픈 소스에 대한 사전 기능 및 보안성 테스트!기능, 보안성, 이슈 현황 파악하기취약점 확인, 기관 연락 검토 요청 => 신뢰성 검증라이센스 검토

개발 요구사항이 정의된 때로부터 제품 전달이 완료되기까지 긴 시간 소요개발팀의 효율성 향상에 걸림돌로 작용릴리스 회수가 적으므로 자동화 필요 감소 -> 릴리스 기간 예측 어려워짐긴급한 코드 변경에 대하여 충분한 테스트가 이루어질 수 없는 위험팀 스트레스, 의사소통 부족

Docker + KubernetesJenkinsAnSibleGithub빌드 도구(자동화 지원), 단위 테스트 프레임워크, 정적 코드 분석기, 인스 테스트 프레임워크그럼 각자 어떤 역할을 하는지 살펴보자!소프트웨어 개발 및 배포의 효율과 안정성을 향상시킴하이퍼바이저에 의

(딱딱하게) 물리적인 컴퓨팅 자원의 특징을 다른 시스템, 응용프로그램, 최종 사용자들이 자원과 상호작용하는 방식으로부터 감추는 기술(부드럽게) 컴퓨터 안에 또 다른, 즉 가상의 컴퓨터가 존재하도록 하는 기술시스템 이용률(utilization)의 향상설정(configur

서비스 개발 및 운용 방식 마이크로 서비스 아키텍쳐 (MSA) 응용 시스템 개발 및 구성을 위한 아키텍처 스타일의 하나 이에 비교하여 전통적인 방식의 아키텍처를 모놀리식(monolithic) 아키텍처라고 부르기도 함. 애플리케이션이 서비스 모음으로 개발되어 각 마이크로 서비스는 특정한 기능을 수용하고 개별 작업을 처리, 이 서비스들이 서로 연결되어 전체 ...

응용을 실행하는 데 필요한 모든 파일들과 그것을 실행하는 방법을 한데 묶어 놓은 것상태를 저장하지 않는 (stateless) 방식 - 네트워크로 전송, 레지스트리에 저장, 이름 및 버전 지정 가능계층화되어 있다는 특징을 갖고 있으며, 어떤 이미지로부터 다른 이미지를 만

장점 : 유연성과 확장성일반적으로 개발자가 소스 코드를 커밋하고 푸시하는 것으로 시작응용 소프트웨어를 자동으로 빌드, 통합(자동) 테스트를 통하여 배포할 수 있는 상태임을 확인CI 단계에서 소프트웨어가 배포 가능한 상태임을 확인하느 것으로 시작응용 소프트웨어를 컨테이너

응용의 배포를 위하여 많이 이용되는 k8s의 오브젝트 형태동일한 모습의 포드들의 복제본 모음인 레플리카셋을 이용하는 것이 일반적단순한 레플리카셋에 비하여 동적 업데이트 및 롤백, 배포 버전의 관리 등이 유연하여 응용의 배포에 널리 이용됨.보통은 상태가 없는 응용의 배포

인수 테스트(UAT : User Aceeptance Test) 1. 요구사항(requirement)대로 기능이 구현되었는지를 확인하는 과정 전체 시스템을 사용자 관점에서 시험하는 블랙박스 테스트를 포함 2. 이것을 자동화하는 것은 쉽지 않은 일이지만 CI/CD의 구축을 위해 반드시 필요. 전통적으로는 QA담당자나 사용자의 수작업에 의존해 왔음 3. 사...

IaC(Infrastructure as Code) 구성관리 (Configuration Management) 구성 (또는 형상 : configuration)은 의존성 떄문에 코드에 못지 않게 소프트웨어 시스템에 큰 영향을 미침 따라서 구성 관리 (또는 형상 관리)는 잦은 빌드, 통합, 릴리스로 이루어지는 CI/CD에 중요한 측면 이를 체계적...

젠킨스 기본 사용법 1. Jenkins는 'item'단위로 프로젝트를 관리 웹 사용자 인터페이스를 이용해서 설정할 수 있고 상태를 열람할 수 있도록 되어 있음 2. 파이프라인에 빌드 절차를 기술할 수 있음 앞에서는 매우 간단한 (echo 'Hello world') 동작을 시험 삼아 기술해 보았음 3. 빌드는 어떤 이벤트에 의하여 시작 앞에서는 Bui...

MDN, 한 번에 이해하기 웹 개발하다가 "이 CSS 속성이 정확히 어떻게 동작하지?", "이 JS 메서드 브라우저 호환성은?" 같은 게 궁금할 때 제일 먼저 가게 되는 곳이 있다. 그게 바로 MDN이다. 핵심부터 한 줄로 정리하면 이렇다. > MDN (Mozilla Developer Network) = Mozilla가 운영하는 웹 표준 공식 레퍼런스...

공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것예시: 가위로 종이를 자를 때, 내가 직접 컨트롤하여 자르는 것처럼 개발자가 주도권을 가짐공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것으로, 라이브러리보다 엄격함폴더명, 파일명 등에 대한 규칙 존재예시: 비행기

기능성 - 의도한 (요구된) 기능을 모두 올바르게 수행하는가?"올바른" 코드 말고, "좋은" 코드란 어떤 것인가?간단하게 얘기하면, "읽기 좋은 코드", 또 바꾸어 말하면 "엔지니어링 관점에서 재활용성이 높은 코드"단위 테스트가 잘 마련되어 있는 코드 - 테스트 커버리

인수테스트 프로덕션 환경과 동일한 바이너리 (빌드의 결과)를 이용하여 스테이징 스테이징된 소프트웨어 (컨테이너화되어 있음)를 대상으로 사용자 요구사항을 만족하는지 테스트 Jenkins 를 이용한 인수 테스트 자동화 Dockerfile을 포함하여 빌드와 관련한

npm을 통한 오픈소스 배포, 한 번에 이해하기 내가 만든 유틸 함수나 컴포넌트를 매번 복붙하기 귀찮다면? 한 번 배포해두면 어디서든 npm install로 가져다 쓸 수 있다. 그게 바로 npm 패키지 배포다. 핵심부터 한 줄로 정리하면 이렇다. > npm 오픈소스 배포 = 내가 만든 코드를 npm 레지스트리에 올려서, 전 세계 누구나 npm ins...

소프트웨어 요구사항 명세서, 한 번에 이해하기 "만들어달라는 대로 만들었는데 왜 다르다고 하죠?" 개발하다 보면 이런 상황이 생긴다. 처음부터 뭘 만들지 글로 정확하게 정리해두면 이런 일이 줄어드는데, 그게 바로 소프트웨어 요구사항 명세서(SRS) 다. 핵심부터 한 줄로 정리하면 이렇다. > 소프트웨어 요구사항 명세서 (SRS, Software Req...

응용 소프트웨어 아키텍처 설계, 한 번에 이해하기 기능은 다 되는데 코드가 스파게티처럼 엉켜서 고치기 무서운 경험, 한 번쯤 있을 거다. 처음부터 구조를 잘 잡아두면 나중에 기능 추가도 쉽고, 버그 찾기도 쉽고, 팀원이 봐도 이해가 빠르다. 그게 바로 아키텍처 설계다. 핵심부터 한 줄로 정리하면 이렇다. > 응용 소프트웨어 아키텍처 = 소프트웨어를 구성...

데이터베이스 설계, 한 번에 이해하기 DB를 그냥 막 만들면 나중에 데이터가 중복되고, 쿼리가 느려지고, 고치려면 테이블을 다 갈아엎어야 하는 상황이 온다. 처음부터 잘 설계해두면 이런 일이 없다. 핵심부터 한 줄로 정리하면 이렇다. > 데이터베이스 설계 = 데이터를 어떤 테이블에, 어떤 구조로, 어떻게 연결해서 저장할지 미리 계획하는 것 쉽게 비유...

백엔드 단위 테스트, 한 번에 이해하기 코드 짜고 "될 것 같은데?" 하고 배포했다가 실제로 터진 경험, 한 번쯤 있을 거다. 단위 테스트는 그 "될 것 같은데?"를 "된다"로 바꿔주는 안전망이다. 핵심부터 한 줄로 정리하면 이렇다. > 단위 테스트(Unit Test) = 코드의 가장 작은 단위(함수·메서드)가 의도대로 동작하는지 자동으로 검증하는 것...

Selenium, 한 번에 이해하기 브라우저를 사람 대신 자동으로 조작하고 싶을 때가 있다. 버튼 클릭, 로그인, 폼 입력, 스크롤… 이걸 코드로 시킬 수 있는 도구가 Selenium이다. 핵심부터 한 줄로 정리하면 이렇다. > Selenium = 브라우저를 코드로 자동 조작하는 도구. 테스트 자동화와 웹 스크래핑에 주로 씀 쉽게 비유하면 브라우저...

AWS 주요 서비스, 한 번에 이해하기 AWS에 서비스가 200개가 넘는다. 근데 실제로 대부분의 서비스는 10개 안팎의 핵심 서비스로 돌아간다. 뭐가 뭔지만 알아도 "이 상황엔 이걸 쓰면 되겠다"가 바로 보임. 핵심부터 한 줄로 정리하면 이렇다. > AWS = 서버·저장소·DB·네트워크 등 인프라를 필요한 만큼 골라 쓰는 클라우드 플랫폼 쉽게 비유...

스테이징 배포, 한 번에 이해하기 새 기능을 만들었는데 바로 실제 서비스에 올렸다가 터지면? 그냥 유저한테 그대로 노출된다. 그걸 막기 위해 "실제랑 똑같은 환경에서 미리 테스트하는 단계"가 있는데, 그게 바로 스테이징(Staging) 이다. 핵심부터 한 줄로 정리하면 이렇다. > 스테이징 배포 = 실제 서비스(프로덕션)에 올리기 전, 똑같은 환경에서...

"리액트 잘 다루면 됐지 CS가 왜 필요해?"라고 생각하기 쉬운데, CS 기초는 프레임워크가 바뀌어도 안 변하는 뿌리다. 면접에서 단골로 나오고, 성능 최적화나 디버깅할 때 결국 여기로 돌아온다. 핵심부터 한 줄로 정리하면 이렇다.CS 기초 = 컴퓨터가 어떻게 동작하는

컴퓨터가 프로그램을 돌릴 때, 데이터를 어디에 올려두고 작업할까? 그 "작업 공간"이 바로 메모리(RAM) 다. 메모리를 알면 "내 컴퓨터가 왜 느려지지?"가 한 방에 이해됨. 핵심부터 한 줄로 정리하면 이렇다.메모리 = 컴퓨터가 지금 작업 중인 데이터를 잠깐 올려두는

컴퓨터 네트워크, 한 번에 이해하기 우리가 매일 쓰는 인터넷, 카톡, 유튜브 전부 컴퓨터들이 서로 데이터를 주고받아서 돌아간다. 근데 컴퓨터끼리 어떻게 "말이 통하는" 걸까? 그걸 다루는 게 컴퓨터 네트워크. 핵심부터 한 줄로 정리하면 이렇다. > 컴퓨터 네트워크 = 컴퓨터들을 연결해서, 정해진 약속(프로토콜)대로 데이터를 주고받게 하는 시스템 쉽게 ...

클라우드 컴퓨팅, 한 번에 이해하기 서버를 직접 사서 방에 쌓아두던 시대는 지났음. 요즘은 필요한 만큼 빌려 쓰고, 쓴 만큼만 돈 내는 게 기본이다. 그게 바로 클라우드 컴퓨팅. 핵심부터 한 줄로 정리하면 이렇다. > 클라우드 컴퓨팅 = 인터넷을 통해 서버·저장공간·DB 같은 컴퓨팅 자원을 "빌려 쓰는" 것 쉽게 비유하면 전기랑 똑같다고 생각하면 됨...

파이프라인 모니터링 vs 클러스터 모니터링, 한 번에 이해하기 둘 다 "모니터링"이라 헷갈리기 쉬운데, 보는 대상이 완전 다름. 핵심부터 한 줄로 정리하면 이렇다. 파이프라인 모니터링 = "일이 흘러가는 과정"을 지켜보는 것 클러스터 모니터링 = "그 일을 돌리는