큰 꿈은 파편이 크다!!⚡️

책 "클린 코드"에서는 의미 있는 이름을 지어야 하는 이유와 이름을 의미있게 짓는 방법에 대해 한 챕터에 걸쳐 설명하고 있다. 입사하거나 팀 단위 프로젝트를 할 때에도 네이밍 컨벤션을 정해서 따라야 하는 만큼, 이름을 잘 짓고 바르게 이용하는 것은 소프트웨어 개발과 협업에 있어 중요한 요소이며, CSS를 작성할 때에도 예외가 아니다. 올바른 코드 스타일을 적용하면 유지보수하기 쉬운 코드가 되며, 이는 개발 과정의 효율성을 높여준다. CSS 네이밍 방법론 중에서 가장 널리 알려진 BEM에 대해 정리하고, 이제부터 배운 내용을 적용해가며 내 기존 코드들의 CSS 네이밍을 리팩토링해보려 한다.🫡 BEM (Block, Element, Modifier) 👈 SMACSS (Scalable and Modular Ar..

RTSP(Real Time Streaming Protocol)란? IP 카메라(주로 CCTV와 같이 secure한 특징이 있는)에 많이 사용되는 동영상 프로토콜 목표 IP 카메라와 웹브라우저를 직접 연결해서 웹에서 영상을 나타내기 회사 업무 중 하나로 웹 브라우저에서 RTSP 프로토콜을 사용하는 비디오를 재생해야 했다. IP 카메라가 이미 네트워크에 연결되어 있으니 어떻게든 되지 않을까? 🥹 라는 가벼운 마음으로 시작했으나 웹 브라우저에서 RTSP 비디오를 직접 재생하는 것은 불가능하다는 사실을 깨달을 수 있었다. 문제 As a rule, browsers do not support RTSP, so the video stream is converted for a browser using an interme..

⚠️ 이 글의 모든 예시는 '웹에서 로그인된 상태를 관리'하는 것에 초점을 맞추고 있다. 실제로 쿠키와 세션은 각자의 기능을 살려 로그인 외에도 다양한 상황에 응용될 수 있다. 간단한 탄생 비화 ...태초에 Http가 있었다. Http는 HTML과 같은 리소스를 교환할 수 있도록 설계된 프로토콜(규약)이며, 다양한 이점들 덕분에 지금까지도 주소창에 http://... 로 남아 활발하게 사용되고 있다. 쿠키와 세션은 그중에서도, http의 Stateless한 특성 때문에 만들어졌다. Stateless란, "상태"가 없음을 의미한다. 상태가 있고 없음이란 무엇일까? 아래 대화를 읽어보자! 🟢 Stateful 대화 A: 난 김xx 이야. B: 넌 김xx이구나. A: 난 10살이야. B: 오호 넌 10살인 김..

Building your own Hooks lets you extract component logic into reusable functions. useState, useEffect, useMemo 등의 훅Hook은 리액트 16.8버전부터 추가되어 클래스를 작성하지 않고도 상태State관리를 편하게 할 수 있는 혁신적인 기능이었다. 그리고 재미있게도 나만의 커스텀 훅을 만드는 기능도 제공된다. 리액트 팀에서 훅을 만드는 원리대로 내 것을 만들 수 있다. 훅 또한 컴포넌트 등과 마찬가지로 함수이기 때문에 자바스크립트에서 함수를 분리할 때와 같이 분리하고, 컴포넌트에서 사용하고 싶은 값을 반환한다. 많이 사용되는 커스텀 예제들을 통해 어떤 식으로 사용할 수 있는지 알아보고, 익숙해져 보자! 🧐 고려할 것 ·..

Intro 🍠🍞🥕 애니메이션이 서비스를 더 재미있게 만들어주고, 더 사용하고 싶어지게 만들어준다고 생각되는 요즘, 스터디를 통해 framer-motion을 학습해보게 되었다. Framer는 interactive 디자인을 도와주는 툴인데, 그중에서 Motion은 리액트를 위한 production-ready(실제 제품 단계의) motion library를 표방하며, 오픈 소스로 공개되어 있다. 특징으로 내세우는 것 중 하나는 effortless layout transitions and gestures, 즉 transition과 gesture를 고려할 때 노력이 필요없다..!는 점이다. 사실 나는 여기까지 정리하고서도 이해가 어려웠기에 공식문서의 예제를 사용해 사용 전/후 비교용 switch 컴포넌트를 만들어..

✏️ 글쓰기에 대해 어릴땐 분명 글 쓰는 것을 좋아했는데.. (일기 16년차..) 단순한 기록을 남기는 것을 좋아했던것 같기도 하고, 그냥 손으로 뭔가 하는 감각이 좋았던 것 같기도 하다. 어쨌든 사회에 나오게 되면서 백지를 보면 헉소리부터 나게 되고, 그나마 글쓰기를 좋아했기에 있었던 (근거없는) 자신감조차 없어졌다. 그러던 차에 스터디원을 통해 글또 7기를 시작하게 되었다! 🤯 글쓰기가 힘들다.. 그런데 써야 한다. 글쓰기가 힘들어진 건 실용적인 글, 다른 사람에게 보여줘야 하는 글, 다른 사람에게 잘보여야 하는 글을 써야 했을 때였다. 이력서 쓰기: 어떻게 나를 잘 어필하지? Read Me: 이 서비스를 어떻게 잘 설명하지? 블로그 기술 글: 레퍼런스를 복붙하는거 말고는 없나? 회고 글: 쓰다보니 ..

React를 사용한다면 아주 익숙할 React Router가 2020년 12월에 v6을 릴리스했다. 메이저 버전넘버가 바뀐 만큼 breaking-changes가 있었고, 그동안 무지성으로 이 패키지를 사용했고 공식문서에 소홀했던 것을 반성하며 v5에서 v6으로 넘어가면서 알게 된 몇가지 내용을 정리해보려 한다. 🐓 react-router-dom을 뭣모르고 사용했더니 일어난 일 react-router-dom vs react-router-native $ npm install react-router-dom # or, for a React Native app $ npm install react-router-native 웹 개발을 위해 react를 사용한다면 react-router-dom을 설치한다. 위 코드에서..

소프트웨어 프로젝트를 배포(Release)할 때 버전 관리를 어떻게 할까? 팀마다 정해진 규칙이 있겠지만, 알려진 버전 변경 규칙 중 하나인 Semantic Versioning (Semver) 에 대해 알아보려 한다. Semantic이란 '의미론적'이라는 뜻인데, 즉 각 버전 넘버에 의미를 부여하고 있음을 나타낸다고 생각한다. 해당 포맷은 Major.Minor.Patch 을 따르며, Node.js, npm 등에서 사용하고 있다. 종류 Major version: 이 버전을 올리면 뒤의 Minor, Patch 버전은 0으로 설정한다. (1.4.9 -> 2.0.0) 하위 호환되지 않는 API 변경사항이 포함된다. Minor version: 하위 호환성이 보장되는 업데이트이며, 주로 신규 기능이 추가되었을 때 ..

setState했는데 값이 안바뀐다? export default function App() { const [count, setCount] = useState(0); const onAdd = () => { setCount(count + 1); console.log(count); }; return ( {count} +1 ); } 위 코드를 실행해보면, 화면에 나타나는 count는 정상적으로 1이지만, 콘솔 창에는 0이 출력된다. 단순히 화면을 리렌더링 하는데에는 문제가 없지만 아래와 같이 setState 이후 상태값을 바로 다른 로직에 사용하면 원하지 않는 결과를 맛보게 된다. export default function App() { const [count, setCount] = useState(0); co..