작심삼일 개발이야기

이번에는 Redux Toolkit과 Redux Saga를 함께 사용했다. Toolkit이 잘 기억나지 않는다면 이전 글을 확인하고 와도 된다. 사실 별거 없다.https://choisuhyeok.tistory.com/54 [Redux Toolkit] 지저분한 리덕스, RTK로 정리하자리덕스를 쓰다 보면 정말 코드가 길어진다... 준비해야 할 코드도 많고 RTK로 조금 더 쉽고 깔끔하게 사용해보자아 사실 리덕스 안 쓴 지 오래돼서... 기억도 가물가물하다 내가 이해한 그대로 작choisuhyeok.tistory.com Redux Saga를 사용하는 이유Redux는 동기적으로 실행되기 때문에 비동기적 요청을 하기 위해서Redux Saga의 여러 메소드를 사용하기 위해서 예제에서는 비동기 요청은 하지 않고 d..

이 글은 "개발자의 글쓰기"를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 개발자의 생각을 글로 표현하는 3가지 방법 서술식 '~다'로 끝나는 완전한 문장으로 구성된 글 (줄거리가 있는 설명이나 이야기) 개조식 어떤 사항을 나열할 때 ( 여러 가지 종류의 항목과 내용이 반복되거나 서술식에서 강조가 필요한 내용) 글머리 기호를 써야 한다. 도식 그림이나 서식으로 보여주는 것 ( 각 항목이나 사항의 관계를 명확히 규정할 때 ) 영어 단어 선택과 외래어 표기법 예를 들어 리액트에서 어떤 컴포넌트를 보여줄 때 show, hidden을 사용하는데 hidden대신에 invisible을 사용하면 안 된다. invisible의 반대말은 visible이기 때문이다. 이처럼 비슷한 뜻을 가진 영단어가 많이..

