SimCoding

* useCallback 하는일 > 함수를 memoization한다. > 의존값이 바뀌었을 때만 함수를 생성하고, 값이 바뀌지 않았다면 함수를 생성하지 않는다. > 의존값이 바뀌지 않았을 경우, 이전에 저장해둔 함수를 사용한다. * useCallback 를 사용하는 이유와 주의점 > 사용이유 : 렌더링시에 불필요한 함수생성을 막아줌으로써, 성능을 최적화 해준다. > 주의점 : meoization과정 자체에서 리소스가 발생하므로, 부적절하게 사용할 경우 오히려 성능을 악화시킬 수 있다. * useCallback 예시코드 // const memoizedCallback = useCallback(callback(), [depth]); // 의존값을 depth에 넣어준다. const add = useCallbac..

[React] useMemo 사용이유와 코드예시 * useMemo 가 하는일 > 연산결과를 memoization한다. > 의존값이 바뀌었을 때만 연산을 실행하고, 값이 바뀌지 않았다면 연산을 실행하지 않는다. > 의존값이 바뀌지 않았을 경우, 이전에 저장해둔 값을 사용한다. * useMemo 를 사용하는 이유와 주의점 > 사용이유 : 렌더링시에 불필요한 계산을 막아줌으로써, 성능을 최적화 해준다. > 주의점 : meoization과정 자체에서 리소스가 발생하므로, 부적절하게 사용할 경우 오히려 성능을 악화시킬 수 있다. * useMemo 예시코드 // useMemo(callback,[depth]) 의존값을 depth에 넣어준다. // depth의 값이 바뀔때 마다, 이전에 캐싱된값과 비교해 값이 다를경우..

[Redux] reducer에서 immer를 이용한 불변성관리 예시코드. 리덕스에서 새로운 state를 반환해주기 위한 함수로 reducer를 사용한다. reducer에서는 한가지 지켜줘야하는 것이 있는데, 바로 불변성이다. 불변성을 지키기 위해서는 이전상태를 변경하지 않고, 이전 상태를 참조해 새로운 상태를 반환해 줘야된다. 이때, 주로 얕은 복사를 이용한다. 얕은 복사를 이용해서 충분히 불변성을 유지할 수 있지만, depth가 깊어질수록 코드가 길어지고 가독성이 떨어지는 문제가 발생한다. 이를 해결하기 위해 등장한 것이 immer이다. 예시 코드를 통해 immer를 이용해 불변성 관리하는 방법을 확인해보자. @ immer const { produce } = require('immer'); const ..

HTTP 상태(응답) 코드정리 , ERROR CODE정리 개발을 하다보면 매일 접하게 되는 것 중 하나가 상태코드가 아닌가 싶다. 프로젝트를 진행하면서 상태코드의 의미를 알고 있으면, 예외처리를 수월하게 할 수 있다는 것을 배웠다. 그래서 이번에는 HTTP상태코드가 무엇을 의미하는지 정리해 보려고 한다. 상태코드 정리 1-1. 1xx informational response(조건부 응답) 전송 프로토콜 수준의 정보 교환 100 Continue(계속) 이 임시적인 응답은 지금까지의 상태가 괜찮으며 클라이언트가 계속해서 요청을 하거나 이미 요청을 완료한 경우에는 무시해도 되는 것을 알려준다. 101 Switching Protocol(프로토콜 전환) 이 코드는 클라이언트가 보낸 Upgrade 요청 헤더에 대한..

1. Catch문에서 Error Status Code 받는 방법 catch(error => console.log(error)) // 단순 string만 반환된다. Error: Request failed with status code 422 at createError (app.js:6765) at settle (app.js:29489) at XMLHttpRequest.handleLoad (app.js:6600) catch(error => console.log(error.response)) // return된 object를 반환된다. {data: 'Unauthorized', status: 401, statusText: 'Unauthorized', headers: {…}, config:

1. 프로젝트를 시작하면서 부트캠프에서 2달 정도 교육을 받고 첫 번째 팀프로젝트를 진행하게 되었다. 프론트엔드는 바닐라JS , 백엔드는 EXPRESS를 활용해 2주간 자유주제로 웹페이지를 제작하는 프로젝트였다. 처음하는 팀프로젝트... ! 너무 기대가 됐다😊 2. 주제 선정 및 기획 학원측에서 팀을 매칭해 주었고, 프로젝트 기간 첫 주차에는 주제 선정 및 초기기획을 하게 되었다. 이전부터 만들어 보고 싶었던 웹사이트가 있었던 나는, 팀원들에게 내 생각을 어필했고 !! 투표를 통해 내 아이디어가 채택되었다. 그렇게 메타버스공유 플랫폼인 METABOOK프로젝트를 시작하게 되었다. 이전에 생각해두었던 기획에 팀원들의 의견을 받아 초기기획을 완성했고, 피그마를 활용해 와이어프레임을 제작했다. 3. 프로젝트 소..

나의 첫번째 개인프로젝트 이야기 1. 프로젝트를 시작하게 된 계기 현재 나는 게더타운 커뮤니티를 운영하고 있으며, 게더타운은 나의 가장 큰 관심사중 하나이다. 프로젝트이름은 커뮤니티 이름을 따서 KorgatherShop으로 짓게 되었다. 개발공부를 처음 시작하면서, 가장 처음 해보고 싶었던 것 중 하나가 게더타운에서 제공해주는 API를 활용해보는 것이었다. 드디어 최근에 부트캠프과정에서 Axios를 이용해 서버와 통신하는 법을 배웠고, 빨리 이걸 게더타운에 적용해보고 싶었다. 그렇게 나는 곧 바로 이 프로젝트를 시작하게 됐다 ! 2. API를 활용해 구현한 기능(1) - 맵파일 추출 및 적용 게더타운에서 제공해주는 API로 GET을 이용해 맵정보를 얻어 올 수 있고, POST를 이용해 맵정보를 바꿔줄 수..

[Redux] 리덕스 미들웨어 만드는 방법 간단한 미들웨어를 만드는 코드예시이다. 예시를 통해 Redux middleware 만드는 방법과 적용방법을 확인 할 수 있다. @ LoggingMiddleware // redux에서 middleware는 3단 함수로 만들어 주어야 한다. // dispatch 함수 이전에 console을 찍어 간단한 로깅미들웨어를 만들수 있다. const LoggingMiddleware = (store) => (dispatch) => (action) => { // 기능 추가 : dispatch 이전 console.log("로깅", action); dispatch(action); // 기능 추가 : dispatch 이후 }; @ ThunkMiddleware // thunkMiddl..