FE17 좋은 코드란 무엇일까?(2) - 하나의 컴포넌트 두개의 쿼리 "지윤님 국내/해외를 토글 할 수 있는 스위칭 버튼을 달아주세요" 하나의 서비스의 처음부터 끝까지 내가 다 담당할 수 있다면 좋겠지만, 하나의 프로젝트를 다수의 개발자들과 함께 하기도 하고, 조직 이동을 통해 내가 담당하던 서비스를 다른 개발자에게 넘기거나 혹은 다른 개발자의 서비스를 내가 받아 담당하게 될 때도 있다. 그렇게 다른 사람이 짜 놓은(잘 돌아가는 코드 위에) 내 코드를 얹어야 할 때가 있다. 이번에는 그런 경험을 했다. 서비스가 확장되어 하나의 화면에서 토글을 통해 여러 데이터를 스위칭해서 보여줄 수 있게 코드를 얹어야 했다. 더 깔끔하게 분기칠 수 있는 방법은 없을까? 간략한 코드 예시를 통해서 코드에서 예상할 수 있는 문제점과 더 깔끔한 코드로 개선해 볼 수 있는 방법은 무엇일지-`하나.. 2023. 4. 23. 좋은 코드란 무엇일까?(1) - 페이지네이션의 버튼들 "지윤님 여기에 처음으로 돌아가는 버튼을 추가해 주세요." "지윤님 이거 동작이 이상해요!" "지윤님 요 모달에-" 코드는 끝이 없다. 시간이 흘러서 버그이든 기능의 추가든 수정이든 사소한 문구 변화든 어떠한 이유로든 나는 내가 짠 코드를 다시 마주하게 된다. 엉망으로 짠 코드에는 간단한 기능 하나 끼워넣기도 까다로워 부담스러워진다. 다시 들여다보는 시점이 왔을 때 부담스럽지 않으려면 어떻게 해야 할까? 당연한 말이지만 확장 및 수정이 용이할 코드를 짜야한다. 감사하게도 요 근래 좋은 코드리뷰를 많이 받으면서, 이렇게 하면 조금 더 확장 및 수정이 용이한 코드에 접근할 수 있겠구나! 깨달음을 얻었다. 간략한 코드 예시를 통해서 코드에서 예상할 수 있는 문제점은 무엇인지, 그리고 해당 코드를 좀 더 가독성.. 2023. 4. 5. Nextjs의 Link component 프로젝트에서 next를 13으로 업그레이드하고 Link 컴포넌트 사용하면서 몇 가지 변경점이 생겼다는 것을 알게 되었다. 근데 아직 app 라우팅 방식으로는 변경 못함ㅠ next13 next config appDir 활성화 + yarn pnp랑 같이 쓰면 빌드에서 실패한다(요 이슈) 이 글에서는 가볍게 기본적으로 알면 좋을 Link 컴포넌트의 속성 및 Next.js12와 13으로 업그레이드되면서 Link 컴포넌트에서 무엇이 변경되었는지 소개해보고자 한다. 컴포넌트 Link 컴포넌트는 페이지 간 이동 시 사용된다. Link 컴포넌트의 href 속성에는 이동할 경로를 지정하고, 자식 요소로는 링크의 텍스트 또는 이미지 등을 넣어주면 된다. import Link from 'next/link'; functi.. 2023. 3. 12. controlled components vs uncontrolled components 란 controlled, uncontrolled(=제어, 비제어 컴포넌트) 그게 뭐지? 처음 들어봐~라고 할 수 있지만, 용어 상에서 오는 낯설음일 뿐이지 우리 대부분은 이미 알고 있고 사용해본 적도 있을 것이다. uncontrolled components 개발을 하면서 흔하디 흔하게 작성하는 form의 구성요소들을 생각해보자. input이나 textarea, select 같은 태그들이 떠오를 텐데, 요 dom 태그들에 ref를 주고 해당 ref의 current에 접근해서 값을 꺼내오거나/본 적이 있는가? const MyComponent = () => { const inputRef = useRef(null) return ( console.log(inputRef.current.value)}/> ) } 이런.. 2022. 11. 11. 프로젝트 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. 아직도 낯선 typescript 최근 내가 타입스크립트를 단순 회사의 기술스택이기에 사용하고 있는 건 아닌지에 대해서 의문이 들었다. 사실 타입스크립트를 사용하면 얻게 되는 명확한 이점들이 있는데, 그런 이점들을 줄줄 놓치는(=타입스크립트를 사용하는 이유가 없어지는) 혼란의 코드를 쓰고 있던 건 아닌건지 반성ㅠ... 반성의 기회를 얻은 덕분에 다시 펼쳐본 타입스크립트 핸드북... 타입스크립트 핸드북을 읽으면서, 낯설게 느껴지는 부분들에 대해 정리하고 예시를 직접 작성해본다. void 변수의 타입으로 쓰일 때에는 undefined와 null을 의미하고, 함수에서는 함수의 반환값으로 쓰인다. const a : void = null; const a = (): void => {} never never이 함수의 반환값의 타입으로 쓰였을 때에는,.. 2022. 7. 3. React HOC에 대해 알아보자 HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다. HOC은 같은 로직을 다수의 컴포넌트에 동일 적용해야할 때 굉장히 유용하게 사용할 수 있다. 예를 들어, 우리가 프로젝트의 상태를 하나의 store에 저장해놓고 사용한다고 했을 때, 컴포넌트에서 store에 접근해 상태값을 꺼내오기 위해서는 상태값을 사용하는 컴포넌트마다 store와 연결시켜주는 코드가 필요하다. 컴포넌트 내부에 매번 작성하기보다 애초에 store와 연결되어있는 컴포넌트를 만들면 좋지 않을까? 엥? 이거 어디서 많이 보지 않았나? 하고 기시감이 든다면, 맞다. 이게 바로 대표적인 HOC, 리덕스의 connect이다. (+ 함수형 컴.. 2022. 2. 7. 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. 모바일웹에서 Input 클릭 시 화면 확대 없애기 문제 반응형 디자인의 웹을 만들었다. 핸드폰에서 웹을 켜고 화면의 Input을 클릭하니 자동으로 화면을 확대해서 인풋을 강조해준다. 아... 친절한 모바일 이펙트...😇 하지만 내가 의도한 이펙트가 아닐뿐더러 오히려 UX를 해치기까지 하는 상황. 해당 이펙트를 막아보자. 코드 한 줄로 해결이 가능하다. 해결방법 index.html을 열어 name이 viewport 인 메타태그를 찾아준다. ... 그리고 해당 태그에 이렇게 content를 추가해주면 끝! 자동으로 확대되지 않을 뿐더러, 유저가 확대/축소할 수도 없게 막아버렸당. 깔끔~ ... 2022. 1. 23. 이전 1 2 다음
