💕
후원
본문 바로가기

분류 전체보기113

[Web] 브라우저 네트워크 탭 간단히 보는 법 가끔씩 웹 개발 관련 질문을 받을 때면 생각보다 많은 분들이 브라우저 개발자 도구의 네트워크 탭의 존재를 모르고 계시더라고요. F12키를 눌러서 개발자 도구에 들어가면, 아래와 같이 네트워크 탭을 볼 수 있습니다. 저도 모든 기능을 다 사용하는 것은 아니지만, 제가 개발하면서 유용하게 사용했던 부분들만 간단하게 정리해보려고 합니다. ① 네트워크 기록을 중지 / 재개하는 버튼 ② 네트워크 기록 초기화 (clear) ③ 페이지를 이동하거나 새로고침해도 로그를 보존 (완전 유용) ④ 개발자 도구가 켜져있는 동안 캐시 비활성화 이 부분에서는 네트워크 통신을 필터링할 수 있습니다. 보통 저는 서버와의 통신을 체크할 때 사용해서, Fetch/XHR 부분만 켜놓고 봅니다. 로그에서는 이런 식으로 요청한 주소와 상태를.. 2023. 11. 21.
[Typescript] 타입 단언, 타입 가드 타입스크립트 컴파일러는 코드에서 타입을 추론하는데, 컴파일러가 추론한 타입을 무시하고 우리가 원하는 타입으로 강제할 수 있습니다. 이를 타입 단언(Type Assertion)이라고 합니다. type AnimalType = "cat" | "dog"; let cat = "cat"; 이런 코드가 있을 때, 타입스크립트 컴파일러는 cat 변수를 string으로 추론할 것입니다. 위 코드를 타입 단언 형식으로는 아래와 같이 작성할 수 있습니다. type AnimalType = "cat" | "dog"; let cat = "cat" as AnimalType; 타입 단언은 컴파일타임에서만 타입을 변경하기 때문에 타입 에러는 잡아주지만, 타입 캐스팅과는 다르게 실제로 프로그램 실행 시에 발생하는 런타임 에러를 방지하지.. 2023. 11. 21.
[Next.js] AWS Polly API를 사용해 TTS 서비스 만들기 AWS API Gateway와 Lambda, Polly, S3를 활용하여 TTS API를 구현한 후, Next.js에서 사용하는 간단한 서비스를 만들어 보았습니다. 구조는 위와 같습니다. 우선 Lambda 함수를 구성해줍니다. index.mjs 파일은 다음과 같이 작성되어 있습니다. import { PollyClient, StartSpeechSynthesisTaskCommand } from "@aws-sdk/client-polly" var polly = new PollyClient({ region: "ap-northeast-2" }); export const handler = async (event, context, callback) => { let message = "지정된 문자가 없습니다."; con.. 2023. 11. 15.
[Next.js] Naver Map API 이용해서 현재 위치 지도 띄우기 [NextJS 지도 개발 #1] next/script를 이용하여 네이버 지도 API를 이용하자 글을 많이 참고하였습니다. 감사합니다. 우선 네이버 지도 API 사용 신청을 합니다. (https://www.ncloud.com/product/applicationService/maps) Application 등록을 클릭하여, 사용할 API를 추가해줍니다. 로컬호스트도 등록 가능합니다. (이후에 배포 시에는 삭제합니다.) 인증 정보를 클릭하면, 클라이언트 아이디와 시크릿이 나오는데, 이를 복사하여 .env에 넣어줍니다. NEXT_PUBLIC_MAP_CLIENT_ID= NEXT_PUBLIC_MAP_CLIENT_SECRET= 맵의 타입을 선언해줍니다. (map.d.ts) pnpm i -D @types/naverma.. 2023. 11. 15.
[Python] 영수증 프린터 가지고 놀기 당근에서 구한 오늘의 장난감입니다. 영수증 프린터예요. 일단 기본적으로 프린터라서, PC에 연결해서 프린트가 됩니다. 친구들한테 텍스트로 덕담하기 완전 가능. 아무튼.. 그냥 프린트만 하면 재미없으니까 뭔가 해보기 위해 파이썬을 켭니다. PySide6, PIL, OpenCV를 활용해서 웹캠으로 사진을 찍은 후, 영수증으로 뽑아볼 거예요. import sys import cv2 import numpy as np import time from default_frame import image_frame from print_file import print_file from PySide6.QtWidgets import QApplication, QWidget, QLabel, QPushButton, QVBoxLayo.. 2023. 11. 13.
[발표] 해커톤 200% 즐기기: 해커톤이 처음인 사람들을 위한 진입장벽 낮추기 HTML 삽입미리보기할 수 없는 소스고려대학교 중앙 컴퓨터동아리 KUCC에서 세미나를 진행했습니다. 조금 부끄럽군요.. 블로그에는 발표에서 어떤 이야기를 했는지 텍스트로 간단하게 남겨보려고 합니다..^♡^해커톤이란 무엇인가?해커톤이 어떤 식으로 진행되는지에 대한 간단한 설명입니다. 팀 빌딩 및 주제 공개 ▶ 아이디에이션 ▶ 개발 ▶ (중간 스피치) ▶ 개발 ▶ (멘토링) ▶ 발표 ▶ 시상으로 진행되는데, 해커톤마다 당연히 차이는 있겠지만 큰 틀은 비슷하게 진행돼요.발표 전에 설문조사를 받고 간단히 정리해보았는데요, 해커톤에 참여하기 꺼려지는 이유 중 가장 큰 것이 '실력이 부족하다고 생각해서', '다른 팀원에게 폐를 끼칠까봐'였습니다. '진입장벽이 높아서'와 함께 결국 본인의 실력이 부족한 것 같다는 이.. 2023. 10. 29.
[리뷰] 현실에서는 학생인 내가 SW 교육봉사단에서는 선생님? 고려대학교 SW교육봉사단에서 진행하는 에 보조강사로 참여했습니다. SW교육봉사단은 SW중심대학에서 진행하는 프로그램으로, 찾아가는 캠프나 찾아오는 캠프, 모두의 캠프 등을 개최하고 있어요. 찾아가는 캠프는, 도서벽지 지역의 학교에 직접 찾아가서 진행하는 소프트웨어 교육 캠프입니다. 이번 캠프는 강화도에서 진행되었고, 저는 강화고등학교에서 강의를 진행하게 되었어요. 이런 강의에 강사로 참여하는 것이 처음이다 보니 걱정도 많고, 어떻게 진행해야 할지 감도 잘 안 왔는데요. 가치확산팀 선생님들이 수업 자료에 대해 피드백도 주시고, 수업에 자율권도 주셔서 많이 도움받았어요. 제가 강의를 맡은 부분은 파이썬 기초였습니다. 수업 자료는 기존 PPT와 파이썬 기초 책들을 활용해서 제작하였고, 강의 참고자료도 마크다운.. 2023. 10. 24.
[리뷰] 카카오브레인 패스파인더 2기 회고 '카카오브레인 패스파인더'는 카카오브레인에서 진행한 AI 관련 인턴십 프로그램입니다. 이번 2기에서는 몰입, 성장, 노마드 등의 키워드 하에서 서비스를 기획하고 개발하는 경험을 할 수 있었습니다. '자사 언어 모델의 새로운 활용 기회를 모색하면서 참가자에게 서비스 및 제품 개발에 참여할 수 있는 기회를 제공해 인재들의 성장을 돕겠다'는 카카오브레인의 목표에 맞게, LLM을 활용한 제품을 직접 기획부터 개발까지 해내는 과제를 받았습니다. 모집 모집은 모바일 앱 개발, 웹 프론트엔드 개발, 서비스 백엔드 개발의 세 분야로 나누어서 진행되었습니다. (저는 이 프로그램에 참여하면서 굳이 분야를 나누어서 뽑지 않아도 될 것 같다는 생각을 했어요.) [모바일 앱 개발] - 모바일 앱개발에 관심이 많으신분 - And.. 2023. 10. 4.
[인증] JWT로 로그인 인증 2. Access Token과 Refresh Token 사용하기 (Koa, next-auth) 3년 전 글에서 추가적으로, 보안 문제 개선을 위해 Access Token과 Refresh Token을 사용하는 방법을 백엔드(Koa)와 프론트엔드(Next, next-auth)에서 다루어보려고 합니다. 우선 Access Token과 Refresh Token의 개념은 다음과 같습니다. Access Token: 인증이 필요한 요청마다, 요청에 포함하여 인증을 위해 사용하는 토큰 Refresh Token: Access Token이 만료되면, 새로운 Access Token 발급을 위해 사용하는 토큰 토큰을 두 가지로 나누어 사용하는 이유는, 이미 널리 알려져 있지만 간단히 이야기하면 다음과 같습니다. Access Token이 탈취될 경우를 대비해 Access Token의 유효기간을 짧게 설정합니다. 이러면 A.. 2023. 6. 9.
[Koa] Koa에서 apidoc 사용하기 Swagger보다 가볍고, 설치가 쉬운 apidoc을 Koa에서 사용해보겠습니다. 직접 API와 응답을 기재해야 하기 때문에, 작은 프로젝트에서 적합할 것으로 생각됩니다. npm install apidoc -g 우선 전역으로 apidoc을 설치해준 후, 프로젝트 루트 디렉토리에 apidoc.json이라는 설정 파일을 만들어 다음 내용을 작성해줍니다. { "name": "이름", "version": "1.0.0", "description": "페이지 설명", "title": "페이지 제목", "url": "http://localhost:4000/apidoc" } 그 후 apidoc이 읽어올 파일에 /** * @api {get} /api/user/:id Request User by ID * * @apiVer.. 2023. 6. 5.
[Network] HTTP에 대해서 HTTP란? 웹 상에서 데이터를 교환하기 위해 사용되는 프로토콜로, 웹 브라우저와 웹 서버 간의 통신에 이용됩니다. 클라이언트가 서버에 요청을 보내고 서버가 그에 대한 응답을 제공하는 방식으로 동작합니다. GET: 리소스의 조회를 요청합니다. 주로 웹 페이지나 이미지 등의 데이터를 가져오는 데 사용됩니다. POST: 서버에 데이터를 제출하거나 처리를 요청합니다. 주로 폼 데이터의 전송이나 파일 업로드 등에 사용된다. 요청에 body를 포함할 수 있습니다. PUT: 리소스의 교체를 요청합니다. PATCH: 리소스의 수정을 요청합니다. DELETE: 리소스의 삭제를 요청합니다. HEAD: 메세지 헤더(문서 정보)를 요청하는 메서드입니다. GET과 유사한 방식이지만, 실제 문서를 요청하는 것이 아니라, 문서 .. 2023. 6. 1.
[리뷰] 제3회 KUCC 게임잼 참가 후기 게임 개발을 좋아하는 웹 개발자로써, 이번에 벌써 세 번째 동아리 게임잼에 웹으로 참가하였습니다. 이번 게임잼 주제는 가정, 스승, 어린이 (5월이니까요.) 중 랜덤이었고, 저희 조는 '스승'이 선택되었습니다. 그래서 '스승'이라는 주제로 이번에 개발한 게임은 난 선생이고 넌 학생이야! 입니다. 난 선생이고 넌 학생이야! sensei-nu.vercel.app 사실 게임잼 참가 전날에 웹으로 만들었을 때 더 효율적으로 개발할 수 있는 게임이 뭐가 있을까 생각해보다가, 포인트 앤 클릭 방식으로 진행되는 육성 시뮬레이션 게임을 고민해보았습니다. 아무래도 배경 지식이 있는 분야의 게임을 만들고 싶어서, 3년동안 학생에게 공부를 시키고 내신이나 수능 성적으로 대학을 보내는 유머성이 가미된 게임을 만들고 싶다는 생.. 2023. 5. 29.

티스토리툴바