본문 바로가기

분류 전체보기60

프로젝트 eslint 적용하기 다들 알겠지만, 회사에서 개발을 하다보면 바닥부터 어떠한 프로젝트를 짜는 일이 별로 없다 😭 eslint 또한 항상 프로젝트에 기본적으로 `이미` 존재하는 파일 중에 하나가 되어버리니까, 크게 관심을 가지않던 파일 중 하나였다. 그러다가 요즘에 기존 멀티 레포를 모노레포로 합치게 되면서 각 멀티레포들의 eslint 파일들을 많이 보게 되었고... eslint 파일은 무엇인가ㅎ 에 대한 궁금증 + 나는 왜 여지껏 eslint를 한번도 잘 들여다보지 않았지? 요거 설정은 어떻게 하는것이지? 라는 충격과 의문이 들었따. 그렇다면 eslint란 무엇인가. eslint docs에서는 eslint를 `ESLint is a tool for identifying and reporting on patterns found.. 2022. 10. 8.
yarn과 dependencies / devDepedencies / peerDependencies 매일 yarn을 통해 새로운 라이브러리를 다운 받고, 애플리케이션을 실행한다. yarn을 통해 패키지들을 다운 받고, package.json 파일을 들여다보다가 궁금증이 생겨 글을 작성해본다. yarn은 무엇일까? docs에서는 `Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Code is shared through something called a package.` 요롷게 이야기한다. yarn은 npm과 같은 패키지 매니저이다. 거인의 어깨에 올라타라~ 바퀴를 다시 만들지 말라~ 뭐 요론 말들도 있지 않은가. 세상의 훌륭한 개발자들이.. 2022. 10. 3.
0905/ 나는 지금 어떤 프론트 개발자인가. 프론트 개발자로서의 자아성찰을 하게 되는 요즘이다. 나는 그냥 화면에 그려주는 것만 재밌어하지 않았나 싶다. UX를 중시한다고 하면서도, 그저 화면에 보여지는 UX writing이나 UI를 직관적으로 하는 방법에 몰두해있었던 것 같다. 에러나 데이터 페칭 중에 사용자가 마주할 화면에 대한 고민, 혹은 인풋을 입력하던 중에 페칭이 되는 등의 페칭이 늦게 될 때의 상황,이런 속의 것들은 생각하지 않고 겉에만(화면만 그리는데) 몰두하고 있었고 화면만 잘 나오면 되지! 라고 안일하게 생각해왔다. 더 나아가 코드를 작성하고 설계함에 있어서 axios에서 에러가 난다면 클라이언트 처리는 어떤 모듈에서 할 것인지, 에러 처리나 데이터 페칭 중의 화면를 분기하는 방법에 있어서 바운더리 처리를 어떻게 추상화할 것인지에 .. 2022. 9. 8.
부자 아빠, 가난한 아빠 8월 29일-9월 5일 개발 아닌 계발~ 밑도 끝도 없이 갑자기 재테크 입문서 기록하기~ㅎ 개발도 포스팅할 거 짱 많은데ㅠ 언제 쓰지! 부자들은 돈을 위해 일하지 않는다. 관점을 바꿔 봐. 나를 탓하지 말고. 내가 문제라고 여겨서도 안 된다. 만일 내가 문제라고 생각한다면 넌 나를 바꿔야하겠지. 하지만 네가 문제라는 걸 깨달으면 너 자신을 바꿀 수 있다. 이 점을 명심하렴. 다른 사람들보다 나 자신을 바꾸는 것이 훨씬 쉽단다. -p.56 삶의 많은 부분은 나의 통제 범위를 벗어나 있다. 내가 통제할 수 있는 부분, 즉 '나 자신'에게 초점을 맞추는 법을 배워야한다. 상황을 바꿔야 한다면 나 자신부터 바꿔야 한다. 현금흐름을 창출하는 자산을 구입하거나 구축하면 돈이 당신을 위해 일하게 된다. 그러다 어느 .. 2022. 9. 6.
위대한 나의 발견, 강점 혁명 드디어 갤럽프레소의 강점 혁명 테스트를 진행해봤다. 강점 혁명 테스트란, 약점을 보완하는 것이 아니라 자신이 가진 강점을 더 단단한 강점으로 만드는 것이 개인을 행복하게 만들고 조직의 성과를 높여 성공으로 이끈다라는 도널드 클리프턴의 연구를 기반으로 테스터가 가진 강점 5가지를 찾아주는 테스트이다. 테스트는 갤럽 웹페이지를 통해서, 혹은 강점 혁명 책을 구매해서 참여가 가능한데, 나는 책을 구매했다(책 한 권에 테스트 한번 가능-). 책으로 참여한 이유는 책을 구매하는 비용이나 웹페이지 테스트 비용이나 비슷한데 책에는 모든 강점마다의 해석까지 들어있어 더 낫겠다 싶어서? 그리고 책을 구매하면 기분이 좋으니까-호호 테스트는 35분쯤 걸렸고, 테스트를 진행 후 그냥 혼자서 보고서만 읽는 것은 흡수력이 떨어지.. 2022. 7. 4.
아직도 낯선 typescript 최근 내가 타입스크립트를 단순 회사의 기술스택이기에 사용하고 있는 건 아닌지에 대해서 의문이 들었다. 사실 타입스크립트를 사용하면 얻게 되는 명확한 이점들이 있는데, 그런 이점들을 줄줄 놓치는(=타입스크립트를 사용하는 이유가 없어지는) 혼란의 코드를 쓰고 있던 건 아닌건지 반성ㅠ... 반성의 기회를 얻은 덕분에 다시 펼쳐본 타입스크립트 핸드북... 타입스크립트 핸드북을 읽으면서, 낯설게 느껴지는 부분들에 대해 정리하고 예시를 직접 작성해본다. void 변수의 타입으로 쓰일 때에는 undefined와 null을 의미하고, 함수에서는 함수의 반환값으로 쓰인다. const a : void = null; const a = (): void => {} never never이 함수의 반환값의 타입으로 쓰였을 때에는,.. 2022. 7. 3.
공부만이 살 길이다 지윤아 하루에 두시간씩이라도 하자 진짜. 공부할 거 진짜 하루가 부족하게 많잖아. 근데도 일이 바쁘다는 이유로 안한다고? 그렇다면 너는 미쳤다 박지윤. 솔직히 두시간 시간 낼 수 있잖아. 시간이 부족하면 잠을 줄이고, 체력이 부족하면 운동을 하자. 물러설 곳이 없다. 여기서 물러선다? 이렇게 좋은 동료들, 좋은 환경 만나 놓고 아깝게? 내가 미쳤니? 절대 안물러서. 가만히 있는다고 실력이 성장하지 않는다는 거 너무 잘 알아. 일을 한다고 그 일에 투자하는 시간들이 다 나의 성장이 되지 않는다는 것도 알아. 그러니 나는 공부를 해야해. 내 시간을 투자해서 야금야금 성장하다 팍 레벨 업하는 성장의 상승곡선을 그릴거야. 도메인 지식 빠방하게 가져갈 거야. ml 아무것도 모르면서 ml 팀에 들어와서, PD도 다.. 2022. 6. 22.
React HOC에 대해 알아보자 HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다. HOC은 같은 로직을 다수의 컴포넌트에 동일 적용해야할 때 굉장히 유용하게 사용할 수 있다. 예를 들어, 우리가 프로젝트의 상태를 하나의 store에 저장해놓고 사용한다고 했을 때, 컴포넌트에서 store에 접근해 상태값을 꺼내오기 위해서는 상태값을 사용하는 컴포넌트마다 store와 연결시켜주는 코드가 필요하다. 컴포넌트 내부에 매번 작성하기보다 애초에 store와 연결되어있는 컴포넌트를 만들면 좋지 않을까? 엥? 이거 어디서 많이 보지 않았나? 하고 기시감이 든다면, 맞다. 이게 바로 대표적인 HOC, 리덕스의 connect이다. (+ 함수형 컴.. 2022. 2. 7.
2231. 분해합 첫 풀이 패스이지만 만족스럽지 못하다. 아무리 브루트 포스 문제라고 해도... 216의 생성자가 두자리 수 일리가 없는데, 1부터 타겟까지 돌며 찾아 나가는게 너무 아깝다.😭😩 뭔가 시작점을 효과적으로 설정할 수 있는 방법이 필요하다. def f(num): return num + sum(map(int, list(str(num)))) N = int(input()) ans = 0 for i in range(1, N+1): if f(i) == N: ans = i break print(ans) 최적화 풀이 각 자리수에 올 수 있는 최대 수는 9인 것을 생각해서, 타겟 숫자의 자리수*9를 계산해 시작점을 잡아줬다. 시작점을 잡아주지 않은 첫 풀이는 1440ms가 걸렸는데, 76ms로 줄였당 🥳 휴 속이 다 시원하.. 2022. 2. 6.
useSelector, useDispatch로 리덕스에 편하게 접근해보자 문제 상태 관리 라이브러리 리덕스를 사용한다면, 컴포넌트에서 리덕스에 접근하기 위해 세 단계를 거치게 된다. mapStateToProps, mapDispatchToProps를 정의한다. 정의한 상태값과 액션들을 해당 컴포넌트에 props로 내려준다. mapStateToProps, mapDispatchToProps를 컴포넌트와 connect로 연결한다. import React from 'react'; import { connect } from 'react-redux'; ​ // 리덕스 상태를 props로 const mapStateToProps = state => ({ a: state.MyRedux.a, b: state.MyRedux.b, ... }); ​ // 리덕스 액션을 props로 const mapD.. 2022. 1. 23.