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

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

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

1. State a. 컴포넌트 내부에서 변할 수 있는 값. cf) props는 외부로부터 전달받은 값 b. 예를들어 토글 버튼 컴포넌트는 isOn이라는 Boolean값을 가지는 state가 있고, 카운트(Count) 컴포넌트는 현재 숫자 값 의미하는 count라는 state를 가진다. 2. Props a. property를 의미한다. b. props는 부모 컴포넌트(상위 컴포넌트)에서 전달 받는다. c. 읽기 전용 객체다. 만약 읽기 전용 객체가 아니라면, 하위 컴포넌트에서 props를 수정할 수 있고, 상위 컴포넌트에 영향을 미칠 수 있다. side effect가 발생할 수 있고, 단방향 또는 하향식 데이터 흐름 원칙에 위배된다. 3. Props 사용 방법 a. 전달하고 자하는 값을 { } 안에 넣고,..

1. React Javascript a. 개념(리액트 자바스크립트란 무엇인가?) - 사용자 인터페이스를 만들기 위한 javascript 라이브러리 b. 특징 - 선언형 1) how보다는 what에 집중하는 방식. - 컴포넌트 기반 - 범용성 2. JSX a. Javascript XML을 의미한다. b. 브라우저가 jsx를 이해할 수 있는 것은 아니기 때문에, Babel이 필요하다. c. Babel : JSX를 브라우저가 이해할 수 있는 javascript로 컴파일 함3. 주요문법 a. 태그들을 감싸주는 최상위 태그가 하나 있어야 한다. b. css class 속성을 주려면, className으로 표기한다. class는 자바스크립트의 class 선언으로 인식한다. c. jsx에서 javascript를 사용..