서버 생성 node.js 환경에서 웹서버를 생성하기 위해, Express.js를 사용한다. 서버를 생성함에 있어서 다음과 같은 작업이 수반 되어야 하는데, 해당 내용은 '백엔드 세팅'에서 상세하게 다루도록 한다. '백엔드 셋팅' 에서 다룰 내용 1) 뷰 엔진 셋팅(set) 2) 미들웨어 설정(use) 3) 에러 예외 발생시 대응 방법 설정(use, error handling) 4) 라우팅 설정(get, post) 자세한 설명은 공홈에서 확인할 수 있다. Express "Hello World" example Hello world example Embedded below is essentially the simplest Express app you can create. It is a single file a..

UPDATE ----------------------------------------------------------------------------------------------------------------- (작성 중) 2022.09/16 : 전체 내용 구성 예전엔 클론 코딩을 이것저것 만들어보긴 했지만, 코드를 칠 때만 이해하고, 내 걸로 만드는 작업을 미흡하게 방치했었던 것 같다. 지금 생각하면 너무 아까운 시간이었던 것 같다. 하지만, 어렴풋이 기억에 남아있고, 내가 잘못된 방식으로 학습을 했음을 깨달았고, 웹 개발의 각 요소별로 하나씩 뜯어서, 정리하는 것이 좋다고 다짐하게 되는 좋은 경험이었다고 생각된다. 그래서, 웹 개발이란 것을, 가능한 한 언어와 프레임워크의 의존성을 최소화하는 방..

들어가면서🤔 opencv를 공부하던 차에 회사에서 이미지 데이터를 이용한 데이터 처리 프로그램에 대한 의뢰가 들어왔다. 그래서 어떤 내용인가 상세 내용을 들어보니, 못할 건 없는 것 같았다. 왜냐하면, 머신러닝의 개입이 없는 단순한 이미지 처리 로직으로 해결할 수 있는 부분이었기 때문이다. 다만, 일반 유저가 사용해야 하는 부분이 있기 때문에 GUI에 대한 부분을 구성해야 했다. 시중에 나와있는 블로그라던지 튜토리얼은 거의 다 콘솔 형태에서 이미지를 핸들링하는 부분이 많았고, 이미지 처리에 대한 지식이 없는 일반 유저를 위한 애플리케이션 개발에 대한 정보는 사실 자료가 많지 않았다. 조사해 본 결과, opencv라이브러리를 사용할 수 있는 언어는 역시 C++, Python 이 메인이고, C#도 사용할 수..

무작정 전화번호부 만들 겁니다. 단, 아래와 같은 기준과 목표로 작성했습니다. 첫째. CRUD(Create. Read. Update. Delete.) 기능을 갖춘다. 둘째. 전화번호부 DB는 간단히 CSV 파일로 대응한다. 셋째. 죽이 되든 밥이 되든 남의 코드를 참고하지 않고 만든다. ✅ 전체 메뉴 구성 계산기 실행 시 유저가 선택하게 될 가장 큰 분류는 아래와 같이 결정했다. 1️⃣ Add➕ 2️⃣ Search🔍 3️⃣ Update🛠 4️⃣ Delete❌ 5️⃣ PrintAll🖨 9️⃣ EXIT🙋🏻‍♂️ 각 메뉴로 분기는 if ... else if ... else 기능을 사용했다. 기회가 된다면 switch문으로 리팩토링을 해보려 한다. 다 작성하고 보니 switch 문이 더 간단하면서도 직관적인 것..

오늘은 스태틱 코드를 번들하는 웹팩 설정 방법에 대해서 적어보려 합니다. 여기서는 제가 사용해 본 기능만 담고 있기 때문에 더 좋은 방법 또는 틀린 부분? 등이 있을 수 있음을 미리 알려드립니다. STATIC 데이터(html 페이지를 컨트롤하는 javascript, css 코드 등)를 구성하기 위해서, 용도에 맞게 js, css파일을 작성해서 복수의 파일들로 관리하는 것이 일반적일 것이라고 생각됩니다. 여기서 웹팩을 이용하게 되면, 복수로 작성한 다수 파일들을 번들링 해서 하나의 main.js + styles.css 조합 등으로 html 파일에 대입하여 적용할 수 있습니다.(필자는 css코드를 sass코드로 작성하고 static 코드로 변환했다.) 이런 번들링 기능을 사용하기 위해선 웹팩 라이브러리 co..