방구석 개발자의 놀이터

1. 배경 설명 위와 같이 사이드바가 있다고 가정해보자. 사이드바 전체 영역에 overflow-y:auto 가 걸려있고 그 안에 메뉴 영역에 마우스를 올렸을 때 툴팁이 띄워지는 구조를 만들 때 아래와 같은 스타일 문제(?)를 마주칠 수 있다. 사이드바 전체 영역의 overflow-y:auto로 인해 툴팁이 가려지게된다. 이 때 overflow-y:auto 와 overflow-x:visible을 같이 쓰려고 하지만 W3C 공식 문서에 보면 둘은 같이 적용할 수 없게된다. 한쪽이 auto or scroll일 경우 나머지 한쪽이 visible을 하면 visible -> auto 로 취급된다. 2. 해결 방안 기존의 사이드바 영역을 초록색 div로 한번 더 감싼다. (즉, 사이드에 parent div를 추가) ..

1. 오픈소스에 기여하게 된 계기 1) 관리가 불편한 번역 파일 현재 사내에서 운영 중인 플랫폼은 해외 고객에게도 제공하고 있어 번역이 필수이다. 번역을 제공하는 오픈소스 라이브러리 중 redux-i18n을 적용하여 번역을 제공하고 있었다. 먼저, 번역을 제공하려면 번역을 json 파일로 관리해야 했다. {안녕하세요: 'hello', 택시: 'taxi', 버스: 'bus'} 하지만 프론트엔드를 개발하다보면 문구가 바뀌고, 새로 추가되고, 삭제되는 경우는 굉장히 빈번한 일이다. 이렇게 문구가 바뀔 때 마다 json 파일을 수정해야하는데 항상 수기로 하다보니 휴먼에러가 누적되어 있어 결국엔 어떤 문구가 사용되고 있는지, 사용 안되는지 파악이 어려워졌다. 2) 자동화 빌드 스크립트 작성 Toast UI팀에서 ..

올해는 팀에 변화가 매우 큰 해였다. 8월에 FE팀장 겸 나의 사수가 퇴사를 하였고 12월에 나보다 1년 정도 경력 많은 동료가 퇴사를 하였다. 내가 이 회사에 오게 된 이유 중 하나인 좋은 동료가 사라진 셈이다... 사실 FE팀장은 이 회사의 창업 멤버로 FE와 BE(python Django)를 담당하고 있었다. 나도 첫 시작은 SI회사였기 때문에 Spring위주로 했었으며 나(FE)와 팀장님(FE+BE) 둘이 개발한 프로젝트가 있어서 자연스레 프로젝트 유지보수 BE까지 나에게 인수인계되었다. 그래서 8월부터 굉장히 바쁜 삶을 살았던 것 같다. 이전 SI회사에서도 사수의 부재를 경험한적이 있었다. "사수의 부재는 최고의 성장 기회이다" 라는 말과 함께 나의 첫 사수분은 팀장이 되어 프로젝트를 떠나 팀원..

React Query의 기술적 개념 및 사용 방법등은 다른 블로그에 많기 때문에 여기서는 기술적 개념 보다는 나의 생각을 적으려고한다. 1. React-query 전환 하게 된 계기 사업의 방향성을 전환하여 새로운 프로젝트를 진행하고 있었다. 이 프로젝트의 프론트엔드 구조는 현재 우리가 서비스를 제공하는 플랫폼의 프론트엔드 소스를 본떠 만들어 전역 상태관리는 Redux, Redux-thunk로 이루어져 있었다. 새로운 프로젝트 특성 상 고객의 요청에 따른 커스텀 기능을 가진 페이지를 만드는 일이 많아졌다. (A기업에 들어가는 페이지+기능, B기업에 들어가는 페이지+기능, C기업에 들어가는 페이지+기능이 모두 다르다는 것) 그러던 중 최근에 디자인 패턴, 폴더 구조에 관심이 생겨 찾아보던 와중에 현재 프로..

