__Title__

Vue CLI Vue.js 개발환경을 설정해주는 도구 - 기본적인 프로젝트 세팅 제공 - 각각의 컴포넌트를 .vue 파일로 분리해 여러 개의 컴포넌트 사용 가능 - 클라이언트에서 node.js 테스트 서버 사용 1. vue-cli global 설치 # -g : global option 부여 $ npm i @vue/cli -g 2. 원하는 directory를 생성 후, 그 terminal에서 다음과 같이 setting # Target directory로 이동 후 해당 명령어 진행 $ vue create . - Babel : ES6 이상의 JavaScript를 사용하는 다른 Browser와의 호환성을 위한 패키지 - Linter : 코딩 스타일 가이드 -> 관습적 규칙 어길 시 warning 발생 3. pa..

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

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 : 보..

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

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..

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

AWS instance 접속 AWS에 nginx 설치 후 정적 서버 업로드 Domain Mapping mobaXterm 리눅스와 유닉스 시스템에서 사용되는 터미널 에뮬레이터(Terminal Emulator) *터미널 에뮬레이터 : 컴퓨터와 다른 장치를 연결하여 컴퓨터에서 명령어를 입력하고 출력할 수 있도록 해주는 소프트웨어 mobaXterm으로 AWS instance에 접속 (방법은 생략) AWS instance 접속 후, 한국 시간대인 KST로 변경 # sudo : 관리자 권한을 사용한다 $ sudo timedatectl set-timezone Asia/Seoul 웹 서버 소프트웨어 클라이언트에서 요청한 웹 페이지를 찾아서 해당 페이지를 응답으로 전송해주는 역할 웹 서버 소프트웨어의 여러 기능 포트 리..

클라이언트 (Client) vs 서버 (Server) 클라이언트 - 서버 측에 요청을 보내는 사용자 측 컴퓨터 또는 디바이스 - 일반적으로 웹 브라우저가 클라이언트 역할을 수행 - 외부 API에 데이터 요청 → 서버에서 데이터 가져옴 → 웹 페이지에 HTML을 이용해 표시 서버 - 클라이언트(Client)의 요청에 응답하는 컴퓨터 시스템 또는 프로그램 - 웹에서 서버는 웹 페이지, 애플리케이션, 데이터베이스 등의 정보를 제공하고, 클라이언트로부터 요청을 받아서 처리 - 서버의 역할은 여러 가지가 있음 웹 서버 : Client 들에게 HTTP 문서를 전달 DB 서버 : Client 들의 DB 를 관리 게임 서버 : Client 들의 게임 데이터를 관리 & 처리 IP(Internet Protocol) 송신 ..

Javascript : 싱글 스레드 기반 비동기통신 ( 자바스크립트 자체는 비동기 X, 웹 브라우저가 비동기 통신을 하게 도와주는 것) 스레드 : 하나의 프로그램 실행 작업 싱글 스레드 : 한 번에 하나의 작업만 수행 가능 멀티 스레드 : 한 번에 여러 개의 작업을 수행 가능 JavaScript에서는 멀티스레드 프로그래밍을 지원하지 않으므로, 비동기 프로그래밍을 통해 여러 작업을 병렬로 처리할 수 있는 것으로 대체하고 있음 // 비동기 프로그래밍 예시 console.log("1") setTimeout(() => { console.log("2"); }, 0) console.log("3") // 1 // 3 // 2 일반적인 코드 실행 시, 기본적으로 Call Stack에 쌓임 후에 Browser Conso..

DOM (Document Object Model) HTML 문서의 요소들을 Tree 구조로 표현 첫 번째 두 번째 JavaScript에서 DOM 표현으로 특정 요소를 지정 가능 console.log(document) // #document ㅣ #은 객체를 나타내는 의미, 즉 #document = document 객체를 의미 console.log(document.children[0]); // // // ... // console.log(document.children[0].children[1]); // ... console.log(document.children[0].children[1].children[0]); // ... console.log(document.children[0].children[1]...