Hello_coding

개발을 하던중 실행환경에 따라 기본적으로 사용할 수 있는 모듈이 있고 제약이 있는 모듈이 있다는것을 인지하게 되었다.. 사실 생각해보면 당연한건데 이제서야 인지한 나를 반성하며 (?) 정리해보자!! 내 상황 - webpack config 파일을 수정하던중 target을 electron-renderer로 잡으면 fs,os 모듈 실행이 가능한데 , target을 ['web',' electron-renderer'] 로 함께 잡으면 module not found 라는 오류가 떳다! - 그 이유는 'fs'나 'os' 같은 Node.js에서만 사용 가능한 모듈은 브라우저(web)에서 직접 사용할 수 없기 때문이다. 따라서 해결방안은 2가지였다. 1. webpack.web.config / webpack.electro..

클린 코드의 의의 - 실무에서 공공연한 지뢰코드가 존재한다. - 지뢰코드 === 흐름파악이 어렵고, 도메인 맥락 표현X , 동료에게 물어봐야하는 코드 - 즉 실무에서 클린코드란 유지보수 시간의 단축과 같다. ( 클린코드 != 짧은코드 ) == 원하는 로직을 빠르게 찾을 수 있는 코드 원하는 로직을 빠르게 찾으려면? 1. 하나의 목적을 가진 코드가 흩뿌려져 있다면 => 1.응집도를 높여라 2. 함수가 여러 가지 일을 하고 있다면? => 2.단일책임의 원칙을 따라라 3. 함수의 세부구현 단계가 제각각이라면? => 3.추상화 단계를 조정해 핵심 개념을 필요한 만큼 노출해라 1. 응집도 응집도가 낮은 코드 예제 리팩토링 시도 - custom Hook 사용 - custom hook을 이용하여 한번에 뭉쳤을때의 위..

자바스크립트에서 객체 이외에도 기본형 7가지 타입이 있다. (string, number, boolean, null, undefined, symbol, bigint ) 기본형들은 불변이며 메서드를 가지지 않는다는 점에서 객체와 구별된다. 하지만 string을 예로 들어보면 메서드를 가진것 처럼 보인다. 🤷‍♂️ charAt은 string의 메서드가 아닌걸요? 'primitive'.charAt(3) // => "m" 여기서 등장하는 개념이 바로 객체래퍼 이다! 객체래퍼란? - 원시타입의 프로퍼티에 접근하려 할 때 생성되는 임시객체를 뜻한다. 즉 위의 예제를 다시 한번 살펴보면, string은 객체가 아니기 때문에 메서드가 없지만 new String (str)을 호출한 것처럼 문자열 리터럴을 객체로 변환시켜주..

타입스크립트를 공부하던중 typeof와 keyof 라는 키워드가 자주 보였다. 비슷한듯 다른듯 헷갈려 확실히 정리하기 위해 쓰는 글! 1. keyof - 객체 형태 타입에서 따로 속성들만을 뽑아 유니온 타입으로 만들어 주는 연산자이다. interface Person { name: string; } interface Lifespan { birth:Date; death?:Date; } type k = keyof (Person | Lifespan); // type은 never // k 를 풀어보면 -> (keyof Person) & (keyof Lifespan) -> name & ( birth | death ) -> never - 여기서 ( keyof Lifespan )을 주목해서 보면 속성들만 뽑은 후 유니..

개발중 , useEffect를 useLayoutEffect로 바꾸었더니 해결되는 현상을 경험했다. useLayoutEffect를 들어보긴 했지만.. 정확한 개념을 알고자 정리해보자! useEffect - 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용한다. - Side effect를 수행하기 위한 Hook이다. useEffect에 대해서는 이전 글에서 자세히 정리해두었으니 아래 링크를 참고하도록 .. https://mandelina-code.tistory.com/80 [React - Hook] useEffect을 사용해 시계만들기 useEffect 란 ? - 어떤 컴포넌트가 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용 - Side effect를 수행하기 위한 Hook reac..

