삐옹

오늘 할 일 - 리액트 공문 번역 3번째 페이지 - Updating Array in state까지 읽고 이후 필요한 부분 추가 공부(아마도 state) - 프로젝트 setting, home 페이지 데이터 구조 짜서 mvp 만들기 오늘은 오후에 일정이 있으니 다 해놓고 (늦게)자자

- v18 리액트 페이지 번역 2페이지 째. 시간이 조금 걸리지만 공부하면서 하기 참 좋다. 원문해석이 어려운 사람들이 보고 도움이 되면 좋겠다. (https://github.com/vennydev/react-translation-kr-) - 프로그래머스 문제풀이를 했다. day25까지 계획표에 있는데 1일차, 2일차를 다 해버렸다. 왜냐 처음은 무척 쉽기때문이다. - 만들고 있는 프젝에 상태관리 라이브러리를 뭘 쓸까하다가 redux, recoil은 써봤고(여전히 허접하게), zustand라는 새로운 상태관리 라이브러리가 있다길래 써보았는데 정말 쉽고 편하다

리액트 공문 내용 정리 State: A Component's Memory 파트 useState return two items which are state and setter function => one is state variable, the other is setter function which can update the state variable and trigger react to render the component again. And trigger again and again with same phase. “Hook” is special function that is only available while react is rendering starting with “use” State is pri..

지금 뭐함 광진도서관에 와봤다. 살면서 와본 도서관 중 경치, 시설, 분위기가 압도적으로 좋다. 오늘 뭐함 - 리액공홈 2. adding interactivity 까지 끝내기 - 토이프젝 기획안 수정하기 => 저번주에 디자이너로 일하는 누나에게 기획안을 보여줬는데 얘기하다보니 내가 만드려는 토이프젝이 웹어플리케이션에서는 어울리지 않는다는 사실을 알았다

한동안 시간이 없단 핑계로 못 썼는데 다시 시작. 3개월 간 뷰만 쓰다가 다시 리액트로 돌아왔다. 공식문서를 좌악좌악 읽어가보자. 오늘 뭘 배웠냐면, state 끌어올리기 같은 값이 필요한 컴포넌트 간에 가장 가까운 부모 컴포넌트를 찾아 state를 끌어올리자. state값이나 관련 메서드들을 한 곳에서 관리하니 디버깅을 하거나 어떤 추가 로직을 구현하기도 편할 것 같다. react 에서의 합성과 상속 UI를 재사용해야할 때는 합성을 사용하는것이 유리하고, 기능을 재사용해야 할때는 JS모듈로 분리하는게 좋다. 컴포넌트에서 해당 함수, 객체, 클래스 등을 import 하여 상속대신 사용할 수 있다. React로 사고하기(5단계) 계층 구조 파악 정적으로 만들기(상호작용없는 상태) state 로 만들어야 할..

WebSocket WebSocket은 서버와 클라이언트 간에 효율적인 양방향 통신을 하기 위한 프로토콜입니다. 웹 소켓이 나오기전에는 클라이언트 측에서의 요청이 없으면, 서버로부터 응답을 받을 수 없는 구조였습니다. 하지만 웹 소켓을 이용하면 하나의 http 접속만으로도 서버와 양방향으로 데이터를 주고 받을 수 있습니다. 그래서 새로고침이나 새로운 페이지로의 이동이 없이도 새로운 데이터를 받을 수 있습니다. 문제점 1. http와는 달리 stateful Protocol 이기때문에 서버와 클라 간 연결이 비정상적으로 끊어졌을 때를 대비해 코드를 쨔야하기때문에 복잡해질 수 있음. 2. socket연결을 유지하는 것 자체가 비용이 든다 - 특히 트래픽 양이 많은 서버 같은 경우엔 CPU에 큰 부담이 갈 수 있..

http와 https 서로 다른 시스템 간에 통신을 주고받게 해주는 가장 기초적인 프로토콜입니다. 그런데 http 프로토콜은 데이터가 암호화되지 않은 방법으로 데이터를 전송하기 떄문에 서버와 클라이언트 간 주고받는 데이터가 쉽게 도난 당할 수 있는 문제점이 있습니다. 그래서 이를 보완한 것이 https입니다. https는 ssl을 사용함으로써 클라이언트와 서버 간 암호화된 연결을 도와주고 도난당하는 것을 막아줍니다. SSL인증서는 데이터를 암호로 바꾸어줍니다. 또한 http에서 https로 전환하게되면 SEO에도 유리합니다. 🙇🏻참고 https://brunch.co.kr/@hyoi0303/10 HTTP와 HTTPS 차이점 디자이너가 개발자와 일 하다 보니 (2) | 지난 2014년 구글에서는 HTTP를 ..

리액트에서 전역 상태 관리는 어떻게 이루어지나요?(redux 기준) 전역 상태를 위해 Redux, Context APi, Mobx, recoil 등의 라이브러리를 이용할 수 있습니다. 그 중 대표적인 redux로 설명을 하자면 컴포넌트에서 액션크리에이터로 액션을 발생시키고 그 액션을 디스패치를 통해 실행시킵니다. 그러면 reducer에서는 해당 액션과 매칭되는 액션이 있는지 확인하고 데이터를 업데이트 시킵니다. 이 모든것을 store라는 하나의 저장소에서 관리합니다 recoil 사용 이유?(*난 recoil을 사용했다) 애플리케이션의 규모가 커질 수록 전달해야 하는 props들이 많아지게 되는데 이 경우 코드가 지저분해지고 상태값 관리가 복잡해져 props-drilling이 일어나게됩니다. 이를 막기위해..

Oauth 2.0의 작동방식 인증을 위한 개방형 표준 프로토콜입니다. 기존에 쿠키, 로컬스토리지, 세션을 이용해 직접적으로 로그인을 구현하는 것 대신 sns로부터 인증을 대신 받아 서버에 엑세스 토큰을 받아 접근권한을 가진 엑세스 토큰을 발급한 뒤 서버가 이를 활용하여 인증하는 방식입니다. 애플리케이션에서 sns에 인증요청을 하면 인가코드를 부여받아 서버가 이를 이용해 sns로부터 사용자의 정보가 담긴 access token을 발급받습니다. 서버에서는 이를 JWT토큰으로 바꿔 앱에 줍니다. ✅추가 예상 질문 JWT토큰? 인증에 필요한 모든 정보들이 암호화되어 있는 토큰이다. Header, Payload, signature로 나누어져있습니다. 사용자는 요청 할 때마다 JWT토큰을 헤더에 실어보냅니다. 🙇🏻..

TeamNote self QA [로그인] - 비로그인 상태의 유저가 라우터에 설정된 경로로 입력 했을 때 처리 [메인] - 첫 워크스페이스 생성 시 dropdown이 내려와있음 [보드] - 할 일을 생성하고 다른 방에 들어가면 전에 생성했던 할 일이 그대로 남아있다 => recoil-persist에 의해 계속 저장되고 있기때문이다 [메시지] - 초대 한 사람 쪽에서 초대된 사람들 목록이 안뜸 / 왔다갔다하니까 또 떴음 / 초대된 사람들은 멤버들 목록이 잘 뜸 - 팀 채팅 기능 x