전체 글 99

Web Framework (1) : Full-Stack, MVVM Pattern, Vue.js syntax, Life Cycle

웹 풀스택(Full-Stack) 웹 애플리케이션을 개발하는 데 필요한 모든 기술과 영역을 포괄하는 개념 1. 프론트엔드 (Front-End) : 사용자 인터페이스(UI)와 사용자 경험(UX)에 관한 부분을 담당 - 프로그래밍 언어 : HTML, CSS, JavaScript 등을 사용하여 웹 페이지를 디자인하고, 이를 구현 - 리액트(React), 앵귤러(Angular), 뷰(View) 등의 프레임워크나 라이브러리를 사용 2. 백엔드 (Back-End) : 프론트엔드에서 요청하는 데이터를 처리하고, 데이터베이스를 다루며, 보안과 같은 기능을 담당 → 서버 사이드 로직(Server-Side Logic)을 구현하는 영역 - 프로그래밍 언어 : 자바(Java), 파이썬(Python), 루비(Ruby) - 백엔드..

IT_Study/Web 2023.03.17

Operating System (1) : 운영체제, VM을 이용한 Ubuntu 설치, 파일 시스템, OS 현황, Shell 종류, CLI 명령어

리눅스 쉘 프로그래밍 운영체제(OS, Operating System) 컴퓨터 시스템에서 하드웨어 자원을 효율적으로 관리하고, 응용 프로그램 및 사용자와 하드웨어 자원 간의 인터페이스를 제공하는 소프트웨어 프로그램 Operating Syetem = *Application + *Shell + *Kernel *Application(응용 프로그램) : 컴퓨터를 사용하기 위한 다양한 소프트웨어를 의미 ex) 워드프로세서, 웹 브라우저, 게임 등 *Shell(쉘) : 운영 체제와 사용자 간의 인터페이스 역할을 하는 소프트웨어 ex) Unix/Linux에서 사용되는 bash, Windows에서 사용되는 cmd 등 *Kernel(커널) : 운영 체제의 핵심 부분, 컴퓨터의 하드웨어와 소프트웨어 자원을 관리하고, 다른 ..

API 활용 Web 프로젝트 (1) : 요구사항에 따른 DB 설계 및 EC2 상에서의 API 서버 배포 방법

카페 주문관리 API 만들기 1. 관리자가 가게에 대한 메뉴를 등록하는 API (/api/menus) 2. 등록한 메뉴를 주문 API (/api/orders) 3. 해당 API에 대한 DB 설계 → API 설계 → 백엔드 구현 → 테스트 → 배포 요구사항 메뉴 name : 메뉴의 이름 description : 메뉴의 정보 image_src : 메뉴의 이미지 (파일 경로) 주문 id(외래키) : 주문할 메뉴(메뉴의 id가 들어감) quantity : 주문할 메뉴의 개수 request_detail : 요청사항 *외래 키를 사용하는 이유 - 메뉴에 대한 설명을 바꾸는 작업 통합 테이블을 사용 시, 100만 개에 해당되는 메뉴에 대한 설명을 일괄 변경해야 함 + 같은 내용에 대한 중복 테이블 분리 시, 테이블 ..

Back-End (6) : REST API, HTTP Method, Postman, Morgan, Multer를 이용한 서버 다루기

REST API(Representational State Transfer API) 클라이언트와 서버 간의 통신을 위한 인터페이스 서버 측에서 데이터와 기능을 제공 클라이언트 측에서 이를 요청하여 사용 *인터페이스 : 사용자가 쉽게 동작 및 사용하는데 도움을 주는 시스템 *RESTful API : REST API 설계 방식에 맞게 설계한 API HTTP METHOD 1.GET : 데이터를 읽거나 검색 웹사이트를 불러오는 경우도 GET : [네트워크] - [All] 에서 보면 GET으로 대부분 가져오는 걸 볼 수 있음 2. POST : 새로운 리소스를 생성할 때 사용 로그인, 게시글 작성 등 규정하기 애매한 것들은 POST를 활용한다고 보면 됨 3. PATCH : 일부 데이터를 수정할 때 4. PUT : 보..

IT_Study/Web 2023.03.03

Back-End (5) : URL routing, Express & MySQL 연동, EC2 내 MySQL과 Node 연결하기