Electron이란 ? - 데스크탑 프레임워크 , 현재는 깃허브에 의해 개발되고 있다. ( 데스크톱 GUI 애플리케이션을 개발하는데 사용! ) - JavaScript 코드베이스를 유지하고 Windows, macOS, Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있다. 코드베이스? 특정 소프트웨어 시스템, 응용 소프트웨어, 소프트웨어 구성 요소를 빌드하기 위해 사용되는 소스 코드의 모임 Electron 장단점 장점 - 방대한 커뮤니티 보유 - 낮은 러닝커브 - 웹 기술을 사용가능 - Node.js를 사용하여 JS의 모든 기능을 사용 가능 - MS,Discord,Slack 등에서 사용 단점 - 큰 사이즈의 설치 파일 사이즈 (~120MB) - 많은 RAM과 CPU 사용 - 모바일 지원 X - 보안에 ..

모든 언어에서 라이브러리 의존성 관리는 어려운 일이다.. (TS책의 한구절) 너무 공감한다. 그놈의 의존성 ㅜㅜ 내가 TS 프로젝트를 하면서도 이 의존성 문제 때문에 꽤 애를 먹었었다. 이참에 타입스크립트에서의 의존성을 마스터 해보자. devDependencies에 typescript와 @types 추가하기 npm은 자바스크립트 라이브러리 저장소와 프로젝트가 의존하고 있는 라이브러리들의 버전을 지정하는 방법을 제공한다. 3가지 종류의 의존성을 구분하며 관리하고 , 각 의존성을 package.json 파일 내 별도 영역에 들어있다. 1. dependencies - 현재 프로젝트를 실행하는 데 필수적인 라이브러리 포함 - 프로젝트를 npm에 공개하여 다른 사용자가 해당 프로젝트를 설치하면 dependenci..

타입스크립트는 프론트엔드 공부를 하며 자연스럽게 알게되었다. 실무에서 많이 사용되고 있고, 또 타입을 개발자가 지정해줄 수 있는 장점이 있어서 (물론 단점도 있긴 하겠지만) 코드가 개발자 의도에 맞게 돌아간다 정도만으로 알고 있었다. 지금까진 공식문서를 한바퀴 훑었고 , 이제는 본격적으로 공부하면서 중요한 부분들을 정리해보려 한다. 1. 타입스크립트와 자바스크립트의 관계 타입스크립트는 자바스크립트의 superset이다. superset 굉장히 오랜만에 들어보는 용어인데 ..^^ 즉 해석하자면 타입스크립트가 자바스크립트의 상위집합이란 뜻이다. 이 말은 .js 파일을 .ts로 바꾼다고 해도 달라지는 것은 없다라는 뜻이다. 따라서, 자바스크립트 코드를 타입스크립트로 마이그레이션 하는데에 큰 이점이 된다. 여기..

프론트엔드 개발자라는 꿈을 정하고 난 후, 최근에 제대로 된 첫번째 팀프로젝트를 완성하였다. 리액트와 Redux-toolkit, thunk를 사용하여 프로젝트를 만들었는데, 이 프로젝트를 통해 얻을 수 있는 점이 많았다. 1. React는 CSR 방식이기 때문에 초기 구동속도가 느리다. 2. 더해서 SEO에 좋지않다.. 이 문제점을 해결하고자, 프로젝트에서는 react-helmet-async라이브러리를 사용하여 페이지별로 meta태그를 설정해 주었고, 초기 구동속도를 개선하기 위하여 React.lazy()를 이용한 코드분할을 시도했었다. (하지만, 개인적으로 만든 Private,Public라우터와 꼬여서 (?) 실패하긴 했다. 이 부분은 틈틈히 생각해보는걸로....) 하지만 , 이러한 문제점을 해결하기위..

map을 사용하여 게시물들을 렌더링 하는 부분에서 Key에러가 발생되었다. 하지만 이 문제는 이미 알고 있던 부분이였다. react에서는 key를 통해 기존트리와 이후 트리의 자식들이 일치하는지 확인하기때문에, 효율적으로 렌더링 하기 위해선 key를 사용해야한다! 더해서 , key를 인덱스로 사용할 수 도있는데 인덱스 값은 재배열이 될 경우 비효율적으로 동작한다. 따라서 index를 key로 사용하는것은 지양하자! 아는 에러가 나와서 기분좋게 해결하려고 내 코드를 봤다 ^_^ return ( {followpost && followpost.map((post) => { return ( // 여기... key있는데.. {post.itemName} {post.link} {post.updatedAt.substri..