728x90 반응형 의문점 해결하기5 react에서 CSS 폴더를 따로 만들었을 때, CSS 코드는 언제 변환될까? react에서 CSS 폴더를 따로 만들어서 각 컴포넌트에 해당하는 css를 렌더링할 때, CSS 코드를 변환하는 과정은 언제 발생할까? 위와 같은 경우에 CSS 파일들은 아래와 같은 절차를 통해 변환된다. 1. webpack과 같은 모듈 번들러를 통해 빌드 과정을 거친다. 2. 빌드 과정에서 JS 모듈로 변환된다. 3. 최종적으로 브라우저에서 코드가 실행된다. 여기서 webpack은 의존 관계에 있는 JS, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러다. webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되기 때문에 별도의 모듈 로더가 필요없고, HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야하는 번거로움도 사라진다. 질문이나 잘못된 점은 댓글.. 2023. 5. 31. [react] 언제 memoization을 해야 할까? 메모이제이션 개념만 보았을 때는 굉장히 효율적이고 최적화가 이루어질 것 같지만, 명확한 목적없이 사용하는 것은 오히려 비효율적이다. 그러므로, memoization 하기 전에 1. 새로운 값을 만드는 것이 비용이 적게 들지 2. 이전의 값을 저장해두고, 메모이제이션 함수를 호출하고, 의존성을 비교해서 가져오는 것이 비용지 적게 들지 판단하는 과정이 필요하다. 판단의 대한 답은 상황에 따라 다르다. 리엑트에서 메모이제이션이 필요하다고 판단할 수 있는 요인은 2가지가 있다. 1. 새로운 값을 만드는 연산이 복잡한 경우 2. 함수 컴포넌트의 이전 호출과 다음 호출 간 사용하는 값의 동일성을 보장하고 싶은 경우 1번의 경우, 만약 100000개의 요소를 가진 배열이 있다고 생각하면 이 배열을 매번 생성하는 것보.. 2023. 5. 7. [JS] [12, 13, 1, 2]를 sort()한 결과가 sort((a,b) => a-b)한 결과랑 같을까? 문제의 답은 일단 같지 않다 이다. 놀랍게도 콘솔창에서 확인해보면 결과 값은 아래와 같다. 이유는 뭘까? 그 이유는 우선 mdn에서 확인해 볼 수 있었다. 위의 사진에서 확인할 수 있듯이, sort 메소드는 요소를 문자열로 변환하고, 변환된 문자열을 비교하여 정렬한다. 그래서 위의 예제에서 2가 12보다 앞에 오지만 문자열로 변환되어, 유니 코드 순서에서 1은 2보다 작기 때문에 12가 2보다 앞에 정렬되게 된 것이다. 정리하자면, 정확한 정렬을 하기 위해서는(예외 케이스를 피하기 위해서는) sort((a,b) => a-b)와 같이 작성해주는 것이 좋다. 참고자료 mdn 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 5. 1. localStorage.getItem()을 상수로 빼서 사용하면 동작하지 않는 이유 localStorage.getItem()을 여러 페이지에서 사용하고 있었다. 중복되는 코드를 제거하기 위해 리팩터링을 하고 있었기 때문에 localStorage.getItem() 또한 상수로 빼서 관리를 하려고 했었다. 그럼 따로 정의해 둔 변수명을 사용하여 localStorage의 값을 가져오면 되니깐 엄청 편하겠다!라고 생각했던 것이다. 결론적으로 제목과 같이 localStorage.getItem()을 상수로 빼서 사용하면 안 된다. 첫 번째 이유는 값을 가져올 수 없기 때문이다. 아래 코드에서 console.log(access_token) 값은 null이 되는 것을 확인할 수 있다. 이를 해결하기 위해서는 window.localStorage.getItem()을 사용하면 원하는 값을 가져올 수 있다... 2023. 4. 15. Promise를 사용할 때 .catch로 에러를 처리하는 것이 .then의 두 번째 인자로 에러를 처리하는 것보다 더 효율적인 이유 의문점이 생긴 이유 Promise가 에러를 처리하는 방법은 2가지가 있다. 1. .then()의 두 번째 인자로 에러를 처리하는 방법 2. .catch()를 이용하는 방법 둘 중에 어떤 방법이 더 효율적일까? 라는 궁금점이 생겨 작성해보았다. 예제 코드와 콘솔창 확인 1. .then()의 두 번째 인자로 에러를 처리하는 경우** function getData() { return new Promise(function(resolve, reject) { resolve('hi'); }); } getData().then(function(result) { console.log(result); throw new Error("Error in then()"); // Uncaught (in promise) Error: E.. 2023. 2. 7. 이전 1 다음 728x90 반응형
