코드로 우주평화

Mermaid 란?다이어그램을 그릴 때, 일반적으로 마우스로 그리는 GUI 기반의 툴을 사용했을 것이다. Mermaid 는 GUI 기반 툴과 달리 사용자가 직접 코드를 입력하여 다이어그램을 그리는 툴이다. (코드로 다이어그램을 그린다고? 개발자로서 이건 못 참지..!) 코드로 다이어그램을 그린다고 하니 어렵게 느껴질 수도 있겠지만.. 놀라지 마시라, 여러분이 mermaid 코드에 대해 아무것도 몰라도 지금 당장 다이어그램을 그릴 수 있다! (우리에겐 챗지피티가 있으니까🤭) 아래는 노션과 챗지피티를 활용하여 30초 만에 인물관계 다이어그램을 그리는 영상이다. Mermaid 빠르게 시작하기앞서 영상과 동일한 예제로, 5명의 인물 관계를 다이어그램으로 그려보겠다. - 철수: 철수는 영희와 스터디 그룹을 만들..

Makefile 왜 써야 해? 개발 환경(dev, stage, qa, production 등)에 따라 실행해야 할 스크립트가 다를 수 있다. 이런 경우 각각의 명령어와 스크립트 이름을 외우지 않으면 적합한 스크립트를 찾아 실행하기가 어렵다. 개발에 집중할 시간도 부족한데 명령어 메모를 이리저리 검색하는 것은 시간낭비처럼 느껴질 것이다. Makefile을 이용하면 이런 문제를 쉽게 해결할 수 있다. Makefile은 ‘make [target이름]’ 라는 간단한 명령어만으로 미리 세팅해둔 스크립트들을 실행할 수 있도록 도와준다. 이번 글에서는 누구나 쉽게 따라 할 수 있는 Makefile 간단 사용법을 설명하겠다. 사용법 적용하고 싶은 디렉터리로 이동해 터미널 shell 에서 touch 명령어로 Makefi..

HEAD 현재 사용 중인 브랜치의 선두 부분을 나타내는 이름 기본적으로는 'master'의 선두 부분 'HEAD' 를 이동하면, 사용하는 브랜치가 변경됨 stash 파일의 변경 내용을 일시적으로 기록해두는 영역 stash 를 사용하여 아직 커밋하지 않은 변경을 일시적으로 저장해 둘 수 있음 stash 에 저장된 변경 내용은 나중에 다시 불러와 원래의 브랜치나 다른 브랜치에 커밋할 수 있음 fetch 원격 저장소의 데이터를 로컬에 가져오기만 하기 pull과 차이점은 pull은 원격저장소의 내용을 자동으로 병합 fetch는 원격 저장소의 최신 이력을 확인할 수 있음 최신 커밋 이력은 이름 없는 브랜치로 로컬에 가져오게 되고 이 브랜치는 'FETCH_HEAD'의 이름으로 체크아웃 할 수 있음 --abort r..

기업 협업이 내일이면 마지막이다. 기업 협업을 4주간 진행하면서 느낀 점은 cs지식이 실제 실무와 많이 연결되어 있다는 것이다. 예를 들어 나는 개발에서 데이터 저장은 DB만 사용하는 줄 알았는데, 문제를 어떻게 바라보느냐에 따라 DB 외에도 메모리, 파일, 등을 사용할 수 있어야 한다는 것을 알게되었다. 내가 이번에 다룬 주식 호가 데이터는 전형적인 '스트리밍 데이터'로 그 양이 어마어마하다. 이렇게 방대한 데이터를 DB에 그대로 저장하는 것은 좋은 방법이라고 할 수 없다. 왜냐하면 하나의 테이블에 매일 수백만 개의 데이터를 쌓는 것은 데이터 관리나 활용 측면에서 매우 비효율적이기 때문이다. 하지만 이런 데이터를 특정 기준에 따라 여러 파일로 분산 저장한다면 어떨까? 데이터를 관리하기도, 활용하기도 매..

뭔가를 듣고 배운 것 같고 개념도 이해가 되는 것 같은데 뭐가 뭔지 모르겠는 것이 왔다. 그건 바로 RESTful 이다. 일단 이름부터가 마음에 안든다. 뭔지 모르겠다. 풀어보자면 Representational State Transfer 이라고 한다. 네이버 사전에 찾아보니 [확장성 생성 언어(XML) 파일로 된 웹 페이지를 읽어 원하는 정보를 수집하는 기능.] 라고 한다. 한글을 봐도 모르겠다. 공부를 해도 잘 모르겠어서 뭐라 딱 정의하기는 어렵고 그냥 일단 현재까지 공부한 내용을 정리해보겠다. (글 마지막 쯤에는 조금 이해가 됬을지도..?) REST 3가지 구성 요소 1. 자원(Resource) : HTTP URI (특정 자원의 위치 주소) 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server..