리덕스를 쓰다 보면 정말 코드가 길어진다...준비해야 할 코드도 많고 RTK로 조금 더 쉽고 깔끔하게 사용해보자아 사실 리덕스 안 쓴 지 오래돼서... 기억도 가물가물하다 내가 이해한 그대로 작성하려하니 틀린 점이 있으면 알려주면 감사하겠습니다. 일단 고 Toolkit 에서 사용할 함수configureStoreconst store = configureStore({ reducer: counter})configureStore 함수가 createStore()를 래핑하고 있기 때문에 createStore과 동일한 기능을 제공한다.reducer함수를 reducer라는 이름으로 전달해야 한다. createSliceexport const todoSlice = createSlice({ name: 'todo', ..

여러 문서를 읽다 보면 side effect라는 단어를 보게 된다. 번역하면 부작용인데 다들 side effect는 피하라고 하는 거 보니 안 좋은 뜻인 거 같아 보이긴 한다. 개발에서 side effect는 의도하지 않은 (예측할 수 없는) 효과를 말한다. 예를 들어 함수 내부에서 함수 외부의 변수를 변하게 하는 행동을 생각하면 될 것 같다. 함수를 실행시켜서 내가 원하는 값을 반환해야 하는데 함수 외부의 값이 변한다면 그걸 어떻게 찾을까... 막막하다 함수를 만들 때 side effect가 발생하지 않는 순수 함수를 만들어야 한다. 같은 input 값을 받으면 항상 같은 결과 값을 return 해주도록 말이다. 그게 함수형 프로그래밍의 콘셉트이기도 하다. 하지만 내가 사용하는 자바스크립트는 함수형 프..

파일을 모듈화 시켜서 사용할 때 export, export default를 사용하는 건 알고 있다. 근데 잘 모른다. 한번 정리해둬야지... 차이점 export export 한 이름으로 import 해야 한다. 원하는 이름으로 하려면 as를 사용해야 한다. export default 원하는 이름으로 import 할 수 있다. 파일당 하나만 export가 되는 거라 무슨 이름을 써도 상관없는 것 같다. // index.js export default hello = () => { cnosole.log('hello'); } export hi = () => { console.log('hi'); } // main.js // hello 함수가 import 된다. 이름을 변경해서 사용가능 import hellohel..

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 단순한 설계 규칙 모든 테스트를 실행한다. 중복을 없앤다. 프로그래머 의도를 표현한다. 클래스와 메서드 수를 최소로 줄인다. 단순한 설계 규칙 1 : 모든 테스트를 실행하라 모든 테스트 케이스를 항상 통과하는 시스템은 '테스트가 가능한 시스템'이다. 테스트 케이스를 작성하면 설계 품질이 높아진다. 단순한 설계 규칙 2~4: 리팩터링 코드를 몇 줄 추가할 때마다 설계를 조감한다. 새로 추가하는 코드가 설계 품질은 낮춘다고 생각이 들면 정리한 후에 테스트 케이스를 돌려서 기존 기능이 잘 동작하는지 확인한다. 중복을 없애라 깔끔한 시스템을 만들려면 단 몇 줄이라도 중복을 제거하겠다는 의지가 필요하다. 표현하라 코드는 개발자의 의..

Font 관련 에러 (Failed to decode downloaded font)가 계속 발생하고 화면이 깜빡이는 거 같길래이참에 Font에 관해 공부해보자고 생각이 들었다. 추후에 발생한 에러에 대해도 해결하고 추가 글을 작성할 것이다.웹 폰트란 무엇인가?사용자의 폰트 여부와 관계없이 서버에 있는 폰트를 사용하여 렌더링 해주는 방법이다. 예를 들어서 웹 폰트를 사용하면 사용자가 폰트 여부와 관계없이 사용 가능하지만 웹 폰트를 사용하지 않으면 기본 폰트가 사용 될 것이다. 특히 모바일에서 큰 장점이 되는데 기기마다 탑재된 폰트가 달라서 적용하기 어려웠던 문제가 해결된다. 사용법Font-familybody { font-family: sans-serif, NanumGothic; }font-family는 왼쪽..

state를 이용해서 간단하게 Tab UI를 구현했다. 여기서 소개하는 방법이 정답은 아니므로 다른 구현 방법이 있으면 댓글에 남겨주세요.위의 사진처럼 이전, 다음 버튼을 클릭하면 이전, 다음 뷰를 보여준다. 가장 먼저 베이스가 되는 TabUI.jsx 파일의 소스코드이다. (css는 styled-components를 사용했다.)import React, { useState } from "react";import styled from "styled-components";import Page1 from "./Page1";import Page2 from "./Page2";export default function TabUI() { // 현재 보여주는 페이지 const [pageState, setPageSta..

터미널에서 git commit을 하다가 강제로 종료 후에 다시 커밋하려니 아래와 같은 에러가 발생하였다. E325: ATTENTION Found a swap file by the name "~/.git/.COMMIT_EDITMSG.swp" 해결 방법 // 해당 폴더 터미널에서 .git 폴더 접근 cd .git // 모든 폴더 검색 ls -a // .COMMIT_EDITMSG.swp 파일 삭제 rm .COMMIT_EDITMSG.swp 참고 https://stackoverflow.com/questions/14513349/e325-attention-found-a-swap-file-by-the-name-git-commit-editmsg-swp/14529150

여러 컴포넌트를 만들다 보면 반복되는 코드를 발견할 수 있을 것이다. 반복되는 것을 줄여주면 코드가 훨씬 깔끔하고 보기 좋아지기 때문에 커스텀 Hooks를 만들어 보고자 한다. 내가 발견한 반복되는 코드는 GET api 요청하는 로직이다.주로 api 요청 후 얻어오는 데이터를 사용해서 뷰를 만들어 준다. const [ data, setData ] = useState('');const getData = async () => { try { const res = await axios.get('url 주소'); setData(res); } catch(err) { console.log(err) }};useEffect(() => { getData();}, []);위의 코드처럼 ..