뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

작업을 하다보면 여러가지 git branch가 나타나게 된다. 우리 회사의 경우 version을 업그레이드 해왔기 때문에 크게보면 v2.0.0, v3.0.0, v4.0.0 이런 식으로 업데이트 된 브랜치들이 존재하고 있다. 최신의 버전을 원하는 경우 git clone을 한 다음에 pull을 당겨도 되긴하겠지만, conflict가 나는 경우가 있었다. 그래서 한번에 깨끗하게 내가 원하는 버전을 당기고 싶었다. 그렇다면 어떻게 git에서 내가 원하는 특정 branch만 clone 할 수 있을까? git clone -b [branch name] --single-branch [git url] 예) git clone -b v4.0.0 --single-branch https://github..... 이렇게 위와 ..

이번에 작업을 하면서 처음 ogp에 대해서 알아보았다. 이는 흔히 우리가 카카오톡이나 슬랙 등에 url을 넣으면 나오는 아래와 같이 나오는 웹페이지 미리보기 같은 것이다. 처음에는 자동으로 크롤링이 되면서 필요한 부분이 크롭되어 나오는 것으로 생각 했는데, 찾아보니 ogp라는 것이 있어서 이번에 배포를 하면서 적용하게 되었다. OGP는 Open Graph protocol 이라고 하여 OG라고도 불리는 것 같다. 이는 meta-tag(메타태그)이며, html에 적용하면 되는 것이다. 메타태그는 무슨 용도일까? 이는 사람에게 보여주기 위한 정보가 아닌, 웹 서버와 브라우저 간의 상호 정보 전달을 위해 사용된다고 할 수 있다. 문서의 디자인에는 영향을 미치지 않으며, 어떤 정보를 담고 있고, 누가 만들었고, ..

og 라고도 불리는 Open Graph Protocol. 나도 이번에 처음 적용해보면서 이런 이름이 있다는 걸 알았다. 무엇인지 알아보자. Open Graph Protocol(오픈 그래프 프로토콜)은 Facebook에서 최초로 정의한 meta-tag 규약이라고 한다. 쉽게 말하면 링크 프리뷰(Link Preview)를 말하는 것인데, 카카오톡이나 슬랙 같은 곳에 url을 복붙 하면 url 뿐 아니라 이미지도 함께 나오게 되는데 그것을 말하는 것이다. 예시) 과거와 달리 누구나 웹사이트를 만들 수 있는 세상이 된 요즘은 우후죽순으로 하루가 멀다하고 수 십, 수 백, 수 천개의 웹사이트들이 만들어지고 있다. 그러다보니 이제는 정확한 정보를 찾는 것이 "일"이 되었다. 그렇기 때문에 메타태그를 잘 지정해놓고 ..

일반적으로 많은 회사에서 redux, mobx를 사용하는 얘기는 들었다. 나 또한 Redux, mobx는 경험이 있지만 Recoil은 얘기만 들어봤지 사용해보진 않았는데 그래서 documentation을 따라해보면서 알아가보려고 한다. 나는 머리가 좋지 않다. 그래서 하나하나 잘 따져가면서 공부를 해야한다. redux를 익힐 때 고생했던 경험을 살려... 이번에는 redux를 익혔을 때의 순서를 지켜가면서 공부를 해봐야겠다 About Recoil 우선 각 상태관리 라이브러리들의 architecture 에 대해서 머리에 그림을 그려야 한다. Redux의 경우, Flux architecture를 기반으로 했고, mobX의 경우 Proxy, Context API는 context를 기반으로 했다. 그렇다면 R..

타입스크립트를 사용 할 일이 없었다. 그런데 생겨버렸다...! 그래서 미리 좀 공부를 하려고 한다. 자바스크립트에 타입스크립트를 적용하는 건 그나마 좀 이해가 되는 부분인데, 리액트 그것도 리덕스에 타입스크립트를 적용하고 있자니 뭔가... 편한 듯 불편한 듯... 리덕스가 타입스크립트를 편하게 쓰도록 만들어놓은게 아닌가? 라는 생각이 들었다. 그렇다면... 리액트 리덕스 타입스크립트! 시작해보자!! 우선 내가 만든 것은 아주 간단하다! input 태그에 api에 맞는 텍스트를 넣으면 단순히 호출해주는 것을 만들었다. 우선 전체적인 폴더 트리, 그리고 리덕스의 폴더트리를 보자면 아래와 같다. 자, 리덕스를 시작해보자! 우선 actions 폴더에서 타입을 만들어볼 것이다. // src > redux > a..

2차원 배열은 Javascript를 할 때도 헷갈릴 수 있는 부분이다. 그러나 또 굉장히 많이 사용 되므로 잘 알아두어야 한다. 행렬 데이터를 표현 할 때, 그래프 알고리즘을 처리할 때 등 다양한데 우리가 흔히 볼 수 있는 것으로는 표 구조가 2차원 배열과 흡사하여 2차원 배열로 모델링 하기 쉽다고 할 수 있다. 2차원 배열이란? 2차원 배열은 바로 1차원 배열이 중첩되었다는 의미이다. 그래서 대괄호([])를 두번 연속해서 사용하여 표현하게 된다. 이를 표현하자면 아래와 같다. 자료형 배열이름[행][열] = {{값, 값}, {값, 값}} int a[10][10] // 10 x 10 2차원 배열 또한 일반적인 배열처럼 index 번호 0부터 시작하며 주로 2중 for문으로 많이 사용되어진다. A[0][0]..

기본적으로 프로그램을 돌리기 위해서는 메모리 상에 프로그램이 적재 되어야한다. 이 후에 프로그램을 읽게 되는 것이다. 즉, 메모리에 프로그램을 돌릴만한 공간이 있어야 한다는 것이다. 이러한 메모리는 아래와 같이 크게 네 가지로 구분 해서 관리를 할 수 있으며, 각각은 그 아래 칸과 같은 변수를 관리하고 있다. 코드(Code) 영역 데이터(Data) 영역 힙(Heap) 영역 스택(Stack) 영역 소스 코드 전역 변수 정적 변수 동적 할당 변수 지역 변수 매개 변수 그렇다면 각각의 영역에서 관리하고 있는 변수에 대해서 무슨 말인지 알아보자. 우선 소스 코드(Source Code) 라는 것은 말 그대로 한 줄, 한 줄 씩 실행 시킬 수 있는 소스 코드를 말한다. 이 후 컴퓨터가 이를 이해하기 위해서는 이 소..

TCP / UDP에 관해서는 사실 그 전부터 들어왔지만, 그 당시에는 보기가 힘들고 무슨 말인지 못 알아들어서 넘어가곤 했었다. 하지만 최근 다시 읽어보니 이해가 가는 부분이 있어 정리를 하고자 한다. 더불어 좋은 블로그 글과 영상 등을 참고했다. Transport Layer ( 전송계층 ) TCP와 UDP는 OSI 표준 모델과 TCP/IP 모델의 전송계층에서 사용 되는 프로토콜이다. 이러한 TCP와 UDP에 관하여 알아보기 전에 간단하게 Transport Layer에 대해서 알아보자! Transport Layer는 End Point 간의 신뢰성 있는 데이터 전송을 담당하는 계층을 말한다. 여기서 신뢰성이란, 데이터를 순차적이고 안정적이게 전달하는 것을 말하고, 전송은 포트번호에 해당하는 프로세스에 데이..