min

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..

오늘은 2시에 김태선 튜터님 께서 연봉 1억 받는 개발자 되는 방법이라는 제목의 강의 들었다. 이 강의에서 가장 중요한 키워드는 메타인지였다. 나는 이 말을 듣고 내 학창 시절이 생각 났다. 잠깐 나의 대한 TMI를 말하자면 나는 중학교까지 정말 노는 사람이었다. 왜 그랬는지 생각해보면 그때 나는 목표가 없었고 그로 인해서 내가 삶을 이어나가는 원동력이 없었던 거 같다. 그러다가 고등학생이 되기 전에 컴퓨터와 접점이 생겼고 그로 인해서 나에게는 컴퓨터와 관련된 직종으로 가야 겠다는 목표가 생겼다. 하지만 목표를 늦게 얻은 나는 앞으로 공부 방향은 어떻게 잡고 공부 방법을 어떻게 잡아야 하는지에 대해서 정말 막막했다. 그러면서 어떻게 공부를 하면 잘할 수 있는지 정말 많은 연구를 했었던 거 같고 그러면서 ..

1. XSS XSS는 (Cross-Site-Scripting)이라는 글자의 약자로 클라이언트 사이드 공격이다. 이때 이말을 듣고 클라이언트 사이드 공격이 무엇인지 궁금해하시는 분들이 있을 것이다. 클라이언트 사이드 공격은 웹 페이지에 이용자를 대상으로 공격하는 기법을 의미한다. 즉 XSS는 사용자 정보(쿠키, 세션, 토큰), 클라이언트 입장에서의 의도치 않은 공격 등이 있다. 그렇다면 실제 예시로는 어떤 것이 있을까? 1-1) stored / persistent 이름을 보면 정말 복잡해 보이지만 사실은 엄청 간단하다. 예를 들어 input 창이 있다고 가정하자! 이때 input창에서 데이터를 입력하면 입력한 데이터가 폼을 통해서 서버로 이동할 것이고 리소스에 저장될 것이다. 근데 여기서 만약 input ..