React에서 DOM에 html을 그리는 원리 및 코드는 다음과 같다. ReactDOM.render( // 테스트 React.createElement("div",null,"테스트"), document.getElementById("root") ); 위의 예제는 div하나만 그리지만 일반적으로 저렇게 간단한 코드를 사용하는 경우는 거의 없다. 예를 들어, 태그 안에 여러 태그가 있다고 가정해보자. ReactDOM.render( /* 테스트1 테스트2 */ React.createElement( "div", null, React.createElement( "div", null, Reat.createElement("h1",null,"테스트1"), Reat.createElement("h1",null,"테스트2") ..

Hoisting(호이스팅) 관련 내용을 보다가 함수 선언 function을 주로 사용하는지 const (arrow function)을 주로 사용하는지 각 선호도에 대해 각자의 생각을 토론하는 글을 보고 재미있어서 정리해보았다. (토론 출처 : https://dev.to/skinnypetethegiraffe/function-or-const-which-do-you-prefer-typescriptjavascript-apa) // function function test() { return "test"; } // arrow function const test = () => "test"; 1. function 선언을 선호하는 이유 hoisting(호이스팅)을 지원 (중첩 함수를 작성할 때 코드 정리 용이) con..

프론트엔드 개발자 특히, React 개발자는 웬만하면 김민준님(Velopert)을 알고 계실것이다. 나 또한 처음에 김민준님 블로그를 보며 React를 시작했고, 추후에 React를 다루는 기술(책)을 구매하여 공부하였다. 사실 인프콘이 개최될 때 김민준님 섹션에서는 React의 미래, 혹은 Svelte 같은 미래 지향적인 기술 관련 강연 섹션이라고 예상했었는데 내 예상과는 다르게 개발자의 셀프 브랜딩 관련하여 강연을 해주셨는데 색다롭고 좋았다. 많은 사람들이 해당 강연을 봤으면 좋겠지만 영상보다 글로 빨리 보고 싶으신 분들을 위해 강연 요약을 해보았는데 문제될 시 삭제하겠습니다. (참고로 해당 강연은 인프런 홈페이지에서 2022 인프콘 다시보기에서 볼 수 있다.) 강연 PPT에 나온 개발 콘텐츠를 요약..

Mac 업데이트를 계속 미루다가 이번에 그냥 업데이트 하고 새로운 마음으로 다시 시작하자! 라는 마음으로 업데이트를 진행했다. MacOS(catalina) => MacOS(Monterey) v12.6로 업데이트를 하고 vscode를 열기위해 프로젝트 폴더에서 code . 을 했는데 에러가 뚜둥... /usr/local/bin/code: line 6: python: command not found /usr/local/bin/code: line 10: ./MacOS/Electron: No such file or directory 해결 방법을 구글링을 해본 결과 microsoft vscode 깃헙에서 아래와 같은 방법이 나왔다. MacOS 12.3 Beta 이후 버전에서는 python 2에 대한 지원을 하지 ..

고객에게 서비스 제공중에 갑자기 에러가 났다!!! 이런적이 없었기 때문에 매우 당황... B2C에서 에러관련 문의가오면 등줄기가 서늘해진다.. 대략적으로 확인했을 때 화면 전환시에 필요한 데이터를 못들고가는 현상같았다. console을 보니 localStorage setItem에서 에러가 나고있었다. 간헐적으로 에러가 나길래 원인을 분석해보니 localStorage 용량 문제였다. LocalStorage의 최대 용량은 5MB인데 첨부파일이 5MB를 넘어버린것이다. 몇가지 대안을 생각했다. 1. IndexedDB로 대체 2. history.push 할 때 props로 넘겨주기 3. redux에 저장했다가 불러오기 로직을 살펴보니 복잡하게 할 필요가 없이 history.push에서 넘겨주면 됐어서 2번을 선..

결론적으로 변수를 불변객체로 관리하면 나중에 두개의 변수를 비교할 때 편리하다. 이 말을 밑에 예시 코드로 확인해보자. const animal1 = { animal: [ {name: "dog", age: 10}, {name: "cat", age: 20} ] } const animal2 = { animal: [ {name: "dog", age: 10}, {name: "cat", age: 18} ] } 위의 animal1 과 animal2를 비교한다고 해보자. 만약 불변성을 유지하지 않은채로 변수를 관리 한다면 1. animal1.animal.length === animal2.animal.length 2. animal1.animal[0] === animal2.animal[0] 3. animal1.animal..