개발 학습일지(TIL)48

• 

  [React] select box - API 호출로 option 조회시, placeholder 초기화 문제 Select 컴포넌트 사용시 placeholder가 초기화되지 않는 문제 -> 키 설정하기  두 개의 select box가 있다.  채널 선택항목은 팀 항목에 종속적이다.즉, 팀 선택 후에 -> 채널 선택 하는 방식 다시 말해,팀 선택시, 선택지들은 API로 호출하여 선택 옵션을 불러오고,채널 선택시, 채널 선택지들 또한 '팀 선택' 항목에서 지정한 값에 따라 동적으로 목록을 불러오는 방식인 것이다.  문제상황내가 원했던 것은 1회차 선택에서 팀 -> 채널 선택을 한 번 마친 뒤 만약, 사용자가 팀 옵션을 바꾸면채널 선택 항목도 초기화가 되면서채널의 placeholder 항목이 "채널을 선택해주세요" 라는 표기로 초기화가 되길 바랐다. 그런데 placeholder 항목이 초기화가 되지 않고, 표기가 비어.. 개발 학습일지(TIL) 2024. 6. 21.

• 

  [카프카, 주키퍼] apache Kafka 설치 및 실행 방법 정리(윈도우11, Nestjs) 개발 환경 : windows 11 1. 아파치 카프카 홈페이지에서 카프카 설치Apache Kafka Apache KafkaApache Kafka: A Distributed Streaming Platform.kafka.apache.org - Binary downloads 버전 설치 - 이후  카프카 설치 파일 압축 풀기  (옵션 사항) C 드라이브 하위로 이동 -> 폴더명 단순화- 보통, 브라우저 내 파일 기본 다운로드 경로로 설정되어있는 Downloads 등에서 진행하면, 카프카 실행시 경로가 너무 길어져서 에러가 발생할 수 있다.- 이때문에 필자는 경로를 이동시키던가, 폴더명을 단순화 시키는 등의 작업을 추가 진행했다.    2. 자바 설치  - 아파치 카프카를 실행하려면 자바가 설치되어있어야 한다.-.. 개발 학습일지(TIL) 2024. 5. 22.

• 

  nextjs / swagger-ui-react / Node.js 버전 호환 에러 : Class extends... 배우게 된 점 - 개발서버- 테스트서버- 프로덕션 서버 node.js 버전을 동일하게 잘 관리하자. -------- next.js 14.1.2 버전 사용중 swagger-ui-react 5.3.0 버전 개발서버 node.js 20.x 테스트서버 vercel 18.x 문제상황 기존에 토이 프로젝트로 Nextjs 풀스택 앱을 만들었고, swagger로 API 문서를 발행하고 있었다. - swagger-ui-react 라이브러리를 이용하여 만들었고 - api 문서는 개발용 및 테스트용으로 보여주는 것이기 때문에, 프로덕션 서버가 아닌 테스트 서버인 Vercel을 통해 접근할 수 있었다. 기존에 설치하지 않았던 eslint-config-next (14.1.3) 를 설치한 시점부터 빌드에 문제가 생겼다. Type.. 개발 학습일지(TIL) 2024. 3. 15.

• 

  AWS S3 - CloudFront 빠른 설정 방법 (+access denied 해결) 현재 개발중인 토이프로젝트에 파일 관리(업로드 및 다운로드) 기능을 개발하는 상황이다. 파일 저장소로는 S3 버킷을 사용하려고 한다. 추가로, CloudFront의 CDN을 통해 컨텐츠를 효율적으로 전달할 수 있게 한다. 즉, CloudFront의 CDN은 컨텐츠를 원본 서버에 받아와서 캐싱을 해두고, 해당 자원에 대한 요청이 들어오면 캐싱된 컨텐츠를 제공하여 좀 더 빠른 컨텐츠를 제공할 수 있게 돕는다. 목차 1. S3 버킷 생성 2. CloudFront 배포 생성 3. S3 버킷 정책 설정 (access denied) 4. 파일 업로드 후 접근 테스트 1. S3 버킷 생성 개발용이기 때문에 기본 설정을 바꾸진 않았다. 프로덕션용 앱 개발과정에서 필요한 경우 옵션을 변경하면 된다. '이 버킷의 퍼블릭 .. 개발 학습일지(TIL) 2024. 2. 13.

