전체 글303 2025년 4월 회고 (W14 ~ W18) 오늘은 5/1 근로자의 날,.. 나도 근로자가 되고싶다. 회고를 합시다! 퇴사하고 개발자가 되겠다고 다짐했을때 25년 상반기에는 취직하고싶다는 막연한 소망이 있었다.지금은 취업에 조금씩 가까워지고는 있지만, 상반기내에 할수있을까? 하는 걱정이라던가, 두려움은 있다.슬그머니 올해 안에는 할 수 있겠지 하고 슥 밀어본다.. 그치만 여전히 빠른 시일 내에 취업하고싶다! W14✅ 별일 없이 지나감 W15✅ 그렙 (프로그래머스) 코테를 치다공고에는 안내되어있지 않지만 메일 내용을 보니 코테가 서류 전형에 포함코테 3 문제 + SQL 1문제 : 결과는 탈락서류 통과 후 코테는 아니었지만, 코테 풀 수 있는 경험을 해볼 수 있어서 좋은 기회였다프론트 업무 중에도 SQL 을 다룰 일이 있다고해서 좀 배워둬야겠다는 생.. 2025. 5. 1. [프로그래머스] 기사 단원의 무기 https://school.programmers.co.kr/learn/courses/30/lessons/136798 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.krfunction solution(number, limit, power) { // number 의 약수 개수 구하기 const getNumbers = (number)=>{ let count = 0 for (let i = 1; i v*(i+1)) for(let num of knight){ let number = getNumbers(num) if(number .. 2025. 4. 30. 전역 상태 라이브러리 Zustand 와 Jotai Zustand와 Jotai 차이점 알아보기 위해 무려 올해 1월에 작성했던, 이전 게시글 MVC패턴과 Flux패턴 이해하기 MVC 패턴과 Flux 패턴 이해하기Zustand와 Jotai은 같은 개발자에 의해 만들어진 상태관리 라이브러리인데 왜 다른 방식을 채택했을까? 라는 궁금증이 생겨 이에 대해 알아보기 위한 배경 지식을 먼저 정리하고자 한다. 도서관리memoryelim.tistory.com 그래서 이게 왜 Zustand와 Jotai 차이점을 알기 위해 선행되어야하는건데.? 우선 Zustand와 Jotai의 상태 관리 방식에 대해 정리해보면 Zustand 중앙 집중형, 단일 스토어 => Top-downFlux 패턴을 사용중앙 스토어에서 모든 상태를 관리한다상태와 업데이트 로직을 Store에서 한번에 관.. 2025. 4. 28. [프로그래머스] 캐시 https://school.programmers.co.kr/learn/courses/30/lessons/17680# 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명캐시지도개발팀에서 근무하는 제이지는 지도에서 도시 이름을 검색하면 해당 도시와 관련된 맛집 게시물들을 데이터베이스에서 읽어 보여주는 서비스를 개발하고 있다.이 프로그램의 테스팅 업무를 담당하고 있는 어피치는 서비스를 오픈하기 전 각 로직에 대한 성능 측정을 수행하였는데, 제이지가 작성한 부분 중 데이터베이스에서 게시물을 가져오는 부분의 실행시간이 너무 오래 걸린다는 것을 알게 되었다.어피치는 제이지에게 해당 로직을 개선하라고 닦달하기.. 2025. 4. 25. 커스텀 Select, 드롭다운 구현하기 html 태그 중 select, option을 구현하면 아래와 같이 간단한 드롭다운을 구현할 수 있다Choose a pet: --Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish Choose a pet:--Please choose an option--DogCatHamsterParrotSpiderGoldfish 코드 출처는 MDN 이 경우 UI 커스텀이 안되기때문에 input으로 구현하는 경우가 많이 있는 것 같다.이전 workroot 프로젝트와 이번 프로젝트에서도 커스텀 select 를 구현했다.작동 방식은 비슷한데, 구현 방식과 react hook form 에 등록하는 방법이 각기 register, controller로 다르.. 2025. 4. 24. [vanilla-extract] sprinkles 적용하는 방법 디자인 시스템에서 공통 컴포넌트를 개발하면서 불편한 점이 하나 있었다.바로 매번 font-size, font-weight, lint-height 속성을 적어주는 것이었다. 먼저 피그마에서 이를 토큰화하였고, vanilla-extract의 sprinkles를 이용하여 간편하게 코드에 적용하고자 했다. import { createGlobalTheme } from "@vanilla-extract/css";import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";// text 토큰export const FontWeight = createGlobalTheme(":root", { regular: "400", medium: "50.. 2025. 4. 21. 조건부 렌더링 - 비정상적인 버튼 동작 발생 원인 / 휴리스틱 알고리즘 / key prop의 중요성 지난 번에 올렸던 버그와 관련하여, 임시로는 해결했지만? 근본적인 해결을 하지 못한채 지나갔었다.상태에 따라 두 종류(type = "button" / "submit")의 버튼을 조건부 렌더링하는데, UI에는 문제 없지만 기능에 문제가 있었다.폼의 전체 필드가 채워져있는 경우에 type="button"을 눌렀을때 submit이 작동하는 문제였다.isAccountPart ? : --- 상태에 따라 조건부 렌더링으로, 두 단계로 나눠 폼 작성이전isAccountPart ? 다음 : 제출 https://memoryelim.tistory.com/316 submit 버튼이 아닌데 submit 되는 버그아래와 같이 폼의 모든 필드가 채워졌을때 [이전] 버튼 눌러서 이동한 뒤에 [다음] 을 누르면 제출이 이루어진.. 2025. 4. 21. [프로그래머스] 피로도 https://school.programmers.co.kr/learn/courses/30/lessons/87946 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로도"는 해당 던전을 탐험하기 위해 가지고 있어야 하는 최소한의 피로도를 나타내며, "소모 피로도"는 던전을 탐험한 후 소모되는 피로도를 나타냅니다. 예를 들어 "최소 필요.. 2025. 4. 21. button 태그는 새 탭에서 열 수 없다 이전에 작성했던 기억이.. 문득 들어서 찾아봤다 ㅋㅋ 진짜 있네 ^^https://memoryelim.tistory.com/180 HTML - a 태그와 button 태그뒤로가기 버튼을 어떻게 작성할 지 1. a 태그2. button 태그 링크를 이동하기 위한 목적이라면 a 태그를 사용하는 것이 권장되는 듯 하다그 외의 클릭 이벤트를 적용하기 위함이라면 버튼 태그를memoryelim.tistory.com 새로이 알게 된 부분이 있어 추가로 작성해본다. 페이지 이동을 할때 a 태그를 이용할지, button 태그를 이용할지 고민하게 된다.때로는 고민없이 외관만 보고 버튼처럼 생겼네? -> 버튼 태그 이런 식으로 적용하기도 한다.. 리액트에서는 useRouter를 사용해서 페이지 이동을 시킬 수 있기 때문에.. 2025. 4. 18. 이전 1 2 3 4 ··· 34 다음
