일단 같은 이미지에 있는 이유는 둘 다 protocol(프로토콜)이기 때문이다. protocol은, 어떤 사람들이 어딘가에 있는 방에서 만나고 그리고 어떻게 일들이 진행될지를 결정하는 것 어떻게 모든 것이 돌아가야 할지에 대한 규칙을 만들어 그다음, 프로그래머는 이 규칙을 가지고 규칙을 따르는 코드를 만들어서 실행 규칙이 가장 먼저인걸 기억! (그래서 ws : Node.js를 위한 webSocket implementation이라고 하는 거임) WebSocket 덕분에 실시간으로 chat, notification 같은 real-time을 만들 수 있게 되었다. 그럼 HTTP(protocol)는 무엇일까? http 모든 서버에 작동해서 이미 익숙할 수도 있을 수 있다. 서버가 (response로) 반응 유자..

WebRTC 는 브라우저와 모바일 애플리케이션에 피어 투 피어 연결을 통해 실시간 통신(RTC) 기능을 제공하는 일련의 프로토콜, 메커니즘 및 API입니다. NAT (Network Address Translation) 각 기기에도 자신만의 고유한 이름이 있다. 그것이 바로 IP이고 이 IP는 고정 IP, 유동 IP로 나뉘어서 실제 고유의 값일 수도 있고 아닐 수도 있다. 더 나아가자면 회사망 / 내부망 (LAN)은 Private IP이기 떄문에 다른 네트워크 (구글 홈페이지 접속, 일반적인 웹 사이트 접속) 등 다른 네트워크에서는 통용되지 않는다. 그렇기 때문에, 우리는 통상적인 네트워크에서 데이터를 주고 받기 위해서는 Public IP가 필요하다. NAT는 Private IP를 Public IP로 1대..

첫 클론 코딩 사이트에 대해서 사람들이 많이 하는 인스타, 에어비앤비 말고 다른 사이트를 하고 싶어서 pickle plus라는 웹 사이트를 클론 코딩하기로 했다. 간단하게 pickle plus 소개를 하자면 왓챠, 넷플릭스, 디즈니 등과 같은 ott 플랫폼을 다른 유저들과 함께 사용할 수 있도록 하는 공유 시스템을 가지고 있는 웹사이트다. 배운 점 일주일간의 클론 코딩을 하기에 사실 페이지 수가 굉장히 많았고, css는 정말 장난 아니었다. 페이지 수가 많다 보니 BE 쪽에서 한 페이지마다 계속 데이터를 보내는 것은 비효율적인 움직임이라는 말에 데이터를 어떻게 하면 한 번에 보낼 수 있을지에 대해서 많이 고민을 해보았고, 결론은 우선 로그인하기 전에 사용자가 선택한 데이터를 세션 스토리지에 넣어 보관하였..

외부 api에서 데이터를 받아와서 데이터가 있는지 없는지 확인하고 데이터가 null 이거나 undefined 일 수 있기 때문에 데이터를 계속 확인해 주지 않는다면 TypeError를 만나게 되면서 옵셔널체이닝을 쓰게 되었고, 이에 대한 정확한 개념을 잘 모르는거 같아서 블로그를 작성하게 되었다. Optional Chaning은 ES2020에서 등장한 새로운 연산자 '?.'의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자와 비슷하게 동작하지만, 만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undifined값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 ..

서버 배포가 되었고, 에러를 무진장 해결하기만 하면 되는 시간이었다. 일단 오늘의 에러의 원인과 해결점은 아래와 같고, 모듈 없다는 오류는 yarn install로 다 해결했다. type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 원인 : components의 이름이 잘못되었거나, import path가 잘..

