🔥오늘 대박 기회! AI가 픽한 행운의 로또 번호, 지금 바로 확인하세요!

오늘 로또 추천오늘 로또 추천, 줄여서 오로추는 단순 무작위 추첨 방식에서 벗어나, AI와 통계 분석을 결합해 “최적화된” 6개 번호 조합을 추천해주는 웹 애플리케이션입니다. 스마트 로또 - AI 분석 로또 번호 생성기스마트 로또 로딩 중...which-lotto-numbers.netlify.app과거 수십 회차 당첨 데이터를 기반으로 패턴을 학습사용자의 취향(고정 번호, 반자동 모드 등)을 반영클릭 몇 번으로 쉽고 빠르게 번호 추천주요 기능 상세 설명1. AI 분석 모드머신러닝 모델이 과거 당첨 번호의 “연속 출현 패턴”, “홀짝 비율” 등을 학습학습된 모델이 확률적으로 유망한 조합을 추천추천 결과 옆에 “추천 이유” 요약 정보 제공2. 통계 분석 모드당첨 번호 빈도: 자주 나온 번호 vs 거의 안 나..

• format_list_bulleted 웹 개발
• · 2025. 5. 12.
• textsms

엑세스 토큰(JWT) 인증 과정의 최종 Flow

JWT 생성 과정→ 사용자 정보를 넣고, 서버가 가진 비밀키로 JWT를 암호화(서명)해서 만듭니다.JWT 검증 과정→ 서버는 JWT를 받으면 그 JWT가 서버가 가진 비밀키로 만들어졌는지 확인합니다.→ 이 과정에서 변조 여부와 유효성을 확인합니다.

• format_list_bulleted 웹 개발
• · 2025. 4. 28.
• textsms

Prisma에서 자주 사용되는 문법과 예시

Prisma 스키마 예시model User { id Int @id @default(autoincrement()) email String @unique name String? createdAt DateTime @default(now()) posts Post[]} 필드명 타입 설명 비고 idInt고유 ID자동 증가 (@id @default(autoincrement()))emailString이메일중복 불가 (@unique)nameString (선택적)사용자 이름선택적 필드createdAtDateTime생성된 날짜 및 시간기본값 현재시간 (@default(now()))postsPost[]사용자가 작성한 게시글과의 관계1:N 관계📌 1. 데이터 생성 ..

• format_list_bulleted 웹 개발
• · 2025. 4. 25.
• textsms

Prisma란 무엇인가?

Prisma는 Node.js와 TypeScript 환경에서 사용하는 차세대 ORM(Object-Relational Mapper)으로, 데이터베이스 작업을 획기적으로 간단하게 만들어줍니다.ORM(Object-Relational Mapper)이란?ORM이란 객체 지향 프로그래밍 언어와 관계형 데이터베이스 간의 데이터 변환을 자동화해주는 기술입니다. 쉽게 말하면, 개발자가 직접 복잡한 SQL 쿼리를 작성하지 않고자바스크립트, 타입스크립트 같은 언어의 코드만으로 데이터베이스 작업을 할 수 있도록 도와주는 기술입니다.ORM이 없을 때, 사용자 정보를 가져오기 위해서는 아래와 같이 작성해야 합니다. // 직접 SQL 쿼리를 작성해야 함const result = await db.query('SELECT * FROM..

• format_list_bulleted 웹 개발
• · 2025. 4. 23.
• textsms

JWT 토큰은 누가 만드나? 클라이언트? 서버?

결론 : JWT 토큰은 무조건 서버가 만듭니다. 단계 누가 무엇을 하는가? 설명 ①클라이언트로그인 요청 (ID, PW)사용자가 서버에 로그인 시도②서버사용자 인증 (DB 확인 등)DB에서 사용자를 검증③서버JWT 생성 (Secret Key로)사용자 검증 완료 후 서버가 JWT 생성④서버 → 클라이언트JWT 전송서버가 생성한 JWT를 클라이언트에 전달⑤클라이언트JWT 저장 후 요청 시마다 전달클라이언트는 JWT를 저장했다가 매 요청 시 서버에 보냄⑥서버JWT 검증요청 받을 때마다 JWT 검증즉, 클라이언트는 서버가 만들어 준 JWT를 저장하고 있다가 요청할 때마다 서버로 전달하는 역할만 수행합니다. 직접 JWT를 생성하지 않습니다.서버의 비밀키(Secret Key)가 왜 중요할까?서버의 비밀키는 J..

