bloomCode

getGroupMemberFetch함수는 api 요청을 통해 가져온 결과를 바로 setState를 통해 상태를 업데이트한다 해당 함수를 useEffect내에서 함수 호출을 통해 사용하니 무한렌더링이 발생해 터미널이 요동치기 시작했다. 일단 문제가 발생하는 순서의 원인은 이렇다. getGroupMemberFetch 함수 내에서 setUserGroups를 호출하여 userGroups 상태를 업데이트. userGroups가 의존성 배열에 포함되어 있기 때문에 상태가 업데이트되면 useEffect가 다시 실행. 다시 실행된 useEffect에서 getGroupMemberFetch 함수를 호출하게 되고, 이로 인해 다시 setUserGroups가 호출되어 상태가 업데이트. 상태가 업데이트되면 다시 useEffec..

또 어느새 2주가 지난 클린코드 프리온보딩 챌린지도 끝이 났다. 정말 시간이 지날수록 강의질이 점점 높아지길래 놀랬다.. 오늘은 리액트의 코드를 보며 문제상황에 대해 얘기해보는 시간을 가졌다. 정말 유료강의 같은 무료강의였다. 오늘도 주요한 부분들 위주로 정리해 보려 한다. 플래그 값 요즘 영화나 드라마를 보면 인물들이 대사로 복선을 만들어 죽는 장면이 나오는 걸 "사망 플래그"라는 말을 자주 하는데 여기서 나오는 플래그 클리셰의 하위 개념으로 복선을 의미한다고 함! 아무튼 이것을 프로그래밍에서는 올라가고 내려가는 깃발의 형태에서 유래했다고 한다. 리액트에서 사용되는 플래그 값 코드이다! (내가 많이 사용하는 코드이기도 하다) 강의에서는 이러한 값들은 리액트에서도 지양하고 권장하지 않는다고 한다?.. 그..

프리온보딩 프론트 챌린지 2주 중에 벌써 2번째 주 3번째 시간을 듣게 되었다. 이번시간에는 클린코드에 대해 멘탈 코어?에 대한 애기와 자바스크립트에 대해 얘기해주셨다. 이번에도 저번 2회 차처럼 몇몇 키워드를 골라서 정리해 보았다. 은총알은 없다 한 번에 완벽한 해결책은 없다는 의미. 내가 개발공부를 시작하며 들었던 말 중 가장 인상 깊게 들었던 말 중 하나인 No sliver bullet(은총알은 없다)라는 말을 해주셨다. https://www.facebook.com/baekjun.lim/posts/pfbid02gkEw9LwzAvXsLG77iTBkKBLNUU73wacXLcyitvJcqh71eYU4DeLMFdjK b5QmQf8zl "내 사수는 개발자의 신이라 모든 문제를 해결해 주실 거다", "테스트 ..

이번시간은 저번 클리코드 맛보기?에 이어 좀더 딥하게 클린코드에 대해 딮하게 생각해보는 시간이였다. Tab vs Space 강사님의 추천으로는 물리적으로는 Tab 누르지만 소프트웨어에서는 Space로 인식하도록 설정하는 편이라고 한다. 세미콜론 있냐 vs 세미콜론 없냐 세미콜론 있는 것이 좋으며 Eslint와 Formater에게 모든것을 위임한다고한다.(코드 컨밴선등을 따라야할 듯) count++; vs count += 1; vs count = count + 1; 이 문제는 내가 좋아하는 문제인데 멘토님께서는 세번째로 사용하는 것을 권장하신다고 하셨다. count++ 이 후임연산자의 문제에 대해서는 정리했던 적이 있었다. 후임연산자를 사용할수 록 그 값에 대해 예측하기 힘들어지고 멘토님께서는 생각보다 개..

원티드에서 제공해 주는 11월 무료 강의를 신청해서 또 듣게 되었다. 이번 주제는 클리 코드를 주제로 진행되었는데저번 로그인 주제보다는 굉장히 여유롭게? 거의 실습 없이 진행되는 것 같았다. 클린코드?!클린코드 말 그대로 깨끗한 코드를 의미하는데 그럼 깨끗한 코드는 어떠한 것일까? 에 질문에는 구체적으로 정하기 어려운 느낌이었다. 회사나 환경에 따라 달라질 수 도 있고 사람마다 클린코드에 대한 생각이 다를 수 있다!내가 생각하는 클린코드는 가독성? 다른 사람이 내가 작성한 코드를 나에게 물어보지 않고 그 코드에 의미와기능을 한 번에 이해할 수 있다면정말 클린 한 코드이지 않을까? 생각한다.강의에서는 클린코드가 중요하긴 하지만 클린코드를 따지지만 정작 출시일 지키지 못한다면?깔끔한 코드 따지고 코드 리뷰는..

