부끄럽게도, 개발자라는 직업을 2년 가까이 하면서 사이드 이펙트라는 단어도 정확히 몰랐다. 과장님께서 React 의 useEffect를 사용할 경우 사이드 이펙트를 주의해야한다고 말씀하셨다. 이때 이 단어를 인지하게 되었다. 사이드 이펙트란?프로그래밍에서 어떤 함수나 연산의 수행 결과로 시스템의 상태가 예상치 못하게 변경되는 현상이다. 바이브 코딩과 사이드 이펙트특히 요즘 회사에서 바이브 코딩으로 개발하고 있기 때문에 이 사이드 이펙트에 대해 더 유의해야하는 상황이 되었다. Cursor AI 를 사용하고 있는데, 내가 구체적으로 파일의 범위를 지정하지 않을 경우 내 말을 오해하여 다른 파일까지 건드는 케이스가 발생하였다. 이때 제대로 검토하지 않고 넘어가면 사이드 이펙트의 영향이 꽤나 커질 수 있..
디바운싱(Debouncing) 이란?디바운싱은 연속적으로 발생하는 이벤트를 글로벌화해서 마지막 이벤트만 실행되도록 하는 기술이다. 사용자가 빠르게 연속해서 입력할 때, 모든 입력마다 함수를 실행하지 않고 마지막 입력 후 일정시간 대기 후에 함수를 실행하는 방식이다.디바운싱에서 전역 상태관리가 필요한 이유는, 모든 화면 위에서 관리해야 하기 때문이다. 나의 경우에 입력을 완료하고 직후에 실행되는 자동저장 기능을 구현하기 위해 디바운싱을 적용했다. 매 입력마다 저장을 실행하면 API 호출도 너무 많고, 저장되는 동안 새로운 저장이 실행될 수 있기 때문에 디바운싱이 필요하다 판단하였다. 디바운싱이 필요한 사례 1. 검색창 자동완성2. 입력값 유효성 검사3. 자동저장 다음은 검색어 입력의 디바운싱 예제이다..
프로젝트를 진행하다 보면 어느 순간 코드가 복잡해지고, 같은 로직이 여러 곳에 중복되어 있는 것을 발견할 수 있다. 이번에 프로젝트를 진행하며 상태 코드 관리 로직을 리팩토링한 경험을 기록하고자 한다. 처음에는 조건에 따라 파트를 보여주는 해당 요건을 개발하기 위해, 각 부분에 상태 값을 하드코딩하여 조건을 붙였다. 근데, 1차 개발했던 것을 수정하려고 하니 꽤나 쉽지 않았다. 나야 내가 만든 코드지만, 운영할 사람이 이 코드를 파악하는건 너무 어려울 것 같았다. 또한 코드 값이 변경되거나 코드가 추가되면 관리하기 쉽지 않을 것 같았다. // Before: 여러 컴포넌트에 분산된 하드코딩if (code === 'AAA' || code === 'BBB' || code === 'CCC') { // ...}..
회사에서 잘못된 useEffect 사용으로 인해 화면에 무한루프가 걸리는 문제가 발생했다.내가 원인도 파악을 못해서, 과장님이 의심되는 부분 확인해주셨다. 문제는 새로고침 후, 팝업 렌더링에서 useEffect 를 사용하는게 문제였다. useEffect 를 사용하며 새로고침이 발생해, 로그인 인증을 재실행하고, 인증 재실행 후 팝업 렌더링이 재실행되는 무한루프에 빠진 것이다. 어렴풋이 사용하고 있던 useState 와 useEffect 를 정리하고자 한다. useStateuseState 는 컴포넌트의 상태 (데이터) 를 관리하기 위해 사용한다.useState는 컴포넌트가 기억해야 할 값 (상태) 를 만들고 관리할 수 있게 해주는 Hook이다.컴포넌트 내에서 변경될 수 있는 데이터를 관리한다.useSt..
⬇️ 이전 Homebrew 글 보러가기.[도구 및 기타/Mac 개발환경] - [Mac] 맥에 홈브류 (Homebrew) 설치하는 법[도구 및 기타/Mac 개발환경] - [Mac 맥북] Homebrew로 Java 쉽게 설치하기 Homebrew 설치하는 방법은 여기에서 볼 수 있다. Homebrew 를 이용해 관리하는 모든 과정은, Homebrew 가 설치되어 있어야 한다.물론 Homebrew 말고 다른 방법으로도 설치할 수 있지만, 난 홈브류 쓸거다. 왜냐? 관리하기 편하니까 ! 노트북을 변경한 후 기존에 진행하던 React 프로젝트에서 npm run dev 를 실행하였는데, npm 자체 명령어를 찾지 못했다.이 상황이 발생하는 경우는 아래와 같다.Node.js가 설치되지 않은 경우npm 이 PA..
이전에 한번 환경설정을 하며, 새로 설치할 때는 homebrew 로 가능한 한 모든 것을 관리하겠다고 생각한 적이 있다.여기저기서 직접 다운로드하면 관리가 너무 어렵기 때문이다 ! [선행되어야 하는 작업] Homebrew 설치하러 가기 https://skylarcoding.tistory.com/21#google_vignette [Mac] 맥에 홈브류 (Homebrew) 설치하는 법홈브류 (homebrew) 란맥에서 개발 프로그램의 설치와 관리를 용이하게 도와주는 프로그램이다. 즉, 맥 사용자는 설치해두면 유용한 프로그램이다. 홈브류 설치 방법1. 홈브류 홈페이지에 있는 코드skylarcoding.tistory.com ✅ Homebrew 로 Java 설치 우선, Homebrew 에서 Java ..
건강/운동1.한의원 24년 11월부터 계속 다니는 중이다. 점점 치료를 줄여나가고 있지만 운동 없이는 평생 병원 다닐 것 같아 집앞 재활 PT 등록하였다.2. 왼쪽 어깨에 염증이 많이 차 있다. → 재활 PT 에서 수영을 잠시 중단하는 것을 권장하여 쉬는중. 약 1달 지나고 보니 왼쪽 어깨 누르면 아픈게 덜해졌다. 언어1.직장에서 “하려고 했는데” 라는 말을 사용하지 않아야 한다는 것을 깨달았다. 일을 시켰는데 이런 말을 들으니 변명만 한다는 느낌이 너무 강하게 들었다. 본인이 진짜 하려고 했던거든, 아니든 지시가 나오기 전까지 안 한 것이니. 그냥 하자. 독서1.쇼코의 미소 / 내 취향은 아니었다. 재미없는 것도 아니지만, 읽기가 힘들어 포기했다.2. 호감의 시작 / 술술 읽히지는 않았지만 호감의 ..
자바를 설치할때 어떤 버전을 설치해야 할 지 고민이 될 것이다. 이때, 고려해야 하는것이 아래의 두 가지 이다. LTS 버전인지언제 까지 지원하는지 LTS 버전이란?LTS(Long-Term Support) 는 장기 지원 버전이라는 말로, 일반 버전과 달리 장기간에 걸쳐 보안 업데이트와 버그 수정을 보장받을 수 있다. 현재의 Java 버전은 아래와 같다. LTS 버전만 확인해보면 Java 8, 11, 17, 21, 25 버전 대상임을 알 수 있다. 하지만 너무 과거의 버전은 지원 만료 기간이 더 다가올 뿐더러, 최신 버전의 주요 기능을 사용할 수 없다는 단점이 있다. 25 버전은 현재 출시 전이기 때문에 가장 최신 버전인 21 버전을 설치하는 것이 좋을 것 같다. 만약 이전 버전을 사용하는 프로..
스크린샷 단축키Mac 은 아래의 단축키로 스크린샷을 빠르게 찍을 수 있다.command + shift + 3 : 전체화면 스크린샷command + shift + 4 : 영역 선택 스크린샷command + shift + 5 : 스크린샷 툴바 열기 (화면 녹화, 스크린샷 가능) https://support.apple.com/ko-kr/102646 Mac에서 스크린샷 찍기 - Apple 지원 (KR)전체 화면, 윈도우 또는 화면 일부를 캡처할 수 있습니다.support.apple.com 클립보드로 자동 저장하기툴바를 오픈한 후, Options > save to > Screenshots (스크린샷) 으로 변경한다. https://support.apple.com/ko-kr/guide/mac-help/mh2..
인텔 맥북 2015에서 드디어 10년만에 M4 로 변경하였다. 그동안 너무 느려서 답답했는데, 속이 다 후련하지만 가장 큰 고비가 남아있다. 바로 개발 환경설정 ..! 맥북 데이터 마이그레이션으로 데이터를 옮길수도 있겠지만, 무려 10년이나 사용한 노트북이다보니 더미 데이터가 너무 많았다. 하나하나 고르느니, 시간이 너무 많이 걸릴 것 같았다.그래서 마이그레이션을 포기하고 하나하나 다시 설치하기로 마음먹었다. 그 과정을 기록해놓고자 한다. 1. 홈브류 설치하기맥북 개발에 있어서 필수라고 볼 수 있다. 아래 포스팅을 참고하면 된다. https://skylarcoding.tistory.com/22 맥에 홈브류(homebrew) 이용해 톰캣(Tomcat) 설치톰캣 필요한 이유 동적인 페이지를 처리하기 위..
