전체 글(116)
-
[Java] 1. Java, Js와의 비교 [240827]
java가전제품 같은 전자기기에 탑재하기 위해 개발 / 웹앱에서 가장 널리 사용. 안드로이드를 비롯한 모바일 기기용 소프트웨어 개발에도 널리 사용됨특징객체지향, 메모리 관리를 위한 가비지 컬렉터, JVM(컴파일러 언어로서의 특징) - 운영체제에서 독립적임, 안드로이드 개발 - java와 코틀린과 함께라면 DB처리 - 웹에서 CRUD처리를 위해동적 웹 서버 개발 - 사용자의 행동 선호도 관심사에 따라 달라지는 웹 콘텐츠 개발Java와 JS의 비교용도에 따른 차이Java의 경우 다양한 분야에서 사용되며, 강력한 멀티스레딩 기능과 높은 안정성 때문에 대규모 시스템 구축에 용이하다.JS의 경우 웹브라우저에서만 사용되다 Node.js를 기반으로 서버사이드에서도 사용할 수 있게 되었다. 웹개발에 있어서 거의 기본이..
2024.08.27 -
[Day 30, 31, 32] 감정 일기 (20240805~0807)
1. 프로젝트 개요React로 만든 감정 일기 애플리케이션.감정 일기 CRUD를 포함하고 있다.App.js에 의한 중앙 집중식 상태를 통해 처리.일기 항목에 대한 여러 페이지 탐색 및 상태 관리가 포함됩니다.(routing)2. 사용된 기술React Router: react-router-dom을 활용하여 라우팅을 처리.Home, New, Edit, Diary의 네 가지 기본 페이지로 구성.페이지 네비게이션을 구현하기 위해 react-router-dom의 Routes와 Route 컴포넌트를 사용.상태 관리useReducer 후크를 사용하여 일기 항목의 Read, Update, Delete 합니다.상태는 App.js 내 최상위 수준에서 관리되어 다양한 페이지에 걸친 전역 액세스를 보장.3. 특이사항react..
2024.08.07 -
[Day25] 칸반보드 - Drag & Drop 방식과 기존 코드 비교 (240726)
const ordersMap = cardIds.reduce((map, id, index) => { map[id] = index + 1; return map; }, {});기존의 정렬 방식. 나름 짧고 간결하게 잘 짰다 생각하지만, 사용감 자체는 별로였다(직접 정렬하고 싶은 index들과 정렬하고 싶은 상태로 숫자들을 입력시켜야 했기 때문에 오류가 많았다.) ============================================================================================function getSavedColumns() { if (localStorage.getItem("backlogItems")) { backlogLi..
2024.07.26 -
[Day17] 이벤트 위임 (20240716)
grocery bud submit clear items 위와같은 foodlist라는 html이 존재한다.app.js를 요약하자면, form에 원하는 텍스트를 입력하여 버튼을 누르면 div에 새로운 food가 리스트 형태로 나타나며 각각의 food에는 삭제, 수정 버튼이 존재한다.리스트 제일 밑에는 clear 버튼이 존재한다. // add itemfunction addItem(e) { e.preventDefault(); const value = grocery.value; const ..
2024.07.16 -
[Day11] 프로그램 웹 개발 이론 (20240708)
다중 페이지 애플리케이션(MPA)MPA(Multi Page Application)는 웹 페이지에서 서버로 데이터를 요청하고 응답을 받을 때 매번 새로운 HTML 페이지를 받는 방식을 말합니다. 웹이 탄생했을 때부터 지금까지 사용되고 있는 디자인 패턴.간단히 정리해서 그냥 페이지를 여러개 만드는 것.장점검색엔진 최적화(검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정)에 용이.탁월한 확장성(새로 만들면 되니까.)단점페이지 속도 저하와 웹사이트 전체 성능 문제개발자 부담이 크고, 개발 기간이 김.웹 사이트의 보안 및 유지·보수가 어렵다.(페이지가 여러개니까)사족AJAX(새로 고침을 하지 않고 데이터를 받아오는 기술)가 등장하기 전까지 모든 웹 사이트에서 사용이베이(eB..
2024.07.09 -
[Day10] JS 비동기 - promise, async, await (240705)
PromisePromise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다:pending(대기): 초기 상태, 아직 완료되지 않은 상태.fulfilled(이행됨): 작업이 성공적으로 완료된 상태.rejected(거부됨): 작업이 실패한 상태.const promise = new Promise((resolve, reject) => { // 비동기 작업 수행 let success = true; // 작업 성공 여부 (예시) if (success) { resolve('작업 성공'); } else { reject('작업 실패'); }});promise.then((message) => { console..
2024.07.05