전체 글579

• ICE - WebRTC Peer 연결 프로토콜 ICE는 무엇인가 Interactive Connectivity Establishment (ICE) 는 브라우저가 peer를 통한 연결이 가능하도록 해주는 프레임 워크이다. WebRTC에서는 유저들을 브라우저 간 연결 할 네트워크 인터페이스와 포트를 찾고, 바인딩하는 과정을 ICE로 해결한다. 주의 사항 Peer에 접근 할 때 방화벽을 통과 해야 한다. 단말에 유일한 주소(Public IP)를 할당해야 한다. 라우터가 연결을 차단 할 경우 릴레이(우회)를 해야한다. ICE의 릴레이(우회) 앞서 말했다시피, 라우터 단에서 직접 연결을 차단 할 경우 데이터를 주고 받을 주소를 알 수 없다. 이 때 릴레이 서버를 이용한다. STUN(Session Traversal Utilities for NAT) 클라이언트가 .. DEV/Backend 2023. 2. 24.

• SDP는 무엇인가 Intro. SDP SDP란 무엇일까? 왜 [[Kurento RTP 제어]] 이야기 할 때 등장하냐? 주고 받는 데이터는 무엇인가 Contents SDP는 해상도나 형식, 코덱, 암호화 등의 멀티미디어 컨텐츠의 연결을 설명하기 위한 메타데이터이다. 기술적으로는 SDP는 프로토콜은 아니다. 하지만, 디바이스 간의 미디어를 공유하기 위한 연결 정보 포맷을 제공한다. WebRTC에서 SDP는 미디어 스트림, 네트워크 주소 및 코덱 정보를 포함한, 두 Peer 간의 통신 세션 매개 변수를 정하는데 사용 된다. WebRTC 피어 간 공유하는 세션 정보를 담은 SDP 오퍼를 생성하고, 다른 피어에게 전달한다. 수신 피어는 SDP 오퍼를 분석하고, 수신 할 수 있는 미디어 유형과 연결 할 수 있는 네트워크 주소가 포.. Computer Science/네트워크 2023. 2. 24.

• 책임과 희생 - 쾌락을 희생하라 책임감이 있다면 무엇을 포기해야 할까. 미성숙하고 쾌락 주의적 단기적 결정들을 포기해야 한다 2살 애기는 순간의 목표에 집중한다. 그건 삶의 복잡성에 대한 성숙한 대응이 아니다 나는 시간을 초월한 자아의 공동체이다. 즉 현재 자신이 취하는 모든 행동을 통제해야 한다 오늘 밤 하고 싶은 행동이 있지만 내일이 있다. 5년 후의 내년의 다음 주의 내가 책임 져야 한다 올바르게 행동하려면 충독적인 만족을 희생해야 한다. 그 순간의 쉬운 탈출법을 희생해야 한다 시간을 초월한 자신들의 최대 이득에 목표에 집중하는 것이다 각 개인이 필요하고 원하는 것의 과정, 호혜와 진실과 사랑으로 책임지는 것 이게 핵심이다 인류의 위대한 발견임. 희생의 의미다. 자신의 어리석음을 희생하는 거다 당신이 상상할 수 없는 최고의 선택을.. ETC/Thinking 2023. 2. 23.

• Postman 자동화하는 방법 with csv Postman 자동화하는 방법 with Csv Intro. 어디다가 써먹으려고 하는가? 난 데이터베이스에 더미 데이터를 넣고 싶은데 여간 귀찮은 일이 아니었다. 수 많은 데이터를 Postman으로 하나씩 쿼리를 날려 데이터를 넣는게, 과연 개발자스러운가…? 싶어 꼭 자동화를 하고 싶었다 사용하기에 따라 자신의 API들을 전부다 테스트하는 용도라던가, 서비스 점검 할 때도 사용할 수 있을 것 같다! 사용 방법 Collection과 Request 생성 일단 collection을 만들어야 한다. 쿼리들을 담을 폴더를 생성한다 생각하면 된다 난 사용자 등록 매크로란 이름의 collection을 만들었다. 만든 collection에 오른쪽 마우스 클릭을 하면, Add request가 보인다. 이 걸로 reques.. DEV 2023. 2. 16.

• React Rout로 Login Redirect 하는 방법 Intro. 무슨 문제가 있었는가 Login을 하지 않고, 바로 회원 등록 페이지인 register로 리다이렉팅 되는 것을 구현하던 중 발생한 문제 해결 방법이다. if (googleAuth == null || googleAuth?.status == "REGISTER") { navigate("/"); } Hook을 써서 유저를 판단하고 페이지 접근을 제어하는 모듈이 따로 존재하기에, 위의 코드처럼 register 페이지에 navigate(“/”)를 붙였더니 에러가 발생 했다. Can’t perform a React state update on a component that hasn’t mounted yet 에러인데, 요약하면, 렌더링하는 동안 state에 접근하면 안된다는 것이다. 내가 작성한 코드 흐름.. DEV/Frontend 2023. 2. 15.

• 

  가독성 향상을 위한 Obsidian Minimall Theme CSS Intro. CSS 왜 건드는가? 정보는 어디에서 얻었는가 난 주로 Youtube에 Obsidian template을 키워드로 검색해서 구현했다. 주로 옵시디언 사용자 분들이 공유해주신 것을 수정해서 사용한다 수정 할 때 모르는 것들은 Reddit이나 Obsidian forum에 가면 커뮤니티가 형성이 잘 되어있어서 왠만하면 금방 해결 할 수 있다. 수정하는 방법이라 함은 옵시디언 내부에서 개발자 도구를 켤 수 있기 때문에, 개발자 도구를 켜서 바꾸고 싶은 컴포넌트를 클릭해서 CSS 속성을 확인하고 바꾼다 CSS 기본적인 사용법만 알면 금방 사용하니까 도전해보자 Dash board 대시 보드는 옵시디언 접속 했을 때 Home 화면이다. 주로 데일리 노트와 Home 화면을 자주 보는 듯하다 Home을 대시.. ETC/Obsidian 2023. 2. 15.