URL routing 사용자가 접근한 경로에 따라서 그에 맞는 메소드를 호출해주는 기능 Target directory 내부에 info.js와 각각의 html file을 준비 -------------------------------------------------------- Method 설명 1. sendFile res 에서, 파일 전송 시 사용하는 메서드. 여기선 html 을 보낼 용도 상대 경로가 아닌 절대 경로로만 동작한다. 2. __dirname 현재 기기에서 작동중인 서버의 경로를 의미하는 상수 왜? 각각의 기기마다 서버의 경로가 전부 다르다.(또한 sendFile은 절대 경로로만 동작) 따라서 현재 서버의 경로 + 파일의 위치 조합으로 절대경로를 만들어 조합. __dirname 과, 각각의 h..

IT_Study/Web 2023.03.02

Back-End (4) : Node.js를 이용한 Crawling 방법, WAS, CORS, SSR & CSR

Node.js를 이용한 크롤링 방법 0. robot.txt Robots exclusion standard 표준 규약 각 홈페이지 뒤에 robots.txt 를 붙이면 조회할 수 있음 (ex: https://www.google.com/robots.txt) 서비스 출시 및 영리적 목적으로 사용되는 경우, 법적인 분쟁이 발생 가능 1. Crawling 준비 *NPM(Node Package Module) Node.js 패키지를 설치, 업데이트, 제거 및 관리 가능 *Puppeteer 구글에서 개발한 웹 브라우저 제어용 Node.js 라이브러리 package.json 생성 # 1. 원하는 directory로 이동 cd [target folder] # 2. npm init의 역할 : package.json 생성 np..

IT_Study/Web 2023.03.02

[C++] C++ 코드 최적화 방법 정리

문제 풀이 시, 입출력 속도를 향상시키기 위한 최적화 기법 키워드 정리 스트림(Stream) : 컴퓨터 프로그래밍에서 데이터의 흐름을 나타내는 개념 입력 스트림(Input Stream) : 데이터를 프로그램으로부터 읽어들이는 역할 출력 스트림(Output Stream) : 프로그램에서 데이터를 출력하는 역할 동기화(synchronization) : 여러 프로세스가 공유 자원을 사용할 때, 이 프로세스들이 서로 경쟁하지 않고 정상적으로 작동할 수 있도록 관리하는 것 버퍼(buffer) : 컴퓨터의 메모리 영역에서 임시로 데이터를 저장하는 공간 문제 풀이 시, 입출력 속도를 향상시키기 위한 최적화 기법 #include using namespace std; int main(){ ios_base::sync_wi..

[C++] 프로그램 컴파일 과정 - 선행처리기(preprocessor), 컴파일러(compiler), 링커(linker)

C++ 프로그램 컴파일 과정 1. 소스 파일 작성 2. 선행처리기(preprocessor)에 의한 선행처리 3. 컴파일러(compiler)에 의한 컴파일 4. 링커(linker)에 의한 링크 1. 소스 파일 작성 소스 파일(.cpp) : C++ 문법에 맞게 논리적으로 작성된 프로그램 2. 선행처리기(preprocessor)에 의한 선행처리 전처리 지시자 처리 : 소스 코드 내에서 사용되는 매크로, 헤더 파일, 조건부 컴파일 등을 처리 주석 제거 : 소스 코드 내의 주석을 제거하여 컴파일 시 영향을 주지 않도록 처리합니다. 난독화 : 코드의 가독성을 낮추어 코드 분석을 어렵게 하는 난독화 기능을 제공합니다. *전처리 지시자(Preprocessor directive)란? # 기호로 시작하는 특별한 명령어를 ..

IT_Study/C++ 2023.03.01

Back-End (3) : 런타임 환경, 웹 애플리케이션 프레임워크, Node.js

런타임 환경(Runtime Environment) 소프트웨어 프로그램을 실행하기 위해 필요한 환경을 제공하는 컴퓨팅 환경, 줄여서 Runtime 이라고도 함 웹 애플리케이션 개발을 위한 프레임워크 1. Spring Framework (Java) 장점 객체 지향적인 설계를 기반 → 유지보수 및 확장성이 용이 다른 Java 기술과의 연동이 쉬움 대규모 애플리케이션 개발에 적합 단점 설정이 복잡 이전 버전과의 호환성 이슈 2. Django (Python) 장점 다양한 기능을 제공, 다른 라이브러리와 쉽게 연동 가능 안정성과 보안성이 높음 커뮤니티가 크고 활발하여, 다양한 문제를 해결할 수 있는 정보를 얻기 용이함 단점 성능이 낮은 템플릿 엔진 때문에, 대규모 트래픽 처리가 어려움 Python 기반, 다른 언어..

IT_Study/Web 2023.03.01