728x90 자바스크립트15 Barrel export 패턴으로 import 깔끔하게 정리하기,react 리팩토링,가독성 높이기,index로 파일관리하기 개발를 하다보면 코드가 길어지는 데 그러면 어느순간 코딩하는게 불필요한 에너지를 소모하게 된다.그럼 당연하게 생산성 저하로 이어진다.자연스럽게 효율적인 방법을 생각하고 구글링 하게 된다.import 부분을 불러오다 보면 길어지는데 템플릿을 보다가 발견한 방법이다.오늘 방법은 mui 템플릿을 쓰다가 발견한 방법이다. 패턴이름 알게된 방법사실 이 방법이 어떤 이름인지 몰라 gpt한테 물어봤더니 역시 똑똑하게 답변을 줬다. GPT 답변React 프로젝트에서 여러 컴포넌트를 한 줄로 깔끔하게 정리하여 불러오기 위해 index.js 파일을 사용합니다. 이를 통해 여러 컴포넌트를 한 파일에서 한꺼번에 불러올 수 있어 코드의 가독성과 관리가 쉬워집니다. 이런 작업을 "통합 파일" 또는 "배럴 파일(barrel fi.. 2024. 7. 27. 자바스크립트 콜백함수(callback)에 대해 (개념,동작 원리,사용이유,장점,단점) 알아보자 프론트엔드 일을 시작한지 곧 있으면 3년차가된다.이번년도부터 스터디를 시작하면서 본격적으로 JS에 대해 공부하고 있는데,개발을 처음 시작했을 때 이해가지 않았던 개념이나 단어들이 최근에는 이해가 되고있다.그래서 요즘 살짝 재미를 붙인 상태이다.오늘은 처음에는 몰랐던 단어인 '콜백함수' 에 대한 글이다.부끄럽지만 나는 콜백함수가 정확히 어떤건지 모르고 그냥 지나쳤는데벌써 만 3년이 흘렀더라.... 천안으로 가는 기차에서 코어자바 스크립트를 읽는 데 콜백함수 부분을 읽는 데 잘 이해가 안가더라그래서 스터디때 얘기했더니 그 부분에 대해서 스터디 얘기하는게 어떻겠냐 제안을 받아 본격적으로 공부했다. 맨처음에 알았던 단어이면서 개발하면서 계속 듣는 단어인 오늘은 콜백함수에 대해 글을 쓰려고한다. 콜백함수란콜백.. 2024. 7. 21. 객체를 배열로 바꾸는 방법 feat.JavaScript 개발을 하다보면 진짜 자주 사용하는 것중 하나가 객체를 배열로 바꾸는거다.보통 데이터를 가공할때 정말 많이 사용한다.매일 나도 구글링하면서 사용하다보니 어느순간 나도 블로그에 정리하면서 외워보자 생각이들어 드디어 정리를 한다. 1. Object.keys()를 사용하여 객체의 키 배열 생성Object.keys() 메서드는 객체의 키를 배열 형태로 반환합니다.const obj = { a: 1, b: 2, c: 3 };const keysArray = Object.keys(obj);console.log(keysArray); // ["a", "b", "c"] 2. Object.values()를 사용하여 객체의 값 배열 생성Object.values() 메서드는 객체의 값을 배열 형태로 반환합니다.const obj.. 2024. 6. 30. 1588. Sum of All Odd Length Subarrays 문제 배열의 개수가 홀수 일 때만 그 안에 값들을 더하는 문제다. 현재 풀이 /** * @param {number[]} arr * @return {number} */ var sumOddLengthSubarrays = function(arr) { let sum = 0 for(let i = 0; i < arr.length; i++){ for(let j = i; j 2022. 6. 15. 1791. Find Center of Star Graph 문제 그림을 보면 숫자 2가 다른 숫자들과 연결돼있다. 문제의 답은 숫자 2처럼 커넥션이 되는 숫자를 찾는 문제다. 현재 풀이 /** * @param {number[][]} edges * @return {number} */ var findCenter = function(edges) { let obj = {} for(let item of edges){ 버전 2 for(let num of item){ obj[num] ? obj[num] += 1 : obj[num] = 1; if(obj[num] > 1){ return num } } } 버전 1 // item.map(num=> { // obj[num] ? obj[num] += 1 : obj[num] = 1; // }) // for(let num in obj){.. 2022. 6. 13. 1773. Count Items Matching a Rule 문제 Rule Key와 Rule Value에 따라서 일치하는 조건에 맞는 개수를 리턴해주는 문제다. 나의 현재 풀이 /** * @param {string[][]} items * @param {string} ruleKey * @param {string} ruleValue * @return {number} */ var countMatches = function(items, ruleKey, ruleValue) { let cnt = 0; let idx = 0 for(let i of items){ switch(ruleKey){ case 'type': idx = 0; break; case 'color': idx = 1; break; default : idx = 2; } if(i[idx] === ruleValue) .. 2022. 6. 13. 이전 1 2 3 다음 728x90
