bloomCode

이번에 원티드 이벤트를 통해서 프리온보딩 FE 챌린지에 참여하게 되었는데 주제는 로그인 구현에 대한 내용이었다. 오늘은 첫 시간으로 로그인의 정의와 구조에 대해 설명을 들었는데 직접 mockAPI를 만들어 보며 실습하는 시간도 가지며 생각보다 난도 높고 실제 현업에서 사용되는 로그인기능의 코드 구조? 흐름에 대해 설명해 주시는 것 같았다. 로그인이란!? 시스템에 접근하기 위해 사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차! 강의를 들으며 새롭게 알게 된 것은 사용자의 권한에 따라서 해당 페이지가 존재하더라도 사용자에게 404 에러를 보내줌으로써 사용자가 해당 페이지의 존재 자체를 확인할 수 없게 구현해야 한다는 것을 처음 알게 되었다..404를 보내주지 않게 ..

저번에 useEffect는 어떻게 최신 상태를 읽을 수 있을까? 의 정리로 useEffect 내에서 동작하는 함수는 렌더링마다 고유한 함수이며 그 이펙트 렌더링상태의 고유한 state와 props를 보게 되는 것!이라고 하였다.(이펙트는 렌더링 결과의 일부는 아님!) https://zoon-bloom.tistory.com/130 이번에는 클리업에 대해 읽어보았는데 일단 클린업의 사용법은 다음과 같다. 클린업은 보통 컴포넌트가 원마운트되었을 때 이벤트를 제거하기 위해 사용하는 것으로 알고 있었다. 하지만! 가이드에서는 클린업이 리랜더링 되기 전에 실행되고 이전의 상태를 “보고”, 그다음 새 이펙트가 리랜더링 이후 실행되기 때문에 새로운 상태를 “본다고” 생각할 수 있지만. 이 멘탈 모델은 클래스의 라이프사..

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이라고 한다 실행 컨텍 컨텍스트는 4가지 타입으로 구분된다. 1.전역코드 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 하며 var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 한다. 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다. 2.함수 코드 함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리해야 한다. 그리고 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야 하며 이를 위해 함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다. 3. eval 코드 e..

https://zoon-bloom.tistory.com/129 리액트 useEffect 완벽가이드 props와 state 리액트의 함수형 컴포넌트를 사용 시에 꼭 사용하게 되는 useEffect에 대해서 글을 읽다 정리한 내용이 없어 천천히 다시 공부하며 정리할려고 한다. useEffect의 대해서는에 화면에 렌더링이 완료된 zoon-bloom.tistory.com 저번에 useEffect완벽가이드의 상태값은 변경될 때마다 각각의 랜더링에서 함수 안의 있는 고유한 값(상수)이며 컴포넌트는그 값을 볼 뿐이라고 하였다. 그럼 useEffect 훅 안에서는 어떻게 state의 최신 상태를 알 수 있을까? useEffect(() => { document.title = `You clicked ${count} ti..

리액트의 함수형 컴포넌트를 사용 시에 꼭 사용하게 되는 useEffect에 대해서 글을 읽다 정리한 내용이 없어 천천히 다시 공부하며 정리할려고 한다. useEffect의 대해서는에 화면에 렌더링이 완료된 후에 수행 전달된 함수를 수행하며 의존성 배열을 통해 특정 상황에 맞게 수행하도록 할 수 있다는 정도로 알고 있었다. https://ko.legacy.reactjs.org/docs/hooks-reference.html#useeffect Hooks API Reference – React A JavaScript library for building user interfaces ko.legacy.reactjs.org https://overreacted.io/ko/a-complete-guide-to-useef..

React 프로젝트에서 잘 실행되었던 mongoDB 연결이 갑자기 오류가 발생했다. chatGPT 달려가 오류 해결 방안 좀 알려 달라 했지만 대충 해드렸습니다를 시전했다.. 그래도 힌트로 DNS 오류라는 것을 명시해 주어서 mongoDB 쪽 권한 문제나내 네트워크 문제라는 것을 인지 할 수 있었다. 구글링을 통해 바로 해결! 와이파이 고급설정에서 8.8.8.8 DNS 서버를 입력해 주면 해결할 수 있었다. https://stackoverflow.com/questions/54484673/error-querysrv-enodata-mongodb-tcp-blog-cluster-0hb5z-mongodb-n et-at-queryreq

useEffect 내에서 비동기 적으로 api 호출을 하다 useEffect 내에서 바로 async와 await을 호출을 권장하지 않는다 하여 정리하게 되었다 다음과 같이 useEffet 내에서 async와 await을 사용하면 에러가 발생한다. Argument of type '() => Promise ' is not assignable to parameter of type 'EffectCallback'. Type 'Promise ' is not assignable to type 'void | Destructor'. 즉 React에서의 useEffect 사용권장 방식은 void를 반환하도록, return 값이 없도록? 구현해야 하는 것 같았다. 다른 블로그에서는 useEffect Hook은 아무것도 반환..

리액트에 제어 컴포넌트와 비제어 컴포넌트를 공부하면서 제어 컴포넌트에서는 useState의 set을 사용해서 특정 값을 변경하기 때문에 렌더링에 문제가 발생할 수 있지만 비제어 컴포넌트에서는 ref를 사용하여 불필요한 렌더링을 방직할 수 있다고 배웠다. ( react-hooks-input 라이브러리는 비제어 컴포넌트 방식을 사용하여 불필요한 렌더링을 방지) 그래서 리액트 공식문서에 있는 ref와 DOM 부분에 대해서 공부해 보았다. https://reactjs-kr.firebaseapp.com/docs/refs-and-the-dom.html Refs and the DOM – React A JavaScript library for building user interfaces legacy.reactjs.or..

그룹에 멤버끼리 더치페이할 때 사용할 수 있는 웹을 만들어보는 강의를 들으며 TDD 방식으로 코드를 짜보고 있다! TDD는 테스트 주도 개발을 뜻하고 테스트코드를 작성하며 개발하는 것을 뜻하는데 먼저 실패하는 테스트 코드를 작성한 후 그 실패한 테스트 코드를 통과, 성공시키기 위해 코드를 또 작성한다. 그 다음 리펙토링을 하면서 수정을 하는 것이 기본적인 순서인 것 같다! https://zoon-bloom.tistory.com/122 TDD 테스트 주도 개발 리액트를 통해 프로젝트를 생성하게 되면 따라오는 jsest와 테스트 코드 파일을 보고 사용 방법과 왜 사용하는지에 대해 항상 의문이었는데 테스트 코드에 대해 처음부터 알아보려고 한다! 강의 zoon-bloom.tistory.com ./src/comp..

react-hook-form을 왜 써야 할까에 대해 찾아보며 공부하다 들어보았던 제어 컴포넌트와 비제어 컴포넌트라는 키워드를 찾아 정리해 보기로 했다. 리액트 공식 링크: https://ko.legacy.reactjs.org/docs/forms.html#controlled-components 폼 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 예시로 다음과 같이 input에서 사용자가 텍스트를 입력 시 setName함수가 사용되는 것을 볼 수 있다. input을 렌더링 하는 React 컴포넌트는 사용자의 입력값을 제어하게 되므로 해당 컴포넌트는 제어 컴포넌트가 되는 것 같다! export const Create..