분류 전체보기

신입 프론트엔드 개발자 한달 회고

8월 말부터 시작한 프론트엔드 개발 직군으로 구직활동을 하다가 9월 말에 입사를 했다. 정신없이 지나간 한달을 기록하고 앞으로 발전에 대해 적어 보려고 한다. 개요 새롭게 배우는 Vue 내가 개선할 부분 앞으로 할일과 고민들 1. 새롭게 배우는 Vue 나는 코드스쿼드를 통해 React를 주된 프레임워크로 사용했었다. 하지만 회사에서는 Vue + Typescript의 기술 스택을 가지고 있었기 때문에 새로운 공부가 필요했다. Vue와 React는 View를 가장 포인트로 잡고 컴포넌트를 만들어 조립하듯 쓴다는 점에서 컨셉이 비슷하기는 하다. 그런 관점에서 봤을 때에는 리액트를 처음 시작했을 때보다 빨리 배워서 적용하고 볼 수도 있었다. 하지만 나에게는 1~2주의 시간 안에 실무에 도입할 수 있는 것들을 알..

Vuex로 상태관리하기

Vuex로 상태관리하기 컴포넌트 계층이 늘어나게 되면 props만으로 전달하거나 이벤트 버스만으로 해결되지 않는 상태 관리의 어려움이 생기게 됩니다. 이번 글에서는 이런 어려움을 해결한 Vuex 라이브러리의 패턴과 메소드를 알아 보도록 하겠습니다. 개요 Vuex 아키텍처 Store 영역 Vue Component 영역 1. Vuex 아키텍처 Vuex는 데이터가 단방향 흐름으로 되어 있습니다. 이 흐름은 Flux 아키텍처와 비슷한 양상을 보입니다. Vuex 아키텍처 Flux 아키텍처 Vue 아키텍처의 흐름에 대해 설명하겠습니다. 먼저, Vuex의 Store에서 관리하는 부분은 Actions, Mutations, State입니다. 컴포넌트에서 Action이 일어나면 통신을 통해 값을 Mutation시킵니다. ..

[Vue 기초] Directive와 인스턴스 옵션

[Vue 기초] Directive와 인스턴스 옵션 개요 Directive Vue 인스턴스 옵션 1. Directive란? HTML 태그에 들어가는 속성이다. v- 라는 접두사가 붙는다. 대표적인 디렉티브: v-bind, v-model, v-once, v-for, v-if, v-else, v-else-if, v-text, v-on v-bind 뷰 인스턴스, 데이터, 이벤트를 바인딩할 때 하위 컴포넌트에 데이터를 전달할 때 사용 예시 // 전체 표기 // 생략 표기 v-model 사용자에게 입력을 받을 때 뷰 데이터 속성에 자동으로 연결할 때 여기서 입력을 받는 종류는 폼의 input 태그로 받을 수 있는 text, textarea, radio, checkbox 등과 select 태그 등을 말한다. 사용 예..

[React] Checkbox 상태관리하기

[React] Checkbox 상태관리하기 이번 포스팅에서는 React에서 체크박스 UI 를 만들고 컴포넌트 간 상태관리를 하는 방법을 예제와 함께 설명할 예정입니다. 개요 Checkbox UI 만들기 Checkbox 하나 선택 상태관리 Checkbox 전체선택 상태관리 요약 및 추가 사항 참고: 예제 코드 환경은 React, styled-component를 주로 하며, 스타일 코드는 생략되어 있습니다. 스타일 코드를 포함한 전체 프로젝트 코드는 여기에서 보실 수 있습니다. 1. Checkbox UI 만들기 Checkbox는 html의 input 태그에 타입을 체크박스로 지정해 만들 수 있습니다. 체크박스만 만든다면 아래와 같이 작성 가능합니다. 우리는 리스트와 전체선택에 체크박스를 모두 포함시켜야 합니..

[React] Context API 와 Redux 비교하기

[React] Context API 와 Redux 비교하기 리액트에서 전역 상태를 관리할 때 많이 쓰는 Context API 와 Redux를 사용법과 장단점 위주로 비교해 보겠습니다. 개요 전역 상태 관리는 언제 할까? Context API의 특징 Redux의 특징 요약 및 결론 1. 전역 상태 관리는 언제 할까? 상태 관리는 View 중심으로 이루어진 React Component에서 변하는 값에 대한 상태를 관리한다고 할 수 있습니다. 우선, React의 useState를 이용하면 지역 상태 관리를 할 수 있습니다. 이를 사용하는 컴포넌트 안 혹은 props로 전달할 때만 하위 컴포넌트에서 사용할 수 있습니다. 모든 상태 관리를 useState만을 이용하여 진행할 수도 있습니다. 하지만 여러 컴포넌트에..

[React] 환경설정 제대로 알고 하기 (without CRA) ②

[React] 환경설정 제대로 알고 하기 (without CRA) ② 지난 포스팅에서는 CRA 없이 React 기반 환경설정을 하기 위해 필요한 기본 라이브러리와 Babel을 설정해 보았습니다. 이번 포스팅에서는 webpack 설정을 개발/배포로 나눠서 하는 방법을 설명하려고 합니다. 1편 보기: https://egg-programmer.tistory.com/259 목차 webpack config와 scripts 설정 기본 라이브러리 설치 production 모드 환경설정 공통 환경설정 및 webpack merge 1. webpack config와 scripts 설정 이제 webpack.config.js 파일을 생성해 Webpack 실행 규칙을 작성하면 됩니다. 이 포스팅에서는 package.json의 ..