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

이번 작업은 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 요청은 무의미한 것으..

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값에 변수를 할당하여 사용할 수 있다. 변수 뿐만 아니라 표현식이면 다 가능하다. (함수도 가능)

카카오 k진수에서 소수 개수 구하기 문제에서 나온 알고리즘이다. 0을 기준으로 k진수를 나누어서 각 수가 소수가 아닌지 판별해야 한다. 0을 기준으로 숫자를 나누기 위해 처음엔 반복문으로 풀었는데 코드가 길다. let arithmetic = n.toString(k); let array = []; let string = ''; for(let i =0; i item !== ''&&item !=='1') //[ '211', '2', '11' ]너무 간단해서 이건 기억해둬야겠다

트리 a. 개념 - 고전적인 비선형적 데이터 구조를 의미한다. - 연결리스트처럼 노드로 이루어진 데이터 구조인데, 부모-자식간의 관계가 존재한다.b. 특징 i. 노드는 자식만을 가리킬 수 있으며 형제 노드를 가리킬 수 없다. 또한 둘, 또는 그 이상을 가리킬 수 있음. ii. 루트(트리의 꼭대기에 있는 노드) 또한 하나여야 한다.c. 용어 정리 i. Root - 트리 꼭대기에 있는 노드 ii. Child - Root에서 더 멀리 떨어진 다른 노드에 직접 연결된 노드 iii. parent - child의 반대 개념 iv. Siblings - 같은 부모를 공유하는 노드의 그룹 v. Leaf - children이 없는 노드 vi. Edge - the connection between one node and a..

1. 브라우저 렌더링 프로세스 1) 렌더링 순서 - DOM tree 생성 -> CSSOM 생성 -> render Tree 생성 -> layout(배치, flow) -> painting -> Display - display가 완료된 상태에서 DOM 조작하면 render tree를 수정하고 layout - painting 단계를 다시 거친다.2) Layout a. DOM 노드의 레이아웃이 변경될 때 변경 후 영향을 받는 모든 노드를 다시 계산하고 렌더트리를 재생성한다. b. 강제로 reflow를 일으키는 api - 참고 : https://gist.github.com/paulirish/5d52fb081b3570c81e3a - 대표적으로 innerText, scrollXY, scrollTo, focus(), o..

문제의 발견 1.개발하다보니 myPage에서 수정하기를 눌러도, 아무 반응없이 수정이 되지 않았다. 2.게다가 컴포넌트 내에서 errors를 콘솔에 출력하려해도 계속 빈 객체만 출력이 됐다. 3.그러다보니 errors.username.message을 출력하는 태그도 동작하지 않았다.(그러나 submit을 한 번 하고 나면 출력됨. submit하기 전에는 안 됨. 그렇다고 handleSubmit 함수가 호출되는 것은 아니다.) 원인 1.useForm으로 onSubmit 이벤트를 구현하면, formState에 errors가 있을 시에 onSubmit 이벤트가 동작하지 않는다. 그래서 아무런 에러 메세지도 없이 그냥 안됐던 것이다. (이 errors는 내가 미리 설정해둔 validation 때문에 생긴 것이다..