Cafe POS를 개발하면서 프론트엔드 코드는 React.js을 기본으로 해서, SSR 기능이 있는 Next.js와 코드의 안정성을 위한 TypeScript을 함께 사용해 작성하고 있다. 특히 React.js가 여러 컴포넌트를 조합해서 동적으로 UI를 만드는 특징을 갖고있는 만큼 파일이 많아질 수밖에 없어서 여러 파일들을 쉽게 관리하기 위해서 다음과 같이 폴더를 구조화했다. /my-app |-- /src |-- /components |-- /MenuPanel |-- MenuPanel.tsx |-- MenuBlock.tsx |-- Category.tsx |-- /NavBar |-- Clock.tsx |-- NavBar.tsx |-- MenuEditorForm.tsx |-- MenuOrderForm.tsx ..

국비지원 학원 수업을 수료한 이후 배운 기술들을 잊어버리기 전에, 작더라도 프로젝트를 혼자 하나 만들어봐야겠다는 생각이 들었다. 어떤 걸 주제로 만들어볼까 고민하다가, 어김없이 간 카페에서 낯선 아르바이트생이 내 주문을 포스기에 입력하는 모습이 새삼스럽게 눈에 들어왔고, '이 포스 프로그램을 따라 만들어보면 어떨까?' 하는 생각이 들었다. 내가 아직 개발 초보여서 그런지 UI가 더 익숙하게 다가왔던지라, UI를 통해 필요한 기능을 기획하는 것이 더 편할 것 같았다. 그림을 잘 그리지는 못하지만, 나만 이해할 수 있으면 되니까, 태블릿에다 그림을 그리는 것으로 기획을 시작했다. 이다음부터는 포스 프로그램을 사용하는 사람들에게 어떤 기능이 있는 게 좋을까.. 계속 가지치기하면서 기획을 확장해 나갔다. 🤔 샷..

cafe에서 흔히 사용하는 pos 프로그램을 만들면서, 화면에 현재 시간이 보일 수 있도록 new Date()로 useEffect를 사용해 처음 화면이 rendering되었을 때에만 현재 시간을 가져오게끔 의존성 배열도 [] 빈 배열로 만들어두었다. 다른 코드를 쓰다가 쓴 코드를 확인하려고 브라우저에서 실행해둔 페이지를 확인했는데 뜬 에러를 보고 "아까까지 잘만 되던 게 왜 안 되지?" 하고 당황해서 에러 메시지를 잘 읽어봤다. 이유인 즉슨, SSR를 기본적으로 지원하는 Next.js과, CSR을 기본적으로 지원하는 React.js 간의 차이 때문에 충돌이 발생했던 것..! Next.js와 React.js를 함께 쓰게 되면, 처음에는 Next.js로 SSR 된 HTML을 클라이언트로 가져와서, 그 다음부..

카페에서 사용하는 POS 애플리케이션을 개발하기 위해서, 서버에 어떤 형태로 요청을 보내고 어떤 형태로 응답을 받아올지 API를 구상했다. 처음 기획했던 UI에서는 에스프레소, 스무디, 허브티, 베이커리와 같은 메뉴 카테고리 버튼을 각각 누르면 그에 해당하는 데이터를 그때 그때 서버에서 받아와야 한다고 생각했다. 하지만, 위와 같이 각각의 메뉴 카테고리 버튼을 누를 때마다 요청을 보낸다면, 그리고 그 요청이 많아진다면 서버에 부담이 심하게 갈 수 있다는 걸 생각하지 못했다. 거기다, 네 개의 카테고리에 대해서는 데이터 호출 API를 구상했지만, 만약에 사용자가 메뉴 카테고리를 추가한다면?! 이와 같이 미처 생각하지 못했던 부분을 포함해 여러가지 가능성을 고려해야겠다는 생각이 뒤늦게 들었다. 포스 애플리케..

국비학원 수업을 듣고 과제 및 프로젝트를 하느라고 정신이 없어서 블로그에 거의 오지 못했었다.. 이제 내일 수료를 앞두고, 발표 자료까지 다 만들어둔 상태라 내가 만들기로 다짐하고서 진도를 나가지 못했던 내 개인 프로젝트에 박차를 가하려고 한다. 일단 이 프로젝트에 대해서 아무런 글을 쓴 적이 없었기 때문에, 사용 언어 및 개발 소재에 대해서만 간단히 언급하고 나서 이 포스팅에 대한 본격적인 내용을 작성해야겠다. 소재 가계부 웹 프로그램 (나중에 나아가서는 모바일 애플리케이션까지도 욕심이 있다) 사용 언어 및 프레임워크, 라이브러리 프론트엔드(React.js, Next.js, TypeScript) 백엔드(Node.js, Express.js) 시작한 이유? 계기? 모바일 애플리케이션 사용하면서 내가 필요하..