맥북에서 ip주소를 확인하는 방법을 알려주겠다. 첫 번째는 시스템 환경설정에서 확인하는 방법이다. ip 주소가 딱 보인다. 두 번째는 터미널에서 확인하는 방법이다. 터미널에서 ifconfig | grep inet 이라고 치면 중간에 ip주소를 확인할 수 있다. 하지만, but 이렇게 명령어를 입력해도 찾을 수 없는 오류가 날 수도 있다. 이런 경우에는 터미널에 vi ~/.zshrc 명령어를 입력하고 환경변수를 열어 새로운 경로를 추가해야 한다. #zshrc export PATH="/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin" 추가한 후에는 위에 위에 처럼 정상적으로 작동하는 것을 볼 수 있다.

git 기본 명령어 정리 1. 원하는 디렉토리로 들어가 git 초기화하기(깃 연동 준비) git을 사용하기 위해서는 우선 원하는 디렉토리(폴더)로 들어가 git을 초기화 해주어야 합니다. 초기화라고 해서 어렵게 생각하지 마시고 github과 연동하는 준비단계라고 봐주시면 됩니다. "이제부터 이 폴더를 github과 연동할거야"라고 선언하는 것이죠. git init 2. git 연동하기 연동할 준비를 마쳤으면 실제로 연동합니다. 깃헙의 레파지토리의 주소를 복사해 아래 명령어와 함께 실행합니다. git remote add origin [깃헙 레파지토리 주소] 3. git 올리기 그리고 log 확인 작업한 내용을 github에 올리기 위해서는 아래 세 단계가 필요합니다. 첫 번째는 git add입니다. 어떤 ..

일반적으로 우리가 사용하는 인터넷은 HTTP를 사용한다. 1. HTTP란? HyperText Transfer Protocol 사전적 의미로 살펴보자면 다음과 같다. Hypertext : 하이퍼텍스트(문장 중의 어구나 그것에 붙은 표제, 표제를 모은 목차 등이 서로 연결된 문자 데이터 파일) Transfer : 장소를) 옮기다, 이동[이송/이전]하다 Protocol : 프로토콜, 통신 규약 즉, HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 인터넷 데이터 통신 규약이라고 할 수 있다. 예를들어 우리가 그림을 요청하면 서버는 요청한 그림을 응답해주는데 이 과정이 HTTP 틀 안에서 이루어지는 것이다. 진짜진짜 쉽게 말해서 컴퓨터들끼리 HTML파일을 주..

HTML 처음 공부할 때 무조건 마주치는 문제 중 하나가 바로 inline, block 문제다... 나는 분명 한 줄에 넣고 싶은데 밑으로 내려가고.. 밑으로 내려갔으면 좋겠는데 한 줄에 다닥다닥 붙어버리고... 오늘은 이 문제를 해결해보도록 하겠다! 우선 이 문제들은 inline과 block, 두 개의 display 속성 때문에 벌어진 일이다. inline : 같은 줄에 위치 해도 Ok. 나는 관대하니까! block : 나는 하나의 블럭. 같은 줄에 나만 있어야 함! "하지만 나는 디스플레이 속성을 설정한 적이 없는걸..?🤔 " 물론 그럴 것이다. 왜냐햐면 위의 inline, block 속성은 각 태그 자체적으로 이미 가지고 있으니까! (그러니 자기들 맘대로 위치가 뒤죽박죽 되었던 것이다!) 자 그럼 ..

HTML로 웹페이지를 만들다 보면 내가 넣은 요소들이 내 맘대로 위치하지 않는다. (아주 자기들 멋대로다!) 그렇기 때문에 우리는 CSS 스타일로 내가 원하는 위치에 요소들이 위치할 수 있도록 position 속성을 조절해 주어야 한다. 자 그럼 이제부터 position 3 대장을 만나보자! 1 대장 relative -> 사전적 의미 : 상대적인 2 대장 absolute -> 사전적 의미 : 절대적인 3 대장 fixed -> 사전적 의미 : 고정된 사실 사전적 의미만으로 벌써 감이 잡힐 것이다. relative는 상대적으로 위치시키는 것이고 absolute는 절대적으로 위치시키는 것이고 fixed는 기냥 붙박이처럼 박제시키는 것이다! 설마 아직 감이 안 잡혔다고? 그럼 아래 예제 코드를 살펴보자! 1대장..