Je개발 일지

1. 이벤트 핸들러 추가하기 이벤트 핸들러를 추가하려면 먼저 함수를 정의한 다음 JSX 태그에 props 로 전달해야 한다 export default function Button() { return ( I don't do anything ); } 이 버튼을 클릭하면 Alert 을 띄우는 기능을 추가하려면 다음의 세 가지 단계를 거쳐야 한다 Button 컴포넌트 안에 handleClick (이름은 단순히 함수명으로 원하는 대로 지으면 됨) 이라는 함수를 선언 해당 함수 내부의 로직 구현 태그에 onClick porps 로 handleClick 추가 export default function Button() { function handleClick() { alert('You clicked me!'); } r..

화면의 일부 항목은 입력에 따라 업데이트 된다. 이번 챕터에서는 state를 업데이트하고, 시간에 따라 다른 값을 보여주는 컴포넌트를 작성하는 방법을 배울 것 1. 이벤트에 응답하기 이벤트 핸들러는 사용자 상호작용에 반응해서 호출되는 자체 함수다 과 같은 기본 제공 컴포넌트는 onClick 과 같은 기본 제공 브라우저 이벤트만을 지원한다 하지만, 컴포넌트 생성하고 이벤트 핸들러 props 로 원하는 이름을 지정할 수 있 function Toolbar({ onPlayMovie, onUploadImage }) { return ( Play Movie Upload Image ); } export default function App() { return ( alert('Playing!')} onUploadImag..

1. 페이지 루프 기능에 대한 요구사항 이번 프로젝트를 진행하면서 UI/UX 에 대한 고민을 굉장히 많이 했다. 부문장님이 우리 프론트엔드 개발자들에게 기대하셨던 건 "데이터를 어떻게 보여줄 것인가" 였고, 또 회사에는 디자이너가 없어 내가 맡은 페이지는 내가 디자인해야 했기에 UI/UX 에 대한 고민을 많이 할 수밖에 없었다. 그래서 나는 UI/UX 관련 서적 총 4권과 웹 자료 1개를 읽으며 UI/UX 에 대한 지식을 넓혔다. 팀에 UI/UX 공부한 것을 바탕으로 발표하는 시간을 가졌었는데, 그때 부문장님, 팀장님을 비롯해서 가장 호응을 많이 얻은 것이 "페이지 루프" 기능이었다. "페이지 루프" 기능이란 사용자가 A 라는 페이지에서 b 라는 정보가 궁금해졌다면, b 의 정보를 자세하게 다루는 B 페..

React는 컴포넌트를 엄격하게 순수 함수로 작성하도록 강제한다 그렇기에 React 코드를 짤 때 몇 가지 규칙을 준수해야만 한다. 1. 순수성 : 수식으로서의 컴포넌트 컴퓨터 과학에서 순수 함수는 다음의 특징을 지닌다. 자신의 일에만 신경 쓴다 : 호출되기 전에 존재했던 객체나 변수를 변경하지 않는다 동일한 값을 입력 받으면 항상 동일한 결과를 반환해야 한다. : 컴포넌트가 이런 순수성을 유지한다고 하는 건 어떤 데이터를 받든, 그 데이터를 받을 때마다 항상 동일한 화면을 보여줘야 함을 의미한다. 2. 사이드 이펙트 React 렌더링 프로세스는 항상 순수해야 한다. : 컴포넌트는 JSX 만을 반환해야 한다. : 렌더링 존재한 객체나 변수를 변경해서는 안 된다. let guest = 0; function..

Javascript 배열 메서드를 활용해서 데이터 배열을 조작할 수 있다 1. 배열에서 데이터 렌더링하기 Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 이런 목록 항목의 유일한 차이점은 콘텐츠, 즉 데이터다 이런 데이터들을 자바스크립트 배열에 저장하고, map 이나 filter 등을 사용해 컴포넌트 목록을 렌더링할 수 있다. Step 1) 데이터를 배열에 넣기 const people = [ 'Creola Katherin..

컴포넌트는 서로 다른 조건에 따라 다른 것을 보여줘야 하는 경우가 종종 발생한다 1. 조건부로 반환하는 JSX 상품이 포장됐는지를 표시하는 여러 컴포넌트를 렌더링하는 컴포넌트가 있다고 가정해보자. function Item({ name, isPacked }) { return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } 여기서 Item 컴포넌트에 isPacked prop 이 true 인 경우, 패킹된 아이템에 체크 표시를 추가하고자 한다면 if/else 구문으로 렌더링할 수 있을 것 if (isPacked) { return {name} ✔; } return {name}; 위 방법은 isPack..

1. 배경 내가 맡은 페이지의 대다수는 DB 에 데이터를 등록하고, 수정하고, 삭제하는 기능을 지닌다. 때문에 DB 가 바뀌거나, 정책이 바뀌거나 하면 내 페이지는 거의 필수적으로 수정을 해야 한다. 심지어 이 프로젝트는 어떻게 보면 처음 만드는 거고, 고객들의 요구사항을 많이 받지 못해 우리끼리 스스로 정책을 읽고 스스로 요구 사항을 만들어 내며 기획을 했기에 덜 전문적이었다. 그렇게 개발된 페이지들이다 보니 실제 서비스를 운영하면서 기획을 수정해야 하거나 고쳐야할 것들이 많았다. 그중에 몇 가지 정말 강렬한 인상을 남긴 페이지들이 있다. 2. DB 구조가 자주 바뀌는 경험 2-1) 상황 내가 기획하고, 디자인하고, 개발하는데 가장 힘들었던 페이지 중 하나가 바로 발전소를 등록, 수정, 삭제하는 페이지..

1. 당혹스러운 일감들 기획과 디자인을 내가 해야 한다고 처음 들었을 때 굉장히 당황했다. 그도 그럴게, 나는 기획과 디자인을 할 수 있는 전문적 지식이 없었다. 특히 기획의 경우, 내가 담당하는 도메인은 태양광 발전을 주로 타겟을 하고 있다 보니 우리 회사에 오기 전까지 한 번도 접해본 적 없는 분야였다. 인버터니, 환경 센서니, 계전기니, RTU 를 통한 데이터 수집 등등... 지금이라면 알지만, 당시에는 잘 몰랐으니 많이 막막했다. 특히, 나는 저번에 H/F 프로젝트를 진행하며 그 데이터들을 이해하는 것도 벅찬데 이제 새로운 데이터를 다시 공부해야 하다 보니 더 어려웠다. 심지어 이번에는 남이 기획해주는 것을 파악하는 것이 아니라 기획을 하고 디자인을 해야 하는 단계. 그래도 다행히 팀장님께서 많은..

1. L 프로젝트란? 우리 회사에서 기존에 사용하던 도메인의 컨텐츠를 완전히 새롭게 만드는 프로젝트로 2023년 1월 16일부터 시작해서 현재까지 이어지고 있다. DB 구조나 API 도 새롭게 만들었고, 프론트엔드도 repo 를 새롭게 만들어 개발했기 때문에 그냥 새로운 도메인이라 봐도 될 것 같다. 1년이 넘은 지금까지도 개발 중이며 B2B 시장에서 판매하고 있다. 현재 시점 기술 스택으로는 대표적으로 (1) Vue3(Composition API 활용) (2) Pinia, (3) Highchart (4) Ag-grid (5) Tanstack-query 를 활용한다. 도메인 특성상 대한민국 "정책" 에 큰 영향을 받으며, 따라서 이 도메인을 기획하고 개발하는데 "정책" 과 운영 전문 등을 읽으며 팔로우업..

1. 원대한 계획은 이뤄지지 못했다 (1-1) CI / CD 구축 조금 더 많이 할 수 있었는데 하지 못했다. 더 다양한 것들을 공부하고 도입해볼 수 있었는데 그러질 못했다. Jenkins 를 활용한 CI/CD 구축, Slack 과 Jenkins 연동 등 Devops 부분을 좀더 다뤄보고 싶었지만 그러질 못했다. Nginx 까지는 공부해서 어떻게 만져 보기는 했지만... 내가 원했던 부분들은 하지 못했다. 이건 나의 게으름과 나태함에서 비롯된 것일 수 있다. (1-2) 코드 리뷰 이 사이드 프로젝트를 준비할 때 가장 하고 싶었던 것은 코드 리뷰였는데, 어쩌다보니 개발하는 것에만 급급해진 나머지 팀원들끼리 제대로 코드 리뷰하는 시간을 갖지 못했다. 사실, 나는 다른 사람의 코드를 다 보긴 봤다. 개인적으로..