부트캠프

로컬 디렉토리 생성 : mkdir "디렉토리명"git config --global init.defaultBranch maingit config --global user.name "github 아이디"git config --global user.email "guthub

rem(root em) : 최상위 요소(root)의 font-size(em)vh : viewport(웹페이지가 사용자에게 보여지는 영역)의 높이값vw : viewport의 너비값vmin : viewport의 너비 또는 높이를 기준으로 하는 최소값vmax : viewpo

❗ javascript에서는 char형이 존재하지 않음 문자 하나도 문자열로 간주함 ❗ length : 문자열의 길이 반환(공백 포함)toUpperCase() & toLowerCase() : 문자열 전체를 대문자/소문자로 변경indexOf('문자열') : 매개변수로 받

자바스크립트가 기본적으로 가지고 있는 객체String, Number, Array, Date, Math, ...시간과 날짜에 대한 정보를 얻기 위해 사용하는 객체Date 객체의 메서드 (var date = new Date();)date.getFullYear()date.g

JQuery 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 대부분의 브라우저에서 지원 가능 HTML DOM을 손쉽게 조작 가능 같은 동작을 하더라도 더욱 짧게 구현 가능 JQuery 메서드 $(선택자).메서드() $

git checkout main : main으로 브랜치 이동git pull git branch : 현재 존재하는 branch 확인git -d "브랜치명" : 이전에 개발용으로 사용한 브랜치가 있다면 삭제git checkout -b "브랜치명" : 개발을 위한 브랜치 생

개인 맞춤형 일상 기록 및 관리 웹 페이지Main page, Health page, Entertainment page, To-do list page, Login page로 구성navbar에 위치한 아이콘을 통해 페이지 간 이동 가능각 페이지별 아이콘과 날씨 아이콘을 포

Node.js 크롬 Javascript 엔진 기반으로 만들어진 Javascript 런타임 이벤트 기반, 비동기 I/O 모델을 이용해 가볍고 효율적 npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리 런타임 프로그래밍 언어가 구동되는 환경 Javascript의 런타

api, 전송은 대부분 비동기 처리

배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담는 것배열 구조 분해객체 구조 분해const 변수 = 배열;각 변수에 배열의 인덱스 순으로 값 대응구조 분해 시, 변수의 값이 undefined일 때, 기본값 할당 가능구조 분해 없이 두 변수의 값 교환도 가능con

body-parser 데이터를 쉽게 처리할 수 있도록

