공영재의 개발일지

Queue란? Queue란 한쪽 끝에서 삽입이 이루어지고 반댓쪽 끝에서 삭제가 이루어지는 형태의 자료구조로, 가장 마지막에 들어온 데이터가 가장 늦게 삭제됩니다. 이러한 구조를 선입선출, FIFO(First In First Out)이라 합니다. Queue는 enQueue(item)와 deQueue()로 데이터의 삽입 및 삭제가 가능합니다. 처음 요소를 front, 마지막 요소를 rear라 칭하며 Qpeek()을 통해 front 요소를 삭제하지 않은 채로 return 할 수 있습니다. Array나 Linkedlist를 통해 Queue를 구현할 수 있습니다. Queue의 종류 Queue의 종류로는 선형 Queue와 원형 Queue가 있습니다. 그 외에도 다른 Queue들이 있지만 우선 위 두가지 Queue에..

Stack이란? Stack은 데이터를 차곡차곡 쌓아 놓은 형태의 자료구조로, 가장 마지막에 삽입된 데이터가 가장 먼저 삭제됩니다. 이러한 구조를 후입선출, 즉 LIFO(Last In First Out)이라 합니다. Stack의 연산은 크게 push(item), pop()으로 이루어집니다. 즉 pop()을 실행하면 마지막으로 push로 넣은 item이 나옵니다. 그 외에도 Peek(), isFull(), isEmpty() 등의 함수가 있습니다. Peek() 마지막으로 push한 item을 빼지않고 출력만 해주는 함수이고, isFull()은 stack overflow를 방지하기 위해 stack이 꽉 찼는지 확인할 때 쓰는 함수입니다. isEmpty()는 반대로 스택이 비어있는지 확인할 수 있고, boolea..

2021년 한 해 동안 창업을 하며 많은 것을 배우고 느꼈으나 올해 군 입대를 하며 그 기억이 서서히 희미해져 갔습니다. 당시 배운 점들과 그 감정들을 잊지 않기 위해, 블로그를 통해 느낀 바를 상기시키고자 합니다. 1편 https://yeongjaekong.tistory.com/7 대학생 스타트업 회고 (1) 2021년 한해동안 창업을 하며 많은 것을 배우고 느꼈으나 올해 군 입대를 하며 그 기억이 서서히 희미해져 갔습니다. 당시 배운점들과 그 감정들을 잊지 않기 위해, 블로그를 통해 느낀 바를 상기 yeongjaekong.tistory.com 2편 https://yeongjaekong.tistory.com/8 대학생 스타트업 회고 (2) 2021년 한 해 동안 창업을 하며 많은 것을 배우고 느꼈으나 ..

블로그를 보다보면 스크롤을 내림에 따라 목차가 따라오는 플로팅 목차를 보신 적이 있으실텐데요. 이를 TOC(Table Of Contents)라 합니다. 오늘은 TOC를 만들어 보려합니다. TOC란 Table Of Contents의 약자로, 작성한 글의 태그에 따라 목차를 생성하여 보여줍니다. tocbot을 활용해 만들어 보았습니다. https://tscanlin.github.io/tocbot/ Tocbot Tocbot builds a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or long markdown pages because it makes them easier ..

다른 개발자분의 블로그를 보던 중 본인만의 로딩 GIF가 있는걸 보곤 로딩화면을 넣어보고 싶었습니다. 먼저 html 편집 전에, 로딩화면에 나올 본인만의 gif 파일이 필요합니다. 저는 싸지방에서 만들것이기에, 웹 상에서 gif를 무료로 만들 수 있는 Canva를 사용하였습니다. https://www.canva.com/create/gif-maker/ Free GIF Maker: Create GIFs from images and videos | Canva Express yourself in the most fun and creative way. Make a GIF from images and videos using Canva’s free GIF maker. www.canva.com 회원가입 한 후 gif ..

