[ Project ] Cart ( 장바구니 ) 시스템

UI UX + CSS 는 ai 의 도움을 받았습니다 . 이번 경우에는, 파일 하나에 모든 코드가 들어있지 않고, 나눠서 작업을 했습니다. 1. cartMain.jsx ( Main이 되는 파일 )2. cart.jsx ( 장바구니 역할을 하는 파일 )3. products.jsx ( 상품 목록 파일 ) 일단 prop으로 다 넘겨줘야해서, products 인 경우 useState를 이용해서 cart.jsx & products.jsx로 넘겨주고 onAdd onSub onDel 함수 또한 메인에서 만들고 다 넘겨주고 각각 모듈에서 실행하게 만들어줬습니다. 이번 기회에, { spread, map, filter만 사용하던걸 Array.prototype.find를 이용하게 되었고 상황에 따라 사용하게 되었습니다.

• format_list_bulleted FrontEnd/React
• · 2026. 2. 20.

[ Project ] Todo

그놈의 Todo List 참.. 예전부터 언어만 배웠다 하면, todo list를 만들었던 것 같다. 사실 useState 를 배우고 나서, 예제로 혼자 만들어본거라 코드가 조금 난잡한게 있긴한데 기본적으로 CRUD 에 대한 부분과React 의 고유의 동적으로 돔이 변하는걸 잘 반영한 친구라고 생각이 듭니다. 만들어 보면서, 예전엔 강의보며 따라치며 위와 비슷한 TodoList를 만들어봤던거 같은데 그땐 따라만 치고 넘어간다고,Array.property.map 이랑 Array.property.filter 에 대해 얕게 알고 넘어간것 같은데 이번 기회에 좀 더 깊게 배울려고 노력했고, 전보단 좀 더 깊이가 있다고 느껴진 경험 이었습니다.

• format_list_bulleted FrontEnd/React
• · 2026. 2. 20.

[ Svelte ] vite build 후 자동으로 서버 올리기

아시는 분들이 많겠지만 그냥.. 내가 편할려고 따로 작성해두는 소스 package.json에 "scripts": { "build": "vite build"}, build 기준으로 설명을 드리겠습니다. build를 하고 난 뒤, 바로 nodemon으로 서버를 올리고 싶을 때, 간단하게 && 연산자를 써주면 됩니다. "scripts": { "build": "vite build && nodemon server.js"}, 그럼 pm2 같은 경우 어떻게 할 수 있을까? 이것 또한 간단함. "scripts": { "build": "vite build && pm2 start server.js --name 'app' && pm2 monit "}, 간단! 이런 식으로 응용한다면 무궁무진 할 것 ..

• format_list_bulleted FrontEnd/JavaScript
• · 2025. 4. 24.

[ Svelte ] Svelte-kit 으로 build 후 배포

아무리 찾아봐도 정보가 너무 적어서 직접 작업하면서 삽질한 내용을 적어 내려간다고 함. svelte-kit을 설치하면 보통 vite 로 작업하게 되고, npm run dev 커맨드로 로컬을 돌릴건데이걸 서버에 올려서 작업해보고 싶어서, build 후 올릴려고 하니까 너무 막막한 것 이다. 기본적으로 node.js 서버로 맞물려서 svelte를 올릴건데. [ Frontend ] Host - localhost Port - 5173 [ Backend ] Host - localhost Port - 8080 [ Database ] Host - localhost Port - 3306 위와 동일하게 일단 npm run build 를 해준다. 그리고 /build/index.js 로 ..

• format_list_bulleted FrontEnd/JavaScript
• · 2025. 4. 24.

Immutability (불변성) 에 대한 정리 - 4

Immutability (불변성) 포스팅 리스트 - Immutability (불변성) 에 대한 정리 - 1 - Immutability (불변성) 에 대한 정리 - 2 - Immutability (불변성) 에 대한 정리 - 3 - Immutability (불변성) 에 대한 정리 - 4 서두 지난 포스팅 에서는 객체와 함수가 만났을때 발생하는 문제점에 대해 다뤄보았습니다. 이번 포스팅에선 Object.freeze 에 대해서 알아보겠습니다. Object.freeze Object.freeze 는 객체를 동결하는 역할을 합니다. Object.freeze 구문 Object.freeze(obj) const f1 = { name: "Kim" }; const f2 = f1; Object.freeze(f1); f1.nam..

• format_list_bulleted FrontEnd/JavaScript
• · 2022. 5. 14.

Immutability (불변성) 에 대한 정리 - 3

Immutability (불변성) 포스팅 리스트 - Immutability (불변성) 에 대한 정리 - 1 - Immutability (불변성) 에 대한 정리 - 2 - Immutability (불변성) 에 대한 정리 - 3 서두 지난 포스팅 immutability 에 대한 정리 2편 에서는 Object Data type 같은 경우 어떻게 하면 immutability (불변성) 을 지킬수 있는지 방법을 알아보았고 함수 Object.assign, Array.prototype.concat 에 대해 알아보았고 Nested Object (중복 객체) 의 경우 어떻게 대처하면 되는지에 대해 알아보았습니다. 이번 포스팅에서는 함수 와 관련된 immutability (불변성) 에 대해 알아보겠습니다. 함수와 객체가 ..

• format_list_bulleted FrontEnd/JavaScript
• · 2022. 5. 13.