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

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

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 때문에 생긴 것이다..

부제가 따로 있다. styled-components 사용하면서, layout컴포넌트의 children 컴포넌트의 폼 데이터를 react-hook-form을 사용해서 받아오기. sign up 페이지 1.useForm 가져오기 import { useForm } from "react-hook-form"; const Login = (props) => { const { register, handleSubmit, watch, formState: { errors }, } = useForm(); const onSubmit = handleSubmit((data) => console.log(data)); ... }2.렌더링 코드 return ( ... 중략 );}; 3.TextInput 컴포넌트 const Input = ..

어제 과제를 하면서 생긴 의문점 하나 때문에 하루종일을 매달렸다. 의문의 시발점은 다음과 같다. "reducer가 여러 개인 경우 dispatch함수의 인자는 action만 존재하고, 어느 reducer에 전달할지는 지정해주지 않았는데 왜 combineReducer 안에 있는 reducer을 딱 찾아서 전달 할 수 있었을까?" 의문점이 생긴 코드 const state = useSelector((state) => state); console.log(state); const { cartItems, items } = state.itemReducer; const dispatch = useDispatch(); console.log(dispatch); const [checkedItems, setCheckedItem..

리액트로 구현하는 회원가입 페이지. 레이아웃과 컴포넌트에 대해 알고나니 내가 여태껏 만든 리액트 프로젝트는 그저 jsx파일을 여러개 생성한 것에 불과했다. 그냥 필요한 건 복사붙여넣기해서 썼는데 유지보수, 재사용을 위해서는 단순히 jsx코드를 복사 붙여넣기 하는 게 아니라 컴포넌트화 시켜서 레이아웃 컴포넌트 안에서 렌더링 해줘야하는 것이었다. 언제 다 고쳐ㅠㅠ.. 아무튼 회원가입 페이지를 간단하게 마크업 해봤다.(기능 구현이 주 목적이기 때문에 디자인은 일단 대충..) 비밀번호 유효성검사 이런 것들은 다 일단 여기서는 패스다. 회원가입 화면 signUp 페이지 import React, { useState } from "react"; import Button from "../component/button"..

들어가기에 앞서 바닐라 자바스크립트로 페이지네이션을 구현했던 것은 쉽진 않았지만 이정도로 헤매지는 않았던 것 같다. 개념이 부족하다는 생각이 크게 와닿았다. useEffect와 useState, props, setState 끌어올리기, 비동기 등등 개인 프로젝트를 만들면서 몇번 써봤기 때문에 알고 있다고 생각했으나 착각이었다. 몰랐던 것들 자식 컴포넌트의 useEffect가 부모 컴포넌트의 useEffect보다 먼저 실행되더라. 변수가 undefined일 때 처리하는 코드가 얼마나 중요한 지 몰랐다. 비동기 함수(fetch)를 담고있는 함수도 비동기로 작동한다. fetch에 async, await를 했다고 끝이 아니다. React.StrictMode를 사용하면 렌더링을 두 번씩 한다. 자식 컴포넌트에서 ..