react(33)
-
개발일지 (12월 2주차 회고)
Overview 이번 주에는 주로 Django를 사용한 OOP 구현에 초점을 맞추어서 공부하였다. Django로 서버를 제대로 구현하려는 시도 자체를 사실상 처음 해본 것이었기 때문에, 디자인 패턴이나, 최적화같은 부분들에 신경쓰기보다는 기본적인 REST API를 제대로 구현하는 부분에 중점을 두고 공부했다. Javascript와 Python은 비슷하면서도 다른 부분이 많아서, 어느 정도 Django로 능숙하게 API를 작성하게 된 후에는, 이 두 언어의 차이점을 명확하게 이해하는 과정이 필요하겠다는 생각이 들었다. 이 부분은 따로 정리해서 중요한 부분만 골라 포스팅해볼 생각이 있다. Object Oriented Programming 객체 지향에 관한 지인들의 교재 추천(객체지향의 사실과 오해)을 받아 ..
2020.12.09 -
개발일지 (12월 1주차 회고)
Overview 회사 내 관리자페이지를 완전히 새로 기획하여 만들게 되면서, 이전에 급하게 만드느라 추가하지 못했던 기능들과 검토할 기회조차 없었던 기능들을 추가하려고 노력했다. 그 중에 하나가 바로 프로그램을 TDD를 사용하여 작성하는 방식이었는데, 사용자의 잔고와 사내의 잔고가 오가는 일이라 (자세한 내용은 사내 규정상 밝힐 수가 없다.) 잘못된 로직의 코드가 들어가게 되면, 큰 피해가 생길수도 있기 때문에 테스트 코드의 중요성을 깨닫게 되었고, 같이 개발하는 팀원들에게 부분적으로 TDD를 도입하는 방식을 제안했었다. TDD 도입의 현실적인 한계. TDD는 단순히 프로그램을 작성하고, 그 작성한 코드가 제대로 돌아가는지를 테스트하는 테스트코드를 작성한다는 개념이 아니라는 것을 이해하였다. TDD는 일..
2020.12.09 -
개발일지 (11월 3주차 회고)
Feedback 디자인 시안은 정말 중요하다. 웹 개발자가, 특히 작은 규모의 프로젝트에서 일하는 웹 프론트엔드 개발자가 빠지기 쉬운 함정 중의 하나는(내가 빠져서 그런가), 디자인 시안에 맞추어 개발하지 않고, 자신의 개발 편의에 맞춰 시안을 조금씩 조금씩 자기 입맛에 맞게 수정하려는 태도인 것 같다. 디자인 시안 (이번 같은 경우는 Zeplin)에 명시된 margin, color, font 등을 엄격하게 준수하고, 애매한 점이 있으면 (시안에 나오지 않는 애니메이션 효과 등) 해당 사항에 대해서 적극적으로 디자인 팀과 소통하여 의사결정을 하는 단계가 필요하다. 유들 있는 Validation. 프론트엔드를 개발한다고 하면 거의 대부분의 프로젝트에서 빠지지 않는 것이 Form Control이다. 사용자의..
2020.11.20 -
[React] 클로저와 useState Hooks (2)
Overview 이번 포스팅은 리액트 함수형 컴포넌트에서 단순히 다음 두 함수의 실행결과가 다른 이유를 명확히 찾아내기 위해서 작성하게 되었습니다. App.js import React, { useState } from "react"; export default function App() { const [count, setCount] = useState(0); const increase1 = () => { setCount(count+1); setCount(count+1); setCount(count+1); } const increase2 = () => { setCount(count => count + 1); setCount(count => count + 1); setCount(count => count +..
2020.11.03 -
[React] 클로저와 useState Hooks
Overview React Hooks는 React Functional Component(함수형 컴포넌트)에서 상태관리 및 컴포넌트 생명주기 API(Lifecycle API) 등 클래스 컴포넌트에서만 지원했던 기능들을 사용할 수 있도록 도와줍니다. 함수형 컴포넌트는 클래스형 컴포넌트에 비해 선언하고 사용하기가 편리하며, 코드를 간결하게 사용할 수 있고, 메모리를 비교적 덜 사용하는 등의 여러 장점들이 있기 때문에 최근에 많이 사용되는 추세인데, 여기에 클래스 컴포넌트에서만 사용가능했던 기능들을 Hooks가 지원하면서 함수형 컴포넌트의 효용이 더 높아졌다고 평가되고 있습니다. 이번 포스팅에서는 함수형 컴포넌트에서 상태관리를 할 수 있도록 도와주는 useState 메소드에 대해서 알아보고, 이 메소드가 내부적..
2020.09.20 -
[React] Redux Middleware 직접 구현해보기
Overview 미들웨어 (middleware)란 소프트웨어 공학에서 사용되는 오래된 개념으로, 운영 체제와 운영 체제 사이에서 실행되는 프로그램 사이에 존재하는 소프트웨어를 의미합니다. 말 그대로 운영 체제와 프로그램 '중간에' 끼어서 부가적인 일들을 처리하는 소프트웨어인 셈입니다. 미들웨어는 어떤 특정 소프트웨어를 지칭한다기 보다는 말 그대로 '추상적인 개념'이기 때문에 이 개념을 웹 서비스에서도 받아들여서 웹 서비스를 개발할 때 View와 Logic 을 분리하여 사이드 이펙트(Side effect)를 처리하거나, 중간중간 로그(Log)를 찍거나(Loggin)하는 등의 부가적인 액션들을 이 미들웨어를 통해서 처리합니다. 리액트 서비스를 예로 들자면 대표적으로 사가(Saga)가 있을 것이고, Node...
2020.09.19