💕
후원
본문 바로가기

Web39

[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.
[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.
[Web] 초보 웹 프론트엔드 개발자가 백엔드와 통신할 때 오류가 난다면? 일단 네트워크 탭을 뜯어보면 대략적인 파악이 가능합니다. 요청이 의도한 대로 보내졌는지, 맞는 메소드로 맞는 주소에 요청을 보냈는지 확인해 보면 도움이 됩니다. 코드에 오타가 없는지 확인합니다. 네트워크 탭을 까봅니다. 요청 Payload, 요청을 보낸 API 주소, 메소드와 헤더를 파악해 오류가 있다면 수정합니다. Postman에서는 잘 되는지 확인해봅니다. (Postman에서는 잘 된다면, 클라이언트 쪽 문제일 가능성이 높겠죠?) 위의 정보와 응답값을 백엔드 개발자에게 전달하고 확인을 요청합니다. 다음은 흔히 발생할 수 있는 오류들이라서 정리해봤습니다. Q. CORS 에러가 나요. A. 백엔드 개발자에게 CORS를 뚫어달라고 요청합니다. Q. Method Not Allowed 오류가 떠요. A. PO.. 2023. 11. 22.
[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.
[인증] 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.

티스토리툴바