목록2023/07 (23)
min
오늘은 2주차 과제에 대한 클린 코드로 리펙터링을 하는 시간을 거쳤다. 이렇게 클린 코드를 작성하게 된 이유는 디자이너 즉 혜경님이 디자인을 바꾸자 , 어떤 요소를 수정해줘라 등 변화가 많이 일어나는 때마다 그 변화에 유연하게 대처하는 코드를 작성하지 못한다는 문제점이 있었다. 그 분만 아니라 항해 99에서 태현님께서 클린코드를 작성하는 방법에 대해서 올려주셔서 더욱더 클린 코드가 무엇인지를 연구해보는 시간이었다. 그래서 오늘은 메니저님께 물어본 클린 코드와 이를 작성하는 기준에 대해서 조금 살펴보려고 한다. 1. components 도대체 어떻 기준으로 나누지? components를 나누는 기준과 관련해서 정말 많은 사람들이 헷갈리는 경우가 많다.(이 글을 쓰는 저자도 그랬다...). 컴포넌트를 나누는..
1. 미들웨어 넌 도대체 머니? : 미들웨어는 중간다리 역할을 뜻한다. 즉 자세히 말하기 위해서 다음과 같은 예시가 있다고 하겠다. 액션 -> 리듀서 -> 스토어 이런 플로우를 가지고 redux의 상태관리가 진행된다고 하자. 여기서 미들웨어는 액션과 리듀서 사이에서 중간 다리로 액션에서 바로 리듀서를 거치지 않고 미들웨어에서 한번 중간 작업을 거치고 리듀서로 액션을 보내주는 역할을 의미한다.자 이제 미들웨어에 대해서 알게되었으니 그럼이제 redux 미들웨어를 언제 쓰는 지 살펴보자. 2. redux 미들웨어 그래서 언제 쓰는 데? : redux 미들웨어는 내가 액션을 리듀서로 보내기 전에 어떤 작업을 하고 싶을 때 사용한다. 그러면 어떤 작업은 어떤 것들이 있을까? 대표적인 예시로는 비동기 작업이다. 즉..
이번 주는 우리 팀원들 중에 정백님과 많이 친해지는 시간을 가졌다. 그 뿐만 아니라 혜경님과 함께 리엑트 2주차 과제를 하면서 정말 많이 배운 주였다. 기억에 남는 것은 redux의 불변성 유지, 리엑트 성능 최적화, 리엑트 리렌더링 과정, ui,ux편의, flex와 grid등 정말 많은 것을 배운거 같다. 특히 redux의 불변성 유지와 리엑트 리렌더링 과정에서 정말 많은 시행 착오들이 있었다.예를 들어 렌더링 되면 안되는 것들이 리렌더링 되거나 redux에 불변성 관리를 안해줘서 데이터가 업데이트 되지 않는다던가 flex shrink, flex grow등을 통해서 반응형 디자인을 만들다던가 정말 많은 것들을 이번주에는 했던 것 같다. 그리고 이를 블로그에 녹여내서 정말 좋은 주였다. 앞으로 다음주에는..
오늘은 팀원들과 함께 검색창 기능을 구현하는 시간을 가졌다. 그래서 오늘은 내가 검색창 기능을 구현하면서 어려웠거나 헷깔렸던 부분들에 대해서 설명하려고 한다. 1. state 정말 어렵다... : 오늘 검색창 기능을 구현하면서 정말 헷깔렸던 부분은 state와 리엑트 리렌더링이었다. state와 리엑트 리렌더링에 대해서 블로그에 글을 남겨도 백문이 불여일견이라고 직접 해보는 것이 정말 중요하다는 것을 깨달았다. 어떤 부분이 어려웠는지 구체적으로 살펴보겠다. const MainPage = () => { // 해더에서 selectBox 데이터 바뀔때마다 전체 화면 다시 리렌더링 const [article, setArticle] = useState("web"); const onChangeHandler = (e..
1. axios instance 도대체 왜 쓰는 거야? : axios instance를 쓰는 가장 큰 이유는 유지보수 때문이다. 그럼 여기서 드는 의문은 왜 유지보수 측면에서 axios instance를 쓰면 좋은지 이다. 이 이유를 설명하기 위해서 다음과 같은 예시가 있다고 하자 axios.get("https://localhost:3000") 이 코드를 보면 localhost 3000포트에 get 요청을 하는 것을 알 수 있다. 근데 만약에 통신을 300번 해야해서 저 코드가 300개 있다고 하자. 근데 만약에 저 localhost 3000포트가 3001포트로 바뀌면 어떻게 하나? 방법은 300개의 주소를 다 바꾸는 것이다. 여기서 우리는 유지보수가 떨어진다는 것을 알 수 있다. 그래서 이를 막기 위해..
1. json-server 도대체 너는 누구야?! : json-server 말 그대로 json으로 이루어진 서버를 의미한다. 하지만 이렇게 집고 넘어간다면 이 글을 읽는 독자 입장에서는 크게 도움이 되지 않을 것이다. 그래서 좀 더 자세히 설명하자면 이 때 server는 API 서버, DB 서버를 의미한다. 즉 API를 보내주거나 DB처럼 데이터를 저장할 때 사용하는 패키지다 2. json-server 그래서 왜 쓰는 거야?! : json-server에 대한 정의를 보았을 때는 이런 의문이 들었을 것이다. 이미 백엔드에서 API와 DB를 제공해주는데 구지 json-server를 쓰는 걸까?. 이 의문이 json-server를 사용하는데 필요한 핵심적인 키다. json-server를 사용하는 이유는 다음과..
1. Redux https://minprogramming.tistory.com/entry/redux%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC redux에 대하여... 오늘 나는 MVVM,FLUX에 대하여 다뤄보는 시간을 가졌다. 오늘 나는 MVVM,FLUX에 관점에서 redux를 어떻게 구현하는 지 살펴보도록 하겠다. 구체적으로 나는 MVVM,FLUX에서도 FLUX에 관점에서 리덕스를 설명 minprogramming.tistory.com https://minprogramming.tistory.com/entry/MVVM%EA%B3%BC-FLUX%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC MVVM과 FLUX에 대하여... 오늘 나는 cs 스터디로 MVVM과 F..