• Error - TypeORM DataSource is not set for this entity TypeORM DataSource is Not Set for This Entity Feat yarn.lock 팀원들의 코드를 머지하고 났더니, 일부 팀원들에게서 DataSource is not set for this entity 에러가 발생했다. 접근 방식 프론트에서 날린 Axios? const handleLoginSuccess = async (code: string) => { const {data} = await axios.post("http://localhost:4000/auth/google/callback", {code}); //FIXME: 유저가 등록되어 있지 않은 경우 미리 데이터 저장하면, user id가 누락 됨 setStoredUser(data); const {status} = data; .. DEV/Backend 2023. 2. 14.

• React Local storage에 값이 저장되지 않아요 문제 상황 회원 가입 폼을 만들던 중 발생한 문제이다. 로컬 스토리지에 값이 저장 되지 않는다 SSO 로그인을 해서 구글에서 유저 정보를 가져오면, 로컬 스토리지에 저장한다 그 후, 회원 정보를 등록 할 때, 저장된 정보를 가져오는 단순한 로직이다 로그인 페이지 setStorage("#user", JSON.stringify(data)); getStorage/setStorage // Function to store a string value in local storage using AES encryption export function setStorage(key: string, value: string) { const storage = new LocalStorage(); // Create a new ins.. DEV/Frontend 2023. 2. 13.

• 카카오 SSO 로그인 추가 with fastify @fastify/oauth2 라이브러리를 사용합니다 일단, oauth2 라이브러리를 yarn으로 설치합니다. fastify-oauth2 라이브러리는 간단하게 oauth 로그인 기능을 구현 할 수 있도록 보조합니다. yarn add @fastify/oauth2 @Type 추가 @fastify/oauth2 라이브러리를 커스텀해서 사용 할 때, 타입 스크립트에서 인식하지 못하는 경우가 있어 타입을 미리 선언 해줍니다. 루트 디렉터리에 @types/index.ts에 정의하였습니다 import {OAuth2Namespace} from "@fastify/oauth2"; declare module "fastify" { interface FastifyInstance { kakaoOAuth2: OAuth2Namespac.. DEV/Backend 2023. 2. 13.

• 

  나는 옵시디언으로 나를 해킹한다 Intro. 옵시디언에 대한 내 생각 옵시디언은 자유도가 높아서, 완전 개인화 된 나에게 맞춰진 생산 툴이 될 수 있다 생각합니다 그러나 높은 생산성을 뿜을 수도 있지만, 주객 전도 될 수 있기에 조심스럽게 사용하게 됩니다. 생산이 아닌 메모를 위한 메모를 적게 되는 경우죠. 필요 없는 플러그인을 이래저래 가져다 쓰며 시간을 의미없이 허비한다던가요. 처음엔 유튜브나 블로그 등을 보며 모두 다 제 걸로 만들려고 했습니다. 어서 배워서 강해지고 싶은 마음이 컸던거죠. 하지만, 얼마 지나지 않아 욕심임을 알았습니다. 제 표현으로 무거운 시스템이라 하는데요. 바로 제 것으로 소화하기에는 다른 분들의 프로세스가 거대하고, 복잡한거죠. 그 분들에게 이미 최적화된 시스템을 저는 수입해오는거니깐요 요즘은 마음을 비우고.. ETC/Obsidian 2023. 2. 13.

• React 서버에서 잘 보낸 쿠키가 저장 되지 않는다 feat fastify Intro. 왜 쿠키가 저장 되지 않는가? 개발자 도구의 애플리케이션에 서버에서 보낸 쿠키가 저장되지 않는 문제가 발생했다 처음에는 쿠키를 서버에서 보내지 않는건가 싶어 개발자 도구의 네트워크를 켜서 쿠키가 같이 오는 것을 확인했다. 서버에서는 쿠키를 잘 보내주고 있었다 나의 경우 fastify 백엔드 서버와 react가 별도로 구동 되고 있었다. 두 애플리케이션 간의 연결은 axios를 사용하였다. 이번 게시물에서는 무엇이 문제였는지 해결하는 과정을 기록한다 SameSite=None 및 Secure 속성 설정 개발자 도구의 네트워크 부분을 보는데 노란색 경고가 뜨고 있었다. cookie의 SameSite 속성을 default 값인 lax로 설정했다는 것이다 SameSite는 웹 애플리케이션에서 CSRF.. DEV/Frontend 2023. 2. 9.

• React state는 뭔가 Intro. State 상태란 무엇인가 리액트에서는 변수를 사용하는 방법이 다양하다. 구글에 검색해보면, state를 설명 할 때에 변수 즉 데이터를 저장하는 공간으로 자주 설명하는 것을 볼 수 있다. React docs에서는 State: A Component’s Memory라 소개하고 있다. 구성 요소들의 저장 공간이란거다 화면을 구성하고 있는 요소들은 유저와 상호작용 할 때에 표시 되는 값이 바뀌는 경우가 있다. 리액트에서는 이러한 변화하는 요소들의 값을 저장한다는 개념에서 state를 사용한다 굳이 State를 써야하는가? 우리에겐 변수가 있는걸 React docs에서 좋은 예시가 있어 들고 왔다 import { sculptureList } from './data.js'; export defaul.. DEV/Frontend 2023. 2. 8.