API란 무엇일까? 개발을 하며 여러 API를 사용하지만, 마음으로는 알겠으나 설명하라면 정확하게 설명할 수 없었기에 API의 개념에 대해 짧게 정리를 해볼까 합니다. API란 Application Programming Interface의 약자로, 프로그래밍 언어의 기능을 제어하고 어플리케이션에서 상호작용할 수 있도록 만든 인터페이스입니다. 즉, "클라이언트와 리소스 사이의 게이트웨이"와 같은 느낌입니다. 이때 클라이언트는 웹에서 정보에 접근하려는 사용자이고, 리소스는 이미지, 텍스트를 포함한 모든 유형의 데이터를 의미합니다. API를 통해서 클라이언트에게 리소스를 공유하고 보안, 인증 등을 유지한 채 웹 서비스를 제공할 수 있습니다. 정보를 찾던 도중 찰떡인 비유가 있었습니다. 일련의 개발 과정을 레스..

군장병 SW 역량 교육을 끝마치고 배운 것을 리마인드할 겸, 프로젝트의 일환으로 Node를 활용해 제가 관심있어하는 주식과 관련된 서비스를 만들어보고 싶었습니다. 군인 신분이기에 사지방에서 이용할 수 있는 goormIDE를 통해 개발하고자 했습니다. 우선, 공개된 public github 코드를 서치하여 학습용으로 클로닝해보려 했지만 수많은 에러를 맞닥뜨리게 되었습니다. Error 1 - 빈 화면 먼저 github에서 정리가 잘된 Stock Webapp을 찾아 클로닝했지만 URL에 접속해도 화면이 보이지 않았습니다. 이유는 구름ide는 원격 서버에서 자체 웹서버가 돌아가기 때문에 localhost:3000으로 접속할 수 없었기 때문입니다. 구름ide 프로젝트 > 실행 URL과 포트 > 포트를 3000으로..

이전에 작업하던 Github의 React 프로젝트를 Ubuntu 가상환경에서 clone하여 실행하고자 했는데, npm start를 했지만 "react-scripts: not found" 에러와 함께 실행되지 않았습니다. ※ react-scripts에는 CRA(Create-React-App)에서 사용하는 스크립트가 들어있습니다. CRA의 package.json을 보면 웹앱의 빌드를 react-scripts 라이브러리를 통해 진행하는 것을 알 수 있습니다. package.json은 해당 프로젝트가 의존하는 패키지들의 리스트를 속성-값 형태의 json 파일로 저장한 것이며, 다른 환경에서의 빌드를 재생가능하게 만들어주는 파일입니다. 해당 에러는 프로젝트의 package.json의 의존성이 맞지 않을 때 등장합..

군 장병 SW/AI 교육 진행 시 클라우드 IDE인 goormIDE를 사용합니다. 학습 내용을 기록하기 위해 Github와 연동하는 방법을 알아보겠습니다. goormIDE에 들어가서 컨테이너를 생성 후 실행합니다. 컨테이너 OS의 기본값은 Ubuntu 18.04를 사용합니다. 사실상 CloudIDE에 한정된 것이 아닌 Ubuntu 환경에서의 Git 연동방법이라 보셔도 됩니다. 먼저 컨테이너 실행 후 터미널에서 아래와 같은 명령어로 Git을 설치합니다. sudo apt-get install git 설치가 완료되면 디렉토리를 만들고 해당 디렉토리로 이동한 뒤 git init을 실행합니다. 그 뒤 계정 정보를 입력하기 위해 아래와 같은 명령어를 실행합니다. sudo git config --global user..

먼저 callback 함수를 살펴보겠습니다. callback을 알아보기전, 우선 함수의 실행 순서를 알아야합니다. 프로그래밍엔 동기와 비동기라는 개념이 있습니다. 동기(Synchronous)는 실행 순서가 순차적인 반면, 비동기(Asynchronous)는 실행 순서가 보장되지 않습니다. 즉, 이전 함수의 실행이 마무리되지 않더라도 다음 함수가 실행될 수 있습니다. Javascript는 웹 상에서 동작하는 경우가 많아 효율성을 위해 비동기적으로 코드가 실행됩니다. 하지만 코딩을 할 땐 실행 순서가 지켜져야 하는 경우가 많습니다. 그럴 때 순서를 정해줄 수 있는 것이 바로 callback 함수입니다. callback 함수는 다음과 같이 사용합니다. callback이 없었다고 가정하면, first()의 set..