w00ngja의 등록된 링크

 w00ngja로 등록된 티스토리 포스트 수는 110건입니다.

[연간회고] 2023년을 돌아보며 (230101 ~ 231231) [내부링크]

월별회고 c 2월, 선택과 집중 막학년을 앞두고, 고민에 빠졌다. 전공(로봇)과 복수전공(자율주행)의 도메인을 살려 커리어를 시작할 것인지, 작년 여름부터 조금씩 병행해오던 프론트엔드를 택할 것인지. 결심이 필요한 시점이었고, 이후에는 졸업 후 취업을 위한 고도화가 필요한 시점이었다. 정말 감사하게도 조언을 구할 수 있는 기회가 생겼다. 친척 누나의 소개를 통해 현업에 종사하고 계신 프론트엔드 엔지니어분과의 커피챗 시간을 가질 수 있었다. 무턱대고 서울에 올라가 궁금한 것들을 여쭤보고, 당시 막 자바스크립트 학습을 어느 정도 마무리했을 때라 배운 것들을 이것 저것 조합해본 프로젝트를 보여드리기도 했었다. 그 땐 컴포넌트라는 용어 뜻도 모를 때였는데, 참..지금 생각하면 무슨 깡이었는지 싶다ㅋㅋ 여튼 결론..

[월간회고] 데브코스 3개월차 회고 (231120~231225) [내부링크]

이번 달 돌아보기 벌써 절반 이번 달은 학습량이 정말 물밀듯 밀려왔다. 많아지는 학습량 탓에 깊이 있는 학습을 잘 못하지 않았나 생각이 든다. 기말 시즌이랑 겹치면서 더 소화가 힘들었던 것인지도 모르겠다. 캡스톤 제출도 끝냈으니, 200% 데브코스와 학습에 집중할 수 있게 되었다. 아직 학습 못한 내용들과 정리해놓은 키워드들을 차근히 학습하고, 정리해놓을 계획이다. 오늘부로 거의 정확하게 데브코스 과정의 절반이 지났고, 절반이 남았다. 공식적인 학습 일정은 종료되었고 1달 간의 팀프로젝트와 2달 간의 최종 협업 프로젝트가 예정되어 있다. 전 아직 준비가 안됐는데요..c 뱉은 말은 지킨다 뱉은 말을 못지키게 되었다. (뱉지 말지) 지난 달 말 야심차게 설정했던 목표들이 있었는데, 사실 잘 지켜지지 ..

[월간회고] 데브코스 2개월차 회고 (231016~231119) [내부링크]

학습 페이스 점검 적응 완료 두 달이 지난 시점, 코스의 학습 사이클에 어느 정도 적응된 것 같다. 사실 평일 주말 할 것 없이 자는 시간을 제외하고는 책상 앞에 앉아있다. 고민 중인 부분이 있다면 한정된 시간에서 어떻게 최대 효율을 뽑아낼 수 있을지이다. 집중력이 관건이라고 생각되는데, 내 맘대로 쉽게 되는 것은 아니지만 몸 건강히, 마음 건강히 챙기며 성장하기 위해 노력하고 있다. 이제 달릴 일만 남았다. c️ 뱉은 말은 지킨다 지난달 회고 말미에 앞으로 해야 될 일들을 정리해놓았었는데, 얼마나 지켜졌을까? 1. 코테 : 사실 개발자 취준에 있어 가장 중요한 요소 중 하나라고 생각된다. 1차 팀 활동을 진행하면서 매일 한 문제씩 풀고 내용을 공유, 의견을 나눴었는데 팀 활동 기간이 종료되고 당분간..

[데브코스] 나만의 Notion 만들기, 웅시디언 (1) - 구현 편 [내부링크]

데브코스 5주차 과정이 진행되는 시점인 10월 17일부터 약 10일 간, 바닐라 자바스크립트만을 이용해 노션을 클로닝하는 프로젝트를 진행하였다. 데브코스에서 진행하는 세 개의 프로젝트 중 첫 번째 프로젝트이며, 두 편에 걸쳐 회고를 작성해보려 한다. 이번 편에서는 프로젝트 준비와 전반적인 구현에 대해 다룰 예정이다. 프로젝트 개발 과정과 전체 코드는 노션 클로닝 레포지토리에서 확인할 수 있다. 기본적인 구현 내용이나 순서는 본 회고에서 다루지 않았기 때문에, 커밋 로그를 통해 확인하는 것을 추천드립니다 .. GitHub - w00ngja/FEDC5-5_Project_Notion_VanillaJS Contribute to w00ngja/FEDC5-5_Project_Notion_VanillaJS deve..

[월간회고] 데브코스 1개월차 회고 (230919~231015) [내부링크]

본의 아니게 3주차 회고를 생략하게 되었다. 3, 4주차를 통합하여 이번 월간회고로 작성하려 한다. 학습 관련한 TIL은 개인적으로 노션에 정리하고 있는데, 공개로 돌려야 할지 고민 중이다. 정신없이 지나간 한 달 간 배운 것들과, 느낀 점 그리고 앞으로의 계획을 정리하려 한다. 1. 학습 1~2주차 : 자바스크립트 기초개념, 자료구조와 알고리즘 첫째 주는 OT와 함께 이벤트 루프, 메모리, 스코프, 클로저같은 자바스크립트 개념과 자료구조 및 알고리즘을 학습하였다. 아무래도 적지 않은 분량이다보니 강의에서는 가볍게 다루고 넘어갔지만, 프론트엔드 개발자에게 있어 굉장히 핵심적인 내용들이라 추가적인 학습이 필요하다고 생각되었다. 현재 리스트를 정리해두고 있는데 여유가 생기면 이들을 좀 깊게 파헤쳐 볼 예..

[주간회고] 데브코스 2주차 회고 (230925~231001) [내부링크]

1. 학습 학습 요약 이번 주까지 기본적인 알고리즘 개념들을 익히고, 관련된 문제들을 푸는 방식으로 학습이 진행되었다. 큐 / 해시테이블 / 트리 / 힙 / 트라이 / 정렬 / 이진탐색 / BFS, DFS / 그리디를 다루었다. 올해 초에 알고리즘 학습을 진행하며 구현해놨었던 코드들과 비교해보며 개념들을 다시 한 번 정리하였다. 새로 알게된 것 1. 트라이라는 개념을 처음 접하게 되었다. 앞서 말했듯 대표적인 알고리즘들을 한 번씩은 익혔다고 생각했었는데, 하마터면 계속 모를 뻔했다. 트라이는 문자열을 효율적으로 탐색하기 위한 알고리즘으로, 한 글자씩 붙을 때마다 계층 정보를 갖는 노드(현재 값 Value와 맵구조의 Children 프로퍼티를 가짐)가 생성된다. 검색 서비스의 자동완성 기능을 예로 ..

[주간회고] 데브코스 1주차 회고 (230918~230924) [내부링크]

1. OT 19일에 진행한 오리엔테이션을 시작으로 데브코스의 여정이 시작되었다. 첫날은 출석, 장려금 등의 행정적인 안내와 스펜서 매니저님의 커뮤니케이션 & 성장을 위한 사고방식 특강이 진행되었다. 기억에 남았던 내용들을 정리해보았다. 학습과 성장이라는 '업무'가 주어졌다고 생각하고 데브코스에 임하기 노력 없는 맹신은 없다. 능동적으로 임하기 얇게 알고 있는 것들, 편견들은 Conflict를 해결하고 Merge하기 (Main에 바로 해도되나요..?) 기복에 관계 없이, 해야되니까 한다는 마인드로. 그것이 프로니까.. 이후에는 직군별로 방을 옮겨 추가적인 안내사항, 데브코스의 문화에 대해 전달받았다. 정규 교육과정 이외에도 챙겨야 할 것들이 많았어서 첫 날엔 하루죙일 노션 페이지와 슬랙만 배회하였다는.. ..

[후기] 프로그래머스 데브코스 프론트엔드 5기 합격 후기 [내부링크]

지원동기 평소 프론트엔드 분야를 혼자 공부하면서 적절한 속도로 학습하고 있는지, 놓치고 있는 부분들은 없는지, 너무 지엽적인 내용에 빠져드는 건 아닌지 같은 의문과 아쉬움을 항상 갖고 있었다. 비전공자 입장에서 주변에 조언을 구할 곳도 마땅치 않았다. 체계적인 시스템과 커리큘럼을 통해 영리하게 학습할 필요성을 느꼈고, 자소서나 그간의 학습 자취에 중점을 둔 차별화된 선발 방식에 매력을 느껴 데브코스에 지원하게 되었다. 워낙 수료생 분들의 만족도가 높은 것도 큰 이유였다. 서류 7월 초부터 한 달간의 서류 지원 기간이 시작되었다. 선택 항목을 포함에 약 9개의 문항이 존재했다. 처음에는 사실 큰 비중을 두어 생각하지 않았다. 초고를 제출한 후 이전 기수의 후기들을 찾아봤는데, 어..? 이럼 안되겠는데?라는..

[리액트] 쇼핑몰 클론코딩하기 (얼렁뚱땅 상점) [내부링크]

1. 들어가며 드림코딩 리액트 강의의 마지막 섹션이자, 이전에 진행하였던 유튜브 클론코딩과 이어지는 프로젝트이다. 유튜브 프로젝트에서는 외부 API나 기본적인 리액트의 구조를 익힐 수 있었다면, 본 프로젝트에서는 Firebase를 통한 DB, 인증, 클라우딩까지 영역을 확장하였다. 전체적인 스타일링보다는, 단계적으로 개발이 진행되는 과정과 기능들을 어떤 로직으로, 왜 그렇게 구현했는지를 이해하며 따라가려고 노력했다. 2. 기능 구현해야할 주요 기능은 크게 네 가지로 나뉘어진다. 디테일한 로직이나 코드는 생략하겠음. 로고, 로그인, 장바구니 갯수 등의 정보를 담고 있는 헤더 상품 리스트를 확인할 수 있는 메인페이지 제품들의 상세 정보와 장바구니에 추가할 수 있는 제품 상세페이지 담아 놓은 제품들을 확인, ..

[월간회고] 2023년 8월 (230801 ~ 230831) [내부링크]

0. 교내 창업동아리에서 진행하는 1박 2일 캠프를 막 다녀온 참이다. 사실 숙소가 너무 좋길래, 면접까지 끝났고 좀 쉬고 올까해서 참여하게 되었다. 근데 웬 걸? 발표자료 준비하니 새벽 두 시다. 개발이 거의 끝난 챗팟을 들고 갔는데, 비즈니스 모델 관련하여 고도화도 많이 이루어졌고 피드백들도 받을 수 있어서 굉장히 유익한 시간이었다고 생각한다. 1등해서 대상 받음! 별 거 없지만 기분은 좋았다. 1. 8월을 한 단어로 정의하면 '데브코스'다. 초순엔 서류를 준비하고, 중순엔 코테를, 말엔 면접을 준비했다. 한 달간은 이것만 보고 달린 것 같다. 준비 과정 자체만으로도 큰 경험이 되었다 생각하고, 자세한 내용은 다음 주 발표가 나면 회고로 작성할 예정이다. 열심히 준비한만큼 좋은 결과가 있었으면 좋겠다..

[자바스크립트] ES6 (2) : Promise [내부링크]