동적 form 비동기 이용하면 실시간으로 변화된 부분만 보여줄 수 있음 비동기 HTTP 통신 방법 ajax JQuery를 통해 쉽게 구현 가능 JQuery를 사용하지 않는 페이지에서는 사용할 수 없음 리액트에서 사용할 수 없음 axios 가장 많이 사용 (프론트,

파일 업로드 콜백 함수는 맨 마지막에 명시해야 하므로 upload.single을 먼저 적음 파일 업로드는 post 방식 이용해야 함 form 태그로 파일을 전송할 때에는 항상 enctype 속성 반드시 설정 동적 파일 업로드할 때에는 axios, patch 등 사

SQL문 SQL 공통 데이터베이스 목록 보기 데이터베이스 이용하기 테이블 목록 보기 테이블 구조 보기 DDL Data Definition Language 데이터베이스 or 테이블을 정의하는 언어 create : 데이터베이스 또는 테이블 생성 alter : 테

model, view, controller로 나누어져 있기 때문에 유지보수 용이 그러나 model, view, controller를 각각 명확하게 나누기 어려움 model은 데이터 처리(DB와 연결)하는 부분, DB 관리 view는 사용자에게 보여지는 부분 contr

Sequelize javascript 구문을 알아서 SQL로 변환 DB 작업을 쉽게 할 수 있도록 도와주는 ORM (Object-Relation Mapping) 라이브러리 중 하나 Sequelize 공식 문서 Sequelize 설치 Sequelize 모델 정의 my

웹 브라우저 (클라이언트) 에 저장되는 키와 값이 들어있는 작은 데이터 파일이름, 값, 만료일, 경로 정보로 구성됨클라이언트가 페이지 요청서버에서 쿠키 생성 - res.cookie( )HTTP 헤더에 쿠키를 포함시켜 응답브라우저가 종료되어도 쿠키 만료 기간이 있다면 클

OAuth 지금은 주로 OAuth 2.0 사용 JWT는 공개되어 있으므로 중요한 정보를 담는 것 X 단순 식별을 위한 용도 O ex. 장바구니, 최근에 본 상품 localhost : 브라우저가 닫혀도 정보가 남아있음 localstorage : 브라우저가 닫히면 정

비밀번호 암호화 단방향 - 알고리즘을 통해 해시값을 생성 (SHA-256 / SHA-512) 양방향 - 암호화, 복호화 모두 진행 공개키 : 비밀키가 별도로 있음 아마존이 우리에게 준 것은 공개키, 아마존은 비밀키를 가지고 있음 공개키를 잃어버리면, 복구할 수 없음

Server 클라이언트에게 네트워크를 통해 서비스를 제공하는 컴퓨터 Backend & Server 클라이언트 (애플리케이션, 브라우저 등) 의 요청을 컴퓨터가 수행할 수 있도록 하는 작업 서버는 클라이언트의 요청을 늘 수행할 수 있어야 하므로 365일 24시간 다운되

AWS Amazon Web Service Cloud Computing Platform 장점 손쉽게 클라우드 구축 가능 개발자가 신경써야 할 부분 ↓ 클라우드 서버 다운되지 않는 서버? - 이론상, 따로 처리해주어야 함 route53 - 도메인 RDS - 데이

Nginx 비동기 이벤트 기반 구조의 웹 서버 프로그램 클라이언트로부터 요청을 받았을 때, 요청에 맞는 정적 파일을 응답해주는 HTTP 웹 서버로 활용됨 Apache는 클라이언트 접속 시마다 프로세스 또는 스레드를 생성하는 구조 → 대량의 클라이언트 (1만 이상)

개발 과정 DB와 prodcution DB 분리를 위해 package.json에서 환경변수 설정함 공개적으로 보여주지 않을 정보(ex. api key 값) 개발 서버와 배포 서버에서 다르게 설정할 정보(ex. 파일 경로 등) 이런 내용들을 환경 변수에 저장

TCP / IP 신뢰성 있게 전송 = 순서를 지켜서 전송 TCP 통신은 컨테이너 벨트를 생각하면 됨 네트워크 인터페이스 계층 맥 주소를 관리 이더넷이나 와이파이 같은 기술이 이 계층에 해당 응용 계층 소켓 응용 계층과 전송 계층 사이에서 동작 TCP / UDP 모

Socket.io 클라이언트와 서버 간의 짧은 지연 시간, 양방향 및 이벤트 기반 통신을 실시간으로 가능하게 하는 라이브러리 WebSocket 프로토콜 위에서 구축됨 통신 과정을 단순화하고 개선하기 위한 추가 기능 제공 이벤트 기반 자동 재연결 기본 이벤트 사용자

💻 Do-IT (팀 프로젝트) 📍 http://3.39.211.126/ 소개 개발자 스터디 플랫폼 원하는 CS 과목에 대해 면접 연습 진행 → Open AI api (Chat GPT) 평가 → 포인트 획득 면접 연습을 통해 얻은 포인트로 스터디 개설 (100 포

프레임워크 vs 라이브러리 프레임워크 한 프로그램을 만들기 위한 함수명 등이 모두 정의되어 있음 프로젝트 하나당 하나의 프레임워크만 사용 가능 라이브러리 원하는 페이지에서 다 사용 가능 리액트는 단방향 data flow 단방향 = 한 쪽으로 흘러가는 것 컴포넌트

Component MVC View를 독립적으로 구성해 재사용할 수 있고, 새로운 컴포넌트도 만들 수 있음 데이터 (props) 를 입력받아 View 상태 (state) 에 따라 DOM Node 호출 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적

Event Handling 즉시 실행을 원할 경우에는 event에 괄호 붙이기 click event만 주고 싶다 -> 괄호 X onChange: input, textarea, select 값이 변경될 때마다 발생하는 event handler [...this.stat

LifeCycle Mount : DOM이 생성되고 웹 브라우저 상에 나타남 Update : props나 state가 바뀌었을 때, 업데이트함 Unmount : 컴포넌트가 화면에서 사라짐 render → DidMount에서 데이터 가져옴 → setState에 의해 다시

Ref Reference 전역적으로 작동 ❌ 컴포넌트 내부에서 선언 및 사용 ⭕ 동일한 컴포넌트 반복 사용해도 각 컴포넌트 내부에서만 동작 → 중복 ❌ DOM을 직접적으로 건드려야 할 때 사용 ex) 특정 input에 focus 주기, 스크롤 박스 조작, 비디오 플

React Router 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공 주요 컴포넌트 BrowserRouter Routes Route Link createBrowse

handleSubmit : 두 개의 함수를 받음, 하나는 유효할 때 실행되는 함수(필수), 다른 하나는 유효하지 않을 때 실행되는 함수(선택)

context 생성 createContext()는 provider와 consumer 두 개의 리액트 컴포넌트 반환 초기값 설정 X 타입 설정 O createContext 내부에 타입을 설정하는 것은 필수가 아닌 옵션 그러나 명시하는 것이 좋음 consumer 자식 컴

context api vs redux (찾아보고 정리) redux는 순수한 javascript Store 데이터를 넣는 곳 createStore(reducer 함수) : store 생성, reducer 함수 필수 getState( ) : createStore로 생성

useSelector( ) redux store의 state를 조회하는 함수 인자로 콜백함수, 콜백함수의 매개변수로 state를 받을 수 있음 자동으로 subscribe를 하고 있으므로 데이터가 변경되면 컴포넌트 재실행 store.getState( ), subscrib

TypeScript JavaScript의 기본 문법에 자료형 체크 기능을 추가한 것 JavaScript가 자의적으로 type을 해석하고 코드를 실행시켰을 때, 의도와 다른 방식으로 쓰이는 것을 방지 정적 파일 언어 → 실행하지 않고도 코드 상의 에러를 알려줌 (실시간

개인 포트폴리오 웹 페이지프로필, 사용 가능한 기술 스택, 진행한 프로젝트, 메일 등에 대한 정보 제공Main page, 자기소개 page, 프로젝트 page, contact page로 구성Header를 통해 페이지 간 이동 가능로고, About, Projects, C

JAVA 기본 문법 데이터 타입 기본형 데이터 타입 (Primitive) boolean, char, byte, short, int, long, float, double 참조형 데이터 타입 (Reference) 기본형을 제외한 모든 형태 Scanner 클래스 주요 메서드 next( ) : 공백 이전까지의 문자열을 읽음 nextLine( ) : 줄바...

Class 패키지 관련 있는 클래스 파일을 저장하는 공간 접근 제어자 클래스나 일부 멤버 (필드, 메서드) 에 외부에서의 접근 제한을 걸어두는 것 public 같은 클래스 ⭕ 같은 패키지 ⭕ 자식 클래스 ⭕ 전체 ⭕ protected 같은 클래스 ⭕ 같은 패

Wrapper 클래스 8가지 기본 데이터 타입 (primitive data type) 을 객체로 표현하기 위해 제공되는 클래스 객체로서 다양한 메서드와 속성 사용 장점 컬렉션 저장 자바의 컬렉션 (ex. ArrayList) 은 기본 데이터 타입을 직접 저장

Spring Java 기반의 웹 어플리케이션을 만들 수 있는 백엔드 프레임워크 Java로 다양한 어플리케이션을 만들기 위한 프로그래밍 툴 Spring 구조 Spring 프레임워크 특징 IoC (Inversion of Control, 제어 반전) DI (Dpenden