자바스크립트의 런타임런타임(runtime)은 컴퓨터 프로그램이 실행되는 환경이다. JS를 사용해서 개발하는 개발자라면 필수로 JS가 실행되는 동안 코드가 어떻게 돌아가는지 알고 있으면 좋을것 같다. JS는 싱글스레드 언어다. 싱글 스레드란 한번에 한가지 작업만 처리할 수 있다는 것이다. 예를 들어 당신이 식당에 갔는데 손님을 하나만 받을수 있는 식당에 가서 20명 이상 대기가 있는 상태이다.근데 부엌을 슬쩍 보니 한사람이 식사가 끝나면 그릇이 없어서 식사가 끝나고 설거지를 하고 테이블 하나를 닦고 청소한 후 다음 손님이 들어가는 것이다. 이 답답한 식당에서 당신은 20명 이상 웨이팅할 자신이 있는가? 당연하게도 그럴 자신이 없는 JS를 만든 사람은 해결책을 만들어 뒀다. 그 해결책에 대해서 알아보자 대표..

내가 배운 전역 상태 라이브러리들 Redux vs Context API Redux, React-Redux 상태의 중앙 관리를 위한 상태관리도구 이다. ‘전역 상태’를 생성하고 관리하기 위한 라이브러리라고 볼 수 있다. 이때 상태를 액션(순수함수)이라는 이벤트를 사용한다. flux패턴을 통해 단방향 흐름으로 예측가능한 방식으로 업데이트 하기 위함이다. 미들웨어를 추가해서 전역상태를 위한 통신을 추가할 수 있다. 전역상태를 관리하는 라이브러리 답게 Redux를 사용할 경우 State의 변경이 일어나면 State를 사용하고 있는 컴포넌트에서만 리렌더링이 발생한다. 하지만 라이브러리를 설치해야 한다. 초기 세팅이 번거롭다. (+ 보일러 plate가 필요하다. ) 저는 Context API를 리액트 빌트인 상태 ..

외주개발 하면서 별 문제가 아니라고 생각했던 문제가 드디어 직면 했다. 바로 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..

Clean Code 좋은 코드를 쓰는것은 중요하다. → 나쁜 코드를 쓰지 않는 것이 중요하다. 하지만 과거의 코드( Legucy )가 나중에 봤을 때 나쁜코드를 의미하는 것은 아니다. 그 당시에 잘 짜인 코드는 지금와서도 마이그레이션 하기 쉬운 코드다. 비판적인 시선으로 바라보지 말자. 좋은 코드를 작성하기 위해서는 좋은 코드의 기준이 무엇인지, 그리고 방법이 무엇인지를 고민하고 연구해야 합니다. 관심사의 분리 개발에는 관심사의 분리 ( Seperation of Concerns ) 용어가 있다. 좋은 코드를 짜기 위한 가장 기본적인 원칙이며, 더 좋은 애플리케이션을 만들기 위한 여러 디자인 패턴, 기법, 아키텍쳐 등은 결국 모두 이 SoC를 가장 기본적인 원칙으로 삼고 있다. 😒 관심사란 ? 하나의 모듈..

소프트웨어 테스트 테스트란 무언가 동작하는지 확인하는 행위이다. 소프트웨어 테스트란 소프트웨어가 우리가 의도한 대로 동작하는지 테스트하는 행위를 의미한다. 옛날에는 개발자는 개발만하고, 소프트웨어가 올바르게 동작하는지 확인하는 테스트팀이 별도로 존재했고, 개발자는 테스팅 과정에 큰 관여를 하지 않았다. 그러나 최근에는 개발자가 자동화 할 수 있는 소프트웨어 테스트를 구현하고 실행하는것이 보편화 되고 있다. 자동화된 테스트란? 컴퓨터를 통해서 소프트웨어를 테스트하는것을 의미합니다. 소프트웨어를 통해서 테스트를 할 경우… 컴퓨터를 통해서 실행하기에 사람이 실행하는 것보다 빠르다. 정해진 스크립트에 따라 일관성있게 동작하기에 사람이 테스트 할 경우 발생할 수 있는 휴먼에러를 기피할 수 있다. 소프트웨어 테스트..

기업 과제를 진행하면서 배운 내용들을 과제에 적용해보았다. 깃허브 링크 : 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 추..