• 

  vs code 내 터미널에서 한글 입력 시 씹힘(?) 발생 오류 문제현상 : vs code내의 터미널 쉘을 켜서, 한글을 타이핑하면 평소처럼 하면 중간에 글자가 제대로 입력되지 않는 증상이다. vs code를 사용하면서 언젠가부터 이 증상이 나타났다. 예를 들어, 나는 git commit -m"[한글 입력 테스트] 한글이 정상적으로 입력이 될까요?" 를 입력했음에도 --> git commit -m"[한글 입력 테스트] 한글 정상적으로 입력 될까?" 로 입력이 된다. 평소의 속도로 한글을 타이핑을 했음에도 중간에 '이', '요',가 사라졌다. vs code업데이트를 하던가, 나도 모르게 vs code 설정을 실수로 바꾸었다든가 하여 문제가 생기지 않았을까? 문제 파악 1. git bash, powershell, Ubuntu(WSL) 등 종류가 관계가 없었다. 2. 영어.. 개발 학습일지(TIL) 2024. 2. 2.

• 

  TIL : AWS App Runner 사용자 지정 도메인(Custom doamin) 연결 방법 (이슈 문서화) AWS App Runner는 인프라 구축 및 도메인 연결까지 아주 쉽다고 안내된 서비스인데, 오류가 발생하면 되려 어렵다. 매뉴얼을 봐도 어떻게 조치해야하는지 친절하게 안내가 안 되어있고, 국내외 레퍼런스까지 적다. 다음에 헷갈리거나 반복하지 않도록 시행착오들을 기록해본다. App Runner 사용자 도메인 연결 절차 결론 : App Runner 커스텀 도메인 연결을 위해서는( 외부 도메인 구입시) 1. 외부 도메인 구입 (ex. 가비아) 2. Route53 호스팅 영역 생성(기본 레코드 2개 생성됨을 확인) 3. NS 1~4차 가비아에 연결(가비아에서 도메인 구입시) 4. cmd에서 nslookup, set type=ns로 연결 도메인 주소의 네임서버 정보 확인 필요 - 연결 설정한 NS 1~4차로 응.. 개발 학습일지(TIL) 2023. 10. 11.

• 

  TIL : Docker명령어-AWS ECR 이미지 Pull 뒤 컨테이너로 실행 예를 들어서, 리눅스 기반의 AWS EC2 혹은 Azure 가상 머신을 만들고, Docker까지 설치를 마쳤다고 가정하자. ECR에 push 된 컨테이너 이미지를 다운받아 사용할 때 거치는 절차와 필요한 명령어는 다음과 같다. 1. AWS CLI를 설치 후 AWS CLI 구성하기 다음 명령어 입력 후 요구에 따라 access key, secret key 순차 입력 aws configure 2. Docker 인증 정보 입력 aws ecr get-login-password --region [이미지가 저장된 region 입력] | sudo docker login --username AWS --password-stdin [ECR URI] 예를 들어서 aws ecr get-login-password --regio.. 개발 학습일지(TIL) 2023. 10. 6.

• 

  TIL : 캐시와 fetch api 통신 이슈 문제 상황 : 서버에서 더 이상 응답하지 않는 값을 통신해오는 fetch api 클라이언트에서 fetch로 데이터를 가져오려고 한다. 이전에 테스트 삼아 기입했던 { text: 'hello' } json 객체를 받아오고 있다. 문제는 현재 서버에서는 보내고 있는 데이터가 아니라는 점이다. 예를 들어, 내가 B 데이터를 보내고 있는데, 클라이언트쪽에서는 A데이터를 받았다고 응답하는 상황이다. 예전에 B 데이터를 보낸 적은 있었지만, 현재는 더 이상 보내고 있지 않고 있다. 서버에서 보내주는 데이터의 값을 다른 것으로 바꾸어 봐도 동일하게 { text: 'hello' } 를 받아온다. 이상하다 서버쪽, 아니 전체 소스코드에는 더 이상 text:'hello'가 없는데도 말이다. 문제 원인 : 클라이언트의 캐시.. 개발 학습일지(TIL) 2023. 9. 9.

