Sign in
it dev react layout

React로 레이아웃 (헤더, 메뉴바, 푸터) 컴포넌트 만들기

대부분의 페이지에는 Header, 메뉴바, Footer 등이 들어갑니다. 하지만 모든 페이지에 일일이 헤더, 메뉴바, 푸터를 작성하기에는 번거롭습니다. 컴포넌트로 만들더라도 매번 세 개의 컴포넌트를 넣는 것은 깔끔하지 않죠. 그래서 보통 필요한 컴포넌트를 묶어서 Layout으로 만들어 사용합니다! 오늘은 한 번 React로 Layout 컴포넌트를 만들어보겠습니다. 1. Layout 컴포넌트 생성하기 우선, 원하는 디렉토리에 Layout 컴포넌트를 생성합니다. 저는 components 폴더 안에 Layout이라는 폴더와 파일을 생성했습니다. (개인적으로 타입스크립트를 선호해서 tsx파일로 만들었는데, jsx를 사용해도 무방합니다) // components/Layout/Layout.tsx const Layo..
wono | discuss |
it blog geo

Geohash

어떻게 하면, 위치정보를 빠르게 찾을 수 있을까 ? 지구의 지역을 해시하면 어떨까 ? 해시 이거 한번에 찾을 수 있잖아. 하지만 위치의 경우, 주변위치도 찾을 수 있어야 하는데. 우리가 알고 있는 해시로는 이런 일을 할 수 없잖아 ? 그거야 해시 함수를 잘 만들면 되지 어떻게 ?01101 11111 11000 00100 00010라는 2진수가 있다고 가정해보자. 왼쪽에 비트로 지도에서의 시작점과 해상도를 결정 할 수 있다. 이제 홀수열의 비트 0111110000000는 longitude가 되고, 짝수열의 비트 101111001001는 latitude가 된다. 위도와 경도 데이터를 2진 데이터로 만든 각 비트를 번갈아가면서 썩고, 이 값을 Base32 인코딩하면, 그 값이 해당 위치의 해시가 된다. 위 값은 대략 위도 42.6, 경도 -5.6 이 된다.
wono | discuss |
it dev nextjs port

Nextjs 실행 PORT 설정(변경)하기

Next.js의 개발 서버는 기본적으로 3000 포트에서 실행되도록 설정되어 있습니다. 개발 환경에 따라 다른 포트에서 개발 서버를 실행해야 경우가 종종 생기는데 이를 변경할 수 있는 방법을 알아봅시다. 1. 직접 변경하기 // package.json { ... "scripts": { "dev": "next dev -p 3005", "build": "next build", "start": "next start" } ... } -p 옵션을 통해 뒤에 입력된 포트로 개발 서버가 실행됩니다. 2. 환경변수 사용하기 // package.json { ... "scripts": { "dev": "next dev -p ${PORT-3000}", "build": "next build", "start": "next st..
wono | discuss |
it blog chat kakao

라이브채팅 플랫폼 구현기 1탄 : 개발 언어 및 기반기술 조사

2022년 초, 멜론뮤직어워드(MMA) 2022 행사를 준비하는 과정에서 기존 MMA 생중계 시 사용되는 댓글 시스템이 사용자 참여에 불편함이 있었고, 이를 해소하기 위해 '실시간 채팅 플랫폼'의 필요성이 대두되었습니다. 그래서 '실시간 채팅 플랫폼' 도입을 위한 3가지 방안을 검토했는데요. 자체 구축 채팅 플랫폼 카카오톡 소스 활용 외부 채팅 플랫폼 어떤 방안을 선택할지 논의가 이어졌고, 복잡하고 다양한 내부 서비스(시스템)의 요구사항을 수렴하는 것이 가장 중요했기에 '자체 구축 채팅 플랫폼'으로 최종적으로 결정하게 되었습니다. 그 당시 플랫폼개발실 산하 플랫폼개발2팀(현 파트너플랫폼개발팀)에서 개발을 맡게 되었고, 결정된 '실시간 채팅 플랫폼'의 사전 요구사항은 다음과 같았습니다. ✔️ 동시 접속자 ..
wono | discuss |