Je개발 일지

하단의 내용을 문서로 먼저 작성 후, 발표용 PDF 를 만들었다. 예시는 React 와 Vue 를 비교하면서, Vue 사용자들이 React 를 처음 사용할 때 당황할 법한 내용들을 담고 있다. 아래의 문서들이 너무 읽기 힘들다면 시각화된 자료로 간단하게 만든 PDF 파일을 보는 것을 권장. 1. React 의 고민 1-1) Angular.js 의 불편함 React 가 등장하기 전, 모던 프레임워크로 Angular.js 가 등장했다. Angular.js 는 작은 컨테이너들을 결합해 애플리케이션을 구축하는 형태다. 하지만, 컨테이너들이 결합하고 동일한 데이터를 사용하는 컨테이너들이 데이터를 조작하면서 “의도치 않은 데이터 변경” 이 이곳저곳에서 생기기 시작했다. 애플리케이션의 구조는 더욱 커져 갔고, 데이터..

내가 만든 도메인들, 그리고 우리 회사 도메인들은 대부분 수집된 많은 양의 데이터를 활용해 사용자에게 의미 있는 정보를 전달한다. 그 과정에서, 기획에서는 "어떤 정보를 보여줄까?" 에 초점을 맞추게 되고 디자인에서는 "어떻게 정보를 보여줄까?" 를 고민하게 된다. 이번 L 프로젝트를 하면서 위의 두 가지 고민을 정말 많이 했으며, 특히 디자인 쪽은 우리 회사에서 전문가가 없기 때문에 더 큰 책임감을 갖고 고민했어야 했다. 이런 과정에서 데이터 시각화에 대한 공부를 해야겠다 생각했고 깊게 공부해 놓으면 프론트엔드 개발자 전문성의 한 분야로 나아갈 수 있을 것 같아서 관심 있게 공부했다. 공부 방법은 관련 전문 서적을 읽고 기록하는 방식이다. 그리고, 공부한 내용을 바탕으로 공유를 한 것이 위의 발표 자료..

회사 내부 컨텐츠를 분석하는 게 자료 곳곳에 반영돼 있어 수정 후 올릴 예정

회사 DB 를 활용해서 만든 컨텐츠가 곳곳에 있어 슬라이드 삭제/대외비 처리

1. 회고 하나 2. 회고 둘

회사 내부 컨텐츠가 곳곳에 있어 수정 후 올릴 예정

예전에 TDD, Jest 로 테스트 하는 방법과 관련해서 발표를 했을 때의 자료다. 발표 당시의 나는 입사한지 1달 밖에 되지 않았기에 경험에서 우러나오는 테스트의 필요성이 아닌 이론적으로 테스트가 왜 필요한지에 대해서 자료를 조사하고 발표했던 것 같다. 슬프게도, 나는 이 발표 이후에 만든 도메인 하나에만 작게 Test 코드를 만들어 놓았고, 이번에 한 L 프로젝트에서는 테스트 코드를 따로 작성하지 않았다. 그러면서 경험적으로 이제 테스트 코드가 필요하다고 깨닫게 됐는데, 한 번 이 시점에서 옛날에 했던 발표는 어땠는지 돌아보는 것도 재밌을 것 같다. 참고로, 당시에 발표 재밌게 해달라는 그룹장님의 요청이 있어서... 여러 밈들을 섞어가며 재밌게 만들어보고자 노력했다. (Tistory 은 기본적으로 P..

1. "백엔드도 하고 싶습니다" L 프로젝트를 시작하기 전에도 잠깐 지나치듯이 다른 프로젝트(일명 J 과제)를 할 때 API 개발을 했다. 그렇게 내세울만한 프로젝트는 아니라서 따로 회고는 남기지 않았고, 그때 처음 알았던 거나 공부했던 것들을 블로그에 정리하곤 했다. L 프로젝트 초창기는 처음 만드는 것이다 보니 당장 필요한 기능들을 빨리 구현하고 배포하는 것이 관건인지라 프론트엔드 개발에만 집중했다. 그리고 작년 말부터는 조금 널널해져서 백엔드 개발도 하고 싶다 요청하고 현재 두 페이지는 기획도 하고, 디자인도 하고, FE 개발도 하고, 테이블 설계하고, API 개발도 하고 있다. 백엔드는 실무뿐만 아니라 다른 모든 프로젝트에서도 욕심을 갖고 하고 있었다. 코드 스테이츠에서 프로젝트를 두 개 할 때,..

1. UI 트리 브라우저는 UI 를 모델링하기 위해 많은 트리 구조를 사용한다. React 도 트리 구조를 사용해 사용자가 만든 UI 를 관리하고 모델링한다. 2. state 는 트리의 한 위치에 묶인다 컴포넌트에 state 를 부여할 때, state 가 컴포넌트 내부에 존재한다고 생각할 수 있다 하지만, state 는 실제로 React 내부에서 유지된다. React UI 트리에서 해당 컴포넌트가 어디에 위치하는지에 따라 보유하고 있는 각 state 를 올바른 컴포넌트와 연결할 뿐이다 import { useState } from 'react'; export default function App() { const counter = ; return ( {counter} {counter} ); } functi..

1. 예제로 알아보는 state 끌어올리기 import { useState } from 'react'; function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? ( {children} ) : ( setIsActive(true)}> Show )} ); } export default function Accordion() { return ( Almaty, Kazakhstan With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its c..