| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- websocket
- go
- PROPS
- todo-list
- component
- Server
- localStorage
- channel
- Vue.js
- graceful shutdown
- Matrix
- goroutine
- App.vue
- Vue
- goroutines
- 행렬
- reactivity
- toggle
- cli
- CDN
- Refactoring
- container
- SFC
- map
- golang
- method
- URL
- TODO
- emit
- Dictionary
- Today
- Total
목록전체 글 (60)
ksundev 님의 블로그
기본 구현 방법먼저 코드부터 살펴보겠습니다:func main() { app := fiber.New() // 라우트 설정 app.Get("/", func(c *fiber.Ctx) error { return c.SendString("Hello, World!") }) // 서버를 goroutine으로 실행 go func() { if err := app.Listen(":3000"); err != nil { log.Panic(err) } }() // OS 신호 대기 c := make(chan os.Signal, 1) signal.Notify(c, os.Interrupt, syscall.SIGTERM) ..
서버에서 Graceful Shutdown이란?Graceful Shutdown의 개념Graceful Shutdown은 서버를 안전하게 종료하는 방법입니다. 단순히 프로세스를 강제로 죽이는 것이 아니라, 진행 중인 작업을 완료하고 리소스를 정리한 후에 종료하는 것을 의미합니다.비유하자면, 식당에서:강제 종료: 손님이 식사 중인데 갑자기 문을 닫고 불을 끄는 것Graceful Shutdown: 신규 손님 받기를 중단하고, 현재 손님들이 식사를 마칠 때까지 기다린 후 문을 닫는 것왜 필요한가?일반적인 서버 종료의 문제점서버를 강제로 종료하면 다음과 같은 문제가 발생합니다:1. 사용자 경험 악화사용자: "결제 버튼 눌렀는데 왜 응답이 없지?"서버: (이미 죽음)사용자: "돈은 빠져나갔는데 주문은 안 들어갔네?"2..
왜 "멍청한" 코딩법인가?개발자라면 누구나 경험해봤을 것이다. 복잡한 기능을 구현하려다가 머리가 꽈배기처럼 꼬이는 순간을. 코드가 스파게티처럼 엉키고, 디버깅은 미로 찾기가 되고, 결국 "이게 왜 안 되지?"라며 모니터를 멍하니 바라보게 되는 그 순간 말이다.그럴 때 필요한 게 바로 멍청한 코딩법이다. 멍청하다고 부르는 이유는 단순하기 때문이다. 너무나 당연하고 기본적이어서 오히려 간과하기 쉬운 방법이기도 하다.핵심 원리: Divide and Conquer인간의 뇌는 한계가 있다. 동시에 처리할 수 있는 정보의 양에는 분명한 제약이 존재한다. 심리학에서 말하는 "인지 부하(Cognitive Load)" 때문이다.복잡한 문제를 한 번에 해결하려고 하면:머리가 복잡해진다실수가 늘어난다디버깅이 어려워진다스트레..
카테고리로 분류되는 채팅방과 각 채팅방에 접속한 유저들과 채팅으로 소통할 수 있는 앱을 만들어보았습니다.프론트엔드 코드는 이 게시글에 없고, 백엔드 코드만 작성되었습니다.이후 프론트엔드 코드까지 업로드하여 링크 달아놓겠습니다!전체 코드package mainimport ( "fmt" "net/http" "strings" "time" "github.com/gorilla/websocket")type Message struct { Username string `json:"username"` Content string `json:"content"` Room string `json:"room"` Timestamp time.Time `js..
웹 개발을 하다 보면 실시간 기능을 구현해야 할 때가 있습니다. 채팅, 알림, 실시간 업데이트 등을 위해 WebSocket을 사용하는데, 이때 중요한 것이 바로 연결의 지속성입니다. 오늘은 SPA(Single Page Application)와 WebSocket의 조합이 왜 강력한지 알아보겠습니다.전통적인 웹사이트 vs SPA전통적인 웹사이트 (Multi-Page Application)전통적인 웹사이트는 여러 개의 HTML 파일로 구성됩니다:프로젝트 구조:├── login.html├── dashboard.html├── patients.html└── settings.html사용자가 페이지를 이동할 때마다:새로운 HTML 파일을 서버에서 받아옴페이지가 완전히 새로고침됨이전 페이지의 모든 JavaScript가 ..
2025.06.26 - [[개발] Go/중급 프로젝트] - [URL Checker] hitURL 그리고 느린 URL Checker (순차적) [URL Checker] hitURL 그리고 느린 URL Checker (순차적)urls := []string{ "https://www.airbnb.com/", "https://www.google.com/", "https://www.amazon.com/", "https://www.reddit.com/", "https://www.google.com/", "https://soundcloud.com/", "https://www.facebook.com/", "https://www.instagram.com/", }위의 유명한ksundev.tistory.com이전 URL Ch..
Channels 2 - chan 타입 바꾸고 반복문 활용하기1. 코드 분석현재 우리가 살펴볼 코드는 문자열 타입 채널과 반복문을 활용한 개선된 예제입니다:package mainimport ( "fmt" "time")func main() { c := make(chan string) people := [4]string{"KSun", "Peter", "John", "Chris"} for _, person := range people { go isReady(person, c) } for i := 0; i 2. 이전 코드와의 차이점2.1 채널 타입 변경// 이전: bool 타입 채널c := make(chan bool)// 현재: string 타입 채널c := ma..
배경AI가 등장하게 된 것은 사람의 뉴런에서 영감을 받았다. 뉴런은 역치(임계점) 이상의 자극이 들어오지 않으면 신호를 전달하지 않고, 역치 이상의 자극이 들어오면 신호를 전달한다. (쉬운 예시로 잘 때 큰 소리가 아니면 깨지 않는 것을 생각해보자)수많은 뉴런들이 이러한 방식으로 디지털(0과 1) 정보를 전달하고 이것이 우리가 생각을 할 수 있게 한다.1. 중요한 자극만 전달?우리가 어떤 판단을 내릴 때 그것에 중요한 영향을 주는 요소가 있고 아닌 것들이 있다. 그 과정에서 각 요소마다 가중치(W1, W2, …)가 부여되는데 이 가중치의 계수를 결정하는 것이 딥러닝의 학습이라고 보면 된다. (물론 조금 이따 다룰 편향 bias도 있다.)2. 활성화 함수란?실제 우리 뇌에서도 그러하듯, 각 뉴런(노드)들이..
이번 포스트에서는 Vue.js에서 Modal 기능을 구현하는 방법을 알아보겠습니다. 특히 Vue의 강력한 Slot 시스템과 내장 Transition 컴포넌트를 활용한 Modal 구현에 대해 중점적으로 다뤄보겠습니다.1. 현재 상황과 해결해야 할 문제컴포넌트 구조 개선: UI와 비즈니스 로직 분리이전 포스트들과 마찬가지로, 이번에도 컴포넌트의 책임을 명확히 분리했습니다:TodoInput 컴포넌트: UI 구현만 담당 (프레젠테이션 컴포넌트)App 컴포넌트: 비즈니스 로직과 데이터 관리 담당 (컨테이너 컴포넌트)Modal 컴포넌트: 재사용 가능한 UI 컴포넌트해결해야 할 문제빈 입력 시 사용자에게 알림 표시재사용 가능한 Modal 컴포넌트 구현Vue의 Slot 시스템을 활용한 유연한 Modal 설계2. Vue..
Vue.js 기본 개념 퀴즈총 10문항1. 뷰 싱글 파일 컴포넌트(.vue)의 기본적인 세 가지 필수 섹션은 무엇일까요?A html, js, cssB template, script, styleC view, data, methodsD layout, logic, style정답 보기정답: B template, script, styleVue 싱글 파일 컴포넌트는 , , 세 가지 섹션으로 구성됩니다.2. Vue에서 입력 요소의 값과 컴포넌트 데이터를 양방향으로 쉽게 연결할 때 사용하는 핵심 디렉티브는 무엇일까요?A v-bindB v-onC v-modelD v-if정답 보기정답: C v-modelv-model은 양방향 데이터 바인딩을 제공하여 입력 요소와 데이터를 쉽게 연결할 수 있습니다.3. Vue에서 배열이나..