전체 글107 DB Optimistick Lock : 쇼핑몰 서비스 개발시 발생할 수 있는 이슈 쇼핑몰 서비스를 제공할 때 개발자에게 발생할 수 있는 이슈가 있다. 쇼핑몰에는 상품이 있으며, 상품에 대한 재고가 존재할 것이다. 예를 들어 재고가 한 켤레만 존재하는 한정판 나이키 신발에 대해, 거의 동시에 두 고객이 신발을 구매하기 위해 접근을 한다고 하자. 이에 대해 아무런 조치를 취하지 않는다면 두 고객은 구매 처리를 모두 완료할 것이며, 수량은 -1이 되어 실제로 존재하는 재고와 일치하지 않는 상황이 발생할 것이다. 이처럼 동시에 같은 DB Table row를 업데이트 하는 상황을 방어하기 위해 어떻게 개발할 수 있을까? 이런 동시성 문제에 대비하기 위하여 일반적으로 처리하는 방식은 잠금(Lock) 방식이다. Locking은 DB에 접근하는 것을 방지하는 것으로, 서비스 유저의 데이터 접근 경쟁.. 개발기초 2023. 6. 23. TIL : Next.js localStorage를 활용한 배너, 하루 동안 닫기 구현 Next.js 13.4 환경이다. 문제상황 @headlessui/react 라이브러리를 활용해서 배너 닫기를 구현해놨다. 그래서 클라이언트에 유저가 방문하면 아래 화면처럼 배너가 열린다. 현재는 닫기를 눌러도, 새로고침시 다시 보이게 된다. 닫은 정보가 어딘가에 저장되지 않기 때문이다. const [isShowing, setIsShowing] = useState(true); 그래서 이렇게 구현한 배너를 개선하기로 했다. localStorage를 활용해서, 사용자가 배너 버튼 닫기를 누르면, 하루 동안 배너가 열리지 않기를 바랐다. ==> 즉, 새로고침을 해도 배너가 계속 닫혀있길 바란다. 그래서 useEffect를 활용하여 다음과 같이 코드를 구성했다. "use client"; import { Trans.. 개발 학습일지(TIL) 2023. 6. 8. 블로그, Next.js로 직접 개발하기 블로그 주소 https://vividnow.vercel.app/ VIVIDNOW의 블로그 | 프로젝트 경험이 있습니다. vividnow.vercel.app 기획 의도 : 왜 블로그인가? 2018년, 우연히 제 손에 들어온 라는 책이 있습니다. 책의 저자는 에어비엔비 등을 배출해서 유명한 미국의 스타트업 엑셀러레이터 'Y Combinator'의 공동창업자인 폴 그레이엄(Paul Graham)입니다. 미술 작가로서, 프로그래머로서, 창업가로서 그가 여러 해 동안 작성해 온 에세이를 묶어서 낸 결과물이 인 것입니다. 신선한 책의 제목만큼이나 내용도 흥미롭답니다. 세상을 바라보는 그만의 통찰력과 새로운 관점이 많이 담겨있어 즐겨 읽을 수 있었습니다. 프로그래밍에 지식이 없던 당시였음에도, '무엇이 좋은 프로그래.. 프로젝트 회고 2023. 6. 5. TIL : next.js 커스텀 404 not-found 찾을 수 없는 페이지 구조 재설정 문제 상황 next.js 13.4 환경 페이지를 모바일에서도 맞춰 볼 수 있도록 반응형으로 페이지를 구성했다. 404페이지를 보여주는 app/not-found.js를 커스텀으로 구성하기 위하여 코드를 바꾸었지만 PC에서는 내용이 상관없이 적용되긴하나, 모바일에서는 모바일에 맞추어 반응형으로 페이지가 나타나지 않았다. PC에서 보이듯 보인 것이다. 해결방법 app 폴더 아래 동적 라우팅을 위한 폴더 및 페이지를 만들면 기대하는 대로 정상 작동한다. app/[...not-found]/page.js import {notFound} from "next/navigation" export default function NotFoundCatchAll() { notFound() return null } 참조 https.. 개발 학습일지(TIL) 2023. 5. 31. 트랜잭션과 ACID 트랜잭션이란? 데이터베이스에서 수행되는 '논리적으로 단일한' 작업이다. 트랜잭션은 논리적 연산 단위이자, 밀접히 관련되어 분리될 수 없는 한 개 이상의 데이터베이스 조작이다. 다시 말해, 여러 SQL문을 논리적인 하나의 작업 단위로 묶어서 나누어서 수행될 수 없게 처리하는 것을 의미한다. 이 작업은 하나 이상의 데이터베이스 조작(CRUD)으로 구성될 수 있다. 트랜잭션 처리가 된 작업은 모두 한꺼번에 실행되거나 전혀 실행되지 않아야 한다. 모든 SQL문이 성공하고 난 뒤에 DB에 반영되는 것이다. 즉, 트랜잭션 내부의 SQL문들 중 일부 SQL만 성공한 경우에는 DB에 반영되는 일은 일어나지 않는다. 구체적인 설명을 위하여 대표적인 예시를 들어본다. 은행에서 두 고객, 김씨와 박씨 간의 자금 이체 작업을.. 개발기초 2023. 5. 22. TIL : Next.js 13 Provider 문제 : 다크모드가 안 되는 이유 문제상황 개발환경 Next.js 13.4.2 TailwindCSS next-themes 라이브러리를 활용 다크모드를 구현하려했다. https://github.com/pacocoursey/next-themes GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme wi Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - GitHub - pacocoursey/next-themes: Perfect .. 개발 학습일지(TIL) 2023. 5. 19. TIL : Next.js, useState와 useEffect 이용하여 댓글 실시간 업데이트 문제상황 Next.js 환경이다. Next.js는 리액트의 기능을 많이 통합하는 프레임워크로, 리액트 훅에 대한 지식이 있어야 한다. 현재 기능 상황은 댓글 작성시 새로고침을 해야만 댓글 목록이 업데이트 된다. 이 기능을, 댓글 작성시 새로고침 없이 댓글 목록이 최신화 되도록 업그레이드 하려고 한다. 코드는 다음과 같다. 'use client' import { useEffect, useState } from "react"; export default function Comment(props){ let [comment, setComment] = useState('') let [data, setData] = useState([]) useEffect(()=> { fetch('/api/comment/list?i.. 개발 학습일지(TIL) 2023. 5. 12. 데이터베이스(Database) 정규화(Normalization)란? 데이터베이스 정규화는 왜 필요할까? 정규화는 관계형 DB 설계시, 입력, 수정, 삭제의 데이터 처리의 이상 현상을 최소화하기 위한 방법이다. - 중복 데이터 제거 : 테이블 간에 데이터 중복을 최소화하고, 데이터의 일관성을 유지한다. - 데이터 무결성 보장 : 데이터가 업데이트, 삽입, 삭제 등의 작업을 수행할 때 일관성과 정확성이 유지되도록 한다. - 쿼리 성능 향상: 중복 데이터를 제거하고 데이터 구조를 최적화함으로써 데이터베이스에서의 검색 및 조작 성능을 향상시킨다. - 데이터베이스 정규화는 주로 관계형 데이터베이스에서 사용되며, 다양한 정규화 단계를 거쳐 데이터를 최적화 - 지나친 정규화는 데이터베이스의 성능이 저하될 가능성 정규화 단계 각 단계마다 테이블을 분해 --> 데이터 간의 관계를 재구성.. 개발기초 2023. 5. 11. FULLTEXT 인덱스 개요, 특징과 작동원리 데이터베이스에서 인덱스란? 왜 필요한가? 데이터베이스에서 인덱스(Index)란? - 인덱스는 데이터베이스 테이블의 특정 열(column)에 대한 포인터들의 집합입니다. - 데이터를 찾기 위한 '색인'으로 데이터의 주소록이라고 부를 수 있습니다. veams.tistory.com FULLTEXT 인덱스 개요: MySQL(5.6버전 이상) - 양방향 LIKE 연산자를 사용해야 하는 경우엔 인덱스를 사용하기 어렵다. - 하지만 FULLTEXT 인덱스를 사용하여 자연어 검색을 최적화하는 방법이 있다. - FULLTEXT 인덱스는 텍스트 데이터를 빠르게 검색할 수 있는 인덱스로, 전체 테이블 스캔으로 인한 성능 저하를 피할 수 있다. - 자연어 검색과 불완전한 문자열 검색에 적합하며, 일반적인 인덱스와 달리 양방향.. 개발기초 2023. 5. 10. 양방향 LIKE 연산자(% LIKE %) 사용시 인덱스 와일드카드 %가 한 쪽만 있는 경우 (양방향이 아닌 경우) - 문자열 끝에만 있는 경우 인덱스를 사용하여 검색을 최적화할 수 있다. SELECT * FROM users WHERE name LIKE 'John%'; 위의 쿼리에서는 'John'으로 시작하는 이름을 검색하고 있으며, 데이터베이스는 인덱스를 사용하여 일치하는 결과를 빠르게 찾을 수 있다. 와일드카드 %가 양방향으로 있는 경우 - 일반적으로 양방향 LIKE 연산자를 사용하면 데이터베이스의 인덱스를 사용할 수 없다. 예를 들어, 다음과 같은 쿼리에서 인덱스를 사용할 수 없다. SELECT * FROM users WHERE name LIKE '%John%'; 위의 경우, 와일드카드 '%'가 문자열의 양쪽에 있어서 데이터베이스는 인덱스를 사용하지 않고.. 개발기초 2023. 5. 10. 데이터베이스에서 인덱스란? 왜 필요한가? 데이터베이스에서 인덱스(Index)란? 왜 필요 할까? 두꺼운 책의 맨 앞에 목차가 기재되어 있으면 내가 원하는 내용을 더 빨리 탐색할 수 있다. 반대로 목차가 없으면 두꺼운 책 내용 중에 어떤 내용을 어디에서 찾을지 모르기 때문에 전체를 다 탐색해야 한다. 시간과 에너지가 많이 든다. 이 때문에 어떤 순서대로 정렬된 목록(색인)의 필요성을 느낀다. DB에서 이와 같은 기능을 하는 것이 인덱스이다. - 즉, 인덱스는 데이터베이스에서 데이터를 빠르게 찾아낼 수 있도록 돕는 자료구조이다. - 데이터를 찾기 위한 '색인'으로 데이터의 주소록이라고 부를 수 있다. - 인덱스가 있으면 전체 Pull Scan 할 필요없다. 인덱스의 구성 - 인덱스는 키(key)와 포인터들로 구성되어있다. - DB에서 추출한 일부 .. 개발기초 2023. 5. 10. 스파르타 커뮤클럽 깃허브 저장소: 🔗링크 시연 영상 1. 프로젝트명 : 스파르타 커뮤클럽 코딩 교육기관인 스파르타코딩클럽에서 제공하는 내일배움캠프, 항해99, {창} 등의 교육과정을 수강한 수료생들이, 교류를 통해 개발자로 성장하며 정체성과 역할을 만들어갈 수 있도록 서로를 돕는 커뮤니티 서비스를 제공합니다. 개발자 직무의 취준생 커뮤니티, 회원간 모임 매칭 및 IT행사알림 메일링 서비스 2. 인원 구성 및 주요 담당 5인 (Full-stack) 본인 : ERD 설계, CI&CD 구축 / 검색, 페이지네이션, 인기글 및 활동왕, 모임매칭 등 팀원1: 유저페이지 - 회원정보 확인 및 수정, CI&CD 구축 등 팀원2 : 회원가입 및 인증처리 전반, 프론트엔드 통신, 게시판 댓글기능 등 팀원3 : 이벤트게시판, 메일알림 서비.. 프로젝트 회고 2023. 5. 2. 이전 1 2 3 4 5 ··· 9 다음