본문 바로가기

분류 전체보기170

[항해 99 주특기 주차 8일차] 오늘은 팀원들과 함께 검색창 기능을 구현하는 시간을 가졌다. 그래서 오늘은 내가 검색창 기능을 구현하면서 어려웠거나 헷깔렸던 부분들에 대해서 설명하려고 한다. 1. state 정말 어렵다... : 오늘 검색창 기능을 구현하면서 정말 헷깔렸던 부분은 state와 리엑트 리렌더링이었다. state와 리엑트 리렌더링에 대해서 블로그에 글을 남겨도 백문이 불여일견이라고 직접 해보는 것이 정말 중요하다는 것을 깨달았다. 어떤 부분이 어려웠는지 구체적으로 살펴보겠다. const MainPage = () => { // 해더에서 selectBox 데이터 바뀔때마다 전체 화면 다시 리렌더링 const [article, setArticle] = useState("web"); const onChangeHandler = (e.. 2023. 7. 1.
axios instance, interceptor에 대하여... 1. axios instance 도대체 왜 쓰는 거야? : axios instance를 쓰는 가장 큰 이유는 유지보수 때문이다. 그럼 여기서 드는 의문은 왜 유지보수 측면에서 axios instance를 쓰면 좋은지 이다. 이 이유를 설명하기 위해서 다음과 같은 예시가 있다고 하자 axios.get("https://localhost:3000") 이 코드를 보면 localhost 3000포트에 get 요청을 하는 것을 알 수 있다. 근데 만약에 통신을 300번 해야해서 저 코드가 300개 있다고 하자. 근데 만약에 저 localhost 3000포트가 3001포트로 바뀌면 어떻게 하나? 방법은 300개의 주소를 다 바꾸는 것이다. 여기서 우리는 유지보수가 떨어진다는 것을 알 수 있다. 그래서 이를 막기 위해.. 2023. 7. 1.
json-server에 대하여... 1. json-server 도대체 너는 누구야?! : json-server 말 그대로 json으로 이루어진 서버를 의미한다. 하지만 이렇게 집고 넘어간다면 이 글을 읽는 독자 입장에서는 크게 도움이 되지 않을 것이다. 그래서 좀 더 자세히 설명하자면 이 때 server는 API 서버, DB 서버를 의미한다. 즉 API를 보내주거나 DB처럼 데이터를 저장할 때 사용하는 패키지다 2. json-server 그래서 왜 쓰는 거야?! : json-server에 대한 정의를 보았을 때는 이런 의문이 들었을 것이다. 이미 백엔드에서 API와 DB를 제공해주는데 구지 json-server를 쓰는 걸까?. 이 의문이 json-server를 사용하는데 필요한 핵심적인 키다. json-server를 사용하는 이유는 다음과.. 2023. 7. 1.
Redux Toolkit에 대하여... 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.. 2023. 7. 1.
[항해 99 주특기 주차 7일차] 오늘은 2시에 김태선 튜터님 께서 연봉 1억 받는 개발자 되는 방법이라는 제목의 강의 들었다. 이 강의에서 가장 중요한 키워드는 메타인지였다. 나는 이 말을 듣고 내 학창 시절이 생각 났다. 잠깐 나의 대한 TMI를 말하자면 나는 중학교까지 정말 노는 사람이었다. 왜 그랬는지 생각해보면 그때 나는 목표가 없었고 그로 인해서 내가 삶을 이어나가는 원동력이 없었던 거 같다. 그러다가 고등학생이 되기 전에 컴퓨터와 접점이 생겼고 그로 인해서 나에게는 컴퓨터와 관련된 직종으로 가야 겠다는 목표가 생겼다. 하지만 목표를 늦게 얻은 나는 앞으로 공부 방향은 어떻게 잡고 공부 방법을 어떻게 잡아야 하는지에 대해서 정말 막막했다. 그러면서 어떻게 공부를 하면 잘할 수 있는지 정말 많은 연구를 했었던 거 같고 그러면서 .. 2023. 6. 30.
XSS , CSRF에 대하여 ... 1. XSS XSS는 (Cross-Site-Scripting)이라는 글자의 약자로 클라이언트 사이드 공격이다. 이때 이말을 듣고 클라이언트 사이드 공격이 무엇인지 궁금해하시는 분들이 있을 것이다. 클라이언트 사이드 공격은 웹 페이지에 이용자를 대상으로 공격하는 기법을 의미한다. 즉 XSS는 사용자 정보(쿠키, 세션, 토큰), 클라이언트 입장에서의 의도치 않은 공격 등이 있다. 그렇다면 실제 예시로는 어떤 것이 있을까? 1-1) stored / persistent 이름을 보면 정말 복잡해 보이지만 사실은 엄청 간단하다. 예를 들어 input 창이 있다고 가정하자! 이때 input창에서 데이터를 입력하면 입력한 데이터가 폼을 통해서 서버로 이동할 것이고 리소스에 저장될 것이다. 근데 여기서 만약 input .. 2023. 6. 30.

티스토리툴바