이전 글에서 ES6의 변수선언 방법, 화살표 함수, Rest 파라미터, Spread / Destructuring에 대해 정리했었다. 이외에도 템플릿/강화객체 리터럴, 클래스, 모듈, 고차함수 등의 변경점이 있었지만 이 글에서는 Promise에 대해 정리해보려 한다. Promise Promise는 자바스크립트에서 비동기 작업을 처리하기 위해 성공 혹은 실패 상태를 나타내는 객체이다. 이전부터 라이브러리를 통해 구현되었지만, ES6에서 기본 문법으로 지원하게 되었다. new Promise()를 통해 생성하거나, Async/Await를 통해 암시적으로 Promise를 반환핟을 수 있다. 선언 const myFirstPromise = new Promise((resolve, reject) => { // 비동기 코..

[네트워크] TCP/IP와 OSI 계층 [내부링크]

올해 초 CS 전공지식 도서를 읽으면서 TCP/IP 계층 모델과 OSI에 대해 정리한 적이 있다. 아무래도 책 자체가 전반적인 전문지식에 대한 요약본이다 보니, 다소 얕게 배우고 넘어갔던 기억이 있다. 워낙 중요한 내용들이기도 하고, 좀 더 정확하게 알고 있는 게 좋을 듯 하여 다시 정리해보려 한다. 선수지식 IP (인터넷 프로토콜) 지정한 IP주소에 데이터의 조각들을 패킷이라는 단위로 목적지까지 전송하는 역할을 하는 규약. 전송에만 목적을 두기 때문에 빠르지만 도중에 패킷이 유실되거나 순서가 꼬이는 문제가 발생할 수 있다. 이를 비연결성, 비신뢰성이라고 한다. TCP (전송제어 프로토콜) 패킷 데이터의 전달을 보증하고, 보낸 순서대로 받게 해준다. 도착한 패킷들을 점검하여 문제가 있는 부분은 재요청하는..

[웹/브라우저] SSR과 CSR [내부링크]

렌더링이란 HTML, CSS JS 파일을 수신하고 파싱하여 결과물을 화면에 그려내는 과정을 말한다. 자세한 단계는 브라우저 동작 원리 글에서 다룬 적이 있는데, 바로 이 렌더링이 발생하는 주체(시점)에 따라 SSR과 CSR이 구분된다. SSR (Server-side Rendering) 사용자가 서버에 페이지를 요청하면, 서버 측에서 HTML문서 내의 내용들을 렌더링 준비를 끝마친 상태(Ready to Render)로 클라이언트에 전달하는 방식을 말한다. 클라이언트에 전달되는 순간 HTML은 즉시 렌더링되며, 자바스크립트가 읽히기 전이기 때문에 사이트 자체는 조작할 수 없는 상태가 된다. (just-viewable) 이후에 클라이언트가 자바스크립트 파일을 수신하고, 리액트 등의 프레임워크를 통해 컴파일을 ..

[자바스크립트] 예외처리 (Exception handling) [내부링크]

에러와 예외 프로그래밍 간 우리는 항상 에러(Error)와 마주한다. 잘못된 문법을 사용했거나, 사전에 정의되지 않은 메서드를 사용하는 등의 경우에 발생한다. 예외(Exception)는 그 상황 자체를 가리키는 조금 다른 개념이지만, 일반적으로 혼용하여 사용하는 경우가 많다. 이들은 프로그램의 작동을 멈추게 하고, 다음 코드로 넘어갈 수 없게 된다. 따라서 이러한 에러나 예외가 발생하지 않도록 미리 방지할 필요가 있고, 발생했음에도 이상 없이 원래의 코드가 작동될 수 있는 예외처리가 필요하다. 예외처리 try / catch 자바스크립트를 포함한 많은 언어에서 제공하는 일반적인 예외처리 구문이다. try{}를 통해 실행시킬 코드를 작성하고, 실행 중 에러가 발생하면 catch{}를 통해 로그를 확인, 처리..

[월간회고] 2023년 7월 (230701 ~ 230731) [내부링크]

변동사항과 데브코스 7월이 지나갔고, 계획에 변동사항이 조금 생겼다. 표면적으로는 계획만 바뀐것 같지만 학습 방식이 바뀌었다. 지난 반기회고에서도 말했듯 지금 가장 중요한 우선순위는 부트캠프이기에, 이에 대비한 학습을 진행하고 있는 중이다. 전반적인 웹부터 자바스크립트와 리액트의 기본 개념과 원리들을 꼼꼼히 정리하며 면접에 대비하고 있다. 또한 코딩테스트도 프로그래머스에 있는 2레벨들을 모조리 정복 중에 있다. 8월 중순에 프로그래머스 데브코스 코딩테스트가 예정되어 있는데, 하루에 8~10문제씩 풀면 전부 풀 수 있을 듯 하다. 사실 알고리즘 공부를 하며 간간히 코테를 풀 땐 2레벨이 굉장히 멀게 느껴졌는데, 막상 부딪혀 차례대로 문제를 풀다 보니 꽤 할만 하다는 생각을 했다. 이 준비 과정 자체도 많은..

[자바스크립트] Iteration과 Iterable과 Iterator [내부링크]

객체나 배열을 순회하는 메서드를 적용하고자 할 때, TypeError : X is not iterable과 같은 오류를 마주한 적이 있을 것이다. 정확히 무엇을 의미하는지, 어느 객체 유형에 알맞은 메서드인지 정리하려 한다. Iteration 프로그래밍에서 Iteration이란 특정 작업을 반복적으로 수행하는 '행위'를 말한다. 데이터 구조의 각 요소를 순회하거나, 특정 작업을 반복 실행시킨다. 또한 Iteration이 가능한 객체 구조들을 Iterable(반복가능)하다고 말한다. 잠재적으로 반복이 가능함을 형용사로 부여하는 것이다. 자바스크립트의 배열(Array), 문자열(String), 집합(Set), 맵(Map)이 이에 해당한다. 객체(Object)는 반복이 불가능하고, 프로퍼티를 열거(enumer..

[자바스크립트] Webpack과 Babel [내부링크]

채용 우대사항에 빠지지 않고 보이는 Webpack, Babel 사용이 능숙한 분. CRA를 사용해 프로젝트를 진행해 왔었기에, JS 신문법을 이전 버전의 문법으로 번역해준다거나 (Babel), 모듈로 이루어진 파일들을 압축해준다(Webpack) 정도로만 어렴풋이 알고있었다. 이들을 확실히 이해하고 스스로 활용할 수 있게 하기 위해 정리해 놓으려 한다. Webpack 웹팩이란 웹팩(Webpack)은 모던 자바스크립트 (ES6+) 애플리케이션을 위한 모듈 번들러이다. 모듈이란 특정 기능을 갖는 작은 코드 단위를 의미한다. 함수나 컴포넌트가 담겨 있는 js파일부터, 이미지, 동영상 등을 모두 포괄하는 개념이다. 이 자원들을 하나의 파일로 병합, 압축하는 과정을 번들링이라고 한다. 기존 모듈의 문제점과 표준화 ..

[MDN] HTTP (2) : CORS [내부링크]

Mdn web docs - CORS를 통해 학습한 내용을 정리한 글입니다. 이전 글과 이어집니다. CORS CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)란 HTTP 헤더를 이용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처(도메인, 프로토콜, 포트)의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 기본적으로 브라우저는 스크립트에서 시작한 교차 요청을 제한한다. 이러한 규약을 동일 출처 정책이라 하며, XMLHttpRequest나 Fetch API가 이를 따른다. 이 외에도 CSS 내에서 @font-face를 통해 사용하는 웹 폰트나, WebGL 등이 있다. 다른 출처의 리소스를 정상적으로 받아오기 위해서는, 그 출처에서 올바른..

[MDN] HTTP (1) : 발전 흐름과 연결 관리 [내부링크]

Mdn web docs - HTTP를 통해 학습한 내용을 정리한 글입니다. 개요 HTTP(하이퍼텍스트 전송 프로토콜)은 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층 프로토콜이다. 클라이언트의 요청에 따라 통신하는 클라이언트-서버 모델을 따르며, 이전 요청의 세션 상태를 유지하지 않는 Stateless 프로토콜이다. * 애플리케이션 계층 통신 네트워크에서 호스트가 사용하는 트로토콜과 인터페이스 방법을 지정하는 추상화 계층 * 프로토콜 컴퓨터 내부 혹은 컴퓨터 간 데이터의 교환 방식을 정의하는 규칙 체계 집합 * Stateless 동일한 연결 상에서 발생한 두 개의 요청 사이에 연결고리가 없음을 말한다. 쿠키를 통해 동일한 상태를 공유하는 세션을 생성한할 수 있다. 프록시 브라우저(클..

[리액트] 유튜브 클론코딩하기 [내부링크]

들어가며 챗팟 프로젝트를 끝내고, 컴포넌트의 관리와 API의 활용법에 대해 자세히 알고싶어 엘리 쌤의 리액트 강의를 수강하게 되었다. 그 중 거의 막바지 프로젝트로 진행되는 유튜브 프로젝트이다. 본 프로젝트에서 배운 점이 많아 정리해놓으려 한다. 큼직한 단계마다 구현이 완성된 모습을 보여주고, 다음 영상에서는 해당 구현에 대한 해설이 있는 방식으로 진행되었다. 나는 그 사이에 직접 구현해보고, 해설을 통해 개선하였다. 프로젝트를 통해 배운 것 파일관리 /public /mock-data : 유튜브 API mock data /src /api : 유튜브 API 요청과 관련된 로직 파일 /components : 사용한 컴포넌트들 /context : API 요청을 통해 받아온 동영상 데이터를 모든 컴포넌트에서 활..

[웹/브라우저] 브라우저 동작원리 [내부링크]

네이버 D2의 브라우저는 어떻게 동작하는가? 와 Mdn web docs의 글을 학습한 후 정리한 글입니다. 브라우저의 주 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 렌더링하는 것이다. 보통 HTML 문서이며, PDF나 이미지 형태의 파일도 표현할 수 있다. 브라우저는 주소 표시줄, 이전/다음 페이지 등으로 이루어진 사용자 인터페이스 (프레임이라 생각해도 될 듯), 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 브라우저 엔진, 요청한 콘텐츠를 뷰포트에 출력하는 렌더링 엔진, 백엔드에서 실행되는 통신, 이를 위한 백엔드 UI, 자바스크립트 해석기, 자원 저장소로 구성된다. 브라우저의 전반적인 동작 흐름은 탐색 > 응답 > 파싱 > 렌더로 이루어진다. 1. 탐색 1-1. DNS 조회 웹..

[반기회고] 2023년 상반기 (230101 ~ 230630) [내부링크]

헉. 벌써 2023년의 절반이 지나갔다. 6월은 눈코 뜰 새 없이 지나갔고, 약 한 달간의 공백과 2분기 회고를 통합하여 작성하려 한다. 0. 톺아보기 1월에 JS 공부를 끝내고, 2월엔 약 3주 간의 토이프로젝트와 함께 서울도 다녀왔다. 새학기가 시작되고 수업과 리액트 공부를 병행하면서 본전공, 부전공 두 개의 졸작도 끝냈다. 6월엔 기말 준비와, 소프티어 및 부스트캠프 입과 시험을 준비했더니 벌써 7월이다. 돌아보면 상반기의 굵직한 계획들은 잘 이행된 것 같지만, 좀 더 밀도 있게 보낼 수 있었을 것 같기도 하다. 누군들 생각은 못할까.. 1. 프로젝트 어느 정도 눈에 보이는 결과물을 내고 싶었다. 바닐라 자바스크립트를 이용한 PBW 개인프로젝트와 리액트를 이용한 챗팟 팀프로젝트를 진행했다. 확실히 ..

[ReactJS] 메뉴 고민 즉시 해결, 챗팟(Chatpot) [내부링크]

1. 프로젝트 개요 소개 ChatGPT API 기반 사용자 맞춤형 레시피 추천 서비스 챗팟 (Chatpot) 기간 2023.05.07 ~ 2023.06.27 팀원 재웅(FE), 현도(BE) 스택 (FE) ReactJS (Redux, Router, Styled-components, PWA) (BE) NodeJS, OpenAI API, AWS 주소 https://chatpot.co.kr/ GitHub - w00ngja/ChatPot: (ReactJS) Recipe Recommendation Web Service based on ChatGPT API (ReactJS) Recipe Recommendation Web Service based on ChatGPT API - GitHub - w00ngja/ChatPo..

[OS] 프로세스 레지던트 셋과 프로세스 스케줄링 (Resident Set, Process Scheduling) [내부링크]

레지전트 셋이란, 메모리에 들어와있는 프로세스 페이지 정보들의 집합을 말한다. 또한 페이지의 갯수를 레지던트 셋 사이즈라 하는데, 이 사이즈를 규정하는 서로 다른 방법에 대해 알아보려 한다. Process Resident Set 레지던트 셋 사이즈를 결정하는 기준 Fixed allocation : 할당해주는 메모리 프레임의 수를 고정시킨다. 페이지 폴트가 발생하여 제거될 페이지를 선별해야 할 때, 자신이 갖고 있는 페이지 중에서 선택하는 Local Scope 영역에서 Replacement가 처리된다. Variable allocation : 할당해주는 메모리 프레임의 수를 유동적으로 결정한다. 해당 방법은 Replacement 처리 시 Local Scope와 Global Scope 영역 모두에서 사용된다...

[자바스크립트] 비동기 처리와 처리 순서 [내부링크]

동기 처리 자바스크립트는 기본적으로 싱글 스레드 기반의 언어이다. 따라서 하나의 호출 스택만을 이용해 한 번에 한 가지의 일만 처리할 수 있다. 코드들은 순차적으로 실행되며, 이전 작업이 완료되어야 다음 작업으로 넘어간다. 이를 동기(Synchronomous)처리라 한다. 비동기 처리 반대로 비동기(Asynchromonous) 처리란, 특정 코드의 연산이 끝나지 않아도 다음 코드를 처리할 수 있는 방식을 말한다. 자바스크립트에는 fetch()를 통한 HTTP 요청이나, setTimeout을 통한 타이머 구현같은 다양한 비동기 함수가 존재한다. 이러한 처리들이 동기적으로 처리된다면 이용자 입장에서는 마우스를 집어던질지도 모른다. 따라서 비동기적인 호출이 있을 때 작업을 시작하긴 하지만, 즉시 복귀하여 다른..

[알고리즘] 동적 프로그래밍 (자바스크립트) [내부링크]

DP 동적 프로그래밍이란 복잡한 문제를 더 간단한 하위 문제의 모음으로 쪼갠 후, 각 하위 문제들을 풀어 그 답을 저장하여 문제를 해결하는 문제 해결 방식을 말한다. 적용 가능한 문제 영역이 그리 넓지 않지만, 적용 가능한 경우에는 성능에 있어 아주 큰 차이를 가져온다. 두 가지 특성 Overlapping Subproblems : 한 문제를 더 작은 문제들로 나눌 수 있고, 그 조각들 중 일부가 재활용 가능해야 한다. Optimal Substructure : 하위 문제의 최적 해답을 통하여 더 큰 범주를 갖는 문제의 최적 해답을 구성할 수 있어야 한다. 재귀를 통한 구현 : 피보나치 수열 수열의 첫 번째 숫자와 두 번째 숫자는 1이며, 그 밖의 경우 Fib(n) = Fib(n-1) + FIb(n-2)이다..

[알고리즘] 다익스트라 최단 경로 알고리즘 (자바스크립트) [내부링크]

SLAM 과목에서 이동체의 경로를 맵핑할 때 스쳐 배웠던 경험이 있다. 다익스트라 알고리즘은 두 정점 사이에 존재하는 최단 경로를 찾는 알고리즘이다. 그래프 구조로 이루어져 있고, 이진 힙을 사용한 우선순위 큐로 작동한다. 실생활에서 굉장히 빈번하게 사용되고 있는 알고리즘이다. 다익스트라 알고리즘 가중 그래프 다익스트라 알고리즘을 구현하기 전에 가중치 그래프를 먼저 소개하려 한다. 그래프의 정점들에 대해 가중치를 부여해 경로의 상대적인 길이를 알 수 있다. 일반적으로 구현했던 그래프의 연결 관계를 담는 키-값 객체에서 가중치가 추가로 매겨지게 된다. 시작점을 지정, 방문하여 다음 이동할 노드를 결정해야 한다. 이 때, 가장 작은 거리 가중치를 가진 노드를 선택한다. 다음 노드로 이동한 후, 그 노드의 인..

[OS] 다계층 페이지 테이블과 TLB, 페이지 교체 작업 [내부링크]

지난 시간 페이징 방식에 기반한 가상 메모리 기술인 디멘드 페이징에 대하여 학습하였다. 해당 방법론은 프로세스 크기에 비례하여 페이지 테이블 또한 커지는 문제가 발생하였는데, 이를 해결할 방법을 학습하고자 한다. 다계층 페이지 테이블 페이지 테이블 크기 문제를 해결하는 방법 4Kbyte 페이지에 4바이트 엔트리가 1,024개 담긴다. 코드가 많아지면 그에 따라 페이지 테이블을 담고 있는 엔트리도 증가하게 되고, 하나의 페이지에 담기지 않게 된다. 이 많은 양의 엔트리들을 페이지에 논리적으로 분배하기 위한 방법이 존재한다. 첫 번째는 멀티 레벨 페이지 테이블로, 계층적 특성(Hierarchical)을 가진다. 두 번째 방법으로는 Inverted 페이지 테이블이 있는데 성능 이슈로 요즘은 잘 사용하지 않는다..

[알고리즘] 그래프 순회 (자바스크립트) [내부링크]

그래프 순회와 노드 탐색 그래프 순회를 구현하기 위해서는 일반적인 트리 순회와 달리 루트가 존재하지 않기 때문에, 시작점을 정해주어야 한다. 또한 여러 순서가 존재할 수 있고, 이미 방문했던 노드를 다시 방문하거나 뒤로 돌아가야 하는 경우가 있을 수 있다. 해당 차이점을 제외하고는 트리 순회에서와 마찬가지로 BFS, DFS, 재귀형과 순환형을 통해 구현한다. 웹 크롤링, 최단거리 추천, 미로찾기, GPS 네비게이션 등에서 그래프 순회가 사용된다. 실생활과 굉장히 밀접한 알고리즘이다. 깊이 우선 그래프 순회 (DFS) 이전에 학습했던 트리 구조에서의 깊이 우선 그래프 순회를 간단히 정리하자면, 형제트리를 방문하기 전에 자식 노드를 먼저 방문하는 것을 말한다. 유방향 그래프를 기준 깊이 우선 그래프에서는 ..

[주간회고] 2023년 5월 셋째 주 (230515 ~ 230521) [내부링크]

1. 챗팟 졸작으로 진행되는 프로젝트로 개발이 한창이다. 최대한 이번 달 내로 마무리지을 예정. 완성되면 블로그와 리드미에 작성할 듯. 반응형 웹앱으로 개발 중인데, 웹 화면에서는 너무 휑해보인다. 앱 같기도 하고. 웹에서 별개의 인트로 페이지를 만들지, 레이아웃을 달리 할지 고민 중에 있다. 2. 알고리즘 알고리즘도 다음 주면 커리큘럼이 마무리된다. 그 후 JS 메서드를 한 번 복습 겸 정리하고, 제대로 코테 풀이에 들어갈 예정이다.

[OS] 가상 메모리와 디멘드 페이징 (Virtual Memory, Demand Paging) [내부링크]

가상 메모리 페이징 이후의 메모리 관리 방법으로, 프로세스의 일부만 물리적 메모리에 저장하고, 나머지는 가상 메모리에 저장하여 필요할 때만 호출하여 사용하는 동적 메모리 관리법을 말한다. 보조기억장치에 가상 메모리 공간을 만들어, 프로세스 원본을 저장하고 직접적인 실행에 필요한 Instruction들만 메인메모리에서 실행시키켜 공간 효율 측면에서 굉장히 뛰어나다. 메모리 분류 실제 메모리 (Real memory) 주기억장치 주소 정보 (=real address, physical address, absolute address) 가상 메모리 (Virtual memory) 보조기억장치 가장 주소 공간 (=logical address, virtual address) 그러나 처리 과정에서 수시로 보조기억장치에 접..

[OS] 주소 바인딩과 페이징, 세그먼테이션 (Address Binding, Paging and Segmentation) [내부링크]

주소 바인딩 주소 바인딩이란, Instruction이나 Data의 Physical Address를 결정하는 것을 말한다. 바인딩이 일어나는 시점에 따라 Compile Binding, Loading Binding, Execute Binding으로 분류할 수 있다. Compile Binding 프로그램 작성 후 소스코드를 바이너리코드로 변환하는 시점에 바인딩하는 것을 말한다. 프로세스 시작 지점($BA, 상대주소)을 100으로 지정해주고 컴파일 스캔 과정에서 계산한 코드의 길이에 따라 다음 변수의 절대 주소를 지정해준다. (I -> $BA + 406) Code Relocation 시 충돌로 인하여 명령어들이 꼬이게 된다. Load Time 실제로 메인 메모리에 데이터를 넣는 로딩 과정에서, 운영체제가 물리적..

[알고리즘] 그래프 (자바스크립트) [내부링크]

그래프 소개 그래프는 유한하고 변할 수 있는 꼭지점이나 노드, 점들의 집합으로 이루어진 자료구조이다. 넓게 보면 트리 구조에 속하지만, 시작점이나 진입점들이 존재하지 않고 오로지 같은 레벨의 노드만 존재한다. 꼭지점 집합에 순서 규칙이 존재하는 경우 유방향 그래프, 존재하지 않는 경우 (양방 통행이 가능한 경우) 무방향 그래프로 분류한다. 또한 연결 관계에 가중치를 부여할 수도 있다. 그래프는 노드와 연결관계로 얽혀있는 메쉬 형태 구조라고 해도 될 듯 하다. 또한 기존에 칭하던 노드를 "Vertex (정점)"으로, 노드 간의 연결관계를 "Edge (간선)"이라고 부른다. 용례 SNS 관계망 지도 기능 : 방향 안내, 위치, 길 찾기 등 웹 라우팅 : 인터넷 생태계나, 특정 웹사이트의 연결 관계 추천 알고..

[알고리즘] 해쉬 테이블 (자바스크립트) [내부링크]

해쉬 테이블은 키-값 쌍을 저장하는데 사용하는 알고리즘으로, 값을 찾거나 (탐색), 추가하거나 (삽입), 제거하는 처리 속도가 굉장히 빠르다는 특징이 있다. 순서가 있고 연속적인 데이터라면 배열을, 그 밖의 경우 해쉬 테이블(딕셔너리, 객체 등)을 사용하면 된다. 굉장히 빈번히 사용되는 알고리즘으로 많은 프로그래밍 언어들에 해당 기능이 자체적으로 내장되어 있지만, 본 섹션에서는 해쉬 테이블의 알고리즘 구조를 이해하고 직접 구현해보고자 한다. 해쉬 함수 입력받은 키에 따라 무작위 인덱스를 부여하고, 배열에 넣어 데이터를 관리해주는 단방향 함수를 말한다. 이를 통해 String 형태로 이루어진 키를 이용해 원하는 값을 찾을 수 있게 된다. 좋은 함수를 만드는 기준 탐색, 삽입, 제거 등의 데이터 처리 속도가..

[알고리즘] 이진 힙과 우선순위 큐 (자바스크립트) [내부링크]

이진 힙 (Binary Heap) 기본적으로 힙은 트리 구조의 한 종류이다. 이진 힙 외에도 굉장히 많은 힙 알고리즘이 존재한다. 이진 힙은 최대 힙, 최소 힙으로 구분할 수 있다. 힙 구조는 그래프 순회를 위한 우선순위 큐 (Priority Queue) 구현에 주로 사용된다. 최대 이진 힙에서는 부모 노드가 항상 자식 노드보다 큰 값을 가진다. 루트부터 노드를 타고 내려갈수록 더 작은 값을 갖는다는 뜻이다. 최소 이진 힙에서는 그 반대로, 부모 노드가 언제나 좌우의 자식 노드보다 작은 값을 갖는다. 오름차순, 내림차순으로 생각해도 될 듯 그럼 이진 탐색 트리(BST)와 비슷한 것 아닌가? 할 수 있곘지만, 이진 탐색 트리와 다르게 좌우 자식 노드의 크기 순서를 고려하지 않는다. 힙 정렬 트리 구조를 갖..

[알고리즘] 트리 순회 : 너비 우선 탐색과 깊이 우선 탐색 (자바스크립트) [내부링크]

트리 순회 모든 노드를 한 번씩 도는 방법. 앞서 학습한 이진 탐색 트리 뿐 아니라, 모든 트리 구조에서 사용가능한 순회 알고리즘이다. 다른 섹션들보다 재귀를 더 많이 사용할 예정. 너비 우선 탐색 (BFS) 요소들을 거쳐가는 일반적인 순서를 기준으로 탐색 방식을 구분하였다. CSS Flexbox의 direction을 row로 주거나, column으로 주는 것도 이와 유사하다고 볼 수 있을 듯 하다. 너비 우선 탐색법(BFS)은 최상단 노드(Root)부터 가로 횡을 기준으로 수평으로 한 줄씩 내려가며 순회하는 방식이다. 구현 선입선출 구조를 갖는 큐 방식을 통해 BFS를 구현한다. 배열이나 리스트에서 Push / Shift 메서드를 사용하면 된다. 큐는 한 줄에 존재하는 노드를 담아놓는 버퍼 역할을 하며..

[OS] 메모리 관리와 가상 주소 공간 (Memory Management, Virtual Address Space) [내부링크]

메모리 관리 방식 메모리 관리의 역할은 크게 두 가지로 나뉘어진다. 프로세스에게 메모리를 분배하는 메모리 할당, 처리 중인 프로세스들의 메모리를 관리하는 메모리 보호이다. Relocation 프로세스가 특정 번지의 메모리 주소에 할당되어 있을 때 주소를 옮겨주는 것을 말한다. 메모리 부족 현상을 해결하기 위해 주기억장치에 있던 프로세스를 잠시 보조기억장치로 옮겨 놓는 Swapping이나 메모리 공간을 조각모음하는 Compaction 등의 처리 과정에서 발생한다. 메모리 할당 고정분할식 메모리 할당 한정된 크기의 메인 메모리 공간을 여러 프로세스들에게 분배해주는 방법으로서, 초기 연구된 메모리 할당 방식이다. 파티션을 분할해놓고 프로세스가 생성되면 빈 파티션 중 하나를 부여해준다. 인덱싱 측면에서 유용하며..

[OS] 디바이스 드라이버와 RAID [내부링크]

운영체제에서 입출력을 관리하는 기능은 커널 I/O Subsystem과 디바이스 드라이버로 나눌 수 있다. 전자는 입출력 관리의 상위 기능을, 후자는 전자의 지시를 받아 직접 하드웨어를 제어하며 입출력을 수행한다. 디바이스 드라이버 초기화 인터페이스 : 드라이버는 모듈 형식으로 구성되는데, 모듈을 생성할 때나 갱신할 때 Init 함수가 호출된다. 파일 시스템 인터페이스 : Open, Read, Write, Release .. 하드웨어 인터페이스 : Inturrpt, Recieve .. 장치와 커널 간 스위치 테이블을 통해 데이터를 교환하는데 Character Driver의 경우 chrdevs[] 테이블을, Block Driver의 경우 blkdevs[] 테이블을 이용한다. 초기화 시 register함수를 ..

[알고리즘] 이진 탐색 트리 (자바스크립트) [내부링크]

1. 트리 자료 구조 트리 트리란 연결 리스트와 같이 노드로 이루어진 데이터 구조를 말한다. 또한 노드 간 Branches들을 통해 연결되어 부모-자식 관계를 갖는다. 배열과 연결 리스트는 선형적인 특성을 갖지만, 트리는 비선형성을 갖고 갈 수 있는 경로가 여러 갈래로 나뉘어 진다. 트리 구조에서 노드는 부모-자식 관계에 따라 자식인 노드만을 가리킬 수 있다. *역행할 수 없으며, 형제 노드 또한 가리킬 수 없다. 하나의 출발점(Root)을 갖는다. 자식 노드를 갖지 않는 끝단의 노드를 리프(Leaf)라 한다. 노드에는 정수 뿐 아니라, 문자열이나 배열 등 다양한 형태의 데이터가 들어올 수 있다. 예시 HTML DOM은 하위 요소로서 자식을 중첩해서 가지고 있는 형태의 대표적인 트리 구조이다. 외에도 개..

[알고리즘] 스택과 큐 (자바스크립트) [내부링크]

1. 스택 스택이란 후입선출 원칙을 따르는 데이터 집합을 말한다. 재귀 파트에서의 호출 스택으로 사례를 접해본 적이 있다. 외에도 Undo / Redo Funtion 혹은 방문기록 라우팅 등에 스택 알고리즘이 사용된다. 배열에서는 Push / Pop 혹은 Shift / Unshift 메서드를 통해 스택을 구현할 수 있다. 맨 앞의 요소를 제어할지, 맨 마지막 요소를 제어할지의 차이이다. 연산도 측면에서는 맨 앞 요소를 변경할 경우 뒤따르는 모든 요소를 새로 배정해주어야 하기 때문에 Shift / Unshft가 열세하다. 그렇기 때문에 배열로 스택을 구현하는 것은 가능은 하지만, 효율 측면에 있어 선호하는 방법은 아니다. 연결 리스트를 통한 구현 단일 연결 리스트와 유사하다. 단, 스택에서의 메서드는 상수..

[알고리즘] 이중 연결 리스트 (자바스크립트) [내부링크]

단일 연결 리스트 글과 이어집니다. 1. 이중 연결 리스트 단일 연결 리스트에서 추가적인 포인터가 하나 더 붙는게 다지만, 메서드 구현 시 많은 추가 코드를 필요로 한다. 따라서 지난 학습 때 구현했던 메서드들을 비교해보며 구현할 예정이다. 인덱스가 없고, 노드의 집합으로 이루어졌다는 연결 리스트의 특징을 여전히 갖고 있다. 추가적으로, 각 노드는 이전의 노드를 가리키는 prev 속성을 추가로 갖는다. 그러면 루프를 통해 Head부터 타고 들어갈 필요 없이, Tail부터 연산을 시작할 수 있으니 Reverse()같은 메서드를 구현하기는 더 쉬워질 것 같다. 노드 클래스 셋업 Node - val, next, prev DLL - head, tail, length class Node { constructor(..

[주간회고] 2023년 5월 첫째 주 (230501 ~ 230507) [내부링크]

1. 2분기의 첫 번째 주간. 1년 중 내가 가장 좋아하는 시즌이다. 2. 요즘 컨퍼런스나 회고들을 간간이 보고 드는 생각인데, 아직 전문적인 내용들에 대해선 이해가 쉽지 않다. 물론 실무다운 실무를 아직 접해보지 못해서 그렇겠지만, 구현이나 기술에 발목 잡히지 않을 정도의 궤도로 올려 놓는 것이 급선무인 듯 하다. 당장의 상황에서는 리액트가 이에 해당하고, 더 나아가 타입스크립트와 NextJS도 탄탄하게 준비해야 겠다고 생각한다. 3. 다음 주 중으로 네이버 부스트캠프와 현대차 소프티어 캠프 지원 기간이다. 최종까지 가지 못하더라도 자소서나 실전 코테 경험을 쌓으려 하고 있다. 4. 졸작 프로젝트도 본격적으로 시작됐다. 디자인과 레이아웃에 대한 윤곽이 어느 정도 잡혔고, 열심히 만드는 중. 개발 로그를..

[알고리즘] 단일 연결 리스트 (자바스크립트) [내부링크]

1. 단일 연결 리스트 (Single Linked List) 연결 리스트란 데이터를 저장하는 자료구조로, 배열과 같이 순서에 따라 다수의 데이터를 담는다. 그러나 가장 큰 차이점이 있다면, 요소 각각의 인덱스가 존재하지 않는다. 튜플과 유사한 듯. 연결 리스트에서는 각각으 요소들을 노드(Node)라고 부른다. 각각의 노드는 문자열 혹은 숫자와 같은 하나의 데이터 엘리먼트를 저장한다. 추가로 다음 노드를 가리키는 정보(포인터, Pointer)를 저장하고 있어야 하며, 다음 노드가 더 이상 없을 경우 Null을 저장하게 된다. 연결 리스트에는 세 가지 속성이 존재하는데, 가장 앞단 노드인 헤드(Head), 말단 노드인 테일(Tail), 리스트의 길이(Length)를 통해 데이터를 관리한다. 인덱스가 존재하지..

[OS] 디스크 스케쥴링 (Disk Scheduling) [내부링크]

Disk Scheduling 일반적인 입출력 장치 스케쥴링 알고리즘은 '선입선출'이나, 디스크 스케쥴링은 이를 따르지 않음 디스크 구조 디스크는 크기가 큰 순으로 표면(Surface) - 트랙(Track) - 섹터(Sector)로 구성되어 있음. 표면 하나당 20 ~ 1,500개의 트랙이 존재하며, 양면을 모두 사용함. 트랙의 가장 바깥쪽이 0번으로 넘버링되며, 안쪽으로 들어갈 때마다 증가. y축을 기준으로 봤을 때 다른 표면에서 동일한 트랙 넘버를 갖고 쌓이는 집합을 실린더(Cylinder)라고 함. 실린더의 수는 트랙의 갯수와 동일. 한 섹터 영역이 저장될 때마다 섹터의 끝에서 저장된 데이터들에 대한 CheckSum - Parity 연산이 이루어짐. 이는 디스크를 접근하며 주기적으로 오류를 검사할 때..

[OS] 인터럽트 처리와 입출력 제어 (Interrupt, I/O Control) [내부링크]

1. Interrupt 디바이스에 비동기적인 이벤트가 발생했을 때, 처리를 위해 운영체제(커널)에 부탁하는 것을 인터럽트라 한다. 인터럽트는 커널에 접근하여 구현된 함수를 실행하게끔 하는 Kernel entry point 중 한 가지 방식이며, 이외에도 트랩(Trap, Software Interrupt), 시스템콜(System call)이 존재한다. 비동기적이라 함은 이벤트가 발생하는 시점이 미리 정해지지 않은 경우를 말한다. Interrupt Handling 장치들은 PIC(Programmable Interrupt Controller)를 거쳐 CPU로 신호를 전송하고, 이를 커널 스택에 저장 후 유저 모드에서 모드 체인지를 통해 커널에 진입한다. 인터럽트 처리 과정 유저 모드에서 인터럽트 발생 시, C..

[알고리즘] 기수정렬 (자바스크립트) [내부링크]

앞서 학습한 버블정렬, 선택정렬, 삽입정렬, 합병정렬, 퀵정렬은 '비교 정렬' 그룹에 속함. 주어진 시간에 두 가지 요소를 비교하는 방식. 이러한 비교 정렬은 한계점이 존재하며, 최선의 경우 O(n log n)의 복잡도를 갖는다 (합병정렬, 퀵정렬) 기수정렬 (Radix Sort) 비교를 수행하지 않는 특별한 정렬 알고리즘으로, 숫자 크기에 대한 정보를 이진수로 인코딩하여 정렬한다. 작동방식 배열 요소의 0의 자리 수부터 분리한다. 모든 값들은 (0-9) 사이로 레이블링되고, 이를 0 레이블의 먼저 들어온 값부터 꺼내 배열한다. 자릿수를 좌측으로 옮겨가며 레이블링을 반복하면, 정렬이 완료된다. 헬퍼함수 1. getDigit(원하는 숫자 인덱스 찾기) : 원하는 숫자가 어느 자릿수 인덱스에 위치하는지 반환..

[알고리즘] 퀵정렬 (자바스크립트) [내부링크]

퀵 정렬 (Quick Sort) 기본적으로 배열 요소 갯수가 0이나 1개가 될 때까지 쪼개는 합병정렬과 유사하다. 여기서 피벗포인트라 부르는 단일 요소를 선택하여 수행하는 것이 차이점이다. 중앙점이 아닌, 이 피벗포인트를 기준으로 배열을 한 번 순회하여 기준보다 작은 수를 왼쪽 그룹으로, 큰 수를 오른쪽 그룹으로 이동시킨다. 로직을 이해하고 구현하는 데에 난이도가 좀 있는.. 알고리즘이다. 1. 피벗 헬퍼 앞선 합병정렬에서 합병로직을 먼저 구현했던 것처럼, 퀵정렬에서도 피벗 헬퍼를 통해 퀵정렬에 사용할 메서드를 모듈화해준다. 피벗 헬퍼는 주어진 배열 요소를 피벗 포인트로 지정하여 배열 속 요소를 재배치한다. 좌/우 배열 내의 정렬 여부는 당장 중요하지 않다. 피벗의 선택 기준 배열의 모든 요소 값들을 알..

[알고리즘] 합병정렬 (자바스크립트) [내부링크]

앞서 배운 정렬 알고리즘들은.. (버블, 삽입, 선택) 작은 규모의 배열에서는 잘 작동하지만, 규모가 커질수록 잘 적용되지 않는다. 합병정렬 (Merge Sort) 0. 개요 배열을 더 작은 배열로 나누는 방식 (분할정복 알고리즘), 요소 배열이 0개나 1개가 될 때까지 반복 0개나 1개가 된 요소 배열 모음을 다시 병합함. 이 과정에서 정렬이 이루어짐. 예를 들어 8개의 원소를 가진 배열을 합병정렬하고자 한다면, 4 -> 2 -> 1개의 원소 그룹으로 나누고 1 -> 2 -> 4 -> 8개로 합치는 과정에서 정렬 1. 로직 구현 의사코드 정렬된 두 배열의 합병을 담당할 함수 구현. 입력 배열 두 개에 있는 모든 요소를 포함 초기값이 0인 I와 J 카운터를 두 배열에 각각 배치하여 While문을 통해 구..

[OS] 파일 데이터 블록과 빈 블록 관리 [내부링크]

File Allocation 파일에서는 블록 단위로 데이터를 저장한다. 블록 하나의 크기는 4,096Byte이다. 파일 내부에 여러 개의 블록이 존재할 때, 이들을 연결해주는 것을 File Allocation이라 한다. Allocation에는 아래와 같은 방법이 존재한다. Contiguous Allocation 디스크 내부에 존재하는 연속된 블록들을 할당해 파일을 저장하는 방법. 파일 구성 테이블이 존재하는데, 이 테이블에 파일명 - 시작 블록 인덱스 - 블록 길이가 들어있다. 장점 Read/Write 처리하는 데에 시간이 적게 걸린다 단점 External Fragmentation이 발생. 먼저 Fragmatation이란 메모리에 생기는 작은 빈 공간을 말하는데, 빈 공간이 덩어리로 이루어져 있지 않고,..

[알고리즘] 선택정렬과 삽입정렬 (자바스크립트) [내부링크]

선택정렬 큰 값을 배열 마지막 인덱스에 위치시키는 버블정렬과 달리, 작은 값을 한 번에 하나씩 위치시킨다. 기준 값과 나머지 원소들을 전부 순회하며 비교하여, 가장 작은 값과 자리를 바꾼다. 의사코드 최솟값 인덱스를 저장할 변수 필요. 초기값은 시작하는 기준 값과 동일하게 설정해주면 될 듯. 기준값부터 나머지 원소를 순회하며 최소값 인덱스를 갱신, 저장 기준값과 최소값 교환 원래 기준값 다음 인덱스부터 1,2,3 과정 반복 구현 function selectSort(arr) { for (var i = 0; i arr[minIdx]) { let tmp = arr[i]; arr[i] = arr[minIdx]; arr[minIdx] = tmp; } } return arr; } const arr = [4, 24,..

[알고리즘] 버블정렬 (자바스크립트) [내부링크]

데이터를 정렬할 수 있는 방법은 무수히 많고, 각 알고리즘은 장단점을 갖고 있다. 같은 결과값을 갖더라도 결과를 내기까지의 과정이 제각기 다르다. 특정 상황에 유난히 잘 작동하는 정렬 방법이 존재하고, 이를 잘 활용하게 하기 위함 버블 정렬 자바스크립트 내장 정렬 메서드 array.sort() : num1 - num2 가 양수를 반환하면 num2가 앞에, 음수를 반환하면 num1이 앞에 온다. 숫자 뿐 아니라 문자열으 길이를 음수/양수로 구분하여 정렬할수도 있다. function numberCompare(num1,num2){ return num1 - num2; } [ 6, 4, 16,10 ].sort(numberCompare); 개념 현재 항목과 다음 항목을 한 번씩 비교하여 교환. 제일 끝에서부터 차례..

[알고리즘] 검색 알고리즘 (자바스크립트) [내부링크]

0. 검색 (Search) IndexOf 메서드 같은 배열 인덱싱, 문자열 파싱과 관련된 파트 내장함수의 처리 과정을 이해하고, 직접 구현하여 활용할 수 있게 하기 위함 1. 선형 검색 (Linear Search) 모든 개별 항목을 한 번씩 확인하는 방법 첫부분부터 끝부분으로 이동하며 탐색할수도, 역순으로 탐색할수도 있음 indexOf, includes, find, findIndex 메서드를 통해 선형 검색을 구현 기본적인 선형 검색 구현 function linearSearch(arr,value){ for (var i=0; i

[웹/브라우저] DOM [내부링크]

What, exactly, is the DOM?과 해당 원문의 번역본을 학습한 후 정리한 글입니다. 웹 페이지가 만들어지는 방법 원본 HTML 문서를 읽어들인 후, 스타일을 입혀 뷰 포트에 표시하는 과정을 Critical Rendering Path라고 한다. 이 과정은 크게 두 단계로 나뉘어 진다. 첫 번째로 읽어들인 문자를 파싱하여 어떤 내용을 렌더링할지 결정하며, 두 번째로 브라우저에서 렌더링을 수행한다. 첫 번째 단계를 통해 렌더 트리가 생성되는데, 이는 HTML 요소(DOM)와 관련 스타일 요소(CSSOM)로 구성된다. DOM이란 DOM(Document Object Model)은 웹 페이지에 대한 인터페이스로, HTML 문서의 구조와 내용을 다양한 프로그램에서 사용할 수 있게 한 객체 기반 표현이..

[주간회고] 2023년 4월 둘째 주 (230410 ~ 230416) [내부링크]

이번 주 - (알고리즘) 재귀 알고리즘 + 응용문제 - (리액트) 라우터와 라이프사이클, Ajax 통신 다음 주 - 딥러닝, OS 중간고사 - (알고리즘) 검색과 정렬 알고리즘 + 응용문제 - (리액트) Redux와 성능개선, CAReact 마무리

[OS] 데드락 (Deadlock) [내부링크]

1. 데드락 (Deadlock) 프로세스나 쓰레드가 사용하고자 하는 컴퓨터 자원을 다른 프로세스가 갖고 종료 조건이 서로 맞물려 있는 상태로 무한정 대기하는 상황을 데드락(Deadlock)이라고 한다. 프로그램 설계 시 데드락이 발생하지 않도록 유의하여야 한다. 각자 설계한 프로그램이 단독적으로 실행될 때는 문제가 없을 수 있지만, 여러 개의 프로그램이 함께 실행되는 과정에서 발생할 수도 있기 때문에 문제점을 발견하거나 예방하기 쉽지 않다. 컴퓨터 자원의 분류 재사용 가능한 자원(Reusable Resources)과 소비성 자원 (Comsumable Resources)으로 나뉘어진다. CPU나 입출력 장치, 메모리 등 대부분의 하드웨어 자원은 사용 후 소멸되지 않으므로 재사용 가능한 자원에 속한다. 이러..

[알고리즘] 재귀 (자바스크립트) [내부링크]

0. 재귀 자기자신을 호출하는 절차 (함수) JSON()의 파싱이나, DOM getElementById 등의 내부 코드가 재귀로 구성되어 있음 물론 반복문만으로도 구현이 가능하지만, 재귀를 사용함으로써 직관적이고 간결하게 구현할 수 있음 1. 필수 요소 중단점 (Base Case) 재귀가 중단되는 시점, 즉 종료 조건과 마지막으로 반환할 Return을 지정해주어야 한다. 다른 입력값 (Different Input) 매번 같은 함수를 호출하면서 다른 출력을 반환할 수 있게 하기 위해선 입력값 또한 달라져야 한다. 2. 예시 예시 반복문을 이용한 팩토리얼 구현 function loopFactorial(num){ let total = 1; for(let i = num;i>0;i--){ total *= i } ..

[주간회고] 2023년 4월 첫째 주 (230403 ~ 230409) [내부링크]

0. 다음 주 쯤 CA 리액트 끝날 듯. 이외엔 별다른 특이사항이 없는 한 주였다.

[알고리즘] 문제 해결 패턴과 도전과제 (자바스크립트) [내부링크]

지난 게시글 문제 해결 접근법과 이어지는 글입니다. 문제 해결 패턴 1. 빈도 카운터 (Frequency Counter) 자바스크립트 객체의 키-값 제어를 통해 다양한 값과 빈도를 수집 문제1 두 배열이 주어졌을 때, 한 배열 원소값들의 제곱을 담고 있는 다른 배열로 이루어진 경우 참을 반환하는 "Same" 함수를 작성하시오. (원소의 순서는 상관 없음) 해결1 이중 루프를 이용한 일반적인 해법, O(N^2) function same(arr1,arr2){ // 두 배열의 길이가 다른 경우 1차적으로 필터링 if(arr1.length !== arr2.length){ return false } for (let i=0;i

[알고리즘] 문제 해결 접근법 (자바스크립트) [내부링크]

문제를 해결하기 위한 일련의 단계. 정답이 없음. 해답만이 존재할 뿐 문제 해결 접근법 0. 톺아보기 문제 이해 구제척 예시 탐색 문제 세분화 문제 해결 및 단순화 복기 및 재구성 1. 문제 이해 (Understand Problem) 코드를 입력하거나 보드에 작성하기 전 한 걸음 물러서서 직면한 과제를 확실히 이해하는 것. 당연하다고 들릴 수 있겠지만 굉장히 중요하다. 주어진 과제나 질문을 그대로 생각하는 게 아닌, 스스로의 방식으로 치환하여 이해하는 것 문제의 입력과, 내가 도출해내야 할 출력값은 무엇인가? 입력에 의해서만 출력값이 결정되는가? 문제 내부의 중요 데이터는 어떻게 레이블링하는가? 2. 구체적 사례 탐색 (Explore Examples) 앞선 문제 이해 과정을 마치고, 입력값과 출력값의 순..

[OS] 프로세스 충돌해결 2 (Critical-Section Problem) [내부링크]

지난 강의 내용인 프로세스 충돌 해결 1과 이어집니다. 0. 복습 Critical Section 코드들이 Race Condition을 발생하지 않게 하기 위해서는 Critcal Section 전후에 Entry Section, Exit Section로 울타리를 두어 Mutual Exclusion을 만족시켜야 한다. 이 때 Entry Section은 울타리 영역 내부에 다른 프로세스가 실행 중인지 체크하고 비어 있는 경우 프로세스의 접근을 허용하는 역할을 하고, Exit Section은 울타리 영역 밖 다른 프로세스가 대기하고 있는 경우 영역 내부로 들어가도 되는지의 여부를 전달하는 역할을 한다. 지난 시간 말미에 소프트웨어적으로 이를 구현해보았으나 애로사항이 다소 발생하였고, 이를 하드웨어 지원을 받아 M..

[알고리즘] 빅오 표기법과 배열, 객체의 성능 평가 (자바스크립트) [내부링크]

1. 빅오 표기법 1-1. 무수한 알고리즘 해결책에 대한 평가 기준 performance.now()를 통한 시간 차이 측정 컴퓨터의 연산 갯수 측정 1-2. 빅오 시간 복잡도 입력에 따른 연산 시간의 관계성 측정, 다소 추상적인 말이지만 '큰 흐름'에 집중 상수곱, 합의 연산은 단순화 1-3. 빅오 공간 복잡도 입력에 따라 차지하는 메모리의 관계성 측정 (공간 할당) Boolean, Numbers, undefiend, null은 상수 복잡도 O(1) (단순화 가능) String, Array, Object는 선형 복잡도 O(N) 1-4. 로그 지수함수의 역 대부분의 정렬, 탐색 알고리즘과 같이 로그 복잡도를 갖는 알고리즘들이 존재 2. 배열과 오브젝트의 성능 평가 2-1. 자바스크립트 기본 요소들의 성능 ..

[미디어회고] 우아한 테크세미나 3월호 : 테크리더 3인이 말하는 개발자 원칙 [내부링크]

본 회고는 (주)우아한 형제들의 우아한 테크 세미나 3월호 : 테크 리더 3인이 말하는 개발자 원칙 간 메모한 내용과 본인의 생각을 정리한 글입니다. 1. 제어할 수 없는 것에 의존하지 않기 (인프랩 이동욱) 기한을 지키는 것의 중요성. 아무리 급한 일정이라 해도 항상 일정한 퀄리티를 기한 내에 만들어 내는 노하우가 필요하다. 좋은 코드를 선택함에 있어 최근에 배운 내용을 활용하는 것도 좋지만 이들을 활용해 본인만의 기준과 원칙을 적용하여 빠르게 해결하는 능력이 중요하다. 따라서 선택의 순간마다 고민하는 사람보단, 원칙에 따라 빠르게 결정하고 중요한 것만 고민하는 것이 더 좋은 개발자가 아닌가. 이는 무조건 경험과 비례한다고 생각한다. 더 나아가 추가적인 기록이나, 주기적인 인지를 통해 가속도를 내어 효..

[분기회고] 2023년 1분기 (230101 ~ 230331) [내부링크]

0. 돌아보며 3월은 무섭도록 빠르게 지나갔다. 프로젝트 준비와 강의들 적응하다보니 벌써 4월이고, 2023년의 한 분기가 지났다. 본격적인 웹 공부부터 작은 개인 프로젝트도 해보고, 실제 서비스의 CSS파트 경험까지 꽤나 순항 중이라고 생각이 든다. 물론 속도를 더 낼 필요는 있다. 또 한 번 절실히 느끼는 건 진짜 시간이 빨리 간다는 점이다. 하루 하루를 의미 있게 보내자고 다시 한 번 다짐한다. 1. 다음 분기 계획 4월 초부터 리액트를 공부 중에 있는데, 보름 정도면 CA 커리큘럼은 끝마칠 것으로 보인다. 이후에는 드림코딩 리액트 강의를 통해 지반을 다질 예정이다. 2분기 내로 졸업작품을 끝낼 예정이고, 6월 말에는 부스트캠프나 우아한 테크캠프 등의 모집일정이 시작되기 때문에 이를 대비해 준비 중..

[OS] 프로세스 충돌해결 1 (Concurrency Control) [내부링크]

1. 프로세스 충돌 컴퓨터 시스템 내부에서는 다양한 이벤트(쓰레드)들이 컴퓨터 자원을 사이에 두고 동시다발적으로 발생한다. 이들이 실행되며 충돌하는 경우가 빈번히 발생한다. Race condition 두 개 이상의 프로세스가 거의 동시에 접근하여 처리된 순서를 가릴 수 없는 상황을 말한다. Mutual exclusion 두 개 이상의 프로세스가 같은 메모리에 접근하는 상황에서 (공유 자원을 할당받아 사용할 떄) 한 번에 한 프로세스씩 액세스하도록 하는 성질. (상호배제) Race condition을 방지하기 위해선 Mutial Exclusion 성질이 만족되도록 프로그래밍되어야 한다. Critical section 공유 영역에서 값을 변경시키는 행위 Starvation 요청한 자원이 오랜 기간 동안 배정..

[주간회고] 2023년 3월 넷째 주 (230320 ~ 230326) [내부링크]

1. Recharge week ES6까지의 학습이 끝난 후, 지금까지의 상황을 돌아보고 향후 계획을 점검하는 시간을 가졌다. 모처럼 본가도 다녀옴. 첫 번째로 모딥다를 통한 ES6 복습을 진행하였다. 자바스크립트의 모든 내용을 총망라하는 거다 보니 분량이 꽤 많음. 다음 주 까지 조금 더 해야 마무리될 것 같다. 두 번째로는 올해 말 쯤을 목표로 하고 있는 부트캠프 일정들을 리스트업하였고, 후기와 요강들을 정리하며 준비해야 할 것들에 실체를 잡아갔다. 코딩 테스트를 더 철저하게 준비해야 할 필요성을 느꼈고, 그 외에 CS나 프레임워크 공부, 프로젝트는 지금까지 해온 것처럼 꾸준히 해나가면 될 듯 하다. 2. 코테 언어? 추가로 한 것이 코딩 테스트 준비 언어를 정하는 것이었다. 기존에는 파이썬으로 준비하..

[OS] 프로세스 종료절차와 쓰레드 (Process Termination, Thread) [내부링크]

1. 프로세스 종료 절차 실행(running)을 끝마친 프로세스는 바로 컴퓨터 시스템에서 사라지는 것이 아니라, 일련의 과정 (exit - terminated - wait)을 거친다. 프로세스 종료 조건 exit() 시스템 콜을 호출받은 경우 처리할 수 없는 (non-handling) 시그널을 받은 경우 CPU 내부 프로그램 에러가 발생한 경우 부모 프로세스가 하위 프로세스의 종료를 요청할 경우 Exit (release) 과정 실행이 끝난 직후 처리되는 시스템 콜. 메인 메모리 중 커널 내의 PCB를 제외한 코드, 데이터, 스택 등을 회수한다. Terminated(zombie) 상태 Exit() 처리를 통해 프로세스는 Terminated 상태로 진입한다. 부모 프로세스에 의해 Wait() 시스템 콜이 호..

[주간회고] 2023년 3월 셋째 주 (230313 ~ 230319) [내부링크]

1. ES6 2주간의 ES6 학습을 마무리하였다 ! 새학기가 시작되고 바쁜 와중에도 어떻게 잘 끝을 맺었다. 다음 주에는 배웠던 것들 위주로 모던 자바스크립트 책과 함께 복습할 시간을 가질 예정이다. 2. 졸작 졸작의 윤곽이 어느 정도 잡혀가고 있다. CNN과 챗GPT API를 연동한 웹서비스를 계획 중이다. 3. 다음 주 Recharge Week : 플랜 점검하여 잠깐 쉬어가는 한 주 ES6 복습 모아둔 영상 시청 및 미디어회고 부트캠프 일정 및 계획 수립 이코테 재개 다음 커리큘럼 준비 (React) 할 게 굉장히.. 갱장히.. 많음..

[OS] 프로세스 컨텍스트와 생성절차 (Process Context & Creation) [내부링크]

1. 프로세스 컨텍스트 프로세스가 실행되는 데 필요한 컴퓨터 내의 정보 및 구성 요소 자원 집합. 유저 컨텍스트와 시스템 컨텍스트로 세분화된다. 유저 컨텍스트 프로그램 작성자(사람)에 의해 결정되는 컨텍스트 프로그램을 구성하는 코드, 데이터, User Stack의 집합을 지칭한다. 시스템 컨텍스트 운영체제에 의해 결정되는 컨텍스트 커널 코드 내의 함수 호출을 위한 커널 스택 (Kernel Stack) 프로세스 관련 정보를 저장하는 자료구조인 PCB로 구성되어 있다. fork() (하위 프로세스를 생성하는 System Call)을 통해 생성된 하위 프로세스의 식별 ID를 Pid에 할당한다. 이에 유효한 값이 할당된 경우 Delay를 주어 Pid의 스케쥴링 (CPU 할당)을 기다린다. 하위 프로세스는 부모 ..

[주간회고] 2023년 3월 둘째 주 (230306 ~ 230312) [내부링크]

1. 본격적인 신학기가 시작되었다. 이번 학기에는 졸작을 포함한 프로젝트 3개, 딥러닝, OS가 학교 수업의 주가 될 듯 하다. 다행히도 CS 과목 수강을 할 수 있게 되어 열심히 듣는 중이다. 매주 강의 내용은 복습하며 블로그에도 정리해놓고 있다. 전공자라기도 애매하고, 그렇다고 비전공자는 아닌.. 반전공자 .. 2. 코딩애플 ES6 또한 계속 수강 중이다. 하루에 3-5개의 강의를 수강하고 모딥다로 복습하며 정리하는 방식으로 학습을 진행하고 있다. 강의 시간으로만 보면 짧지만 수강 후 스스로 찾아봐야 할 것들이 많다보니 그리 짧게는 느껴지지 않는다. 이르면 다음 주 쯤 끝마칠 수 있을 듯 하다. 3. 개강하고 시간이 진짜 무섭게 빨리 간다. 학기 초라 그런지 일정에 내가 끌려다니는 느낌이 없잖아 있는..

[OS] 프로세스 상태 모델과 PCB (Process State Model & Process Control Block) [내부링크]

1. 프로세스 상태 모델 Running or Not Running (Ready State + Blocked State) 프로세스가 실행중이지 않을 경우 (Not Running) 두 가지 상태로 분류할 수 있다. 준비 상태 : 프로세서가 주어진 경우 실행 가능한 상태 (Multi Processing에서 Time Out등으로 후순위로 밀려나간 경우 등) 블럭 상태 : 프로세서가 주어져도 실행되지 못하는 상태. I/O 등의 이벤트를 기다리는 상태들. 이벤트가 완료되면 Running State로 돌아가는 것이 아닌 Ready State로 넘어가 Ready queue에서 순서를 기다린다. 결론적으로 Ready queue, Blocked queue의 두 가지 큐가 존재한다. 블럭 상태로 편입되는 경우가 다양한데, ..

[OS] 운영체제 구조와 프로세스 (OS Architecture & Process) [내부링크]

1. 운영체제의 소프트웨어 구조 1-1. 모노리씩 커널 구조 (Monolithic Kernel) '단일체'라는 의미로, 커널 SW가 한 덩어리로 모여 있는 것을 의미한다. 내부에서 내부 함수 콜을 호출하고 결과를 받기 때문에, 실행 속도가 빠르다. Unix, Linux 1-2. 마이크로 커널 구조 (Micro Kernel) 운영체제의 기능들이 외부에서 구현되는 아키텍쳐를 의미한다. 프로세스의 형태를 띄며 운영체제 위에서 응용프로그램이 실행되는 것처럼 커널이 실행된다. 실행속도는 상대적으로 느리지만, 유지보수가 편리하다. 파일 관리, 통신 프로토콜, 입출력 디바이스 제어와 같은 기능들이 커널 외부에서 실행된다. 그러나 하드웨어 종속적인 코드들과 메모리 영역을 보호하는 프로세스, 기본적인 스케줄링 기능들은 ..

[주간회고] 2023년 3월 첫째 주 (230227 ~ 230305) [내부링크]

1. 개강 마지막 한 해이다. 복수전공 탓에 제출할 캡스톤 디자인 결과물이 두 배가 되어 굉장히 바쁠 것으로 예상.. 그렇지만 시간 분배 잘 해서, 잘 마무리할 수 있었으면 좋겠다. 2. ES6 코딩애플 ES6 강의 수강을 시작했다. 보름 정도 일정을 잡고 수강 중에 있다. 모던 자바스크립트와 병행하여 공부하니 시너지가 좋은 듯. 해당 강의를 끝마치는 대로 리액트를 시작할 예정이다.

[OS] 컴퓨터 시스템과 처리방식 [내부링크]

컴퓨터 시스템 (폰노이만 컴퓨터의 기본적인 구조) 프로세서(CPU)와 메모리(OS, Program) 그리고 Bus 형식으로 이어져 있는 I/O Controller로 구성된다. OS는 비휘발성 보조기억장치에 저장되어 있다. 프로그램이 실행되기 위해선 주기억장치로 복사 / 호출되어야 한다. 커널(Kernel) : 운영체제의 기능 중 항상 주기억장치에 상주하는 요소들을 의미한다. 본 강의에서는 넓은 범위의 ‘운영체제’로 이해하면 된다. 컴퓨터의 역사와 처리 방식 Serial Processing 사람에 의해 Operating되는 초기 운용 방식 Simple Batch Systems (단순 일괄 처리 방식) Monitor Software의 등장 마그네틱 카드로 이루어져 있는 일련의 프로그램의 묶음을 차례차례 메모..

[JS] 뉴진스 포닝을 웹에서, Phoning But Web [내부링크]

0. 들어가며 바닐라 JS와 HTML/CSS 학습 후 처음으로 진행한 토이프로젝트이다. 이제껏 배운 것들을 활용해 뭐라도 만들어 보자는 취지로 프로젝트를 계획하게 되었다. 시작하기 앞서 해당 프로젝트에 관한 코드와 커밋 기록은 깃허브에서 확인할 수 있다. https://github.com/w00ngja/Phoning-but-WEB GitHub - w00ngja/Phoning-but-WEB: Web-transplanted 'Phoning' from Newjeans Web-transplanted 'Phoning' from Newjeans. Contribute to w00ngja/Phoning-but-WEB development by creating an account on GitHub. github.com ..

[주간회고] 2023년 2월 넷째 주 (230220 ~ 230226) [내부링크]

0. 바쁘고도 감사했던 한 주. 1. 서울 기회가 되어 현업에 몸담고 있는 분들과의 만남을 가졌다. 현실적인 조언들에 지금 내 상황을 한 번 돌아볼 수 있었고, 실질적으로 도움받은 것들도 있었다. 보답할 것 리스트에 Append했다.. 성공...하자.. 2. 프로젝트 드디어 프로젝트가 끝이 났다. 일정이 조금씩 밀리고 있는데, 시간 날 때마다 정리글과 리드미를 작성하고 있다. 빨리 끝내고 계획해 놓은 다음 단계로 넘어가야겠다.

[주간회고] 2023년 2월 셋째 주 (230213 ~ 230219) [내부링크]

0. 금주는 쉬어갑니다.

[면접을 위한 CS 전공지식 노트] HTTP [내부링크]

2.5.2 HTTP/1.1 매번 TCP 연결이 필요한 HTTP 1.0 세대와 달리, 한 번 초기화한 후 keep-alive 라는 옵션으로 여러 개의 파일을 송수신할 수 있다. 기존에도 존재하긴 했지만, 본 세대부터 표준화되어 사용되기 시작했다. 문서 내의 리소스 용량이 커지면 선입선출의 개념으로 딜레이가 발생하기도 하는데, 이를 HOL Blocking이라고 한다. HOL Blocking 네트워크에서 같은 큐에 있는 패킷이 그 첫 번째 패킷에 의해 지연될 때 발생하는 성능 저하 또한 HTTP/1.1의 헤더에는 쿠키 등 많은 메타데이터가 들어 있고 압축이 되지 않아 무거운 성능을 보인다. 2.5.3 HTTP/2 멀티플렉싱 여러 개의 스트림을 사용하여 송수신. 패킷이 손실되었더라도 해당 스트림에만 영향을 미친..

[프로그래머스] 옹알이1 (파이썬) [내부링크]

문제 머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling 이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 조건 1. 1 ≤ babbling의 길이 ≤ 100 2. 1 ≤ babbling[i]의 길이 ≤ 15 3. babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다.즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장합니다. 4. 문자열은 알..

[이코테 실전문제] 효율적인 화폐 구성 (다이나믹 프로그래밍) [내부링크]

문제 N가지 종류의 화폐가 있다. 이 화폐들을 최소한으로 사용해 합이 M원이 되도록 하고자 한다. M원을 만들기 위한 최소한의 화폐 개수를 출력하는 프로그램을 작성하시오. 조건 입력조건 1. 첫째 줄에 N,M이 주어진다. 2. 이후의 N개 줄에는 각 화폐의 가치가 주어진다. 출력조건 1. 첫째 줄에 최소 화폐 개수를 출력한다. 2. 불가능할 때는 -1을 출력한다. 코드 n,m = list(map(int,input().split())) array=[] for i in range(n): array.append(int(input())) d=[10001]*(m+1) d[0]=0 for i in range(n): for j in range(array[i],m+1): if d[j-array[i]]!=10001: d..

[면접을 위한 CS 전공지식 노트] IP 주소와 HTTP 1.0 [내부링크]

2.4 IP 주소 2.4.1 ARP 컴퓨터 간의 통신은 IP주소를 통해서 이루어진다고 흔히 알고 있지만, 정확히 말하면 IP 주소 내부의 MAC 주소를 가져와 이를 기반으로 통신한다. 이 때 MAC 주소를 가져오는 프로토콜을 ARP라고 한다. 논리적 주소(IP)와 물리적 주소(MAC)를 상호 간에 통신을 가능케 하는데, 순방향을 ARP, 역방향을 RARP 프로토콜이 처리한다. 메인 서버에서 ARP Request 브로드캐스트를 하위 서버에다 뿌려주면, 그 중 해당 주소와 일치하는 장치가 ARP Reply 유니캐스트를 통해 MAC 주소를 찾게 된다. 2.4.2 홉바이홉 통신 건너뛰는 모습을 뜻하는 홉에서 알 수 있 듯 패킷이 라우팅 테이블을 이동하며 최종 목적지까지 도달하는 통신을 말한다. 이 때 라우팅 테..

[미디어회고] 낙관적 허무주의, 허준이 서울대 졸업식 축사 외 [내부링크]

0. 들어가며 유튜브 망령 n년 차.. 좋게 말하면 시장 조사..? 간혹 개발 관련 영상이나 자기계발 영상들이 알고리즘에 나타나면 나중에 볼 동영상에 차곡차곡 쌓아두는 편이다. 구휼미마냥 .. 근데 이게 솔직히 손이 잘 안간다. 진실과 마주해야 할 두려움이라고 해야 할까. 또 식사나 설거지 할 땐 침착맨 보기 바쁘다. 사색하기 최고의 장소는 기차 안이라고 생각한다. 한 달에 한 번 정도 본가에 들릴 때마다 왕복 여섯 시간 정도의 시간이 주어지는데, 이 때 모아둔 곳간을 개방한다. 한 손엔 영상, 나머지 한 손으로는 메모하기 바쁘다. 기록을 좋아하는 나 이기에, 메모들을 조금 정제시켜 아카이빙해놓기로 했다. 더해서 꼭 기차가 아니더라도 의무감으로라도 관련 영상을 찾아 보지 않을까 하는 마음에 .. 비정기적..

[주간회고] 2023년 2월 둘째 주 (230206 ~ 230212) [내부링크]

0. 주저리 금요일 근로를 마치고 돌연 부산행에 올랐다. 나 어쩌면 P일지도? 별 거 없어도 집이 좋긴 좋다. 1. 운동 헬스장 만료되고 몇 달 만에 트랙에서 뛰었다. 나이키 앱으로 1분 - 1분 인터벌을 했다. 근데 다음 날부터 발바닥이 아파서 잘 못 걷고 있음..미안해 발바닥아 2. 토이 프로젝트 금주엔 기업탐방같은 굵직한 일정을 제외하고는 진행하던 프로젝트를 계속 만들었다. 하다보니 욕심이 생겨 더 붙잡게 되고 원래 계획했던 일정보다 미뤄지고 있는데, 적정 선에서 끝맺는 것도 중요한 것 같다. 아마 오늘 내일 전으로 끝이 나지 싶다. 마무리되면 블로그에 정리해놓고 영상도 편집하지 싶다. 어째 저번 주와 비슷한 레퍼토리다. 3. 다음 주 - ES6 수강 진짜 시작 4. 생각 - 개발자의 입장에서 ch..

[면접을 위한 CS 전공지식 노트] 계층간 데이터 송수신과 네트워크 처리 기기 [내부링크]

유선 LAN (IEEE802.3 프로토콜) 전이중화 통신 (Full duplex) : 양쪽 장치가 동시에 송수신할 수 있는 방식. 송/수신로 서버가 나뉘어져 있으며, 현대에 사용하고 있는 고속 이더넷 방식이다. CSMA/CD : 데이터 전송 ‘이후’ 충돌이 발생한다면 일정 시간 이후 재전송 → 유선 LAN에 사용했던 반이중화 통신 방식 무선 LAN (IEEE802.11) 반이중화 통신 (Half duflex) : 양쪽 장치가 서로 통신할 수는 있지만, 동시에 이루어질 수는 없다. 충돌 가능성이 있기 때문에 방지할 시스템이 필요하다. CSMA/CA : 캐리어 감지 (회선이 비어 있는지 판단) 등 사전에 충돌을 방지하는 방식이다. 랜덤 값을 기반으로 정해진 시간만큼 기다린 후 데이터를 송신하는 IFS도 존재..

[주간회고] 2023년 2월 첫째 주 (230130 ~ 230205) [내부링크]

0. 들어가며 방학도 벌써 절반이 지났다. 다음 주면 수강 신청 기간이고, 본가 한 번 내려갔다오면 금방 개강이다. 지난 여름 방학이 문득 떠오른다. 야심차게 세웠던 계획들과, 희미한 결과물들. 노션에 아카이빙해놓은 계획들을 오랜만에 찾아보니 그마저도 허술해 보인다. 그러나 이번 한 달은 달랐다. 드는 느낌부터 다르다. 나아갈 방향에 어느 정도 윤곽이 잡혔고, 초반부지만 잘 나아가고 있다. 아무 제약 없이 하고 싶은 공부를 할 수 있는 방학이 참 귀하게 느껴진다. 남은 한 달도 아름답게 끝맺음 하기를. 1. 블로그 개편 새해와 함께 블로그도 싹 페이스리프트를 해줬다. 벨로그나 깃허브 블로그로 옮길까 고민을 했었는데, 결국 기존 블로그에 구조만 개편하는 것으로 결론이 났다. 원래는 코테 문제를 정리하는 용..

[면접을 위한 CS 전공지식 노트] 네트워크 (TCP/IP 모델과 네트워크 토폴로지) [내부링크]

2.1 네트워크 2.1.1 처리량과 지연시간 네트워크란 노드와 링크를 통해 구성된다. 노드란 서버, 라우터, 스위치 등의 네트워크 장치를 의미하고 링크는 유무선 연결을 의미한다. 처리량 : 링크를 통해 전달되는 단위 시간당 데이터양으로, bps단위를 사용한다. 초당 전송 또는 수신되는 비트 수를 의미한다. 지연시간 : 요청이 처리되는 데에 걸리는 시간을 의미하며, 데이터가 두 장치 사이를 왕복하는 총 시간이다. 2.1.2 네트워크 토폴로지와 병목 현상 네트워크 설계 간 노드와 링크의 배치방법을 네트워크 토폴로지라 한다. 트리 토폴로지 : 계층형 토폴로지라고도 하며, 노드의 추가 및 삭제가 용이하고 트래픽이 집중될 때 하위 노드에도 영향을 미칠 수 있다. 버스 토폴로지 : 설치 비용이 적고 신뢰성이 우수한..

[CS] 디자인 패턴과 프로그래밍 패러다임 [내부링크]

1.1.5 프록시 패턴 앞에서 옵저버 패턴을 설명할 떄, 객체의 상태변화를 감지하면 옵저버들에게 변화를 알려주는 객체를 프록시 객체라고 하였는데, 이를 이용해 대상 객체에 접근하기 전 흐름을 가로채 객체 앞단의 인터페이스 역할을 하는 디자인 패턴이다. 프록시 패턴은 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용한다. 프록시 서버는 실제 서버와 사용자 간의 중개자 개념으로, 사용자로부터 요청받는 정보들을 먼저 처리한다. 캐싱을 하여 네트워크 비용을 절감할 수 있고, 비정상적인 접근을 감지하여 DDOS를 방지할 수도 있다. 실제로 Node.js 앞단에 설치하는 Nginx를 프록시 서버로 주로 둔다. 이를 통해 본 서버의 포트를 숨길 수 있고, 버퍼 오버플로우를 방지할 수 있다. ..

[CS] 디자인 패턴 (싱글톤, 팩토리, 전략, 옵저버) [내부링크]

1.1 디자인 패턴 디자인 패턴? 프로그램 설계간 발생했던 문제점들을 객체 간의 상호 관계 등을 따져 해결할 수 있게 만들어 놓은 규약 1.1.1 싱글톤 패턴 하나의 클래스에 하나의 인스턴스만 가지는 패턴. 보통 DB 연결 모듈에 사용된다. 하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용하기 때문에 인스턴스를 생성할 때 드는 비용을 줄일 수 있다. 단 의존성이 높아진다는 단점이 있다. 자바스크립트에서의 싱글톤 패턴 class Singleton { constructor() { if (!Singleton.instance) { Singleton.instance = this } return Singleton.instance } getInstance() { return this } } ..

[이코테 실전문제] 개미 전사 (다이나믹 프로그래밍) [내부링크]

문제 일직선으로 이어져 있는 식량 창고를 공격하여 한다. 각 식량 창고에는 정해진 수의 식량을 저장하고 있으며 선택적으로 약탈하여 식량을 빼앗을 에정이다. 서로 인접한 식량창고는 공격할 수 없다. 조건 입력 조건 1. 첫째 줄에 식량 창고의 개수가 주어진다. 2. 둘째 줄에 공백을 기준으로 각 식량창고에 저장된 식량 개수가 주어진다. 출력 조건 1. 첫째 줄에 개미 전사가 얻을 수 있는 식량의 최댓값을 출력하라. 코드 n = int(input()) array = list(map(int,input().split())) d=[0]*100 d[0] = array[0] d[1] = max(array[0],array[1]) for i in range(2,n): d[i] = max(d[i-1],d[i-2]+arra..

[이코테 실전문제] 1로 만들기 (다이나믹 프로그래밍) [내부링크]

문제 정수 X가 주어질 때 사용할 수 있는 연산은 다음과 같이 4가지이다. 1. 5로 나누어떨어지면, 5로 나눈다. 2. 3으로 나누어떨어지면, 3으로 나눈다. 3. 2로 나누어떨어지면, 2로 나눈다. 4. X에서 1을 뺀다. 정수 X가 주어졌을 때, 연산 4개를 적절히 사용해서 1을 만들려고 한다. 이 때 연산을 사용하는 최소 횟수를 출력하시오. 입력 조건 1. 첫째 줄에 정수 X가 주어진다. 출력 조건 1. 첫째 줄에 연산을 하는 횟수의 최솟값을 출력한다. 내 코드 n = int(input()) d=[0]*(n+1) for i in range(2, n + 1): d[i] = d[i - 1] + 1 if i % 2 == 0: d[i] = min(d[i], d[i // 2] + 1) if i % 3 ==..

[이코테] 다이나믹 프로그래밍 [내부링크]

다이나믹 프로그래밍 컴퓨터를 사용한 문제 해결에 있어서, 일반적으로 효율적인 설계라 함은 연산속도나 메모리 공간을 줄여나가는 것이다. 그러나 본 장에서 배울 다이나믹 프로그램과 같이, 조금의 메모리 공간을 더 할애하여 비약적인 성능을 끌어낼 수 있는 경우도 존재한다. 이를 동적 계획법이라고도 부르며, 프로그래밍에서 사용되는 동적 할당의 의미와는 다르다는 것을 인지할 필요가 있다. 다이나믹 프로그래밍의 대표적인 유형으로는 피보나치 수열이 존재한다. 이전 두 항의 합을 현재 항으로 설정하는 특징을 갖는 수열이다. 수학적인 표현으로 점화식을 사용하지만, 프로그래밍에서는 배열이나 리스트를 사용한다. 파이썬에서는 리스트를 사용한다. 이를 구현하기 위해서는 재귀 함수를 사용하면 된다. 재귀 함수를 이용한 피보나치 ..

[이코테 실전문제] 떡볶이 떡 만들기 (이진탐색) [내부링크]

문제 절단기에 높이를 지정하면 줄지어진 떡을 한 번에 절단한다. 높이가 H보다 긴 떡은 H 위의 부분이 잘릴 것이고, 낮은 떡은 잘리지 않는다. 그렇게 높이보다 많이 잘린 떡을 손님이 가져간다. 손님이 길이가 M인 떡을 요청했을 때, 적어도 M만큼의 떡을 얻기 위해 절단기에 설정할 수 있는 높이의 최댓값을 구하는 프로그램을 작성하시오 입력 조건 1. 첫째 줄에 떡의 개수 n과 떡의 길이 m이 주어진다. 2. 둘째 줄에는 떡의 개별 높이가 주어진다. 떡 높이의 총합은 항상 m 이상이므로, 손님은 필요한 양만큼 떡을 사갈 수 있다. 출력 조건 1. 적어도 m만큼의 떡을 집에 가져가기 위해 절단기에 설정할 수 있는 높이의 최댓값을 출력한다. 내 코드 #1 탐색을 이용한 풀이 n,m = list(map(int,..

[이코테 실전문제] 부품 찾기 (탐색 알고리즘) [내부링크]

문제 동빈이네 전자 매장에는 부품이 N개 있다. 어느 날 손님이 M개 종류의 부품을 구매하기 위한 견적서를 요청하였다. 손님이 요구한 부품이 매장에 전부 있는지 확인하는 프로그램을 작성해보자. 입력 조건 1. 첫째 줄에 정수 n이 주어진다. 2. 둘째 줄에는 공백으로 구분하여 n개의 정수가 주어진다. (매장 내의 부품코드) 3. 셋째 줄에는 정수 m이 주어진다. 4. 넷째 줄에는 공백으로 구분하여 m개의 정수가 주어진다. (손님이 요구한 부품코드) 출력 조건 1. 첫째 줄에 공백으로 구분하여 각 부품이 존재하면 Yes를, 없으면 No를 출력한다. 내 코드 n = int(input()) a = list(map(int,input().split())) m = int(input()) b = list(map(in..

[이코테] 범위를 반씩 좁혀가는 탐색 (순차탐색과 이진탐색) [내부링크]

순차탐색 앞서 공부한 알고리즘을 구현하는 과정에서도 굉장히 빈번하게 사용한 탐색 방법이며, 굉장히 단순하다. 리스트 내의 특정 값을 찾기 위해 맨 앞부터 차례대로 확인하는 방법이다. def sequential_search(n,target,array): for i in range(n): if array[i] == target: return i+1 print("생성할 원소 개수를 입력한 다음 한 칸을 띄고 찾을 문자열을 입력하세요") input_data = input().split() n = int(input_data[0]) target = input_data[1] print("앞서 적은 원소 개수만큼 문자열을 입력하세요. 구분은 띄어쓰기 한 칸으로 합니다.") array = input().split() p..

[이코테 실전문제] 위에서 아래로, 성적이 낮은 순서로 학생 출력하기, 두 배열의 원소 교체 (정렬 알고리즘) [내부링크]

1. 위에서 아래로 문제 하나의 수열에는 다양한 수가 존재한다. 이러한 수는 크기에 상관없이 나열되어 있다. 이 수를 큰 수부터 작은 수의 순서로 정렬해야 한다. 수열을 내림차순으로 정렬하는 프로그램을 만드시오 입력 조건 1. 첫째 줄에 수열에 속해 있는 수의 개수 N이 주어진다. (1

[이코테] 정렬 알고리즘 [내부링크]

선택정렬 가장 작은 데이터를 선택해 맨 앞에 있는 데이터와 바꾸고, 다음으로 작은 데이터를 선택해 앞에서 두 번째 데이터와 바꾸는 과정을 반복한다. 2중 반복문을 사용하기 때문에 O(N**2)의 시간복잡도를 갖고 다른 정렬 알고리즘에 비해 다소 비효율적이다. array = [7,5,9,0,3,1,6,2,4,8] for i in range(len(array)): min_index = i for j in range(i+1,len(array)): if array[min_index] > array[j]: min_index = j array[i],array[min_index] = array[min_index],array[j] 삽입정렬 데이터를 하나씩 순회하며, 각 데이터를 적절한 위치에 삽입. 선택정렬에 비해 효..

[이코테 실전문제] 미로 탈출 (DFS, BFS 알고리즘) [내부링크]

문제 동빈이는 NxM 크기의 미로에 갇혀 있다. 동빈이의 위치는 (1,1)이고 출구는 (N,M)의 위치에 존재한다. 괴물이 있는 부분은 0으로, 이동 가능한 길은 1로 표시한다. 이 때 동빈이가 탈출하기 위해 움직여야 하는 최소 칸의 개수를 구하시오 입력 조건 1. 첫째 줄에 맵의 크기 N,M을 입력받는다. 2. 둘째 줄에 맵의 모양을 공백없이 입력받는다. 출력 조건 1. 동빈이가 탈출하기 위해 이동하는 블럭의 최소 개수를 출력한다. 내 코드 n,m = list(map(int,input().split())) mmap = [] for i in range(n): mmap.append(list(map(int,input()))) from collections import deque def maze(x,y): q..

[이코테 실전문제] 음료수 얼려 먹기 (DFS, BFS 알고리즘) [내부링크]

문제 NxM 크기의 얼음 틀이 있다. 구멍이 뚫린 부분은 0, 칸막이가 있는 부분을 1로 설정한다. 구멍이 뚫린 부분이 서로 붙어 있다면 큰 한 덩어리로 간주한다. 얼음 틀이 주어졌을 때 생성되는 총 아이스크림의 개수를 구하라. 입력 조건 1. 첫 번째 줄에 얼음틀의 세로 길이 N과 가로 길이 M이 주어진다. 2. 두 번째 줄부터 N+1번째 줄까지 얼음 틀의 형태가 주어진다. 출력 조건 1. 한 번에 만들 수 있는 아이스크림의 개수를 출력한다. 내 코드 # 맵 크기 입력받는다. n,m = map(int,input().split()) # 맵 모양 입력받는다. graph = [] for i in range(n): graph.append(list(map(int,input()))) def icy(x,y): if..

[이코테] 꼭 필요한 자료구조 기초 (DFS, BFS 알고리즘) [내부링크]

DFS와 BFS에 들어가기 전에 DFS, BFS 알고리즘은 코딩 테스트의 대표적인 탐색 문제 유형이다. 이를 제대로 이해하기 위해서는 스택과 큐에 대한 사전지식이 전제되어야 한다. 스택과 큐는 자료구조에서 핵심적인 개념으로, 삽입(Push)과 삭제(Pop)로 구성된다. 이 외에도 수용가능한 크기를 넘어서는 상태에서 데이터가 삽입되는 오버플로, 비어있는 데이터에 삭제연산을 수행하여 발생하는 언더플로 등을 고려해주어야 한다. 스택 박스쌓기로 비유하면 편하다. 가장 최근에 쌓은 박스가 가장 먼저 빠진다. (후입선출) 명령어는 빈 배열에서 삽입 시 append(), 삭제 시 pop()를 사용한다. 리스트의 가장 뒤 쪽에서 데이터를 삽입(순방향)하고, 가장 뒤 쪽에서 데이터를 꺼낸다. 큐 큐는 역방향으로 데이터를..

[이코테 실전문제] 게임 개발 (구현 알고리즘) [내부링크]

문제 맵 안에서의 캐릭터 이동을 구현시키는 문제이다. NxM 크기의 맵은 육지 또는 바다로 구성돼 있다. 캐릭터는 동서남북 중 한 곳을 바라본다. 캐릭터는 상하좌우로 움직일 수 있고, 바다로 되어 있는 공간에는 갈 수 없다. 또한 다음 매뉴얼을 따른다. 매뉴얼1. 현재 위치에서 현재 방향을 기준으로 왼쪽 방향(반시계 방향으로 90도 회전한 방향)부터 차례대로 갈 곳을 정한다. 매뉴얼2. 캐릭터의 바로 왼쪽 방향에서 아직 가보지 않은 칸이 존재한다면, 왼쪽 방향으로 회전한 다음 왼쪽으로 한 칸을 전진한다. 왼쪽 방향에 가보지 않은 칸이 없다면, 왼쪽 방향으로 회전만 수행하고 1단계로 돌아간다. 매뉴얼3. 만약 네 방향 모두 이미 가본 칸이거나 바다로 되어 있는 칸인 경우에는, 바라보는 방향을 유지한 채로 ..

[이코테 실전문제] 왕실의 나이트 (구현 알고리즘) [내부링크]

문제 나이트는 8x8 좌표 평면으로 이루어진 왕실 정원 안에 있으며, L자 형태로 이동할 수 있다. 정원 밖으로는 이동할 수 없다. 이 때 말하는 L자 형태의 이동은 1. 수평으로 두 칸 이동한 뒤에 수직으로 한 칸 이동 2. 수직으로 두 칸 이동한 뒤에 수평으로 한 칸 이동 이처럼 좌표상에서 나이트의 위치가 주어졌을 때 나이트가 이동 가능한 경우의 수를 출력하는 프로그램을 작성하시오. 이때 행 좌표는 1부터 8로, 열 좌표는 a부터 h로 표현한다. 입력 조건 1. 첫째 줄에 8x8 좌표 평면 상에서 현재 나이트가 위치한 곳의 좌표를 나타내는 두 문자로 구성된 문자열이 입력된다. 입력 문자는 a1처럼 열과 행으로 이뤄진다. 출력 조건 1. 첫째 줄에 나이트가 이동할 수 있는 경우의 수를 출력하시오. 내 ..

[이코테] 그리디 알고리즘 (탐욕법) [내부링크]

국내 알고리즘 교재에서 '탐욕법'으로 소개되는 그리디 알고리즘은 나중에 미칠 영향을 고려하지 않고 당장 좋은 것만 고르는 방법이다. 진정한 상남자식 알고리즘이다. 기본 구조를 암기해야 하는 정렬 알고리즘이나 최단 경로 등과 달리, 비교적 사전 지식으로부터 자유롭다는 특성을 갖고 있다. 바꿔 말하면 그만큼 다양하게 출제될 수 있기 때문에, 많은 유형을 접해보고 공부하는 훈련이 필요하다. 창의성과 아이디어는 덤이다. '가장 좋은 것'이라는 판단을 위해서는 기준이 주어져야 하는데, 그리디 알고리즘 유형의 문제들에서는 '가장 큰 순서대로' 혹은 '가장 작은 순서대로' 등의 기준을 알게 모르게 제시해 준다. 특히 정렬 알고리즘과 짝을 이뤄 출제된다. 예제 3-1 거스름돈 당신은 음식점의 계산을 도와주는 점원이다...

[이코테] 코딩테스트를 위한 파이썬 기본 문법과 라이브러리 [내부링크]

전공 영상처리 과목에서 numpy로 파이썬을 처음 접하였기 때문에, 차마 몰랐던 개념이나 라이브러리 함수들이 보였습니다. 따라서 이 책을 학습하기 전 코딩테스트를 위해 필요한 파이썬 기본 라이브러리나 문법을 한 번 훑으려 합니다. 0. 학습계획 알고리즘 공부에 사용할 교재는 이것이 코딩 테스트다 (나동빈 저)입니다. 줄여서 이코테라고 부르고, 코딩테스트에 입문하는 데에 바이블 격으로 정평이 나있는 책입니다. 금학기 내로 책을 다 뗄 계획에 있으며, 약 4달이 되는 기간 중 6주는 이론과 실전 문제를, 나머지 10주는 유형별 기출문제를 풀어보며 블로그와 깃허브에 아카이빙하려 합니다. 1. 리스트 컴프리헨션 리스트를 초기화하는 방법 중 하나로, 대괄호 안에 조건문과 반복문을 넣는 방식으로 사용한다. 특히 코..

[이코테] 구현 알고리즘 (상하좌우, 시각 예제) [내부링크]

구현? 코딩 테스트에서 구현이란, 머릿속에 있는 알고리즘을 소스코드로 바꾸는 과정이다. 어떤 문제를 풀던 간에 소스코드를 작성하는 과정은 필수이므로, 지엽적인 개념이라고도 볼 수 있다. 그러나 문제 해결 분야에서의 구현은 '풀이를 떠올리는 것은 쉽지만 소스코드로 옮기기 어려운 문제'를 의미한다. 구현을 위해선느 프로그래밍 언어의 문법을 정확히 인지하고 있어야 한다. 또한 문제 속의 조건이나 요구사항을 잘 충족하는지 고려해야 한다. 본 교재에서는 두 가지 유형의 구현 알고리즘을 다루고 있는데, 모든 경우의 수를 전부 계산하는 완전 탐색 알고리즘과, 문제에서 제시한 알고리즘을 한 단계식 차례대로 수행하는 시뮬레이션 알고리즘이다. 주의사항 파이썬 환경에서는 다른 언어들과 달리 정수 길이에 따른 자료형을 고려할..

[이코테 실전문제] 1이 될 때까지 (그리디 알고리즘) [내부링크]

문제 어떠한 수 N이 1이 될 때까지 다음 두 과정 중 하나를 반복적으로 선택하여 수행하려고 한다. 두 번째 연산은 N이 K로 나누어 떨어질 때만 선택할 수 있다. 과정1. N에서 1을 뺀다. 과정2. N을 K로 나눈다. 입력 조건 1. 첫째 줄에 N(2

[이코테 실전문제] 숫자 카드 게임 (그리디 알고리즘) [내부링크]

문제 여러 개의 숫자 카드 중에서 가장 높은 숫자가 쓰인 카드 한 장을 뽑는 게임이다. 단, 아래 게임 룰을 지키며 카드를 뽑는다. 게임 룰 1. 숫자가 쓰인 카드들이 NxM 형태로 놓여 있다. 이 때 N은 행의 개수를 의미하며, M은 열의 개수를 의미한다. 2. 먼저 뽑고자 하는 카드가 포함돼 있는 행을 선택한다. 3. 그 행에 있는 카드 중 숫자가 가장 낮은 카드를 뽑는다. 입력 조건 1. 첫째 줄에 숫자 카드들이 놓인 행의 개수 N과 열의 개수 M이 공백을 기준으로 하여 각각 자연수로 주어진다. (1

[이코테 실전문제] 큰 수의 법칙 (그리디 알고리즘) [내부링크]

문제 다양한 수로 이루어진 배열이 있을 때 주어진 수들을 M번 더하여 가장 큰 수를 만드는 법칙이다. 단, 배열의 특정한 인덱스에 해당하는 수가 연속 K번 초과하여 더해질 수 없다. 예시 예를 들어 순서대로 2,4,5,4,6으로 이루어진 배열이 있을 때 M이 8이고, K가 3이라고 가정하자. 이 경우 특정한 인덱스의 수가 연속해서 세 번까지만 더해질 수 있으므로 큰 수의 법칙에 따른 결과는 6 + 6 + 6 + 5 + 6 + 6 + 6 + 5인 46이 된다. 입력 조건 1. 첫째 줄에 N (2

[C++] C언어로 테트리스 만들기 ver.1 [내부링크]

1학기 중에 진행한 C++ 테트리스 프로젝트입니다. 직전 방학 때 C++ 강의를 수강하면서 마무리를 짓는 느낌으로 진행하게 되었습니다. 학과 동기 1명과 같이 진행하였고, Git을 통해 실무에서 어떻게 협업이 이루어지는지 느껴보려 했지만 후반에는 카카오톡으로 열심히 코드를 주고받는 저희를 발견할 수 있었습니다...ㅎㅎ 1. 초기 기획과 구현 방식 초기 기획입니다. 머릿속으로 그려보았을 때 막힐 만한 것들, 디테일이 필요한 것들을 필기해 놓았습니다. 병행 중인 수업이 많았던 관계로 일정은 넉넉하게 잡았습니다. 처음 맵을 구성할 때는 0과 1로 된 메모장을 읽어와 그 안에서 진행할 계획을 잡았지만, 그렇게 불러온 파일 위에서 값들을 수정하고 구분하는 것이 비효율적이라 느껴 30x15 배열을 만들고 그 위에서..

[라즈베리파이] 내 방안의 작은 식물원, 스마트 화분 만들기 [내부링크]

금학기 전공 과목 기말 프로젝트의 일환으로, 방 안에서 관리할 수 있는 미니 원예 시스템을 기획하였습니다. 전체적인 코드들은 파이썬 기반으로 제작되었으며 라즈베리 OS 내부의 Tonny Python IDE를 통해 시스템을 구동하였습니다. 프로젝트 발표 당시 사용한 프레젠테이션을 통해 글을 정리하려 합니다. 목차입니다. 간단하게 말하면 식물이 생장하는 데에 최적의 환경을 만들어 주는 물건입니다. 적색/청색 파장대의 조명과, 온습도 등을 조정해 외부의 환경이나 공간에 구애받지 않고 식물을 키울 수 있게 도와줍니다. 뒤에 보이는 물통에 물만 채워주면 됩니다. 전체적인 흐름은 LG의 틔움과 유사합니다. 물론 대기업에서 뽑아내는 유려한 외관 디자인은 유사하지 않습니다... 프레임은 아크릴보드를 사용하였습니다. 우..

[NEMO 2022] 국내 모빌리티의 현재와 미래 [내부링크]

2022년 2월 10일, 카카오 모빌리티의 첫 테크 컨퍼런스 네모2022(NEMO 2022)가 개최되었습니다. 온/오프라인으로 동시에 진행된 행사는 프로모션 사이트 내에서 사전등록을 통해 참여할 수 있었습니다. 본 포스팅에서는 컨퍼런스 세션 간에 인상깊었던 프레젠테이션과 개인적인 소감을 담아보려 합니다. 행사가 몇일 남지 않은 시점에서 사전등록을 했던 탓에 오프라인 참여는 진작 마감되었고, 유튜브 스트리밍을 통한 온라인 중계 형식으로 컨퍼런스를 시청하였습니다. 컨퍼런스는 약 두시간의 개회사와 기조연설로 구성된 PART1과 카카오모빌리티의 업계동향과 협업, 청사진 등을 발표하는 PART2로 진행되었습니다. PART2는 HD Map, UWB 등의 혁신 기술을 소개하는 Session1, 앞서 소개한 기술들을 ..

[해결] Cannot read properties of null (reading 'edgesOut') [내부링크]

리액트 환경에서 Styled-components 라이브러리 설치 시 발생한 오류. 스택 오버플로우 뒤져본 결과, 원인은 디렉토리 주소 속 비유니코드 문자라고 하는데 내 기존 디렉토리 주소에는 이상이 없었다 (전부 영어로 되어 있음) 원인 어이없게도.. 이전에 설치되어 있던 라이브러리 버젼에서 업데이트가 안 되어 있었음. Node / Npm 버젼은 최신으로 유지를 하고 있었어서 라이브러리 버젼까지 업데이트할 생각을 못하고 있었다. 해결 npm install styled-components@latest