2024년을 거의 마치며..너무 글을 오랜만에 써서 무슨 말로 시작해야 할 지 모르겠다.2024년은 나에게 꽤 많은 변화가 있는 해인거 같다. 작년에 내가 무슨 내용을 회고록에 썻을까 한번 둘러봤는데,개발에 정말 푹 빠져 살았구나 라는 생각이 들었다. 아마 개발에 푹 빠졋었기 때문에 지금까지 IT에 대한 흥미를 유지하지 않나 싶다. 특히 "웹 개발"은 나에게 꽤 고마운 키워드 인거 같다. 왜 고맙냐 하면 "내 아이티 흥미"의 흐름을 보면 알 수 있다.  이 흐름을 보면 OSI 7 Layer의 7계층 하위 계층으로 점점 파고 드는 느낌이 들어 웃기기도 했다.(풀스택, 클라우드는 "안다"라는 표현을 쓰지 못하겠다. 하지만 공부는 꾸준히 해왔고 상도 타봤기에 "경험해 봤다" 라는 단어는 쓸 수 있을 거 같다...

1. 문제 설명 및 생각한 풀이 운영체제의 역할 중 하나는 컴퓨터 시스템의 자원을 효율적으로 관리하는 것입니다. 이 문제에서는 운영체제가 다음 규칙에 따라 프로세스를 관리할 경우 특정 프로세스가 몇 번째로 실행되는지 알아내면 됩니다. 1. 실행 대기 큐(Queue)에서 대기중인 프로세스 하나를 꺼냅니다. 2. 큐에 대기중인 프로세스 중 우선순위가 더 높은 프로세스가 있다면 방금 꺼낸 프로세스를 다시 큐에 넣습니다. 3. 만약 그런 프로세스가 없다면 방금 꺼낸 프로세스를 실행합니다. 3.1 한 번 실행한 프로세스는 다시 큐에 넣지 않고 그대로 종료됩니다. 입력으로 "priorities" 와 "location"이 주어진다. priorities로 우선순위가 value로 있는 큐 배열이 주어지고, locatio..

순열, 조합 알고리즘은 코딩테스트에서 빈번하게 출제 된다. 그럼에도 항상 마주치면 구글링을한다.. 따라서 오늘 순열, 조합 완벽하게 이해하고 끝내보려고 한다. 조합 재귀 구현 조합의 수도코드는 다음과 같다. 배열 [1, 2, 3, 4] 에서 3개를 선택하는 조합을 구할때 1을 고정 -> 나머지 [2, 3, 4] 중에서 2개씩 조합을 구한다. -> [1(고정) + 각각 뽑은거] 2를 고정 -> 나머지 [3, 4] 중에서 2개씩 조합을 구한다. -> [2(고정) + 각각 뽑은거] 3을 고정 -> 나머지 [4] 중에서 2개씩 조합을 구한다. 4를 고정 -> 나머지 [] 에서 2개씩 조합을 구한다. 여기서 나머지 배열에 대해 조합을 구할 때는, 재귀함수를 사용하면 된다. - 기저조건 : 1개를 뽑을때, 모든 배..

이진 탐색은 정렬된 매우 큰 범위 내에서 최적의 해를 찾는 경우에 유리하다. 이진탐색 알고리즘은 O(logN)의 복잡도를 보장한다. 재귀함수를 이용한 이진탐색 let arr = [1, 3, 5, 7, 9, 11, 13, 15, 17]; let target = 11; function b_search_recur(arr, target, left, right) { let mid = parseInt((left + right) / 2); if (left > right) { return -1; } if (arr[mid] == target) { return mid; } else if (arr[mid] < target) { return b_search_recur(arr, target, mid + 1, right); } ..

맵(Map) - 맵은 딕셔너리 자료형과 같으며, 키(Key)와 값(Value)로 이루어진 자료형이다. 맵 프로퍼티 - new Map() - 맵을 생성한다. - map.set(key, value) - key를 이용해 value를 저장한다. - map.set(key) - key에 해당하는 값을 반환한다. - map.has(key) - 해당 key의 존재여부를 true, false로 반환한다. - map.delete(key) - key에 해당하는 값을 삭제한다. - map.clear() - 맵 안의 모든 요소를 제거한다. - map.size() - 요소의 개수를 반환한다. - map.keys() - 각 요소의 모든 key 반환 - map.values() - 각 요소의 모든 value 반환 - map.entri..

코딩테스트 알고리즘 문제를 풀다보면, array.sort() 함수를 자주 사용하게 되는데, 쓰다보면 매우 유용하고 다양하게 응용 가능한 걸 느낄 수 있다. 문득 제대로 알고 쓰기보단 "이러면 오름차순, 이러면 내림차순" 이렇게 암기식으로 사용하고 있다는 걸 느꼈다. 따라서 자바스크립트의 sort를 정리하는 글을 쓰려고 한다. 잘 정리 했으니 읽어보고 도움이 됐으면 좋겠는 바람이다!구문부터 보자compareFunction은 생략이 가능하며, 생략할 시에는 배열 각 요소를 string으로 처리하고, 각 문자의 유니코드 값에 따라 정렬된다. 다음 예시를 보면 바로 이해가 될 것이다. 만약, compareFunction을 넣어주면, 이 함수의 반환값에 따라 정렬된다. 분명 둘다 오름차순 정렬을 했는데 compa..

Socket.IO란? 실시간, 양방향, event기반 통신을 제공한다. 한마디로, 실시간 통신을 제공하는데 개발자가 발생하는 이벤트를 임의로 설정하고, 다룰 수 있다는 것이다. websocket이라는 web api의 부가 기능이 아니라, 실시간 통신을 위해 존재하는 여러 기능중 websocket이라는 기능을 사용할 뿐이다. 따라서 특정 브라우저나 모바일 환경에서 websocket api를 지원하지 않아도, socket.io는 다른 기능을 찾기 때문에 항상 실시간 통신이 지원된다. 기본적인 연결 과정 이해하기 1. 일단 서버 열기 (pug 템플릿을 기반으로한 서버를 열었다) import express from "express"; import http from "http"; import { Server } ..

정적 파일이란? 변화하지 않는 파일. image, css, js파일 등을 의미한다. express에서는 정적 파일을 쉽게 전달할 수 있는 기능을 가지고 있다. express.static() express.static 미들웨어에 포함시키며 전달하면, 파일의 직접적인 제공을 시작할 수 있다. app.use(expres.static('public')); 위와 같이 작성했다면 다음과 같은 주소로 public 디렉토리에 포함된 파일을 로드할 수 있다. http://localhost:3000/images/kitten.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/images/bg.png http..

websocket이란?websocket은 프로토콜. 즉, 통신의 기술이다. 웹에서 통신프로토콜 하면 http프로토콜이 생각난다. 하지만 이 프로토콜은 실시간 통신에 한계가 있다. http프로토콜의 stateless특성에 따라 응답을 받으면 연결을 끊어버리기 때문이다. websocket은 이를 해결하고자 나온 프로토콜이다. 연결을 유지하며, 양방향 통신을 지원해주기 때문에 실시간으로 대화가 가능하다. 그림을 보면 이해가 편하다! 이제 기본적인 websocket의 기능을 이용해 실시간 통신을 느껴보자코딩 서버측 js 코드를 짜보자. 기본적으로 express 와 ws를 설치해야한다. 1. http 서버 열기, index.html연결const express = require("express"); const ap..

인기영화 추천 사이트를 구현하다 간단해 보이지만 해결되지 않는 오류를 발견했다. 여기서는 movie라는 프로퍼티를 받을 수 없다는데 그럴리가 없다... 오류 부분의 코드를 보자 import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; const Detail = () => { const [detail, setDetail] = useState({}); const { id } = useParams(); const getDetail = async () => { const json = await ( await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id..

1. 안되는 이유와 , ChatGPT의 답변 ChatGPT의 답변은 다음과 같다. React에서 input 태그의 value 속성에 상태값을 넣으면, 그 값은 읽기 전용 상태가 되어 변경할 수 없습니다. 대신, onChange 이벤트 핸들러를 사용하여 입력 값을 변경해야 합니다. 이유는 React에서는 단방향 데이터 흐름을 사용하여 컴포넌트의 상태를 업데이트하고 렌더링하는 방식으로 작동하기 때문입니다. 그래서 input 태그의 value 값이 변경되면 React는 이를 새로운 상태로 인식하고, 이에 따라 컴포넌트를 다시 렌더링합니다. 그러나 value 값이 읽기 전용이기 때문에 이를 변경할 수 없으므로, onChange 이벤트 핸들러를 사용하여 상태를 업데이트하고 새로운 값을 입력하는 것이 필요합니다. ..

coin의 정보를 가져올때, 렌더링시 단 한번만 가져오면 되기 때문에, useEffect를 다음과 같이 이용한다. useEffect(()=>{}, []) []인자에 아무것도 적지 않으면, 렌더링 후 딱 한번만 실행된다. 예시 상태값 coins에 api를 저장하고, coins.map을 통해 내부요소를 그려보는 코드다. https://api.coinpaprika.com/v1/tickers import React, { useEffect } from "react"; function App() { const [coins, setCoins] = React.useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((res..