• format_list_bulleted 웹 개발
• · 2025. 4. 21.
• textsms

웹 시스템 개발 #Microservice Architecture

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Monolithic Architecture란? 모놀리틱 구조는 사용자 인터페이스, 데이터 베이스, 애플리케이션 로직과 같은 모든 요소를 단일 서버 내에 결합하는 것이 특징인 웹 애플리케이션의 일반적인 디자인 형태입니다. 모놀리틱 구조를 사용할 때의 장점은 간단한 구조덕에 개발이 쉬워지며, 확장성이 용이하다는 점입니다. 단점으로는 사소한 변경이 생길 때마다 시스템을 재구축하고 재배포해야하는 번거로움과, 애플리케이션이 너무 복잡해지는 등 문제가 발생할 수 있습니다. 이러한 문제점을 해결하기 위해 로직, 데이터 엑세스 레이어를 포함하여 별개의 레이어로 분류합니다. ..

• format_list_bulleted 웹 개발
• · 2023. 12. 28.
• textsms

웹 시스템 개발 #React UseEffect

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. ref React의 ref는 실제로 변경 시 추가 렌더링을 발생시키지 않고 구성 요소를 다시 렌더링하는 사이에 지속되는 값을 저장할 수 있습니다. DOM 요소에 직접 액세스하거나 업데이트 시 다시 렌더링을 트리거할 필요가 없는 값을 추적하는 데 자주 사용됩니다. import React, { useRef } from 'react'; export default function Counter() { const ref = useRef(0); const handleClick = () => { ref.current = ref.current + 1; alert('You c..

• format_list_bulleted 웹 개발
• · 2023. 12. 27.
• textsms

웹 시스템 개발 #React Context

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. React의 Context API는 React 애플리케이션 전체에서 전역적으로 상태를 관리하는 방법입니다. 이를 통해 구성 요소 계층의 각 수준을 통해 수동으로 props을 전달할 필요 없이 React 구성 요소의 전체 트리에서 값(데이터 또는 함수)을 공유할 수 있습니다. 즉, 깊게 중첩된 구성 요소를 처리하거나 여러 구성 요소가 동일한 데이터에 액세스해야 할 때 Context를 사용할 수 있습니다. Prop Drilling의 문제점 각 Heading 구성 요소에는 렌더링할 HTML 제목 태그(, 등)를 결정하기 위해 level prop이 필요합니다. 구성 ..

• format_list_bulleted 웹 개발
• · 2023. 12. 26.
• textsms

웹 시스템 개발 #React State(2)

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 렌더링과 커밋 복습 트리거: 초기 렌더링(앱 시작)과 컴포넌트 상태 업데이트. 렌더링: 트리거 후, React는 화면에 무엇을 표시할지 결정하기 위해 컴포넌트를 호출합니다. "렌더링"은 React가 컴포넌트를 호출하는 과정입니다. 초기 렌더링 시, React는 root 컴포넌트를 호출합니다. 상태 업데이트가 발생한 후의 재렌더링에서는 해당 상태 업데이트를 트리거한 함수 컴포넌트를 호출합니다. 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면, React는 그 다음 컴포넌트를 렌더링합니다. 이 과정은 더 이상 중첩된 컴포넌트가 없을 때까지 계속됩니다. 커밋: Rea..

• format_list_bulleted 웹 개발
• · 2023. 12. 25.
• textsms

웹 시스템 개발 #React State(1)

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Event Handling 이벤트 핸들러는 JavaScript의 이벤트 처리와 유사하지만 구문과 동작에 몇 가지 주요 차이점이 있습니다. React에서는 camelCase 명명 규칙(예: onClick, onSubmit)을 사용하여 요소에 이벤트 핸들러를 연결하며, 컴포넌트에 props로 전달됩니다. function Button() { const handleClick = () =>{ alert('안녕'); } return 이벤트 } function App() { return ( ); } form의 예시 form 및 해당 요소에 이벤트 핸들러를 추가하는 작업도 ..

• format_list_bulleted 웹 개발
• · 2023. 12. 22.
• textsms

웹 시스템 개발 #React 기초편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. JSX 또는 JavaScript XML은 UI가 어떻게 보여야 하는지 설명하기 위해 React에서 사용되는 JavaScript의 구문 확장입니다. JSX를 사용하면 JavaScript 코드와 동일한 파일에 HTML 구조를 작성할 수 있는 방법을 제공합니다. JSX 소개 JSX를 사용하면 JavaScript 코드에 HTML과 유사한 태그를 작성할 수 있습니다. 이러한 태그는 뒤에서 React.createElement 호출로 변환됩니다. JavaScript로 컴파일되는 구문으로, 중괄호 {}로 묶어서 사용할 수 있습니다. JSX는 선택사항이며 React를 사용하기..

• format_list_bulleted 웹 개발
• · 2023. 12. 21.
• textsms

웹 시스템 개발 #React 이론편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. JavaScript 프런트엔드 개발의 짧은 역사 시장에 최초로 등장한 다양한 기술을 기반으로 정렬된 JavaScript 프런트엔드 개발의 짧은 역사는 다음과 같이 요약할 수 있습니다. jQuery: 프런트엔드 개발 세계에서 가장 초기이자 가장 인기 있는 도구 중 하나였습니다. jQuery는 DOM, 이벤트 처리 및 Ajax 호출과의 상호 작용을 단순화하여 개발자가 순수 JavaScript의 복잡성을 몰라도 대화형 웹 애플리케이션을 더 쉽게 구축할 수 있게 해주었습니다. Backbone.js: Backbone.js는 웹 애플리케이션 구축에 대한 보다 구조화된 접..

• format_list_bulleted 웹 개발
• · 2023. 12. 20.
• textsms

웹 시스템 개발 #Mongoose

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Mongoose란? Mongoose는 Node.js의 MongoDB용으로 널리 사용되는 ODM(Object Document Mapper) 라이브러리입니다. Mongoose 는 애플리케이션 데이터를 모델링하기 위한 간단한 스키마 기반 솔루션을 제공하며MongoDB 데이터베이스의 문서를 Node.js 프로그램의 개체로 변환하여 데이터 작업을 더 쉽게 만듭니다. 몽구스의 주요 기능 문서 매핑 Mongoose는 MongoDB의 문서를 프로그램의 JavaScript 개체에 매핑합니다. 이를 통해 일반 JavaScript 개체로 작업하는 것처럼 데이터와 상호 작용할 수 ..

• format_list_bulleted 웹 개발
• · 2023. 12. 19.
• textsms

웹 시스템 개발 #MongoDB

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Scaling Vertical Scaling 정의: 시스템의 성능을 향상시키기 위해 메모리, CPU, 디스크와 같은 하드웨어 자원을 증가시키는 방법입니다. Horizontal Scaling 정의: 시스템을 여러 부분으로 나누고, 각 부분을 서로 다른 서버나 시스템에서 처리하는 방법입니다. 이 방법은 시스템의 확장성을 높이고 부하를 분산시키는데 효과적입니다. NoSQL vs RDBMS 데이터 저장소를 선택할 때, 주로 고려되는 두 가지 옵션은 NoSQL과 관계형 데이터베이스 관리 시스템(RDBMS)입니다. 전통의 RDBMS 데이터 무결성 지원 : RDBMS는 A..

• format_list_bulleted 웹 개발
• · 2023. 12. 18.
• textsms

웹 시스템 개발 #ExpressJS

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이전 포스팅을 보지 않으셨다면 보고 오시는 것을 추천드립니다. 웹 시스템 개발 #NodeJS 학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Node.js 생성 및 목적 Node.js는 Ryan Dahl이 Joye wlsdn629.tistory.com npm (Node Package Manager) npm은 JavaScript 패키지 및 모듈을 설치, 관리, 공유 및 실행하는 것을 담당하는 패키지 관리자입니다. 패키지는 JavaScript 코드의 모음으로, 모듈,..

• format_list_bulleted 웹 개발
• · 2023. 12. 17.
• textsms