Study

[React_study] 터미널 / 브라우저 콘솔창에 warning

* 터미널 / 브라우저 콘솔창에 warning이 뜨는 이유 개발을 하다보면 에러메세지는 터미널 혹은 브라우저 개발자도구에서 확인이 된다. 간혹 노란색의 waining 메세지가 등장하는 경우가 있다. 해당 warning는 무시하고 넘어가도 된다. (빨간 error은 해결해야한다.) 대부분 Eslint에서 잘못된 코딩관습을 교정해주고 있어서 warning를 띄워주고있다. ex) 000변수를 만들었는데 사용하지 않고 있습니다. 삭제하는게 어떤가요. 개발하다보면 에러메세지는 터미널이나 브라우저 개발자도구에 뜬다고 했는데 간혹 노란색 warning 메세지가 등장하는 경우가 있습니다. 빨간 error는 해결해야하지만 warning은 개무시해도 됩니다. /*eslint-disable*/ 이라는 주석을 js 파일 최상..

[React_study] reset css 하는 방법 + npm으로 설치

* reset css를 하는 이유 브라우저마다 태그를 렌더링하는 기본 스타일이 다르고, 기본 padding,margin값들 이 적용되어 있는 부분을 초기화 하기위해 style 기본값을 0으로 만들고 list,a태그에 기본적으로 적용된 스타일들의 초기화를 위해 reset css를 해준다. [결론적으로는] 크로스 브라우징을 위해 브라우저마다 다른 기본값들에 대한 차이를 없애는것이다 * 기존에 사용하던 방법 ( css 파일 추가 ) https://meyerweb.com/eric/tools/css/reset/index.html 가장 많이 사용 하는 Reset css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public..

[JavaScript][clean-code] 클로저 (Closure)

* Closure (클로저) [참고 내용] https://latte1114.tistory.com/298 https://latte1114.tistory.com/365 * 클로저 예시 코드 function add(num1) { return function sum(num2) { return num1 + num2; }; } const addOne = add(1); console.log(addOne(3)) // 4 // 1을 넘긴상태로 scope가 기억되기 때문에 4가 호출된다. 클로저를 사용한 함수를 보면 괄호가 2개이다. 괄호가 모두 호출되면 완벽히 함수가 다 호출되고 종료된다. 그말은 즉, 괄호를 한번 실행했기 때문에 add라는 함수는 외부함수만 실행이 된거고 실행된 상태에서 내부의 함수의 환경을 기억하고 ..

[JavaScript][clean-code] 순수 함수(pure function)

* 순수 함수(pure function) - 부작용(side effect)을 일으키지 않는 함수 * 부작용 (side effect) list Logging a value to the console Saving a file Setting an async timer Making an AJAX HTTP request Modifying some state that exists outside of a function, or mutating arguments to a function Generating random numbers or unique random IDs (such as Math.random() or Date.now()) * 순수 함수가 아닌 예시 (BAD) let num1 = 10; let num2 =..

[JavaScript][clean-code] Callback Function

* Callback Function - callback function을 이용한 함수 위임 * callback function 사용하기 전 // callback함수 사용전 function register() { const isConfirm = confirm( '회원가입에 성공했습니다.', ); if (isConfirm) { redirectUserInfoPage(); } } function login() { const isConfirm = confirm( '로그인에 성공했습니다.', ); if (isConfirm) { redirectIndexPage(); } } * callback function 사용후 // callback 사용후 function confirmModal(message, cbFunc) { ..

[React_study] Redux state가 object/array일 경우 변경 방법

* store에 저장된 state가 array, object 자료인 경우 Immer.js 라이브러리가 state사본을 하나 더 생성해주어서 직접 수정하는 문법도 잘 변경 된다. (Redux를 설치하면서 Immer.js라이브러리가 같이 설치되었다.) array/object자료의 경우 state변경을 state를 직접 수정해버려도 잘 된다. (참고) 그래서 state를 만들 때 문자나 숫자 하나만 필요해도 redux에서는 일부러 object아니면 array에 담는 경우가 있다. 수정이 편리하기 때문에 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ stat..