분류 전체보기 (149) 썸네일형 리스트형 [React/Next.js] createContext createContext는 React에서 지원하는 Context API의 메소드 중 하나이다. React 또는 Next.js에서 전역 상태(Global State) 관리에는 Redux(Redux Saga)나 Recoil 등을 많이 사용한다. 최근에는 Zustand라는 라이브러리도 떠오르고 있는 것으로 알고 있다. 최근에 하는 프로젝트에서는 Recoil를 사용했는데, 난감한 경우가 하나 있었다. 다크 모드 구현을 위해서 어떤 모드인지(라이트인지, 다크인지)에 대한 상태를 담고 있어야 할 필요가 있었다. Recoil을 사용하자니 _app.tsx가 Recoil Root를 선언하기 때문에 사용할 수가 없었다. 그렇다고 local storage를 사용하자니 Next.js에서 사용하기 때문에 undefined로 정.. [이슈리포트] Next.js 프로젝트에서 도메인 별로 다른 정보 뿌려주기 최근에 진행하는 프로젝트에서 하나의 프로젝트에 여러 도메인을 할당하여 도메인 별로 데이터를 뿌려주기 위한 작업을 진행하였다. 해당 작업을 진행하며 겪었던 이슈와 해결 방법에 대해서 내용을 정리하려고 한다. 그림과 같이 프론트엔드 프로젝트의 로직과 쿼리문은 그대로 유지한 채 뿌려지는 데이터나 메타 데이터, 로고 등만 할당된 도메인에 따라서 보이는 작업을 진행했다. 이를 위해 도메인 별로 다르게 표현되어야 하는 부분에서 도메인 정보를 가져오기 위해 현재 주소값에 도메인이 포함되어 있는지를 확인해서 해당 도메인을 리턴해주는 함수를 만들어 사용하였다. export const getDomain = () => { if(typeof window !== "undefined") return "domainA"; if(wi.. [이슈리포트] i18n과 라우팅 변경하기 i18n, internaionalization의 i와 n의 글자수가 18자이기 때문에 i18n인 이 엄청난 공대생 감성의 국제화는 복잡한 이름에 비해서는 다국어를 지원하는 웹 페이지에서 유용하게 사용될 수 있다. 웹 페이지를 사용하는 locale 기반으로 그에 맞는 언어를 설정해줄 수 있기 때문이다. 다른 방법도 있겠지만 i18n을 사용하지 않을 경우에 페이지에서 국제화를 위해서는 다음과 같이 비교적 비효율적으로 코드를 작성해야 한다. const Hello: React.FC = () => { const hiEn = "hi"; const hiKo = "안녕"; return ( {locale === "en" ? {hiEn} : {hiKo} } ) } 브라우저의 locale이 en일 경우에는 영어로 hi, 한.. [회고] 취업 후 2달 간단 회고 짧게 준비한 취업 준비 기간이 끝나고 어느덧 취업을 한 지도 2달을 넘어 3달째를 향해 달려가고 있다. 이름만 들어도 "우와" 소리나는 엄청난 네임 밸류의 회사는 아니지만 블록체인을 다루는 가치 있는 회사의 프론트엔드 개발자로 취업했다. 취업하고 첫 주는 자리 세팅을 하고 회사에 돌아가는 구조를 익히는데 시간을 많이 썼다. 주로 같이 일할 사람들의 이름을 외우는데 많은 시간을 쓴 것 같다. 아쉬운 점이라면 좀 더 적극적으로 다가서지 못한 점. 원체 소극적인 성격이기도 하지만 바뀐 환경에 적응하느라 '어버버'해서 더 말을 많이 못 걸었던 것 같다. 그 때문에 좀 더 빨리 친해지지 못한 점이 아쉽다. 물론, 지금은 많이 친해진 상태이다. 회사에서 개발 부서는 2개(현재는 바뀌었지만)로 나뉘어져 있었다. 내가.. [후기] 우아한테크코스 4기 지원 후기 우아한테크코스 4기에 지원한 후기를 작성해보려고 한다. 우선, 결과부터 말하자면 불합격을 했다. 최근에 봤던 코테 중 우테코의 코테를 가장 잘 봤다고 생각했기 때문에 막연히 붙을거라는 생각을 하고 있었던 것 같아서 이 결과는 생각보다 더 아프게 다가왔다. 지나간 일은 지나간 일이고 회고를 하며 내년 상반기를 준비해보려고 한다. 0. 준비 과정 별 다른 준비를 하지는 않았다. 취업이 아닌 교육 프로그램이고 개발에 대한 열정과 하고자 하는 의지를 위주로 본다는 자료들을 봤기 때문에 코딩테스트 준비는 늘 하는 것처럼 꾸준히 문제를 풀었고, 자기소개서는 해왔던 프로젝트들을 한 번 정리하며 어떻게 녹여낼 수 있을지에 대해서 고민했다. 1. 코딩테스트 코딩테스트는 총 7문제가 출제되었다. 구현을 기반으로 한 문제들.. [Python] csv 파일 쓰기 TL;DR csv 파일 open 및 csv.writer 생성 writerow, writerows를 사용해 내용 작성 close를 통해 기록 종료 csv 파일 데이터를 정리할 때 csv, json, xml, txt 등 여러 다른 형식으로 정리할 수 있다. csv 파일은 여러 필드에 해당하는 데이터를 ,(콤마)로 구분한 데이터 파일 양식으로, 주로 엑셀(또는 넘버스, 한셀) 등에서 열어서 조회한다. 표로 표현할 수 있는 데이터에 대해서는 csv 파일을 사용했을 때 한눈에 확인하기 쉽다. 최근 작업하고 있는 프로젝트에서 파이썬에서 csv 파일을 쓸 일이 있어 이를 정리하려 한다. 1. 파일 생성 및 writer 생성 csv 파일을 쓰기 위해서는 기본 내장 모듈인 csv를 import 해주어야 한다. 그러고 나.. [Python] XML 파싱하기(with Pascal VOC) Pascal VOC Pascal VOC 방식은 Object detection을 위한 데이터 셋인 Pascal VOC dataset의 구조를 의미한다. 이 구조는 하나의 입력 이미지에 대한 정보를 xml파일로 표시한다. [그림 1]과 같이 2개의 손 끝을 탐지해야 하는 입력 이미지가 존재한다고 했을 때, 이에 대한 데이터의 정보는 다음과 같은 xml 파일로 표시된다. case1-5_jpg.rf.654eac65f62fddc076e25a286ae8e46e.jpg case1-5_jpg.rf.654eac65f62fddc076e25a286ae8e46e.jpg 270 187 3 0 Pascal VOC는 xml 파일에 이처럼 파일명과 경로, 이미지의 크기와 같은 정보 뿐만 아니라, object detection에 필요.. [TIL]mean IoU(Intersection over Union) IoU란? IoU :: Intersection over Union Object detection, Semantic segmentation에서 주로 성능 평가를 위해 사용되는 척도 중 하나이다. 실제 객체가 존재하는 박스와 모델이 객체라고 인식한 박스가 얼마나 차이 나는지를 표현한 값이다. [수식 1]과 같이 정의할 수 있으며 이를 그림으로 표현하면 [그림 1]과 같이 표현할 수 있다. 즉, IoU는 ground truth(이하 GT)의 박스 크기와 모델이 평가한 결과(이하 infered)의 박스 크기를 합한 넓이 중 두 박스가 겹치는 부분의 넓이가 차지하는 비율(합집합 중 교집합이 속하는 영역의 넓이)이라고 할 수 있다. [그림 2]를 예시를 들어 살펴보자. 초록색 박스는 GT 박스이고, 빨간색 박스는 .. 이전 1 2 3 4 5 ··· 19 다음
