지선생 코딩딩 지선생 코딩딩

전부터 안쓰는 기능이 많은 CRA를 안쓰고 직접 빌드를 해봐야겠다고 생각만 해보다가 프로젝트에 vite를 사용한다고 해서 냅다 시작해 보았다. 장점 서버 구동시간 공식 문서에서 가장 먼저 어필하던게 서버 구동이 빠르다는 점이다. dependencies 그리고 source code 두 가지 카테고리로 나누어 따로 번들링 한다고 한다. dependencies는 개발하는 와중에 바뀌지 않을 내용이다. Esbuild를 사용한 사전 번들링으로 기존 번들러 (Webpack, Parcel 포함) 보다 10~100배 빠르다고 한다. 실행해 보니까 첫 구동때 체감이 될정도로 빠르다. 보통 5~6초 걸리던 프로젝트 시작시간이 한 2~3초 걸리는 느낌? 코드 갱신 시간 source code 부분 코드 갱신도 빠르다고 하는데..

개발을 하다보면 구글에 검색을 할때가 많다. 웹사이트에 들어가면 브라우저 안에서 무슨일이 벌어지는걸까? 한번 알아보았다. 1. 데이터를 받아오는 과정 사용자가 브라우저로 웹사이트에 접속하면 브라우저는 DNS서버(도메인 이름과 IP 주소를 서로 변환하는 서버) 에게 ip주소를 받아온다. 브라우저는 이 ip주소를 가지고 해당하는 서버를 찾아가서 웹사이트의 데이터를 요청한다 (이때 요청하는 데이터는 html, css, 스크립트 파일등 웹사이트를 구성하는 데이터들이다. HTTP Request 라고도 함) 서버는 데이터를 그냥 주지 않는다. 양쪽 모두 데이터를 주고 받을 준비가 되었는지 확인하는 3way handshaking를 진행하고 성공을 한다면 데이터를 보내게 된다. (HTTP Response) 2. 트리 ..

2.1 프로토콜 계층화 계층화의 장단점 장점 : 서비스 구현을 각 기능별로 분리할 수 있게 한다, 중간시스템을 단순화 시킬 수 있다. 단점 : 계층간의 상호 연관이 있는 경우 정보를 주고 받기가 어려움 2.2 OSI 모델 모든 유형의 컴퓨터 시스템 간의 통신을 허용하는 네트워크 시스템의 설계를 위한 계층구조 계층구조 장치 A로부터 장치 B까지 메시지를 전송할 때 연관되는 계층 OSI 모델의 7 계층 (한 계층당 몇주에 걸쳐 공부해야 하지만 간단하게 몇개만 알아보고 넘어감) 계층이 내려갈때 마다 헤더가 붙는다고 생각하고 가면 편함. 물리층 케이블, 스위치등 물리적인 매체를 포함한다. 데이터 링크층으로부터 데이터를 받아 통신링크를 따라서 전송될 수 있는 형태로 변환, 비트 스트림을 전자기 신호(bit)로 변..

1.1 데이터 통신이란? 전선과 같은 통신매체를 통하여 두 장치간 데이터를 공유하는것 데이터 통신의 구성요소 송신자 : 메세지를 보내는 장치 수신자 : 메세지를 받는 장치 메세지 : 전송되는 정보 전송매체 : 송신자에서 수신자까지 메세지를 전달하는 물리적 경로 ex) 광케이블, 무선파등 프로토콜 : 데이터 통신 수행 규칙들의 집합 데이터 표현 문자, 숫자, 화상, 음성, 동영상등 데이터 흐름 단방향 방식 : 한쪽방향으로 통신이 가능함. 한쪽은 수신만 한쪽은 송신만 ex) 키보드 모니터 등등 반이중 방식 : 각 지국끼리 송,수신이 가능 동신에 송수신은 불가능 ex) 무전기, 토키 (군대에서 쓰던거) 전이중 방식 : 각 지국간 동시에 송,수신 가능 ex) 전화기 1.2 네트워크란? 전송 매체링크로 서로 연결..

YAPP 동아리 소개 개발자, 디자이너, 기획자가 한팀이 되어 기업형 프로세스에 따라 6개월동안 서비스를 제작하는 동아리입니다. 디자이너뿐만 아니라 기획자까지 협업을 해볼 수 있다는 점에서 매우 매력적이였습니다. 지원 계기 지인에게 연락이 왔는데 자신이 YAPP19기 활동을 수료했고 YAPP에서 진행한 프로젝트를 실제로 서비스를 하고있는데 너무 좋은 경험이였다고 지원을 해보라고 추천을 해주었습니다. (지금도 운영되고 있다) https://dotoriham.com/ 서비스 완성까지는 해봤지만 서비스 런칭 단계까지는 가본적이 없었던지라 다음 프로젝트는 꼭 런칭을 하고 싶다는 생각을 가지고 있었습니다. 그런데 YAPP동아리에는 기업 후원사도 있고 디자이너, 개발자, 기획자까지 있는 깔려있는 판 위에서 개발을 ..

저번 프로젝트도 그렇고 지금 프로젝트도 그렇고 자꾸 별점 컴포넌트를 필요로 합니다. 이번 프로젝트는 MUI, 라이브러리 등을 사용하지 않고 만들고 있습니다. 근데 구글링을 해보니 딱히 프로젝트에 적용할 만한 글이 없길래 직접 만들었습니다. 만드는 김에 재활용성 빵빵하게 만들어서 두고두고 쓰자 라는 생각이 들었습니다. 제 생각엔 어디든 쓸 수 있을 거 같으니 퍼가서 써도 좋을 거 같습니다. 결과물부터 보여드리면 원리를 간단하게 설명하면 1. 별을 누르면 값이 변하고 2. 변한 값보다 작으면 별을 색칠하고 3. 변한 값을 부모로 보낸다 입니다. 진짜 간단하네요 RatingSection.tsx // line 26 까지는 css const RatingContainer = styled.div` display: f..

지금까지는 react-query로 Read만 진행해 보았는데 CUD를 해결할 수 있는 useMutation 을 알아보겠습니다. 1. 설명 공식문서를 퍼온것인데요 useQuery 와 동일하게 data, error, isError 등의 데이터들을 제공해 주는걸 알 수 있고 mutate 라는 데이터가 CUD 역할을 하는 함수 입니다 다른점은 queryKey 값을 받지 않고 api,option 만 받고 작동합니다. 코드로 설명하겠습니다 Api 부터 작성합니다 const addSuperHero = async (hero: Hero) => { const response = await axios.post("http://localhost:4000/superheroes", hero); return response.data..

1. InfiniteScroll 이란? 전에 포스트에도 써놓긴 하였으나 1억 개의 데이터를 모두 가져오면 서버 부하가 생기기 때문에 데이터를 조금씩 나눠 받는 방법이며 pagenation과 다르게 스크롤을 내리거나 다음 데이터를 불러오는 버튼을 클릭할 때 데이터를 추가적으로 불러오는 방법입니다. 백엔드는 구현되어있다는 가정하에 진행하겠습니다. 2. useInfinityQuery 설명 지금까지는 useQuery를 사용하였으나 무한 스크롤은 useInfinityQuery라는 다른 함수를 사용합니다. 공식문서를 가져온 것인데요, 인수로 (키값, fetch api, options)는 동일하게 들어가나 options에 getNextPageParam이라는 옵션을 넣어 사용합니다. getNextPageParam의 인..