💕
후원
본문 바로가기

분류 전체보기113

[BOJ] 15647. 로스팅하는 엠마도 바리스타입니다 https://www.acmicpc.net/problem/15647트리의 각 노드에서 다른 모든 노드로 가는 최단 경로들의 합을 구하는 문제입니다.간단하게 생각해서 각 노드가 다른 노드로 갈 때 무조건 루트 노드를 거친다고 가정하고 계산한 후 필요없는 간선을 빼주면 될 거라고 생각했습니다.len_to_root = [0 for _ in range(N + 1)] # 루트 노드에서 각 노드로 가는 거리len_to_parent = [0 for _ in range(N + 1)] # 부모 노드로 가는 거리parents = [0 for _ in range(N + 1)] # 부모 노드subtree = [0 for _ in range(N + 1)] # 서브트리 개수def dfs(now, parent, length): .. 2024. 6. 26.
[React] [번역] 리액트 엘리먼트, 자식 컴포넌트, 부모 컴포넌트 그리고 리렌더링에 관한 미스터리 원문: https://www.developerway.com/posts/react-elements-children-parents by Nadia Makarevich The mystery of React Element, children, parents and re-rendersLooking into what is React Element, exploring various children vs parents relationship in React, and how they affect re-renderswww.developerway.com리액트 엘리먼트가 무엇인지 살펴보고, 리액트의 다양한 부모-자식 관계에 대해 탐구해보고, 리렌더에 어떤 영향을 미치는지 알아봅시다.리액트 컴포지션(합성)에 관한 이전 글에서, .. 2024. 6. 22.
[라이브러리] 뚝딱뚝딱 UI 라이브러리 만드는 일기 이번 학기에 동아리에서 찬휘의 '나만의 작고 소중한 UI 라이브러리 만들기' 세션을 들으며 UI 라이브러리를 만들어볼 기회가 있었습니다. 전부터 만들어보고 싶다고는 생각했었는데 킹갓찬휘가 떠먹여준다? 당장 달려갔습니다.일단 주 목적은 내가 쓸 것을 만들기였습니다.번들러, UI 컴포넌트 개발 도구 선택과 세팅우선 번들러는 우리가 js, jsx나 ts, tsx 등으로 작성한 여러개의 코드 파일들을 하나 또는 여러 개의 파일로 묶어주는 역할을 합니다. 이 과정에서 문자를 압축해서 코드 파일의 용량을 줄여주기도 하고 트리 셰이킹을 통해 안 쓰는 부분을 없애주기도 합니다. 가장 유명한 웹 번들러는 아무래도 Webpack일텐데요. 웹팩의 가장 큰 유용한 점 중 하나는 Hot Module Replacement입니다... 2024. 6. 4.
[NCP] 서버 만들고 쉽게 접근하기 VPC와 서브넷 만들기서버를 띄우려면 우선 VPC를 만들어야 합니다.VPC는 가상 네트워크인데요, 클라우드 환경 내에서 가상 네트워크를 정의하는 겁니다. 네트워크 내에서 사용할 수 있는 IP 주소를 써줘야 합니다.  CIDR 표기법에서 슬래시(/) 뒤에 오는 숫자는 네트워크 주소 부분의 길이를 나타냅니다. 예를 들어, /16은 앞의 16비트가 네트워크 주소를 나타내고, 나머지 비트는 호스트 주소를 나타냅니다. 이 숫자가 커질수록 서브넷의 크기가 작아집니다. 내부 네트워크에서 사용되는 IP 주소 범위를 /16(넓은 범위)에서 /28(낮은 범위) 내에서 설정하면 됩니다.저는 테스트용으로 10.0.0.0/16으로 설정해보겠습니다.이제 VPC를 만들었으니 서브넷을 만들어 보겠습니다.서브넷은 VPC 내에서 더 작.. 2024. 5. 28.
[Next.js] 1시간만에 OpenAI로 영어 회화 도우미 만들기 전화영어처럼 음성으로 영어회화를 하고, 내 회화에서 고칠 점을 AI가 알려주면 좋겠다.. 라는 생각으로 뚝딱 만들어보았습니다. 별로 어렵지 않았습니다! 우선 ChatGPT를 활용해서 대화 주제를 생성합니다. 이 주제에 맞게 대화를 진행할 거예요. 프롬프트도 ChatGPT한테 써달라고 합니다. 뚝딱이죠. Next.js의 API 라우터에서 OpenAI에 요청을 보낼 겁니다. 우선 위의 프롬프트를 활용해서, AI가 내 발화의 문법 오류를 고쳐주는 라우트를 다음과 같이 만들었습니다. import { CONCEPT_PROMPT, PROMPT } from "@/app/constants/prompt"; import OpenAI from "openai"; const openai = new OpenAI({ apiKey:.. 2024. 4. 7.
[리뷰] SKYST HACKATHON 2 후기 - 프론트엔드 팀인 줄 알았는데, 풀스택 팀이었습니다 프론트엔드가 주 분야인 사람 5명(저, 찬휘, 용준, 영헌, 지수)이서 팀을 꾸려 출전한 스카이스트 해커톤. 정신차려보니 찬휘🦈는 디자인을 전부 맡았고, 기획 하고 싶어했던 지수👼는 감기 걸려서 불참해버렸고, 용준⚔️은 버그 사냥꾼이 되어 장장 4시간의 삽질을 끝내버렸고, 영헌🦁은 프롬프트 엔지니어로 거듭나고, 저🐰는.... 백엔드를 했습니다. SKYST는 서울대, 연세대, 고려대, KAIST 연합 단체입니다.. 작년에는 SKYCC였는데, 카이스트도 함께 하게 되어서 SKYST가 되었다고 하네요. 저희 팀은 모두 KUCC 회원들로 이루어져 있는데요. 지수가 드래곤볼을 열심히 모아서 팀을 꾸렸습니다. 팀장인 찬휘가 지은 저희 팀명은 멋진예금. 대회 공식적으로 공지 및 질문 등 소통은 Slack을 활용했는데.. 2024. 3. 27.
[포스터] KUCC 포스터 모음 결국 왼쪽으로 했었는데, 오른쪽 디자인도 마음에 들어서 리크루팅 홍보 페이지 만들 때 디자인을 활용했습니다. 이렇게,, 이것도 둘 중에 고민하다가 투표로 하얀 배경이 채택되었습니다,, 그리고 마음에 들었으나 채택되지 못한 아이들,,,입니다,,, 상당히 맘에 드는 동아리 회지 표지 디자인.. 진짜 감이 안 잡혀서 끙끙거리고 있는데 한 대학원생이 지나가면서 동아리방 벽에 걸린 사진들 활용해보면 어때? 하는 말에 영감이 떠올라서 만들었었네요... 디자인 한것들 좀 블로그에 종종 올려야겠습니다.. ㅎㅎ 2024. 3. 10.
[Python] 항상 화면 위에 떠있는 ChatGPT Widget 만들기 전체 코드는 github에서 확인하실 수 있습니다. GitHub - r-4bb1t/chatgpt-widget Contribute to r-4bb1t/chatgpt-widget development by creating an account on GitHub. github.com 브라우저에 20+개의 탭을 켜놓고 사는 현대인들... (저만 그런가요?) ChatGPT를 쓸 일이 많은데, 열어놓은 탭 중 ChatGPT를 찾기도 번거롭고 화면을 전환하는 것도 번거로웠습니다. 모니터를 하나만 쓰는 랩탑 유저의 슬픔이기도 하죠. 화면 위에 항상 ChatGPT가 띄워져 있으면 좋겠다는 생각에, 직접 만들어보기로 했습니다. 우선 기본적인 구성은 figma로 위와 같이 잡아보고, PyQT5로 GUI를 구성해서 만들어보기로.. 2024. 2. 21.
[리뷰] SPARCS Service Hackathon 2024 참가 후기 - 최우수상 수상! 이번 2월 14일부터 16일까지, 대전광역시 및 KAIST에서 주관하고 KAIST 산하 개발자치단체이자 KAIST 학부 총학생회 산하 특별기구인 SPARCS에서 주관한 SPARCS Service Hackathon 2024에 참가했습니다! 이번 스팍스 해커톤은 개인 혹은 2인 지원이 가능해서, 동아리 친구인 KUCC 공식 카피바라 민됴리님과 함께 신청서를 제출했습니다. 팀은 총 4명으로 구성되는데, 저희 팀은 저와 백엔드 개발자 쿼카, 그리고 서울대학교 과 동기 사이인 프론트엔드 개발자 하나와 기획자 동경이로 구성되었어요. 행사 전 공지를 통해 공개된 해커톤의 테마는 지역 사회 문제 해결하기였습니다. 공식적으로 대회 1일차에는 데이터 분석 및 시각화 미션이 진행되는데, 이 미션에서는 대전광역시의 특징이나 .. 2024. 2. 18.
[Next.js] API route와 firebase로 인증과 글 쓰기 구현하기 파이어베이스 Auth 세팅 우선 파이어베이스에서 로그인 제공업체를 선택합니다. github으로 진행해보겠습니다. github에 접속하여, Settings / Developer Settings / OAuth Apps에서 New OAuth App을 만들고 Client ID와 Client secrets를 복사해둡니다. 복사해둔 ID와 secret을 입력하고, callback URL도 복붙해 깃허브에 입력해줍니다. Next.js 설정 패키지 관리자로 firebase와 firebase-admin을 설치해줍니다. pnpm add firebase firebase-admin 다음과 같이 .env를 구성합니다. 서버 측 코드(route.ts 등)에서는 firebase-admin SDK를 이용해서 접근해야 합니다. NEX.. 2024. 1. 21.
[회고] 컴퓨터 동아리, 회장 세 번 한 사람 여기에 실존하다 KUCC에 들어오기까지 저는 대략 2011년, 초등학교 5학년 때부터 프로그래밍을 해왔고, 그 때부터 개발자가 아닌 진로를 생각해본 적이 없습니다. 학창 시절에도 솔직히 말하면 공부보다는 개발이나 좋아하는 것에 좀 더 집중하는 학생이었습니다. 그런 저는, 입시가 끝나고 20살이 된 해 2019년에 대학에 입학했습니다. 수능 성적이 원하는 만큼 나오지 않아 가고 싶은 과가 아닌 적성에 맞지 않는 과를 선택하게 되었습니다. 단지 아버지의 모교라는 이유만으로 원서를 쓰고, 오게 된 고려대학교에서, 학과 공부보다는 제 진로에 도움이 되고 제가 재미를 느낄 수 있는 활동을 하고 싶었습니다. 그렇게 입학하자마자 학교 커뮤니티 등에 ‘컴퓨터’라는 키워드로 검색을 해 KUCC를 알게 되고, 곧바로 지원서를 제출하였습니.. 2023. 11. 29.
[Web] 초보 웹 프론트엔드 개발자가 백엔드와 통신할 때 오류가 난다면? 일단 네트워크 탭을 뜯어보면 대략적인 파악이 가능합니다. 요청이 의도한 대로 보내졌는지, 맞는 메소드로 맞는 주소에 요청을 보냈는지 확인해 보면 도움이 됩니다. 코드에 오타가 없는지 확인합니다. 네트워크 탭을 까봅니다. 요청 Payload, 요청을 보낸 API 주소, 메소드와 헤더를 파악해 오류가 있다면 수정합니다. Postman에서는 잘 되는지 확인해봅니다. (Postman에서는 잘 된다면, 클라이언트 쪽 문제일 가능성이 높겠죠?) 위의 정보와 응답값을 백엔드 개발자에게 전달하고 확인을 요청합니다. 다음은 흔히 발생할 수 있는 오류들이라서 정리해봤습니다. Q. CORS 에러가 나요. A. 백엔드 개발자에게 CORS를 뚫어달라고 요청합니다. Q. Method Not Allowed 오류가 떠요. A. PO.. 2023. 11. 22.

티스토리툴바