분류 전체보기213 리액트에서 DOM Node를 찾는 방법 들어가며 오늘은 React에서 DOM Node를 선택하는 방법에 대해 짧게 적어보려합니다. 함수 컴포넌트가 주류가 된지 꽤 오랜 시간이 지난 지금이야 당연하게도 useRef를 사용하지만, 과거 클래스 컴포넌트가 주로 사용되었을때는 이러한 훅 대신, react-dom에 포함된 findDOMNode라는 메서드를 사용하여 브라우저의 DOM Node를 선택하였습니다. 이번 포스팅에서는 해당 메서드가 어떻게 사용되었는지, 이 방식이 어떤 문제점을 가지고 있었으며 현재의 모습으로 바뀌면서 어떻게 문제를 해결했는지에 대해 알아봅니다. findDOMNode findDOMNode는 리액트에서 노드를 찾는 가장 원시적인 방법으로, 클래스 컴포넌트의 생명 주기 메서드 내에서 사용합니다. 찾고싶은 DOM Node를 findD.. 2023. 8. 5. 좌충우돌 블로그 Next.js로 마이그레이션하기 저는 지금 이 글이 올라온 티스토리 블로그 외에도, 바닥부터 만드는 블로그 개발기에서 만들었던 블로그를 함께 사용하고 있습니다. 개인적인 이야기들을 많이 적는 용도로 사용해서 크게 신경쓰고 있지는 않았지만, 블로그에게는 치명적인 문제점이 하나 있었습니다. 바로 SEO가 제대로 적용되지 않는다는 점이었는데요. 실제로 블로그 글을 트위터나 카카오톡과 같은 메신저에 공유하게되면 기본적으로 설정된 메타 데이터만 표시될뿐, 포스트의 정확한 정보나 설명이 전혀 보이지 않았습니다. SSR을 적용하면 쉽게 해결할 수 있는 문제이지만 아직까지 사용해본적이 없어서 미루고만 있었던 문제였습니다. 그러던중 이번에 Next.js의 13 버전이 어느정도 안정화가 되었다는 소식을 듣고, 내친김에 블로그에 SSR 방식을 적용해보기로.. 2023. 7. 28. TDD 스터디 #3 - 화폐 예제 (다중 통화 구현 & 중복 제거) 지난 포스트에서 이어집니다. 우리는 지난 시간에 화폐의 곱을 계산할 수 있도록 하는 times() 메서드를 TDD를 통하여 구현해보았습니다. 화폐의 가치를 다루는 기능을 만들어보았으니, 다음으로는 이 화폐들을 비교하는 로직을 구현해보겠습니다. equals() 우리는 지금까지 화폐를 Dollar라고 하는 값 객체를 통해 다루었습니다. 값 객체는 동일한 값의 다른 객체를 조작했을때 기존 객체의 값이 함께 변하는 별칭 문제로부터 자유로움을 보장하지만, 값이 동일하더라도 인스턴스가 다르면 다른것으로 취급하는 프로그램의 특성 때문에 값을 기반으로 비교하는 별개의 메서드가 필요합니다. 그것이 지금부터 만들 equals() 메서드입니다. 우선 TDD 답게 테스트를 먼저 작성해봅니다. example.test.js it.. 2023. 7. 21. U+ 기가와이파이 공유기 IP 오류 해결 얼마 전 아침에 일어나니 스마트폰과 노트북에 연결되어있던 와이파이가 모두 끊겨있었습니다. 분명 전날 새벽까지는 정상적으로 사용했었는데, 몇 시간만에 연결에 문제가 생긴겁니다. 결국 기사님이 방문하시고, 몇 가지 테스트를 더 해본뒤에야 어떻게 해결을 하였는데, 굳이 기사님이 방문하는 과정 없이도 혼자서 증상을 해결할 수 있을만한 방법들을 남겨봅니다. 증상 스마트폰에서 "인터넷을 사용할 수 없음" 표시 공유기 전원 및 램프에 불은 잘 들어오고 있음 회선 및 랜선 자체에는 문제가 없음을 확인 해결법 공유기 재부팅 공유기 자체적으로는 따로 재부팅 버튼이 없어 어댑터를 분리했다가 다시 연결해주는 방식으로 재부팅을 진행해야 합니다. 까만색 어댑터를 분리하고 5초정도 기다린 후, 다시 연결해주고 경과를 지켜봅니다. .. 2023. 7. 11. 순서가 있는 정렬 : 위상 정렬 (Topological sorting) 들어가며 오늘은 특정한 몇몇 요소끼리의 순서가 정해진 상황에서 사용할 수 있는 정렬 방법인 위상 정렬(Topological sorting)에 대하여 알아보겠습니다. 알고리즘 수학에서 위상(topology)이란 연속적인 힘에 의한 변형에도 유지되는 기하학적인 속성을 의미합니다. 이렇게만 말하면 와닿지 않으니 갓 나온 가래떡을 하나 떠올려봅시다. 길쭉한 원기둥 모양을 한 가래떡에 찢어지지 않을 정도로 적당한 힘을 가하면 원래 모양보다 늘어나거나 구부러집니다. 그러나 가래떡의 모양이 변했다고 해서 원래 가지고 있던 속성들이 모두 변하는 것은 아닙니다. 아래 그림을 한 번 보겠습니다. 예를 들어, 이렇게 가래떡을 구성하는 분자들끼리 연결된 상태들은 변하지 않죠. 여전히 서로를 꽉 붙잡고 있습니다. 이렇게 서로간.. 2023. 7. 9. TDD 스터디 #2 - 화폐 예제 (다중 통화 지원하기) 지난 포스트에서는 저자와 역자의 말을 읽고, 테스트를 진행할 수 있는 환경을 구성해 보았습니다. 이제부터는 책을 읽으며 본격적으로 흐름을 따라가 보겠습니다. 책에서 마주하는 첫 번째 상황은 다중 통화를 지원하는 Money 객체를 구성하는 예제입니다. 통화 단위 추가하기 기존의 Money 객체는 화폐의 단위로 달러(USD)를 사용하였습니다. 그러나 사용자의 필요에 의해서 스위스 프랑(CHF)을 추가로 지원해야 했는데요, 이렇게 새로운 단위가 추가되는 상황이라면 어떤 기능들이 더 필요할까요? 먼저 필요한 기능들을 리스트업 하는 것부터 시작합니다. 필요한 기능 다른 통화끼리의 연산이 가능해야한다. 하나의 통화 사이의 연산이 가능해야한다. 이 기능을 테스트 할 수 있는 명제로 나타내면 다음과 같겠네요. 통과해야.. 2023. 7. 2. 이전 1 2 3 4 5 6 7 8 ··· 36 다음
