개발자 지망생의 블로그

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

[JS, Phaser 3] 자바스크립트로 게임 개발하기 | 뱀파이어 서바이벌 클론코딩 2022 제주 웹 컨퍼런스에서 발표한 내용을 포스팅으로 정리합니다. 발표 자료는 해당 링크에서 확인하실 수 있습니다. 해당 컨퍼런스는 2022년 6월 2일~4일 동안 진행되었습니다. 저는 'JavaScript로 게임 만들어서 부자되기'라는 세션을 다음과 같은 내용으로 진행했습니다. 개발로 부수입 창출하기 Phaser 3 소개 및 주요 개념 뱀파이어 서바이벌(Vampire Survivors) 클론코딩 앞의 내용은 생략하고, 뱀파이어 서바이벌 클론코딩에 대해 자세히 정리해보려고 합니다. 뱀파이어 서바이벌 클론코딩 일단 제가 클론코딩해서 개발한 Meow Meow Fuzzyface를 한번 플레이해보고 오시면 좋을 것 같습니다...

[React] Side effect(사이드 이펙트)란? | useEffect React 공식 문서를 읽다가 사이드 이펙트(side effect)라는 표현을 처음 봐서 무엇인지 찾아보았다. 찾아보다 좋은 영어 글을 발견해서 번역하며 공부해보았다. 영어 원문을 읽고 싶으신 분은 맨 밑 reference에 있는 주소를 참고하시면 된다. 1. 왜 "useEffect"인가? 2018년에 코어 React hooks가 추가되었을 때, 많은 개발자들이 "useEffect"라는 이름에 혼란스러워했다. useEffect에서 "effect"가 의미하는 바는 무엇일까? effect는 "side effect"라는 함수형 프로그래밍 용어를 나타낸다. side effect가 무엇인지 이해하려면 먼저 순수 함수의 개념을 이해해야 한..