이번에 우아한 테크 자바스크립트 메모리 관리 부분에 대해 영상을 보고 정리를 하게 되었다. 우아한 테크: https://www.youtube.com/watch?v=1BoJZqxFYfQ MDN 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_management 메모리 생명 주기 메모리 할당 변수, 함수 객체 등을 만들 때 메모리를 할당 메모리 사용 변수를 읽거나 할당된 메모리를 사용 메모리 해제 더 이상 필요가 없어지면 메모리에서 해제 다른 C언어와 같은 저수준에 언어에서는 동적으로 메모리를 관리하지만 자바스크립트에서는 엔진이 모두 처리해 줌! (개발자가 직접 메모리 관리 불가!) 힙과 스택 원시값 : number, boolean, st..

이번 시간은 챌린지 마지막 시간으로 실습시간을 많이 가졌다. 마지막에 OAuth에 조금 다루고 끝이 났다. 서버와 클라이언트에서의 역할은 무엇인가? 로 강의를 시작을 하였는데 만약 서버에서 벨리데이션? 유저를 검증하는 검사를 하지않고 클라이언트에서만 로그인 시 유효성 검사, 특수문자나 유저를 확인하는 절차를 진행한다면 분명히 문제가 생길 것이기 때문에 클라이언트뿐만 아니라 서버에서도 벨리데이션, 검증 절차를 꼭 실행시켜야 한다고 말씀해주셨다.또한 권한 따른 본인 자원에만 접근 가능하도록 하며 권한에 따른 페이지 이동이나 적절한 자원에 접근하도록 해야한다. (저번 시간에 다루었던 일반 유저가 관리페이지 접근시 404, 403을 뱉도록?) 실습 시간에는 저번시간과 비슷하게 진행되었다. 클라이언트와 서버를 동..

오늘 프리온보딩 FE 주제는 세션이었다. 세션이란 무엇인가? 데이터 저장 방식? 통신 프로토콜? 인증 방법론 암호화 방식? jwt토큰 때 얘기했을 때처럼 애플리케이션에서 사용자의 정보를 필요로 하는 기능에서 사용자인지 , 사용자의 정보를 확인하기 위해 사용했듯이 세션도 똑같은 느낌이다 로그인에서 세션이란? 사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 기간 세션 방식 로그인? 사용자 로그인이 유효한 시간 동안 서버에 세션 아이디를 기록해 두고 인증에 사용하는 방식 네트워크? 부문에서 세션이란? 영구적이고 상호작용적인 정보 교환을 전제하는 둘 이상의 통신 장치나 컴퓨터와 사용자 간의 대화나 송수신 연결상태를 의미하는 보안적인 다이얼로그(dialogue) 및 시간대를 가리킨다 즉 클라이언트와 서버 간..

면접 질문 공부를 하다 유튜브에 TCP와 UDP에 대해 우아한 테크쇼 영상에 잘 정리되어 있어서 기록으로 남겨본다! https://www.youtube.com/watch?v=ikDVGYp5dhg&t=475s 트랜스포트 계층 TransPortLayer(계층) EndPoint 간 신뢰성 있는 데이터 전송을 담당하는 계층 애플리케이션 계층과 네트워크 계층 사이에 존재하는 네트워크 구조의 핵심역할을 하는 계층 서로 다른 호스트에서 동작하는 애플리케이션 프로세스 간의 논리적 통신을 제공한다. 트랜스포트 계층의 프로토콜은 종단 시스템에서만 구현된다.컴퓨터나 스마트폰 등등에서 구현됨? 트랜스포트 계층이 없다면 Flow흐름 문제와 Congestion혼잡문제 등이 발생할 수 있다고 함 Flow 흐름 문제는 수송자 간의 ..

원티드 프리온보딩 2일 차 강의는 JWT를 주제로 강의가 진행되었다. 일단 저번 시간에 로그인에 대해서 얘기를 해보았는데 https://zoon-bloom.tistory.com/133 프리온보딩 FE 로그인(1) 이번에 원티드 이벤트를 통해서 프리온보딩 FE 챌린지에 참여하게 되었는데 주제는 로그인 구현에 대한 내용이었다. 오늘은 첫 시간으로 로그인의 정의와 구조에 대해 설명을 들었는데 직접 mock zoon-bloom.tistory.com 로그인에서는 주로 token을 사용하게 되는데 로그인 후에 사용자에게 token이란 것을 부여해서 마치 입장권을 주어 이후에 물건을 사거나, 저장하거나 하는 등의 행동들의 해당 사용자가 맞는지 확인하기 위해서이다. 토큰의 인증 절차는 다음과 같다고 함! 요청: 사용자..