전체 글 (44) 썸네일형 리스트형 MobX | React와 MobX로 카운터 만들기 새로운 기술에 가장 빠르고 또 가까이 다가갈 수 있는 방법은 결국 직접 활용해서 무언가를 만들어 보는 것이라 생각한다. 앞서 이론 중심으로 소개했던 MobX를 활용한 간단한 예제를 만들어보자. 위와 같은 아주 원초적인 UI의 Counter를 (1)React만 사용해 구현해보고 (2)MobX를 사용하는 형태로 바꾸어볼 예정. (1) React로만 Counter 구현하기 Counter 컴포넌트 구현 //Counter.jsx import React, { useState } from "react"; const Counter = () => { const [num, setNum] = useState(0); //숫자 +1 const increaseNum = () => { setNum(num + 1); }; //숫자.. MobX | 주요 개념 알아보기 글의 목적 회사에서 고객별로 인테리어 서비스 견적을 통합 관리하는 백오피스를 개발하며, 모든 페이지마다 필수적으로 필요한 고객 정보를 어떻게 관리하면 좋을지 고민하게 되었다. 가장 익숙한 방법인, 최상단에서 state로 관리할까 생각하니 떠오른 이미지는. . 페이지와 컴포넌트의 수가 꽤나 많기에 state로 관리하기엔 위 사진처럼 너무나 많은 Props가 생겨날거라 생각했고, 이는 개발 방향이 객체지향과 너무나 동떨어진 구조로 흘러가 결국 낮은 유지보수성을 가져올것이라 판단했다. 때문에 컴포넌트와 상태 업데이트 로직을 분리하는 전역 상태 관리를 선택하게 되었다. 전역 상태 관리를 해본 적이 없어 팀원분들과 상의를 해보았는데, 상대적으로 러닝커브가 낮고 회사 코드 중 이미 일부분에 사용되고 있어 흐름을 참.. 수습딱지를 뗀 3개월차 개발자의 회고록 재직중인 회사의 수습기간은 1개월이였지만, 통상적으로 신입사원의 수습기간은 3개월로 책정된다. 신입사원도 회사에 적응하고, 회사도 신입사원을 파악하는데 가장 적정한 기간이라 여겨지기 때문이 아닐까. 2021년 12월 20일에 프론트엔드 개발자로서 현 회사에 입사했고, 오늘로서 정확히 경력 3개월차가 되었다. 짧다면 짧은 기간이지만 사회의 수습 기간 딱지를 뗀 기념으로 이력서를 업데이트했고, 회고글도 작성해본다. 쓰고싶은 내용은 한가득이지만 (1)좋았던 점 (2)아쉬웠던 점 (3)앞으로 해볼 것으로 분류해 적어보기로. 좋았던 점 학습과 적용의 시간차를 줄이는 A/S 학습법 습득 입사 후 투입된 프로젝트에서는 Typescript와 mobX가 사용되고 있었는데, 특히 Typescript는 strict 설정이 .. 자주 활용하는 React 초기 세팅 (w. TS, Sass, styled-components , eslint, prettier) Create-React-App으로 프로젝트를 만들고, eslint와 prettier를 적용하는 초기세팅을 진행할 때 자주 설정하는 루틴을 기록해본다. 특정 상황에 겪는 에러도 거의 동일하기에 함께 표기해두었다. 1. CRA 설치 Typescript와 함께 설치한다. npx create-react-app 프로젝트명 --template typescript 2. react-router-dom 설치 npm i react-router-dom 3. Sass/styled-components 설치 Sass 설치 npm install sass --save styled-components 설치 //npm npm install styled-components // Yarn yarn add styled-components 4.. upstream으로 fork한 repository 업데이트하기 내가 fork한 repository의 원본에 변경 사항이 있을경우, 자동으로 업데이트되지는 않는다. 그렇다고 해서 repository를 삭제하고 다시 fork를 하는 건 너무 번거로우니, upstream을 이용해 업데이트 하는 방법을 알아보자. 참고사항 원본 repo = 원본 repository fork repo = fork한 repository 1. 내 로컬 PC에 fork repo를 clone한다. $ git clone (fork repo 주소 : https://~ 형태) 2. clone 한 프로젝트 디렉토리로 이동해 remote 상태를 확인한다. $ git remote -v origin (fork repo 주소) (fetch) origin (fork repo 주소) (push) 3. 리모트 저장소에.. var, let, const의 차이 1. 중복 선언 가능 여부 var 는 중복 선언이 가능한 반면, let 과 const 는 중복 선언이 불가하다 var a = 1; var a = 3; console.log(a); // 3 let b = 1; let b = 3; console.log(b); // Error : Identifier 'b' has already been declared. const c = 1; const c = 3; console.log(c); // Error : Identifier 'c' has already been declared. 2. 재할당 가능 여부 var 와 let 은 변수를 선언하는 키워드로, 변수 선언 및 초기화 이후 재할당이 가능하다. const 는 상수를 선언하는 키워드로, 선언/초기화 이후 재할당이 불가하.. 인증(Authentication) & 인가(Authorization) 인증 (Authentication) 유저의 identification을 확인하는 절차 이 때 인증에 필요한 게 뭐가 있을까? 바로 ID, PW, E-mail등이다. 따라서 인증을 한 마디로 쉽게 말하면 로그인 절차 user의 ID / PW 생성 user의 PW 암호화 후 DB에 저장 user가 ID / PW 입력 user가 입력한 PW를 암호화한 값과, DB에 저장되어있던 암호화된 PW가 일치하는지 비교 두 값이 일치하면 로그인 성공! 로그인 성공시 user에게 access token을 발급 (로그인 인증 증명서 같은 느낌) 이후 user는 server에 access token을 첨부해 request를 보내기 때문에, 계속해서 로그인을 하지 않아도 된다. 비밀번호 암호화 user의 비밀번호는 해킹, 보안.. TDD (Test Driven Development) TDD란? TDD(Test Driven Development)는 테스트 주도 개발이라고도 불리며, 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나이다. TDD를 적용해 개발을 진행할 경우, 우선 작은 단위의 테스트 케이스를 작성한 뒤 이를 통과하는 코드를 추가하는 과정을 반복하게 된다. 한 마디로, 테스트 코드를 먼저 작성하고 이를 통과하기 위한 코드를 작성해나가는 개발 방식 이라고 할 수 있다. 일반 개발 방식 vs TDD 개발 방식 일반 개발 방식 일반적인 개발 방식은 요구사항 분석 > 설계 > 개발 > 테스트 > 배포 형태의 주기로 이루어진다. 이러한 방식은 아래와 같이 몇 가지 위험요소를 가지고 있다. 사용자의 요구사항이 명확하지 않거나 변경될 경우 재설계가 필요한데, 이러한 .. 이전 1 2 3 4 5 6 다음
