전체 글225 TDD란? React Testing Library 사용법 TDD 왜 TDD를 해야 할까? 테스트 코드가 없는 프로젝트의 경우 무엇을 개발해야 하는지 명확히 모른채 개발을 하게 되며 추후 코드 변경에 따른 버그를 예측할 수 없다. TDD란? TDD는 문제를 먼저 정의한 후 문제의 해답을 찾아가는 방식이다. 실패(Red), 성공(Green), 리팩토링(Refactoring) 이라 불리는 3단계를 반복한다. 실패: 문제 정의 단계로, 테스트 코드를 실제 코드보다 먼저 작성 성공: 문제 해결 단계로, 테스트를 통과할 수 있는 최소한의 코드를 작성 리팩토링: 불필요하고 비효율 적인 코드를 개선 문제 정의를 위한 Tip (뱅크샐러드 - 테크 스펙) 뱅크샐러드의 특별한 스펙, '테크 스펙' | 뱅크샐러드 테스트 범주 테스트 코드는 내가 만든 기능의 주요 핵심이 무엇인지 파.. 2022. 4. 25. React에서 Styled Component 사용법 Styled-Components 사용법 특징 자바스크립트 파일 안에 CSS를 작성하는 형태 (emotion과 대체 가능) .css파일을 따로 만들지 않아도 된다. props나 자기 자신 특정 가능. 환경 설정 $ yarn add styled-components 예제 코드 import React from 'react'; **import styled, { css } from 'styled-components';** const Box = styled.div` /* props 로 넣어준 값을 직접 전달해줄 수 있습니다. */ background: **${props => props.color || 'blue'};** padding: 1rem; display: flex; `; const Button = styled.. 2022. 4. 22. React 상태관리 Mobx 정리 및 사용법 Mobx 개념 정리 및 사용법 1-1. MobX의 주요 개념 1) Observable State (관찰 받고 있는 상태) 상태의 변경이 잇으면 Mobx에서 관찰하고 있다가 어떤 부분이 바뀌었는지 파악한다. 2) Computed Value (연산된 값) 기존의 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값으로 성능 최적화를 위해 사용된다. 어떤 값을 연산할때, 연산에 기반되는 값이 바뀔때만 새로 연산하고, 바뀌지 않았다면 기존의 값을 사용한다. (vue에서 computed와 비슷한거같음..) 3) Reactions (반응) 값이 바뀜에 따라 해야 할 일을 정한다. 즉, observable state의 내부 값이 바뀌면 따로 설정해둔 할 일을 실행한다. 4) Actions (액션; 행동) 상태에 .. 2022. 4. 22. React 프로젝트 Ionic Capacitor 사용하여 Android, Ios Build하기 Android, Ios App 배포를 위한 Capacitor 사용법 및 빌드 적용 방법에 대해서 정리한 글입니다. 제가 담당하고 있는 프로젝트는 추후 앱으로도 출시하기 위해 처음부터 Ionic 환경으로 시작한 웹뷰 형식의 웹사이트입니다. 이 글에서는 신규 프로젝트를 Ionic으로 생성하는 방법 보다는 기존에 Ionic으로 작업했던 React 프로젝트를 Android, Ios로 Build하는 작업에 집중하겠습니다. Ionic이란? Ionic - 웹앱을 네이티브앱으로 래핑하는 개발 방식을 사용합니다. Ionic UI Frameworks : 모바일 UI + 웹UI 쉽게 도와주는 UI 컴포넌트들을 제공 Ionic Native : Capcaitor 나 Cordova 플러그인을 활용해 쉽게 디바이스 제어 기능 제공.. 2022. 4. 22. React Query와 상태관리 React Query와 상태관리 회사에서 새로운 프로젝트 진행을 하게 되었는데 기존 프로젝트에서 사용하던 Store에 대해 고민하였고 Store에서 API를 호출하는 과정에 Store를 이렇게 사용하는게 맞나 하는 의문점이 생겼습니다. 그 후 React Query에 대해서 알게 되었고 학습하고자 '우아한테크세미나 React Query' youtube와 배민 기술 블로그를 보고 정리하게 되었습니다. Reference에 해당 유튜브 링크를 공유해 드립니다. 상태 관리 FE에서 상태관리란? UI/UX의 중요성과 함께 프로덕트 규모가 커지면서 FE가 관리해야 하는 상태가 많아졌다. 개발자 입장에서 관리해야하는 데이터들을 효율적으로 관리하는 방법으로 사용된다. 모던 웹 프론트 환경에서는 여러가지 상태들이 존재하고.. 2022. 3. 30. 신입 개발자 - 2021년 회고 2021 회고 벌써 2022년 3월이 곧 끝나가지만 더 늦기전에 2021년 회고를 진행하고자 한다. 2021년은 첫 취업을 한 해이자 신입사원으로써 어떻게 성장하고 있고 무엇을 했는지 적어보려고 한다. SSAFY, 취업 2021 상반기 취업 후기 ( SSAFY 1학기 수료, 최종합격) 2021년 상반기는 SSAFY에서 취업 준비를 했다. SSAFY를 통해서 코딩테스트를 위한 알고리즘뿐 아니라 Jira, Git flow 등 SSAFY에서 배운 것들은 초기 회사에 적응하는데 큰 도움이 됐다. 지금도 SSAFY 같은 반 친구들과 연락하고 있는데 다들 네이버, 카카오, 현대, 삼성, LG 등 좋은 회사에 많이 취업해서 각자 개발자로 만족하는 삶을 살고 있다. 회사에서 어떻게 일하고 있는지 서로 공유하면서 긍정적.. 2022. 3. 30. 이전 1 2 3 4 5 ··· 38 다음
