프론트엔드(18)
-
Redux vs context api 비교 및 Recoil과의 첫만남!
내가 배운 전역 상태 라이브러리들 Redux vs Context API Redux, React-Redux 상태의 중앙 관리를 위한 상태관리도구 이다. ‘전역 상태’를 생성하고 관리하기 위한 라이브러리라고 볼 수 있다. 이때 상태를 액션(순수함수)이라는 이벤트를 사용한다. flux패턴을 통해 단방향 흐름으로 예측가능한 방식으로 업데이트 하기 위함이다. 미들웨어를 추가해서 전역상태를 위한 통신을 추가할 수 있다. 전역상태를 관리하는 라이브러리 답게 Redux를 사용할 경우 State의 변경이 일어나면 State를 사용하고 있는 컴포넌트에서만 리렌더링이 발생한다. 하지만 라이브러리를 설치해야 한다. 초기 세팅이 번거롭다. (+ 보일러 plate가 필요하다. ) 저는 Context API를 리액트 빌트인 상태 ..
2023.07.05 -
electron에서 alert창 사용 시 input focus 잃는 이슈를 모달창으로 해결
외주개발 하면서 별 문제가 아니라고 생각했던 문제가 드디어 직면 했다. 바로 electron에서 input 포커싱을 잃는 큰 문제 였다. 아무리… 찾아 봐도 electron을 한국에서 쓰지 않는지라 관두고 있었는데 영어로 검색하니까 바로 나왔다.. 역시 영어를 배워야 한다.. *추가: electron에는 alert대신 dialog api를 사용해서 해결 할 수 있다. https://www.electronjs.org/docs/latest/api/dialog 관련 이슈 Can't edit input text field after window.alert() Can't edit input text field after window.alert() I've got this Electron app (using Nod..
2023.07.03 -
React에서 관심사를 분리하는 법 (feat . customHook, router )
Clean Code 좋은 코드를 쓰는것은 중요하다. → 나쁜 코드를 쓰지 않는 것이 중요하다. 하지만 과거의 코드( Legucy )가 나중에 봤을 때 나쁜코드를 의미하는 것은 아니다. 그 당시에 잘 짜인 코드는 지금와서도 마이그레이션 하기 쉬운 코드다. 비판적인 시선으로 바라보지 말자. 좋은 코드를 작성하기 위해서는 좋은 코드의 기준이 무엇인지, 그리고 방법이 무엇인지를 고민하고 연구해야 합니다. 관심사의 분리 개발에는 관심사의 분리 ( Seperation of Concerns ) 용어가 있다. 좋은 코드를 짜기 위한 가장 기본적인 원칙이며, 더 좋은 애플리케이션을 만들기 위한 여러 디자인 패턴, 기법, 아키텍쳐 등은 결국 모두 이 SoC를 가장 기본적인 원칙으로 삼고 있다. 😒 관심사란 ? 하나의 모듈..
2023.05.21 -
소프트웨어 테스트 feat. react
소프트웨어 테스트 테스트란 무언가 동작하는지 확인하는 행위이다. 소프트웨어 테스트란 소프트웨어가 우리가 의도한 대로 동작하는지 테스트하는 행위를 의미한다. 옛날에는 개발자는 개발만하고, 소프트웨어가 올바르게 동작하는지 확인하는 테스트팀이 별도로 존재했고, 개발자는 테스팅 과정에 큰 관여를 하지 않았다. 그러나 최근에는 개발자가 자동화 할 수 있는 소프트웨어 테스트를 구현하고 실행하는것이 보편화 되고 있다. 자동화된 테스트란? 컴퓨터를 통해서 소프트웨어를 테스트하는것을 의미합니다. 소프트웨어를 통해서 테스트를 할 경우… 컴퓨터를 통해서 실행하기에 사람이 실행하는 것보다 빠르다. 정해진 스크립트에 따라 일관성있게 동작하기에 사람이 테스트 할 경우 발생할 수 있는 휴먼에러를 기피할 수 있다. 소프트웨어 테스트..
2023.05.20 -
리펙토링부터 검색어 추천 기능 및 무한 스크롤 기능 구현 하기
기업 과제를 진행하면서 배운 내용들을 과제에 적용해보았다. 깃허브 링크 : https://github.com/wanted-frontedend-team5/pre-onboarding-10th-4-5 리팩토링 1. Js → Ts로 migration 타입스크립트 도입 이유 타입을 정적으로 제한하여 더 안정적이고 예측 가능한 코드 작성이 가능 컴파일 시간에 타입 오류를 확인함으로써 버그를 사전에 찾아 생산성 향상 및 유지보수가 용이함 의존성 설치 react/typescript 개발에 필요한 의존성 추가 "devDependencies": { "@types/react": "^18.2.6", "@types/react-dom": "^18.2.4", "typescript": "^5.0.4" } tsconfig.json 추..
2023.05.18 -
React Redux 파헤치기
Design Pattern 디자인패턴 : 소프트웨어를 설계하면서 자주 발생하는 문제에대한 모범답안 애플리케이션 전체를 다루기 위한 디자인 패턴들은 통상 여러 작은 범위의 디자인 패턴들을 함께 사용해서 만들어지기에 복합패턴이라고도 부름. → 그 중 모든 복합 패턴의 근간이라고 부를수 있는 패턴은 mvc 패턴 MVC MVC 패턴은 애플리케이션을 Model, View, Controller 세가지 구성요소로 나눠서 설계하는 패턴입니다. 구성요소들의 역할은 아래와 같습니다. Model: 데이터의 형태를 정의하고, 데이터를 수정하는 역할을 담당 Controller: 유저의 입력을 받아서 애플리케이션 내에서 어떻게 처리할지 판단 및 가공해서 모델 또는 뷰를 조작 View: 모델을 UI로 표현, 사용자의 입력을 받아서..
2023.05.18