개발자 지망생의 블로그

Dependency Inversion 객체지향 설계 5원칙 중 하나인 SOLID 원칙의 D가 Dependency Inversion을 일컫는다. Dependency Inversion을 포함해 모든 디자인 패턴의 핵심은 abstraction(추상화)이다. 이상적으로는 프로그래밍 언어가 추상화 메커니즘과 type을 모두 제공해야 한다. 파이썬에는 이 두 가지 모두 없다..! 그러나 여전히 Dependency Inversion을 구현할 수 있다. Abstract base class(ABC)라는 모듈을 사용할 수 있고, type hint도 제공한다. (⚠️ type hint는 언어 레벨에서 실질적으로 어떠한 제약 사항도 강요하지 않는다. 즉, type hint에 맞게 코드를 쓰지 않아도 에러를 발생시키지 않는다...

최근 비전공자로서 부족한 부분을 채우고자 CS 공부의 일환으로 네트워크를 공부했다. (대학교 한 학기 수업 분량 수강 완료!) 그러다 프론트엔드 개발자라면 네트워크/운영체제는 알면 좋은 것, 개발 방법론은 알면 안 답답한 것, 디자인 패턴 등은 모르면 답답한 것이라는 (개발 잘하는) 친구의 조언을 듣고 소프트웨어 디자인 패턴 공부를 우선순위에 두고 시작하게 되었다. 특히 ArjanCodes라는 유튜버의 영상이 디자인 패턴 공부하기 좋다고 추천받아 하루에 하나씩 보며 공부할 예정이다. Cohesion and Coupling Cohesion(응집도) : the degree to which elements of a certain class or function belong together 직역하면 cohesi..

1. OSI 7계층 모델이란? OSI 7계층 모델이란 네트워크에서 통신이 일어나는 과정을 7단계로 나눠서 설명한 모델이다. OSI 모델 외에도 TCP/IP 모델이 있는데 현재 인터넷은 TCP/IP 모델(updated)로 구현되어 있다. OSI 모델은 역할에 기반한 모델, TCP/IP 모델은 프로토콜에 기반한 모델이다. OSI 모델은 논리적인 모델, TCP/IP 모델은 실무적인 모델에 가깝다. 예를 들어, HTTP는 OSI 모델에서 7계층으로 분류되긴 하지만 6계층의 역할도 한다. OSI 모델은 실제 프로토콜에서는 나누어지지 않는 역할도 쪼개서 구분한 느낌인 것 같다. OSI 7계층 모델은 다음과 같이 구성되어 있다. TCP/IP 모델에서는 5, 6, 7계층을 묶어 응용 계층으로 칭한다. 7계층 - App..

프로그래머스 1단계 문제인 '소수 만들기'를 자바스크립트로 풀어보았다. [문제 설명] 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요. function isPrime(num) { if (num === 1) { return false; } for (let i=2; i acc + cur, 0)); return; } if (idx === nums.length) return; combination(idx+1, chosen, nums, sums); chosen = [...chose..

프로그래머스 1단계 문제인 'K번째수'를 자바스크립트로 풀어보았다. [문제 설명] 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작..

1. 프로토콜이란? 프로토콜(Protocol)이란 네트워크에서 노드와 노드가 통신할 때 어떤 노드가 어떤 노드에게 어떤 데이터를 어떻게 보내는지 작성하기 위한 양식이다. 다른 사람에게 물건을 보낼 때에 빗대어 생각하면 이해가 쉽다. 상황에 따라 물건을 택배를 통해서 전달할 수도, 퀵 서비스를 통해서 전달할 수도 있다. 또한 물건을 보낼 때는 보내는 사람의 주소와 받는 사람의 주소를 정확히 적어야 한다. 여기서 물건을 데이터, 택배와 퀵 서비스를 프로토콜이라고 생각할 수 있다. 대표적인 전송 계층*의 프로토콜인 TCP, UDP에 대해 알아보자. * 전송 계층 : end point 간 신뢰성 있는 데이터 전송을 담당하는 네트워크의 계층 신뢰성 : 데이터를 순차적, 안정적으로 전달한다. 전송 : 포트 번호에 ..

1. 네트워크란? 네트워크는 노드*들이 데이터를 공유할 수 있게 하는 디지털 전기 통신망이다. 인터넷은 네트워크 망의 한 종류로, 세계에서 제일 큰 네트워크이다. * 노드 : 네트워크에 속한 컴퓨터 또는 통신장비 2. 네트워크 구성 네트워크는 크게 네트워크 엣지, 네트워크 코어로 이루어진다. 2-1. 네트워크 엣지(Network edge) 네트워크 엣지는 네트워크 망의 가장자리로, 각종 애플리케이션(웹, 웹 브라우저, 웹 서버 등)과 호스트*가 이에 속한다. end systems (hosts) : 인터넷에 연결된 기기를 end system이라고 한다. client/server model : 서비스를 요청하는 컴퓨터를 클라이언트, 서비스를 제공하는 컴퓨터를 서버라고 한다. peer-peer model : ..

[React] react-query 적용하기 | useQuery, refetch 쇼핑몰 프로젝트에서 데이터 불러오는 방식을 react-query로 변경하고 있다. 기존에는 useState, useEffect를 사용해서 데이터를 불러왔는데, 이를 모두 대체해 좀 더 간결한 코드를 작성할 수 있다. react-query의 useQuery 사용법을 간단히 설명해보도록 하겠다. import { useQuery } from 'react-query'; const { data, isLoading, error } = useQuery(queryKey, queryFn?, queryOption); useQuery는 두번째 패러미터로 전달받은 query function을 실행시켜주고 이 query function의 상태에 따..

[React] useEffect 무한 루프 해결하기, cleanup function 며칠 전, React에서 side effect가 무엇인지 찾아보다 좋은 글을 발견해 번역해서 포스팅하였다. 전체를 번역해 올리려다 내용이 생각보다 길어 두 개로 나눠서 업로드한다. 앞선 포스팅에서는 useEffect에서 side effect가 무엇인지, useEffect를 어떻게 사용하는지에 대해 알아보았다. [React] Side effect(사이드 이펙트)란? | useEffect [React] Side effect(사이드 이펙트)란? | useEffect React 공식 문서를 읽다가 사이드 이펙트(side effect)라는 표현을 처음 봐서 무엇인지 찾아보았다. 찾아보다 좋은 영어 글을 발견해서 번역하며 공부해보 ..

[JS] Array 내장 메소드 reduce를 직접 구현해보자 모 기업 면접 질문으로 나온 reduce 직접 구현해보기... 헷갈려서 제대로 풀지 못했다. 너무 아쉽다. 지금 풀어보니 그렇게 어렵지 않아서 더욱 아쉽다. 왜 이걸 못 풀었을까? 🤔 패인 분석 'reduce가 원본 배열을 변경하는지 / 하지 않는지'가 헷갈렸다. (하지 않는다.) 지금 생각해보면 면접관분들한테 질문을 할 수도 있었던 부분인데, 당황해서 그냥 못했다. 원본 배열을 변경한다고 생각하고 풀면서 열심히 삽질만 했다. 하하! 🔨 console.log(reduce([1, 2, 3, 4], (acc, curr) => acc + curr, 0)); // 10 console.log(reduce([1, 2, 3, 4], (acc, curr) ..