Hello_coding

타입스크립트는 프론트엔드 공부를 하며 자연스럽게 알게되었다. 실무에서 많이 사용되고 있고, 또 타입을 개발자가 지정해줄 수 있는 장점이 있어서 (물론 단점도 있긴 하겠지만) 코드가 개발자 의도에 맞게 돌아간다 정도만으로 알고 있었다. 지금까진 공식문서를 한바퀴 훑었고 , 이제는 본격적으로 공부하면서 중요한 부분들을 정리해보려 한다. 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..

* 미리 말하고 가자면 옵셔널 체이닝은 스펙에 추가 된 지 얼마 안된 문법으로 구식 브라우저에서는 폴리필이 필요합니다. * 사건의 개요 - 프로젝트 진행중 user정보의 length값으로 처리해주어야 할 코드가 있었다. 이때 user정보가 잘 들어왔을경우는 괜찮은데 . . . user정보가 없을때 length를 접근하려 하면 에러가 떳다. 그래서 나는 일단 아래와 같이 코드를 짯다. const userLength ; if (user) { userLength = user.length; } else { userLength = null; } //len값을 사용 . . . 그런데 여기서 구글링을 통해 옵셔널 체이닝이라는것을 발견했다! 옵셔널 체이닝 ? - ?. 를 사용하여 프로퍼티가 없는 중첩 객체를 에러 없이..

React 프로젝트를 진행 중, 비동기 처리의 결과값을 전역적으로 관리하며 사용해야하는 경우가 생겼다. 그래서 redux-thunk를 도입하게 되었다. redux-thunk에 대해 정리하고, 예제 코드를 살펴보자! 1. Redux-thunk를 사용하는이유 ? - 기본 Redux는 간단한 동기적인 처리만 업데이트 할 수 있다. - 하지만 store에 aceess해야하는 복잡한 동기처리나, AJAX요청과 같은 비동기 처리 같은경우 권장되는 미들웨어이다! - Redux 앱에서 비동기 로직을 작성하기 위한 표준 접근 방식이며, 일반적으로 데이터 가져오기에 사용된다. 2. thunk라는 단어의 의미는 ? - 일부 지연된 작업을 수행하는 코드 조각 을 의미하는 프로그래밍 용어 Redux-toolkit 개념을 모르신..

리덕스만으로도 정말 좋은 라이브러리지만 문제점이 있었다! 리덕스의 문제점은 ? 1. 리덕스 스토어 환경 설정이 너무 복잡 2. 리덕스는 보일러플레이트 (어떤일을 하기전 반복하여 작성하는 코드들)이 너무 많다. 3. 리덕스를 유용하게 사용하려면 많은 패키지들을 추가해야한다. 4. 불변성유지의 어려움 이런 이슈들을 해결하기 위해 Redux Toolkit이 등장한다. 리덕스툴킷을 이용하면 리덕스 툴킷을 들어가기 앞서서 아래 3가지를 비교해보자 Redux React Redux Redux toolkit createStore subscribe getState dispatch connecct useDispatch useSeletor configuerStore createSlice createAsyncThunk 기존에..

사건의 개요 ^_^ 1번 브랜치에서 작업중 다른 브랜치에서 작업할 거리가 생겨 stash를 해두고 다른브랜치에 넘어갔다. 그리고 자연스럽게 develop브랜치에서 stash를 pop해버림 . . . 당황해서 stash list를 지우고 ..? (왜지웠지 . . . .하) 지웠는데도 충돌이 나서 그냥 reset --hard를 때려버렸다. 하지만 처참하게도 stash list 내역은 모두 삭제된 상태.. ^^ 삭제한 stash를 다시 복구시켜 적용시켜보자!!! 1. stash를 삭제한 내역 찾기 아래 명령어를 입력하면 git fsck --no-reflog | awk '/dangling commit/ {print $3}' | xargs -L 1 git --no-pager show -s --format="%ci..

내가 만든 컴포넌트에 ref를 달고 싶었다. 하지만 다음과 같은 에러가 . . . Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? useRef는 알아도 forwardRef는 뭐지?! forwardRef에 대해 알아보자! 먼저 ref란 무엇인지 간략하게 말해보자. ref는 React에서 HTML엘리먼트에 접근하기 위해 사용한다. (마치 자바스크립트의 셀렉터처럼 . . . ) 더 자세한 useRef를 알고싶다면 👇 https://mandelina-code.tistory.com/86 [React - Hook] useRef가 뭘까..

열심히 기능 구현중, props를 전달하는 과정에서 error가 발생했다. 찾아보니 ESLint의 유효성 검사에서 Type에 대한 내용이 누락되어서 저런 에러가 발생한 것 같았다. 해결방법 1 ) propTypes정의하기 먼저 prop-types을 설치한다. npm i prop-types 그 후 , 에러가 발생되는 컴포넌트에 파라미터(props로 받은 값들) 값들의 Type을 지정해준다. EmailInput.propTypes = { //value , onChange는 props로 받은 값들 value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, }; 참고 : https://ko.reactjs.org/docs/typechecking..

프로젝트를 준비하며, 폴더구조를 짜던중 디자인패턴 얘기가 나왔다. 리액트에 적용시킬 디자인 패턴을 고려하는 중, 최근에 자주 들리던 (?) 아토믹 패턴에 대해 알아보기로 했다. Atomic Design이란? - 화학에서 용어를 빌린 개념을 웹에 적용한 패턴이다. - 웹사이트에서의 가장 작은 컴포넌트 단위를 원자(Atoms)로 설정하고, 이를 퍼즐을 조립하듯 사용하여 상위 컴포넌트를 만드는 패턴이다. Atomic Design의 5단계 1. Atoms 원자(Atoms)은 인터페이스를 구성하는 기본 블록역할을 한다. 즉, 디자인과 기능의 최소단위라고 볼 수 있다. ex ) Label , Text ,Button , Icon , input 등 basic HTML elements 2. Molecules 분자(Mol..