[React🌀] Ref 에 대한 고찰 🔍 / 2️⃣ - useRef 와 useState, 그리고 global Variable
들어가며 이전 포스팅을 읽고 오시는 것을 추천드립니다 ! https://programming119.tistory.com/265 [React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef Ref는 언제 사용할까? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props 라고 이해하고 있으면 편합니다. 리액트에서 DOM을 컨트롤할때 주로 이 ref 를 이용하지 programming119.tistory.com useRef와 useState [React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef 를 읽고 오셨다면, 사실 두 훅을 구분하는 것은 너무나도 간단한 일입니다. useState는 리액트의 핵심 훅..
2022. 5. 15.
[React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef
Ref는 언제 사용할까? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props 라고 이해하고 있으면 편합니다. 리액트에서 DOM을 컨트롤할때 주로 이 ref 를 이용하지만, ref 의 개념이 리액트를 처음 이용하는 사람들은 직관적으로 이해하기가 쉽지 않고, 리액트를 어느 정도 활용할줄 아는 사람도 정확히 ref가 뭔지 풀어 설명하기가 쉽지 않습니다. 때문에 이번 포스팅에서는, ref 에 대한 개념을 되새겨보고, 사용예시들을 바탕으로 이런저런 고민해볼 점들에 대해 다뤄보고자 합니다! Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해..
2022. 5. 15.
[Marp] 마크다운으로 ppt 만들기 📝 / 프리젠테이션 만들기 📊
들어가며 개발자들의 글쓰기에 있어서 마크다운은 생명이죠. 노션, 깃허브, 슬랙, 메터모스트, 등등 많은 어플리케이션이 이미 마크다운을 자체적인 텍스트 에디팅 구조로 사용하고 있습니다. 저에게는 더더욱 그렇습니다. 저도 노션, 깃허브는 물론이고 메모용 애플리케이션도 Bear 같은 마크다운용 앱을 사용중입니다. 플레인한 텍스트로 글 깔끔하게 잘쓰는게 쉽지가 않아요 😢 제가 글재주가 있는 것도 아니고, 정해진 대로 계층구조 갖춰서 깔끔하게 쓰는게 편하고 죻죠. 지금 이 티스토리 블로그도 마크다운 기반으로 작성하기 편한 플랫폼으로 손좀 봐볼까 고민까지 하고 있는 중입니다 ㅎㅎ PPT 만들기 저 같이 마크다운 빠들에게 딱 좋은 애플리케이션이 있어서 소개드리는데요, 바로 Marp입니다. https://marp.ap..
2022. 3. 8.
[React🌀] 차세대 상태관리 라이브러리, Jotai VS Zustand ⭐ (Feat. Recoil)
들어가며 프론트엔드 분야는 변화가 정말 빠르고 쉴새없이 발전하고 있는 것 같습니다. 하던 것만 열심히하면 어느새 뒤쳐지고 있는 자신을 발견할 수 있습니다… 😭 그 중에서도 가장 우리를 까다롭게 만드는 분야가 있죠, 바로 상태관리 (state management) 입니다. 리액트와 Next JS 등 프레임워크들이 여러 문제상황들을 해결해주었다고 하지만 상태관리에 대해서는 여전히 의문입니다. 코드가 길어지고, 무언가 모를 불편함이 항상 존재해왔죠. Redux 나 Mobx, 거기에 더 나아가서는 Redux 사용을 간소화시킨 Redux toolkit 또한 등장하지만 아직도 이 부분은 발전할 길이 많이 남았다고 생각됩니다. 그 중에 최근들어 점점 주목받고있는 2가지 라이브러리를 소개하고자 합니다! 바로 Jotai..
2022. 1. 24.
소프트웨어 설계에 대해 ⭐ / 2️⃣ - 시각화와 모델링 (Feat.UML, PUML, draw.io)
(* 앞 편을 보고오시면 좋습니다.) 소프트웨어 설계에 대해 ⭐ / 1️⃣ - 설계의 중요성과 디자인 패턴 (feat. patterns) https://programming119.tistory.com/256 소프트웨어 설계에 대해 ⭐ / 1️⃣ - 설계의 중요성과 디자인 패턴 (feat. patterns) 소프트웨어에 개발 설계도가 필요한가요? 정말정말 개발자 생활을 하면 할수록 느끼고 또 느끼는 것 중 하나가 개발하는 데에 보다 설계하는 데에 시간을 더 많이 들어야된다는 점입니다. DDD 관 programming119.tistory.com 들어가며 설계의 결과물을 시각화하는 것은 소프트웨어를 설계를 함에 있어서 핵심중에 핵심입니다. 글로 표현된 설계도를 읽고 싶어하는 사람이 얼마나 될까요? 더군다나 줄..
2022. 1. 1.
소프트웨어 설계에 대해 ⭐ / 1️⃣ - 설계의 중요성과 디자인 패턴 (feat. patterns)
소프트웨어에 개발 설계도가 필요한가요? 정말정말 개발자 생활을 하면 할수록 느끼고 또 느끼는 것 중 하나가 개발하는 데에 보다 설계하는 데에 시간을 더 많이 들어야된다는 점입니다. DDD 관련 게시글 들에서도 항상 얘기했던 점이고, 설계의 중요성을 더 말하기에는 이제 입이 아플정도입니다. 😂 (그러니 바로 생략) 우리가 만들 소프트웨어는 복잡하다 (인간의 관점에서)! 그렇다면 왜 설계가 필요한 걸까요? 가장 근본적인 원인 자체는 '소프트웨어는 복잡하다' 라는 점입니다. 숨을 쉬는 방식에 대해 우리는 설계를 하지는 않죠. 너무 당연한거니까요. 하지만 우리 현실세계에서 쉽게 풀리지 않는 것들, 사람의 힘만으로는 해결되지 않는 것들은 매우 많습니다. 그런 것들을 해결하고 자동화시키기 위해 소프트웨어가 만들어진..
2021. 12. 23.
[React🌀] Ref 에 대한 고찰 🔍 / 2️⃣ - useRef 와 useState, 그리고 global Variable
들어가며 이전 포스팅을 읽고 오시는 것을 추천드립니다 ! https://programming119.tistory.com/265 [React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef Ref는 언제 사용할까? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props 라고 이해하고 있으면 편합니다. 리액트에서 DOM을 컨트롤할때 주로 이 ref 를 이용하지 programming119.tistory.com useRef와 useState [React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef 를 읽고 오셨다면, 사실 두 훅을 구분하는 것은 너무나도 간단한 일입니다. useState는 리액트의 핵심 훅..
[React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef
Ref는 언제 사용할까? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props 라고 이해하고 있으면 편합니다. 리액트에서 DOM을 컨트롤할때 주로 이 ref 를 이용하지만, ref 의 개념이 리액트를 처음 이용하는 사람들은 직관적으로 이해하기가 쉽지 않고, 리액트를 어느 정도 활용할줄 아는 사람도 정확히 ref가 뭔지 풀어 설명하기가 쉽지 않습니다. 때문에 이번 포스팅에서는, ref 에 대한 개념을 되새겨보고, 사용예시들을 바탕으로 이런저런 고민해볼 점들에 대해 다뤄보고자 합니다! Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해..
[Marp] 마크다운으로 ppt 만들기 📝 / 프리젠테이션 만들기 📊
들어가며 개발자들의 글쓰기에 있어서 마크다운은 생명이죠. 노션, 깃허브, 슬랙, 메터모스트, 등등 많은 어플리케이션이 이미 마크다운을 자체적인 텍스트 에디팅 구조로 사용하고 있습니다. 저에게는 더더욱 그렇습니다. 저도 노션, 깃허브는 물론이고 메모용 애플리케이션도 Bear 같은 마크다운용 앱을 사용중입니다. 플레인한 텍스트로 글 깔끔하게 잘쓰는게 쉽지가 않아요 😢 제가 글재주가 있는 것도 아니고, 정해진 대로 계층구조 갖춰서 깔끔하게 쓰는게 편하고 죻죠. 지금 이 티스토리 블로그도 마크다운 기반으로 작성하기 편한 플랫폼으로 손좀 봐볼까 고민까지 하고 있는 중입니다 ㅎㅎ PPT 만들기 저 같이 마크다운 빠들에게 딱 좋은 애플리케이션이 있어서 소개드리는데요, 바로 Marp입니다. https://marp.ap..
[React🌀] 차세대 상태관리 라이브러리, Jotai VS Zustand ⭐ (Feat. Recoil)
들어가며 프론트엔드 분야는 변화가 정말 빠르고 쉴새없이 발전하고 있는 것 같습니다. 하던 것만 열심히하면 어느새 뒤쳐지고 있는 자신을 발견할 수 있습니다… 😭 그 중에서도 가장 우리를 까다롭게 만드는 분야가 있죠, 바로 상태관리 (state management) 입니다. 리액트와 Next JS 등 프레임워크들이 여러 문제상황들을 해결해주었다고 하지만 상태관리에 대해서는 여전히 의문입니다. 코드가 길어지고, 무언가 모를 불편함이 항상 존재해왔죠. Redux 나 Mobx, 거기에 더 나아가서는 Redux 사용을 간소화시킨 Redux toolkit 또한 등장하지만 아직도 이 부분은 발전할 길이 많이 남았다고 생각됩니다. 그 중에 최근들어 점점 주목받고있는 2가지 라이브러리를 소개하고자 합니다! 바로 Jotai..
소프트웨어 설계에 대해 ⭐ / 2️⃣ - 시각화와 모델링 (Feat.UML, PUML, draw.io)
(* 앞 편을 보고오시면 좋습니다.) 소프트웨어 설계에 대해 ⭐ / 1️⃣ - 설계의 중요성과 디자인 패턴 (feat. patterns) https://programming119.tistory.com/256 소프트웨어 설계에 대해 ⭐ / 1️⃣ - 설계의 중요성과 디자인 패턴 (feat. patterns) 소프트웨어에 개발 설계도가 필요한가요? 정말정말 개발자 생활을 하면 할수록 느끼고 또 느끼는 것 중 하나가 개발하는 데에 보다 설계하는 데에 시간을 더 많이 들어야된다는 점입니다. DDD 관 programming119.tistory.com 들어가며 설계의 결과물을 시각화하는 것은 소프트웨어를 설계를 함에 있어서 핵심중에 핵심입니다. 글로 표현된 설계도를 읽고 싶어하는 사람이 얼마나 될까요? 더군다나 줄..
소프트웨어 설계에 대해 ⭐ / 1️⃣ - 설계의 중요성과 디자인 패턴 (feat. patterns)
소프트웨어에 개발 설계도가 필요한가요? 정말정말 개발자 생활을 하면 할수록 느끼고 또 느끼는 것 중 하나가 개발하는 데에 보다 설계하는 데에 시간을 더 많이 들어야된다는 점입니다. DDD 관련 게시글 들에서도 항상 얘기했던 점이고, 설계의 중요성을 더 말하기에는 이제 입이 아플정도입니다. 😂 (그러니 바로 생략) 우리가 만들 소프트웨어는 복잡하다 (인간의 관점에서)! 그렇다면 왜 설계가 필요한 걸까요? 가장 근본적인 원인 자체는 '소프트웨어는 복잡하다' 라는 점입니다. 숨을 쉬는 방식에 대해 우리는 설계를 하지는 않죠. 너무 당연한거니까요. 하지만 우리 현실세계에서 쉽게 풀리지 않는 것들, 사람의 힘만으로는 해결되지 않는 것들은 매우 많습니다. 그런 것들을 해결하고 자동화시키기 위해 소프트웨어가 만들어진..