clyde-yoon 님의 블로그

서론 이 물음은 단순개발만을 위해 공부했던 내가, 사용만을 위해서 넘겨짚었던 자칫 방대하면서도 고통스러운 개념들을 정리해가기 위해 써내려가는 글이다. 서버란 무엇인지, 웹 서버의 역할은 무엇인지, 서버를 돌린다는 의미가 무엇인지 등, 지금의 내가 사용은 하지만 그 이유와 동작에 대해선 넘겨짚었던 것들에 대해서 세세히 다루어 보려한다. 아.. 서버 터졌네 막연한 서버라고했을 때 무엇을 떠올리나 라고 내가 나에게 물어본다면 그 개념에 대해 짚기가 어렵다. 불과 몇년전까지만해도 서버란 내가 이용하고있는 해당 웹이나, 게임을 내게 서비스하고있는 해당 회사라고 생각했다. 그래서 “서버 터졌네” , “서버 이상하네” 라는 말을 알게모르게 사용하면서 굳혀진 개념 같다.물론 최근까지도 서버란 전부 백엔드의 영역. 엔드..

오늘 소개해드릴 것은 브라우저용 마우스제스처 확장 프로그램인 CrxMouse 입니다.우린 아이스아메리카노, 김치, 떡볶이 없이도 살 수 있습니다. 하지만 갑자기 사라진다면 미쳐버릴 수도 있습니다. 지금 소개하는 CrxMouse는 그렇습니다. 적응해버린다면 없이는 살 수 없는 몸이 되어버리죠. 웹 서핑을 하루 한 시간 이상 사용한다면, 제발 꼭 사용해주세요. 필히 권장합니다.다운로드 가이드는 본문 아래에 있습니다. 왜 쓰나요? 크롬창을 쓰면서, 매번 탭이동이나, 화면 창 제어, 탭 닫기 또는 축소를 할때, 단축기를 사용하거나, 마우스로 정해진 위치를 클릭하는 과정을 거칩니다. 이를 하나의 동작으로 제어할 수 있고, 시선의 이동없이 모두 처리할 수 있게 됩니다.  주요기능 마우스 제스처 - 마우스로 특정 패..

캐시란 말을 들어봤을 것이다. 너무나도 많은 종류에서 사용되고, 그게 그거아냐? 라는 의문이 들 수 있다. (cpu캐시, 디스크 캐시, 브라우저 캐시, CDN 캐시 http캐시 등등) 어떻게 보면 맞는말이고 어떻게 보면 또 다른말이다.이 글은 내머리 속 산발되어있는 캐시관련 지식을 교통정리하기 위한 생각으로 작성되었다.본문은 CPU 캐시와 웹 캐시 그리고 Http캐시에 대해 다루려고 한다. 이 셋은 다른 레벨에서 작동하지만, 근본적인 문제 해결 방식과 목적은 매우 유사하여, 같이 알아두면 좋을 것 같아 서론을 CPU캐시로 운을 띄운다.  CPU 캐시 컴퓨터의 3대 핵심 부품이 있다.  중앙처리장치 / 메인메모리 / 보조기억장치각각CPU - (Central Processing Unit) /RAM - (Ra..

이 글은 지금까지 사용했던 라이브러리 중 당연 최고라 생각하는 리엑트훅폼의 사용후기를 공유하고싶은 마음에 쓰게 된 글입니다. 이게 뭡니까? 한 마디로 정리하면 Form 관리를 위한 강력한 도구라고 말할 수 있다. 혹시 아래와 같은 상황을 겪었거나, 상대를 당황시킬 예정이라면 최고의 선택이 될 수 있다.  물론 극단적인 예시이다. (보통 많은 관심사나, 쓰임, 목적에 알맞는 상태들은 하나의 객체로 다룬다.) 많은 상태를 한번에 전부 다룬다는 것은 효과적이지 않다. 왜 효과적이지 않을까? 렌더링 때문이다. 렌더링은 쉽게말하면 지금 보여지고있는 모니터의 화면을 어떻게 구성할지, 설명할지 요청하는 프로세스이며, 함수의 실행이다. function Counter() { // 음~ 무엇을 그릴까요 const [..

이 글은 JS만 쓰던 내가 처음으로 Ts를 강제로 배우면서 느꼈던 고통이, 사용했을 때의 편리함을 미리 알았다면 고통스럽지는 않았을 것 같았다 라는 마음으로 글을 작성한다. 뭐..였더라?런타임 에러, 리팩토링, 협업, 휴먼에러 등등 거창한 말과 이론을 뒤로하고, 왜써야하는지 딱 한마디로 정리하자면‘뭐..였더라?’ 일 것 같다.코드를 작성하다보면 많은 변수와, 많은 함수들 그리고 서버에서 받아오는 많은 데이터들을 다룰 때, 누가 누구였는지 이 함수에 어떤 파라미터를 넘겨야하는지 완벽하게 모두 기억할 수는 없을 것이다. 그때 내 스스로 내 변수에 명찰을 붙여 누군지 파악하는게 타입스크립트의 가장 큰 출발점이라고 나는 생각한다. 나의 경험"아차차 s빼먹었네.."npm run dev 탁탁 → "어?""어 이 a..

리엑트쿼리를 사용할 수 있는 범주들은 정말 다양하게 존재한다.페이지네이션, 무한스크롤, 유저정보관리, 장바구니, 게시판, 좋아요/싫어요버튼 , 주문 시스템, 댓글 시스템 등 무궁무진해서, 어느상황에서도 접목이 가능하다. 기존 프로젝트에선 유저의 정보를 zustand 라이브러리를 사용하여, 상태를 관리했지만, 리엑트쿼리를 통해 구현한다면, 모든 상태를 하나의 라이브러리로 관리할 수 있지 않을까? 란 생각에서 출발한 로그인 기능을 구현해 보았다.  전체 코드import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';import { UserInfo, UserUpdateData } from '@/types/user/userInfo'..

프론트를 공부하면서 자주 듣는 단어였던 '상태관리' 에 관하여 와닿지 않을시점, 프로젝트를하며 너무나도 많은 useState와 서버상태까지 관리하며, 동시에 화면에 렌더링하기위한 수많은 useEffect에 지칠 시점, 리엑트쿼리에 대하여 알게되었다. 그때의 내가 봤으면 좋았을 만한 것들을 작성해 보고 싶었다. 서론 1. 보일러 플레이트서버에서 하나의 data를 가지고온다고 가정해보자.const [data. setData] = useState(null)const fetchData = async () => { const res = await axios.get('/api/data'); setData(res.data); }res에는 호출한 데이터가 담겨있을 것이다. 그러나 이 데이터가 완벽하게 도착할 순..