• 

  TIL : Docker image pulll 및 run, Nginx 웹서버 구축 https://veams.tistory.com/119 TIL : Azure 클라우드에서 Linux 대여 후, 우분투에 도커 설치 개요 리눅스 및 도커를 활용한 개발 실습을 하려고 합니다. 백엔드 개발자이니, 리눅스나 기타 인프라 환경에 더 익숙해질 필요를 느낍니다. 문제가 있습니다. 현재 사용하고 있는 저의 로컬 환 veams.tistory.com 이전에 Azure를 통해 만든 가상머신에 docker를 설치했습니다. 이제 docker에 image를 pull 받아보고 실행해보려고 합니다. 1. Image? container? docker에서 image는 마치 프로그램에 해당합니다. 프로그램이 실행되면 프로세스가 되듯 docker에서 image를 run하면 container가 됩니다. 실행되면 contain.. 개발 학습일지(TIL) 2023. 9. 3.

• 

  TIL : Azure 클라우드에서 Linux 대여 후, 우분투에 도커 설치 개요 리눅스 및 도커를 활용한 개발 실습을 하려고 합니다. 백엔드 개발자이니, 리눅스나 기타 인프라 환경에 더 익숙해질 필요를 느낍니다. 문제가 있습니다. 현재 사용하고 있는 저의 로컬 환경(LG노트북, AMD)은 가상화를 지원한다고 주장하지만, 실제로 사용이 어려운 상태입니다. 그래서 여러차례 고생을 했습니다. - Docker for Desktop을 설치하거나, WSL2 설치 등을 목적으로 Windows에서 제공하는 가상화 기능을 켜는 등, 가상화된 리눅스의 정상 설치 및 설정 변경을 위해 재부팅을 하면 컴퓨터가 먹통이 되어버립니다. 이처럼 본인 컴퓨터에 리눅스를 설치하기 어려운 상황에서 도커를 어떻게 다룰 수 있을까요? 저는 노트북을 한 대 더 사는 것 까지 생각하다가... 마침내 클라우드에서 컴퓨터.. 개발 학습일지(TIL) 2023. 9. 1.

• 

  TIL : 모달창으로 NextAuth 커스텀 로그인 페이지 전환 속도 개선 1. 문제 상황 및 배경 - 로그인 페이지의 렌더링 지연 Vercel 환경에서 Next.js 13 버전에서 NextAuth.js 라이브러리를 사용했고, 이 라이브러리에 내장된 커스텀 로그인 페이지를 활용하여 로그인 페이지를 구현해놨다. 문제는 이 페이지로 렌더링(이동)하는 속도가 너무 늦었다. 로그인을 하는 /login URL로 첫 렌더링시 상황에 따라 약4초~7초까지 소요된 후 페이지가 렌더링 되었다. 만약, 유저들이 로그인을 하기 위해 버튼을 눌렀을 때 이들은 무엇을 느낄까? 어떤 동작을 행하기 위한 버튼을 누르고도 아무 반응이 없다면, 무언가 제대로 동작을 하지 않나하고 혼동이 있을 수 있다. - 임시 대처 그래서 일전에 유저들이 버튼 클릭 후 대기할 수 있도록 로딩스피너 기능을 추가해놨었다. 하지.. 개발 학습일지(TIL) 2023. 8. 28.

• 

  TIL : Next.js localStorage를 활용한 배너, 하루 동안 닫기 구현 Next.js 13.4 환경이다. 문제상황 @headlessui/react 라이브러리를 활용해서 배너 닫기를 구현해놨다. 그래서 클라이언트에 유저가 방문하면 아래 화면처럼 배너가 열린다. 현재는 닫기를 눌러도, 새로고침시 다시 보이게 된다. 닫은 정보가 어딘가에 저장되지 않기 때문이다. const [isShowing, setIsShowing] = useState(true); 그래서 이렇게 구현한 배너를 개선하기로 했다. localStorage를 활용해서, 사용자가 배너 버튼 닫기를 누르면, 하루 동안 배너가 열리지 않기를 바랐다. ==> 즉, 새로고침을 해도 배너가 계속 닫혀있길 바란다. 그래서 useEffect를 활용하여 다음과 같이 코드를 구성했다. "use client"; import { Trans.. 개발 학습일지(TIL) 2023. 6. 8.