JavaScript로 swap을 구현할 때 두 가지 방법이 자주 사용되는 것으로 보인다. 이 두 방법의 효율성을 비교해 보았다. # Swap의 두 가지 방법 1. temp 변수를 이용한 swap let a = 0; let b = 1; // swap let temp = a; a = b; b = temp; console.log(`a = ${a}, b = ${b}`); // a = 1, b = 0 2. destructuring을 이용한 swap let a = 0; let b = 1; // swap [a, b] = [b, a]; console.log(`a = ${a}, b = ${b}`); // a = 1, b = 0 # 효율성 측정 length가 2인 array를 만들고 두 element를 10000번 바꾸는..
# Selection Sort Selection sort를 위키피디아에 검색해보면 다음과 같이 정의하고 있다. "selection sort is an in-place comparison sorting algorithm" 하나씩 그 의미를 따져보면, In-place algorithm: an algorithm that operates directly on the input data structure without requiring extra space proportional to the input size. 즉, sorting 시 추가 메모리를 필요로 하지 않는다. comparison sort: 비교 연산자를 통한 정렬을 수행한다. 이러한 종류의 정렬은 최소 O(nlogn)의 시간 복잡도를 가진다. Sele..
아래와 같은 결과물을 목표로 작업하였다. 구현 완료 후 최종 directory 구조는 아래와 같다. # Backend 먼저 mysql로 schema와 table을 생성하고 샘플 데이터를 추가하였다. 이제 Next.js에서 해당 DB를 조회하고 수정하는 기능을 구현하여야 한다. 앞선 글에서 언급했듯이 Next.js의 route handler 기능을 사용할 것이므로 app/api/todoList/ 폴더를 생성하고 그 내부에 route.ts 파일을 생성하였다. 이 route.ts 파일에 각 HTTP method를 처리할 api를 구현하면 front 단에서 http://localhost:3000/api/todoList에 요청을 보낼 수 있다. 먼저 DB 접속을 위한 api를 구성하자. app/api에 db.ts..
Next.js 공부도 할 겸 간단한 TODO list 앱을 만들며 CRUD 구현을 해보려 한다. # 요구 사항 원하는 앱의 동작은 다음과 같다. mysql DB에서 저장된 todo list를 불러와 보여준다. 새로운 todo를 추가하거나 기존 todo를 삭제, 수정하여 DB에 저장한다. todo list의 변경사항을 실시간으로 화면의 todo list에 보여준다. # 설계 - Frontend Next.js 13을 사용하는 만큼 server component로 프로젝트를 구성하고 싶었으나, 3번째 요구사항에서 걸려 client component를 사용하기로 하였다. server component를 사용하는 경우 todo list의 변경이 있을 때 server component를 새로 렌더링 할 수 없고, ..
# Route Groups URL path에 영향을 미치지 않으면서 다양한 이유로 폴더를 추가하고자 할 때 사용된다. 폴더명을 '(folderName)' 형식으로 괄호로 감싸서 생성하면 자동으로 적용된다 1. URL path에 영향 없이 route를 정리 관련된 항목끼리 폴더로 정리할 수 있다. 2. 각 그룹 별 layout.js 적용 ex. marketing 하위 항목에는 side bar가 적용되나 shop 하위 항목에는 적용되지 않는 경우, 이를 구현하기 위해 활용 가능 3. Multiple root layouts 각 그룹 별로 아예 별도의 root layout을 가져야 하는 경우 활용 가능. 이 때 각 그룹의 모든 root layout은 과 를 가져야 함을 명심하자. ※ Route Group 사용 ..
구글 플레이 스토어에 등록하는 전체적인 과정은 아래 글을 참고하여 진행하였다. https://velog.io/@wisdom_lee/%ED%81%AC%EB%A1%AC-%ED%99%95%EC%9E%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8Chrome-extension-%EA%B0%9C%EB%B0%9C-%EA%B0%80%EC%9D%B4%EB%93%9C 크롬 확장 프로그램(Chrome extension) 개발 가이드 크롬 확장 프로그램을 개발하기 전에 기본적으로 알아두어야 하는 내용 velog.io 하지만 결과는... # 구글 크롬 익스텐션 제출 결과 스팸이라니 꽤나 당황스럽다. 심지어 따로 심사도 거치지 않고 자동으로 바로 거부되었다. 위반사항에 대한 글을 살펴보니 아래 조항이 문..
