최근에 TTS만을 위한 웹 에디터를 개발하면서 contentEditable 속성을 가진 태그를 다루며, 많은 이슈들을 겪었다. 특히 유저의 액션에 따라 태그를 동적으로 생성하는 로직을 짜야 했다.그 중에서 현재 위치한 커서 또는 현재 선택된 텍스트의 바로 뒤 공백에 태

NFT 프로젝트에 대한 랜딩페이지를 개발할 때 겪었던 AWS S3의 sub directory에 대한 pathname 이슈를 공유하고자 한다.간단한 landing page였기 때문에, vitejs로 HTML, CSS, JavaScript를 사용하기 위한 환경을 부트스트랩

이번에 진행한 NFT 프로젝트에서 부동소수점으로 인해 smart contract에서 transaction을 처리하지 못했던 이슈를 겪어서 이를 회고해보려 한다.유저가 NFT를 민팅할때 우리쪽에서 정한 민팅 가격과 함께 metamask를 활용하여 transaction을

EST(eastern standard time) 기준으로, 2022년 1월 24일 오후 8시에 LOVO에서 만든 NFT 민팅을 시작한다. 이를 소개하는 랜딩페이지에서 카운트 다운을 하는 UI를 작업하면서 겪었던 시간대에 대한 이슈들을 기록으로 남긴다.해외시간대를 고려해

리뉴얼된 디자인을 바탕으로 랜딩페이지를 업데이트 하려는데, text stroke를 구현하려다가 막혔고 기분좋게도 이를 해결했다. 이를 기록으로 남긴다.먼저, 아래의 그림을 보자.위의 텍스트의 경우는 text stroke가 바깥쪽으로 나있고, 아래의 text stroke

기존에 진행하던 프로젝트에서 잠깐 빠져나와서, TF팀을 꾸려 NFT 프로젝트를 진행하고 있다. 블록체인 그리고 NFT에 대해 평소 많이 들어보긴 했지만 프로그래밍적으로 이를 어떻게 구현하고 더 나아가 실제 product와 어떻게 통합이 되는지 몰랐는데 점점 알아가고 있

이번 시간에는 함수의 매개변수와 쿼리에 대해서 알아보겠습니다. 리팩토링 2판 책을 공부하며, 아래의 2가지 기법에 대해서 알게됐습니다.매개변수 질의함수로 바꾸기질의함수를 매개변수로 바꾸기코드를 보다보면, 함수에 여러 개의 매개변수들이 있는 것을 보셨을 겁니다.그러나 자

반복문 안에서 여러가지 일을 수행하고 있다면, 이를 쪼개는 리팩토링 기법이다.실제 실무에서도 반복문 안에서의 여러가지 일을 수행하고 있는 코드를 본 적이 있는데, 이해하기가 매우 까다로웠다.수행하는 일마다 반복문을 만들어 이를 분리해주면, 한번에 하나씩만 이해하면 된다

좋은 소프트웨어의 핵심은 모듈성이라고 책에 나와있다. 모듈에 대해서는 최소한의 것만을 이해하고 그와 관련된 로직들은 내부에 깊이 숨겨두는 것이다.그 모듈에 정의되어 있는 함수는 어떠한 컨텍스트 안에서 존재할텐데, 만약 다른 모듈을 더 많이 참조하고 있다면 이 함수를 옮

클라이언트로부터 위임객체를 숨기는 리팩토링 기법입니다. 클라이언트로 위임객체가 노출되어 있으면, 인터페이스가 변경됐을때 모든 클라이언트에서 코드를 수정해야 합니다. 만약 서버에서 캡슐화되어 있다면, 한 곳에서 코드를 수정하면 되기 때문에 유지 보수에 큰 효과를 얻을 수

지난 시간에 배웠던, 함수 추출하기/함수 인라인하기와 비슷하게 클래스도 추출과 인라인을 할 수가 있다. 이번 시간에는 클래스 추출하기 리팩토링 기법을 배워보자.클래스를 작성할때는 객체의 역할과 책임을 고려하며 설계를 하는데, 코드가 변경되고 여러 로직이 추가되면서 클래

코드를 작성하다 보면, 임시로 필요한 데이터를 임시 변수에 할당해놓고 이후에 이 변수에 다시 접근해서 사용하는 경우가 많다. 이런 경우를 위한 리팩토링인데 책에서는 이런 변수를 함수 혹은 클래스의 메서드로 추출하라고 한다. 이렇게 하면, 중복되는 코드를 줄일 수 있다.

프로젝트에는 단순한 정보들을 문자열이나 숫자로 표현하고 있을 것이다. 예를 들어, 감정들에 대한 데이터가 있다고 가정하고, 대부분 이를 사용할때는 문자열 리터럴로 함수 파라미터로 사용하고 있을 텐데 이를 객체로 만들어주자.객체로 만들면 데이터에 대한 오퍼레이션을 쉽게

앞서 레코드를 캡슐화하는 것은 가변 객체를 클래스로 변경하는 방법을 활용했다. 컬렉션에 대해서는 이미 클래스의 field에 컬렉션이 있는 상태에서 이를 캡슐화해야 한다. 컬렉션을 getter로 내보내면, 사실 객체의 참조값을 내보냈기 때문에 클라이언트에서는 클래스를 통

레코드의 단점은 필드를 명확하게 구분해서 저장해하는 단점이 있다. 즉, 이름과 나이를 저장할때 명시적으로 "이름", "나이" 라는 key값을 정확하게 써줘야 한다. 이 레코드를 사용하는 클라이언트에서는 이 데이터를 사용하기 위해 key값이 어떻게 선언되어 있는지 직접

하나의 데이터를 놓고 관련된 작동을 하는 함수를 하나의 클래스로 묶어주자. 이러면 함수들이 공유하는 환경을 명확하게 표현할 수 있다.위의 코드를 보면, aReading이라는 데이터를 중심으로 2가지의 동작을 클래스의 메서드로 묶어줄 수 있다.각각을 클래스의 getter

인자의 갯수가 2개, 3개... 되게 많은 수의 인자를 받는 함수를 본적이 있을 것이다. 이런 데이터들을 하나의 데이터 구조로 묶어서 관리하고, 심지어 동작하는 함수를 이 객체에 실어 보낼 수도 있다.beforeafter이 챕터에서의 핵심은 함수로 전달되는 관련된 인자

함수의 경우는 기존의 함수에서 새로운 함수를 호출하는 방식으로 리팩토링의 과정을 간소화할 수 있지만, 데이터의 경우는 다르다. 이 데이터가 사용되는 모든 곳에서 한 번에 변경을 해줘야 하기 때문에, 책에서는 데이터를 변경하는 것을 함수로 캡슐화하는 방식으로 리팩토링을 하고 있다. 말은 장황한데 실제 코드로 보면 모두 알 수 있는 기법일 것이다. 아래 코드를...

내가 생각할때 함수 추출하기라고 불리는 리팩토링 기법은 세부적인 구현에 관한 코드를 함수로 빼서 의미를 부여하는 과정이라고 생각한다. 즉, 다른 동료 개발자들은 세부적인 구현 코드를 알 필요없이 함수의 이름만으로 이 코드가 어떤 동작을 하는 코드인지를 알 수 있는 것이

kruskal 알고리즘은 최소의 비용으로 간선을 연결해 정점들을 모두 연결시키는 알고리즘입니다. 최소 신장 비용 트리를 구현하는 것이죠. 사용 예로는 네트워크, 전화선을 연결할때 사용합니다.kruskal 알고리즘은 아래의 조건들을 만족하여 구현합니다.간선들을 최소비용으