신입 개발자에서 시니어 개발자가 되기까지

히든 클래스에 대해서 공부하다보니 자바스크립트의 객체를 메모리에 저장할 때 두 가지 형태가 있다는 걸 알았다. 내가 이때까지 이해하고 있었던 객체는 dictionary mode에 가까움. key-value 쌍으로 이루어진 자료구조가 내가 이해한 객체였고, 그래서 객체는 key값에 접근하면 바로 value를 반환하기 때문에 O(1)으로 생각하고 있었다. 근데 히든클래스에 대해 공부하다보니 이건 완전히 오해였다. 히든 클래스 big O결론적으로 히든 클래스 형태로 저장된 객체의 값에 접근할 때는 O(1)Dictionary 형태의 객체에 접근할 때는 O(log n) ~ O(n)이라고 한다.히든 클래스란?객체를 선언 했을 때 객체의 속성과 타입이 고정되어 새로운 속성을 추가할 수 없는 정적 언어와 달리 자바스..

이번 작업은 select 컴포넌트를 모바일에서만 native select로 렌더링 하고, 웹에서는 기존대로 MUI Select 컴포넌트를 보여주도록 하는 작업이었다. 기존에 만들어둔 select도 하나씩 바꿀 예정. Native Select란? nativeSelect는 안드로이드, ios 등 각 운영체제에서 정한 style에 맞게 select 컴포넌트를 렌더링 해주는 컴포넌트다. 그래서 실제로 native select를 사용하면 안드로이드와 ios에서 렌더링 되는 컴포넌트의 스타일이 다르다. 같은 컴포넌트가 모바일에서는 다음과 같이 운영체제에 맞게 다르게 보인다. ios android 컴포넌트 const NativeSelect = ({ mobileEnvironment, options, ...props }..

문제 calendar 기능을 개발하던 중 월 단위로 다음달 또는 이전달로 이동할 때마다 서버에 요청해서 데이터를 받아와야하는 상황이었다. 그런데 유저가 연속으로 빠르게 2~3번을 이동한다고 가정을 하고 테스트를 해보니 가끔 2번째 클릭보다 3번째 클릭의 api response가 더 빨라서 setState는 두 번째 클릭을 기준으로 실행되었다. 정확하게는 세 번째 api 요청에도 setState가 실행되고 두 번째 api 요청에도 setState가 실행됐지만, 마지막에 실행된 setState를 기준으로 state가 저장되니까 두 번째 api 응답에 대한 데이터가 화면에 출력되었다. 게다가 어차피 3개월 뒤 혹은 5개월 뒤 정보를 보기 위해 빠르게 클릭했을 땐 그 사이에 존재하는 api 요청은 무의미한 것으..

아무 생각없이 블로그명을 바꾸고 있지 않았는데 신입 개발자로 이미 일하고 있으니 새로운 이름을 지어야 맞는 것 같다 ㅎ 개발자로 일한 지 4개월이 지났고, 개발이 재밌어서 시작한 그 마음 그대로 실무에서도 똑같은 마음으로 일하고 있는 중이다. 약 2년전 코드를 짜면 화면에 바로바로 반영이 되는게 신기하기도 하고 재밌어서 개발 공부를 시작했다. 이제 겨우 4개월 실무를 맛본 신입이지만 실무에서도 여전히 개발은 재밌다. 생각보다 훨씬 도전적이며 어려운 문제들에 봉착하지만 그걸 고민하고 또 해결해서 느끼는 쾌감이 굉장하다. 혼자 고민하지 않고 동료 개발자들과 함께 의견을 나누거나, 선배 개발자분들께 여쭤보고 답을 얻는 과정 또한 재밌는 과정이다. 즐겁고, 만족스러운 날들이 그렇지 않은 날들보다 훨씬 많은 것 ..

MUI는 정말 편한 툴 같기도 하면서도 디자인 요구사항에 맞게 커스텀을 하려면 오히려 일반적인 태그에 Css를 덧붙이는 것보다 더 어려운 면이 있다. 이번에 겪은 문제가 이거였는데, MUIDatePicker를 사용하면서, value(날짜)의 css를 조정하는데 이 방법을 몰라서 꽤나 애먹었다. 결론 DatePicker 내 input에 Css 스타일링 하기 문제 value가 textAlign: "Left"로 적용되어 있는 상황인데(기본값이니까), 이걸 textAlign: "right"로 바꾸고 싶었다. 하지만 DatePicker나 TextField에 sx를 사용해서 css를 조정해봤자 input이 아니라 input 부모 태그에 class가 지정된다. MUI 컴포넌트는 이렇게 HTML Tag에 Wrapper..

ES6 문법으로 자바스크립트 객체의 key 값으로 변수를 사용할 수 있게 만들어주는 문법이다. const person = { name : "kim", age : 20, address : "seoul" } const computedProperty = { [person.name] : "kim", [person.age] : 20, [person.address] : "seoul } 이런식으로 key값에 변수를 할당하여 사용할 수 있다. 변수 뿐만 아니라 표현식이면 다 가능하다. (함수도 가능)

현재 팀에서 s3 + cludfront + route 53을 사용해서 프론트 배포를 하고 있다. 나도 사이드 프로젝트를 배포하느라 s3를 두 번 정도 써보긴 했지만 개념에 대해서 공부하지는 않았다. 가볍게나마 개념 공부를 하니 다음과 같이 요약할 수 있을 것 같다. 1. 요약 : cloudfront는 CDN, S3는 파일 스토리지, Route 53은 DNS 2. Cloudfront : AWS에서 제공하는 CDN(content delivery network) CDN이란 ? 미국에 서버를 두고 한국에 데이터를 전송하면 시간이 오래걸리니 한국에 서버를 하나 더 두는거. Origin server(미국에 있는 원본 서버)의 데이터를 캐싱해둔 edge server(원본 서버를 복사한(?) 한국에 있는 서버) 참고 ..

에러 다른 분이 올린 PR을 리뷰하려고 브랜치를 만들고 pull을 했는데, 다음과 같은 에러? 경고문?이 뜨면서 pull이 되지 않았다. origin 레파지토리를 직접 지정해도 같았음.. 해당 브랜치의 커밋 분기가 다르다는 의미인 것 같다..그래서 pull을 어떤 방식으로 할지 지정하라는 뜻이고 찾아보니 rebase를 true로할지 false로 할지에 따라 git pull의 방식이 달라진다. 해결 git config pull.rebase true로 해결했다. 이 옵션을 false로 할 때와의 차이점을 명확히 인식한건 아니고.. 그냥 대충 새로운 브랜치에 깃 히스토리를 다시 만드는건가보다 하고 한거다. 잘 모르니까 global로 적용하지 않았다. ff only옵션은 ff가 아니면 pull 자체가 안 된다고..