목록분류 전체보기 (13)
구어체로 설명하는 다이어리
데이터 통신에서 동기식 전송과 비동기식 전송은 송신측과 수신측이 어떻게 시간적인 타이밍을 맞추는가에 따라 달라집니다. 동기식 전송 동기식 전송은 블록 단위로 데이터를 전달하는 방식인데 이렇게 묶인 데이터 단위를 프레임이라고 합니다.문자 동기 방식과 비트 동기 방식이 있습니다. 문자 동기 방식 : 데이터를 전송할 때 특정한 제어 문자를 사용해서 데이터의 시작과 끝을 나타냅니다.데이터는 고정된 크기 (Frame) 를 가지고 데이터를 처리합니다.제어 문자의 오버헤드로 인해 효율이 떨어질 수 있습니다. 비트 동기 방식 : 비트 단위로 데이터를 전달하는 방식입니다.문자가 아닌 개별 비트 하나하나를 데이터 전송 단위로 사용하여 더 세밀한 데이터 전송을 합니다. 비동기식 전송 비동기식 전송은 하나의 글자를..
데이터 전송이란 컴퓨터 정보를 다른 곳으로 보내는 것을 말합니다.그 정보는 숫자나 문자, 혹은 음악일 수도 있고 사진일 수도 있는데요.오늘은 그 데이터를 전송하는 방식 중 직렬 전송과 병렬 전송에 대해 알아보려 합니다. 직렬 전송 직렬전송은 하나의 통신 채널을 통해 한 번에 한 비트씩 전송합니다.보내는 쪽과 받는 쪽에서 하나만 채널을 사용한다면 상당히 간단하고 구축이 쉽겠죠?다만 한 비트씩 보내는 것이다 보니 속도가 느립니다. 병렬 전송 병렬전송은 여러 개의 통신 채널을 통해 한 번에 여러 비트를 전송합니다.한 번에 여러 비트를 전송하니 당연히 빠를 수밖에 없습니다.대용량 데이터를 전달하는 데에 강점을 가지고 있지만, 신호 간섭 등에 의해 장거리 전송 시 안정성이 떨어진다고 하네요. ...
getServerSideProps는 Next.js에서 SSR (Server Side Rendering) 하기 위한 방법입니다.서버 단에서 데이터를 받아와 클라이언트 페이지에 렌더링하는데요.이 함수는 페이지를 요청할 때마다 호출되고, HTML을 서버 단에서 먼저 생성하여 클라이언트에 전달합니다.미리 페이지를 생성한다는 점에서 역시 SEO에 좋은 선택입니다. import type { InferGetServerSidePropsType, GetServerSideProps } from 'next';type Repo = { name: string; stargazers_count: number;};export const getServerSideProps = (async () => { // Fetch data f..
데이터 전송에는 두 가지 종류가 있습니다. 바로 아날로그 전송과 디지털 전송입니다.각각 무엇을 뜻하는지 알아보겠습니다. 아날로그 전송 아날로그 전송은 연속적인 전기신호로 데이터를 전송하는 방식입니다.자연 현상이나 물리적 특성을 그대로 전달하는데 사용됩니다.음악을 들을 때 파형 같은 게 나오는 걸 본 적이 있으시죠?바로 이러한 것들이 아날로그 신호의 대표적인 예시입니다. e.g. 오래된 전화 통신, 라디오 방송, 텔레비전 방송 등 디지털 전송 디지털 전송은 비연속적인 0과 1의 비트(이진수)로 데이터를 전송하는 방식입니다.데이터를 일정한 값으로 변환하여 전송하고, 수신 측에서 이를 해석해서 원래의 정보로 복원합니다.모든 것을 디지털 신호로 변환하기 때문에 주로 전자기기의 데이터 전송에서 사용됩니..
Next.js는 Static Site Generation (SSG, 정적 사이트 생성) 을 합니다.SSG는 프로젝트 빌드 시점에 미리 사이트를 만들어 놓는 것인데요.이렇게 미리 사이트를 만들어 놓으면 클라이언트 측에서 페이지에 접속했을 때 서버 측에서는 빌드 시 미리 생성해두었던 페이지를 클라이언트로 전달하고,클라이언트에서는 서버 측에서 받은 페이지를 그대로 뷰에 띄워주기만 하면 되기 때문에 페이지 로딩 속도가 빨라집니다.getStaticProps와 getStaticPaths는 이 SSG를 하기 위한 두 가지 방법입니다. getStaticProps getStaticProps는 빌드 시에 데이터를 가져와서 페이지를 생성합니다. import type { InferGetStaticPropsType, Ge..
네트워크 토폴로지 토폴로지란 외형적인 연결 모양을 의미하는 용어라고 합니다.그렇다면 앞에 네트워크가 붙은 네트워크 토폴로지란, 네트워크의 연결 모양이겠죠?정제된 언어로 서술하면 네트워크 토폴로지란 컴퓨터 네트워크 장치들이 논리적, 물리적으로 어떻게 연결되어 있는지를 나타내는 구조나 배치를 말합니다. 네트워크 토폴로지의 종류 토폴로지의 종류에는 크게 버스형, 성형, 망형, 링형, 계층형이 있습니다. 차례대로 알아봅시다. 버스형 (Bus Topology) 버스형은 모든 네트워크가 하나의 중앙 케이블 (버스)에 연결되는 방식입니다. 모든 네트워크가 하나에 물려있다보니, 중앙 케이블에 문제가 생기면 전체 네트워크가 영향을 받습니다. 장점- 설치비용이 적고, 신뢰성이 높음 - 구조가 간단하고 확장에 용이..
개발자는 언제나 선택의 기로에 서 있다. 성장과 안주 사이에서. 개발자란 평생 공부해야 하는 직군이라고 한다. 그렇다면 다른 직업군은 공부를 안 해도 되는가? 당연히 아니다. 어떤 분야든 공부는 지속적으로 해야 한다. 다만 많은 개발자들이 입을 모아 '평생 공부해야 하는 직업'이라고 말하는 이유는 그만큼 기술 트렌드가 빠르게 바뀌기 때문이라고 생각한다. 이것이 무얼 의미하냐면, 내가 현재의 기술 스택에 안주하고 있다가는 이직할 곳이 없다는 뜻이다. 극단적인 예시를 들자면 나는 기술 트렌드가 바뀌는 바람에 직업을 두 번이나 바꿔야 했다. 처음엔 마크업자라는 직업이었는데, 이직할 때는 퍼블리셔로, 또 한 번 이직할 때는 프론트엔드 개발자로 조금씩 단계를 올려 직장을 구했다. 이직할 때를 떠올려보면 구인구직..
리액트로 개발을 하다보면 렌더링을 두 번 하는 것을 확인할 수 있습니다. 왜 렌더링을 두 번씩이나 하는지 궁금해서 검색해보니, Strict Mode 때문이라는 걸 알 수 있었습니다. 그럼 Strict Mode가 뭐길래 이렇게 개발자를 귀찮게 하는걸까요? Strict Mode Strict Mode란 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. 개발 모드에서만 활성화되며, 프로덕션 모드에서는 영향을 끼치지 않습니다. Strict Mode를 고려하는 것은 너무 귀찮은 일인데, 그럼 Strict Mode를 주석 처리해서 두 번 호출하지 않도록 설정하면 끝나는 일일까요? 정답은 아니오 입니다. 왜 그러한지를 이해하려면 리액트의 철학을 이해해보면 쉽습니다. 하단은 글쓴이가 이해를 돕기 위해 생..
Call by Value (값에 의한 호출)와 Call by Reference (참조에 의한 호출) 이 두 가지는 함수가 인자를 전달하고 처리하는 방식을 말합니다. Call by Value 값에 의한 호출은 원시 타입에서 나타나며, 함수의 인자로 전달한 값을 복사하여 사용합니다. 무슨 이야기인지 코드를 보면서 알아봅시다. function myFunction(a) { a = a + 100; console.log(a); //- 101}let x = 1;myFunction(x);console.log(x); //- 1 이처럼 myfunction 함수에서 매개변수 a로 받을 때 인자로 받은 x의 값을 복사해서 사용합니다. 원본 값의 복사본을 수정하는 것이기에 myFunction 함수 안에서 값을 ..
내가 F-lab을 알게 된 건 개발자 지인 때문이었다. 간혹 개발자 지인들과 이야기 하다보면 다른 세계에 사는 것처럼 느껴질 때가 있다. 트렌디한 기술을 바로바로 도입해서 써보고 장단을 빠르게 분석하고, 문제를 해결해 나가며 개인의 성장까지 요하는 사람들. 내가 개발자로 일하면서 꿈꾸는 이상 중에 하나다. 왜 이상이라고 표현하냐면, 나의 현실은 그렇지 않았기 때문이다. 요즘 시대에 php로 새로운 프로젝트를 시작하기도 해? jQuery 같은 거 아직도 쓴다고? 라는 말을 주변에서 실제로 들었는데, 진심으로 중소기업의 현실을 몰라서 하는 말이다. 존재하는 기술의 장점을 최대한 활용해 빠르게 일정을 맞춰내는 것만이 전부다. 혹은 내가 아는 어떤 곳은 git을 쓰지 않는 곳도 많다. 개발자가 형상관리조차 할..