오늘도 조으네💜

컴퓨터 공학 지식/자료구조, 알고리즘

📌 투 포인터(다중 포인터) 이 전략의 기본 아이디어는 각각 배열의 인덱스에 해당하는 두 개 또는 여러 개의 포인터를 만들고, 제공된 조건에 따라 포인터를 배열의 시작, 끝, 중간으로 이동하여 한 쌍의 값 혹은 조건을 충족시키는 결과를 도출한다. 👀 Example 1 오름차순으로 정렬된 배열을 취하는 sumZero 함수를 만든다. 두 숫자를 더했을 때 0이 되는 쌍을 찾는다. sumZero([-3,-2,-1,0,1,2,3]) // [-3,3] sumZero([-2,0,1,3]) // undefined sumZero([1,2,3]) // undefined Solution function sumZero(arr){ for(let i = 0; i < arr.length; i++){ for(let j = i+1;..

2023. 2. 14.

Node.js

📌 Plugin 플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다. 로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다. // webpack.config.js module.exports = { plugins: [] } 플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다. // webpack.config.js var webpack = require('webpack'); //webpack이 기본으로 제공해주는 plugin 사용하기위해 import var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plu..

2023. 2. 9.

Node.js

📌 Output output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다. // webpack.config.js module.exports = { output: { filename: 'bundle.js' } } 📌 Output 속성 옵션 형태 최소한 filename은 지정해줘야 하며 일반적으로 아래와 같이 path속성을 함께 정의한다. // webpack.config.js var path = require('path'); module.exports = { output: { filename: 'bundle.js', path: path.resolve(__dirname, './dist') } } filename속성은 웹팩으로 빌드한 파일의 이름을 의미하고, path속성은 해당 파일의 경로를 의미한다..

2023. 2. 9.

Node.js

📌 Loader 로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성이다. // webpack.config.js module.exports = { module: { rules: [] } } 엔트리나 아웃풋 속성과는 다르게 module 라는 이름을 사용한다. 📌 CSS Loader 적용하기 npm i css-loader -D // webpack.config.js module.exports = { entry: './app.js', output: { filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/, use: ['css-loader']..

2023. 2. 9.

토이 프로젝트

이번 주말은 강의 듣는 건 스탑하고, 뭔가를 직접 만들어보고자 고민하다가... 크롬 모멘텀이라는 확장 프로그램을 클론 코딩해보고 싶다는 생각이 들었다. 거창한건 아직 실력이 안될 거 같고, 크롬 모멘텀은 전에 노마드코더 강의(https://nomadcoders.co/javascript-for-beginners)를 들으며 바닐라 JS로 클론 코딩해본적은 있는데, 이 정도 수준이면 내가 소화해낼 수 있는 수준일거라 생각되었다. 그래서 이번 클론 코딩은 바닐라 JS로 만든 모멘텀을 리액트로 동일하게 구현해보는 것이 목적이다. 그리고 이번에는 TODO LIST에서 할일 목록을 체크하는 것 뿐만 아니라 수정도 하고 드래그 앤 드롭 기능을 추가하여 드래그까지 되게끔 구현할 예정이다. [기능 구현 요구사항] 실시간으..

2023. 1. 29.

컴퓨터 공학 지식/자료구조, 알고리즘

연결 리스트(Linked List) 하나의 개체를 이루는 노드가 연결되어 리스트를 이루는 구조이다. 노드에는 값을 담고 있는 '데이터'와 다음 노드를 가리키는 '링크' 정보를 저장하고 있다. '데이터'에는 숫자, 문자열, 또다른 연결리스트 등 다양한 형식을 가질 수 있다. 리스트의 맨 앞 노드를 헤드(Head), 맨 마지막 노드를 테일(Tail)이라고 한다. 배열과 연결리스트의 차이 배열과 연결리스트는 언뜻 비슷해 보이나, 분명한 차이점이 있다. 배열은 메모리의 연속한 위치에 저장되고, 연결 리스트는 각 노드가 임의의 위치에 저장된다. 또한 배열은 인덱스를 활용하여 특정 원소를 지칭하는 것이 간편하나(O(1)), 연결 리스트는 인덱스가 없다. 그래서 마지막 노드를 찾으려면 첫 노드에서부터 포인터를 통해 ..

2023. 1. 17.

컴퓨터 공학 지식/CS, 웹

📌 start-line : 시작 라인 👉 요청 메시지 HTTP 메서드 (GET: 조회) 종류: GET, POST, PUT, DELETE… 서버가 수행해야 할 동작 지정 요청 대상 (/search?q=hello&hl=ko) absolute-path[?query] (절대경로[?쿼리]) 절대경로= "/" 로 시작하는 경로 HTTP Version 👉 응답 메시지 HTTP 버전 HTTP 상태 코드: 요청 성공, 실패를 나타냄 200: 성공 400: 클라이언트 요청 오류 500: 서버 내부 오류 📌 header : 헤더 header-field = field-name ":" OWS field-value OWS (OWS:띄어쓰기 허용) field-name은 대소문자 구문 없음 HTTP 전송에 필요한 모든 부가정보 예)..

2023. 1. 10.

컴퓨터 공학 지식/CS, 웹

HTTP : HyperText Transfer Protocol HTML, TEXT, IMAGE, 음성, 영상, 파일, JSON, XML(API) 등 거의 모든 형태의 데이터 전송 가능 서버 간에 데이터를 주고 받을 때에도 대부분 HTTP 사용 HTTP 특징 클라이언트 서버 구조 무상태 프로토콜(스테이스리스), 비연결성 HTTP 메시지 단순함, 확장 가능 📌 클라이언트 서버 구조 Request Response 구조 클라이언트는 서버에 요청을 보내고, 응답을 대기 서버가 요청에 대한 결과를 만들어서 응답 📌 무상태 프로토콜 - 스테이스리스(Stateless) 서버가 클라이언트의 상태를 보존X 장점: 서버 확장성 높음(스케일 아웃) 단점: 클라이언트가 추가 데이터 전송 📌 비연결성 HTTP는 기본적으로 연결을..

2023. 1. 10.