제각각 여러 기능을 추가하다 보니 코드가 너무 제각각이었다. 처음엔 클린코드였을지라도 기능을 하나하나 추가하는 과정에서 금방 난잡해졌다. 따라서 회의를 통해 현재 코드의 구조를 하나하나 뜯어보고 코드 리팩토링을 적용하려고 한다. 1. 파일 분리하기 https://ko.legacy.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 공식 문서를 참고하였다. 공식문서에서 5분 이상 고민하지말고 편한대로 나누라고 써있다. 2. 함수의 기능, 추상화 단계 명확히 하기 토스의 SLASH 21의 프론트엔드 진유림님의 React 클린 코드 강의를 참고하..

https://velog.io/@gmlstjq123/Readme.md-%ED%8C%8C%EC%9D%BC-%EC%9E%91%EC%84%B1%EB%B2%95 Readme.md 파일 작성법 이번 포스팅에서는 여러분들의 Github Repository를 한층 업그레이드 시킬 수 있는 Readme.md 파일에 대해서 다뤄보겠습니다. 1. README 1) 개념 README 파일은 주로 Github 프로필 혹은 Repository에 대한 설명을 velog.io https://easyhomputer.tistory.com/22 [GitHub] 깃허브 프로필 꾸미기, README.md 코드 🌈 https://github.com/jiholee0 ** 레포지토리 fork 해가실 때 블로그 글에 공감!이나 댓글! 남겨주시면 ..

1. 클린코드의 의의 다른 사람의코드를 수정해야 할 때 작성자만 이해할 수 있고 다른 사람은 무슨 기능을 하는 코드인지 파악하기 어렵다. 흐름파악이 어렵고 도메인 맥락 표현 x 작성자만 알 수 있는 코드 개발할 때 병목, 유지보수시간 오래, 기능추가 불가능한 상태, 성능도 떨어짐 클린코드의 의미 === 유지 보수 시간의 단축 시간은 자원이고 돈이다. 고치는데 더 빠른 시간이 걸릴수록 돈을 아끼는 것이다. 모두 처음엔 클린했다. 하지만 기능을 추가하는 상황이라면 순식간에 들쑥날쑥해질 수 있다. 사실 당연하다. 남이 짠 코드에 내 기능을 추가하는 것이니.... 이미 작성된 코드에 새 기능을 추가한다고 해보자........ .... 코드 ... 하지만 나쁜코드가됨 하나의 목적인 코드가 흩뿌려져 있다. 하나의 ..

React에서 변수의 상태나 Form양식의 데이터들을 관리하다 보면 Hook을 사용할 일이 많다. 이 페이지에서는 useState와 useRef의 차이점을 정리하고자 한다. 둘의 차이점을 알아보기 전에 Hook의 개념을 간단하게 알아볼 필요가 있다. 따라서 Hook에 대해 정리하고 useState와 useRef의 차이점에 대해 정리해 보려고 한다. [목차] React Hook이란? useState와 useRef의 비교 차이점 사용 예시 정리 1. Hook이란? Hook은 리액트의 함수 컴포넌트에서 상태(React state) 와 생명주기 기능( lifeCycle features)을 연결하는 함수이다. 기존에는 Class형 컴포넌트에서만 상태를 관리할 수 있었고 함수형 컴포넌트에서는 상태를 관리할 수 없었..

https://dori-coding.tistory.com/entry/React-%EB%B0%98%EB%B3%B5%EB%AC%B8map%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8Component-%EB%B0%98%EB%B3%B5-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0 [React] 반복문(map())을 이용하여 컴포넌트(Component) 반복 출력하기 지난 게시물을 통해 App.js로 가져온 데이터를 이용해 컴포넌트(Component) 안에 출력시켜 보도록 하겠습니다. [React] Export(내보내기) 및 Import(가져오기) 1. Export (내보내기) 더보기 ex..

웹어플리케이션을 개발하다 보면 라우팅을 사용하는 경우가 많이 생긴다. Routing을 지원하는 라이브러리가 많이 있으나 React Router 라이브러리가 가장 많이 사용된다. 이번 페이지에서는 React의 Router에 대해 알아보고 사용법을 정리하고자 한다. [목차] Router 개념 React Router 사용하기 React Router 특징 1. Router 개념 Routing이란? 먼저 Routing의 개념부터 살펴보면 Route는 영어로 "경로를 정하다"라는 뜻을 가진다. 웹에서 Routing이란 "사용자가 요청한 URL에 따라 입력받은 URL에 맞는 페이지를 보여주는 것"이다. React의 Router 위와 비슷하게 React에서도 Router란 " 사용자가 입력한 주소를 감지하고 입력받은 ..

1. 문제점 이미 구현은 끝났지만 페이지의 렌더링 속도가 약 5초정도 나와서 성능개선이 필요해 보였다. 회의 결과 성능 웹페이지의 성능 개선은 두 가지 부분에서 가능할 것 같았다. 첫 번째 문제점 이미지 파일들이 조금 무거워서 렌더링 시간의 대부분을 차지하는 것이었다. 특히 슬라이드의 이미지들이 많은 페이지들이 문제였다. 한 친구가 이미지 렌더링 부분을 맡기로 했다. 두 번째 문제점 은 지원서의 form부분에 textarea와 input 태그들이 useState를 통해 onChange 이벤트가 발생할 때마다 값이 리렌더링되고 있어서 불필요한 렌더링이 일어난다. 이렇게 useState로 상태를 관리하는 것을 제어 컴포넌트라고 한다. 2. 성능 개선 사항들 이미지 렌더링 속도 개선 먼저 jpg, png에서 ..

1. 지원서 데이터 전송하기 1) 문제 이 부분에서 많이 고민하고 논의했다. 가장 많이 했던 질문은 이 질문이었다. "지원 데이터를 어떻게 받아야 할까?" 여기서 서버가 절실히 필요해서 서버 공부도 병행하려고 했지만 3주가 조금 안되는 시간안에 리액트를 처음 입문하면서 서버까지 공부하기엔 시간이 도저히 안났다. 회의결과 다음 세 가지로 의견이 좁혀졌다. 그래도 어떻게든 서버에 DB를 구축해서 JSON파일과 마크다운문서로 데이터를 받고 싶다. 시간이 없으니 구글폼으로 받자. 서버까지는 아니어도 지원서 페이지를 만들었으니 활용할 방안을 찾자. 이미 지원서를 열심히 만들었으니 최대한 활용하고 싶어서 3번 의견에 동의하여 대안을 찾아보았다. 구글 스프레드시트 API를 이용하면 지원은 Apply 페이지에서 구현한..