배운 점 이번 주 미니 프로젝트에서 앞전에 쓴 WIL은 일기 형식이라서 뒤를 이어 추가로 썼던 기능에 대해서 이야기해 보고자 한다. 미니 프로젝트에서 geolocation을 활용했었는데, 우선 이걸 활용한 이유는 항해 99를 하면서 다들 이제 몸과 마음이 지쳐가고 있는데 "이 와중에 약국은 또 언제가!"라는 말에 우리 BE리더님이 그럼 주변에 있는 약국을 찾아주면 되겠네?라는 생각으로 주변 위치에 있는 약국을 찾아주는 서비스를 만들기 시작했던 것이었다. 현재 위치의 정보를 불러왔는 데 사용했던 방법에 대해서는 아래와 같이 기재되어 있다. const [myLocation, setMyLocation] = useState({ lat: 37.4979517, lng: 127.0276188, }); //useSta..

이번 주 미니 프로젝트에서 처음으로 BE와 FE의 첫 협을 했다. 두 쪽 다 서로에 대해서 모르는 부분들이 많아서 처음에 의사소통이 잘 되지도 않았고 어떻게 소통을 해야 하는지 솔직히 감이 잡히지도 않았다. 그래도 다행이었던 점은 서로가 서로를 생각하는 좋은 팀원을 처음부터 만나서 의사소통이 원활했다는 점이다. BE분들은 초반에 바쁘시고 뒤에는 여유로워서 쉬셔도 되었을텐데 계속 옆에 함께 하면서 혹시 도와줄 게 있는지 계속 여쭤보셨고, 우리도 안 되는 부분이 있다면 계속 시도를 해보다가 안 됐을 때 BE 쪽에 혹시 이문제가 뜨는데 그쪽에서 해결할 수 있는지 혹은 제가 요청을 잘못 보내드렸는지 여쭤보면서 소통은 이렇게 하는 것이구나를 정말 많이 배운 거 같다. 솔직히 이번 한주간 협업을 하면서 쿼리 스트링..

로 컬 git branch "원하는 이름" 로컬 브랜치 생성(로컬) git checkout -b "브랜치 명" 현재 브랜치 나가면서 브랜치 생성(로컬) git remote update 깃허브 브랜치 최신화) git branch 현재 있는 브랜치들을 전부 보여줌 git branch -d "" 브랜치 삭제 git merge —continue 내가 merge한거 커밋 메세지 자동 작성 로컬 -> 원격 git add . 내가 작성한 내용 커밋 전에 올리는거 git commit -m "원하는 메세지" 커밋 메세지 작성 git push origin "현재 사용하는 브랜치 혹은 메인" 현재 상태 푸쉬 :wq 아래처럼 파란줄에서 헤어나오는거임 원격 -> 로컬 git merge origin/"브랜치 이름 , 혹은 메인 ..

async async 함수는 fuction 앞에 위치합니다. 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스 (resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다. HTML 삽입 미리보기할 수 없는 소스 = async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다. await (기다리다) await 은 async 함수 안에서만 동작합니다. HTML 삽입 미리보기할 수 없는 소스 함수를 호출하고, 함수 본문이 실행되는 도중에 잠시 '중단' 되었다가 프라미스가 처리되면 실행이 재개됩니다. 이때 프라미스 객체의 result 값이 변수 result에 할당됩니다. 따라서 위 예시를 실행하면 1..

항상 배우는 단계에서 처음 할 일은 이것저것 추가, 설치 하는 것이다. CRA로 기본적인 틀을 잡고 시작하고, 리덕스를 추가하고, 리덕스 툴킷을 추가한다. 필요에 따라 스타일드 컴포넌츠, 리액트 라우터 돔, 목업 데이터를 위한 json 서버, axios 등도 추가한다. 별거 없이 사용 좀 하려고 add 하는 건데 일일이 조금씩 다르니 일일이 찾아보기 귀찮아 모아놨다. 설치하기 CRA 설치 yarn create react-app 폴더명 //CRA 로 시작 리덕스 설치 yarn add redux react-redux //리덕스 설치 이거랑 같은 의미 yarn add redux yarn add react-redux 리덕스 툴킷 RTK 설치 yarn add react-redux @reduxjs/toolkit /..