본문 바로가기
반응형

개발24

ESLint( 뜻,기능,사용하는 이유,자주 사용 규칙,플러그인,airbnb ESLint) 총정리 JavaScript 개발에서 깨끗하고 일관된, 오류 없는 코드를 유지하는 것은 매우 중요합니다.이때 ESLint가 큰 도움을 줄 수 있습니다. ESLint는 개발자가 JavaScript 코드를 검사하고 문제를 찾아내며, 최선의 관행과 코딩 표준을 준수하도록 돕는 강력한 오픈 소스 도구입니다. ESLint란 무엇인가요?먼저 ESLint는 ES 와 Lint를 합친 것입니다.ES는 Ecma Script로서, Javascript를 의미합니다.Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다. ESLint는 JavaScript 생태계에서 사용되는 정적 코드 분석 도구입니다.JavaScript(또는 JSX, TypeScript)를 분석하여 오류, 잠재적 버그, 스타일 문제를 찾아내고, 특정 코딩 관행을.. 2024. 8. 19.
Barrel export 패턴으로 import 깔끔하게 정리하기,react 리팩토링,가독성 높이기,index로 파일관리하기 개발를 하다보면 코드가 길어지는 데 그러면 어느순간 코딩하는게 불필요한 에너지를 소모하게 된다.그럼 당연하게 생산성 저하로 이어진다.자연스럽게 효율적인 방법을 생각하고 구글링 하게 된다.import 부분을 불러오다 보면 길어지는데 템플릿을 보다가 발견한 방법이다.오늘 방법은 mui 템플릿을 쓰다가 발견한 방법이다.  패턴이름 알게된 방법사실 이 방법이 어떤 이름인지 몰라 gpt한테 물어봤더니 역시 똑똑하게 답변을 줬다. GPT 답변React 프로젝트에서 여러 컴포넌트를 한 줄로 깔끔하게 정리하여 불러오기 위해 index.js 파일을 사용합니다. 이를 통해 여러 컴포넌트를 한 파일에서 한꺼번에 불러올 수 있어 코드의 가독성과 관리가 쉬워집니다. 이런 작업을 "통합 파일" 또는 "배럴 파일(barrel fi.. 2024. 7. 27.
자바스크립트 콜백함수(callback)에 대해 (개념,동작 원리,사용이유,장점,단점) 알아보자 프론트엔드 일을 시작한지 곧 있으면 3년차가된다.이번년도부터 스터디를 시작하면서 본격적으로 JS에 대해 공부하고 있는데,개발을 처음 시작했을 때 이해가지 않았던 개념이나 단어들이 최근에는 이해가 되고있다.그래서 요즘 살짝 재미를 붙인 상태이다.오늘은 처음에는 몰랐던 단어인 '콜백함수' 에 대한 글이다.부끄럽지만 나는 콜백함수가 정확히 어떤건지 모르고 그냥 지나쳤는데벌써 만 3년이 흘렀더라.... 천안으로 가는 기차에서 코어자바 스크립트를 읽는 데 콜백함수 부분을 읽는 데 잘 이해가 안가더라그래서 스터디때 얘기했더니 그 부분에 대해서 스터디 얘기하는게 어떻겠냐 제안을 받아 본격적으로 공부했다.  맨처음에 알았던 단어이면서 개발하면서 계속 듣는 단어인 오늘은 콜백함수에 대해 글을 쓰려고한다.  콜백함수란콜백.. 2024. 7. 21.
자바스크립트 Array filter 정의 및 사용법 자바스크립트의 filter() 메서드는 배열의 요소를 특정 조건에 따라 필터링하는 데 매우 유용합니다. 일반적으로 대량의 데이터에서 특정 조건을 만족하는 요소들만 선별해야 할 때, filter() 메서드를 사용합니다. 예를 들어, 학생 성적 데이터에서 합격한 학생들만 추출하거나, 특정 조건을 만족하는 상품 목록을 필터링하는 등의 작업에서 이 메서드를 활용할 수 있습니다. 이러한 작업은 데이터 분석, 검색 기능 구현, 그리고 다양한 데이터 처리 시나리오에서 필수적입니다. 본 글에서는 자바스크립트의 filter() 메서드 정의와 사용법, 그리고 실전 예제를 통해 이 메서드의 활용법을 자세히 살펴보겠습니다. 자바스크립트 Array Filter 정의 및 사용법자바스크립트의 filter() 메서드는 배열의 각 요.. 2024. 7. 6.
객체를 배열로 바꾸는 방법 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.
React에서 바텀시트(Bottom Sheet) 구현하기: 상세 가이드 프로젝트를 하던  중에 디자이너분께서 바텀시트 기능이 추가되어 개발을 하게되었다.사실 처음에는 라이브러리가 있을 줄 알고 큰 걱정안하고 기간안에 가능하다고 답변을 드렸다.하지만 찾아보니 라이브러리가 없는 상황이어서 내가 직접 개발해야 되는 상황이 됐다.일단 나의 영원한 친구 GPT의 도움을 받아 어찌저찌 구현은 성공했는데 뭔가 부족해서 없애고 구글링으로 서칭 후 재 개발 하게됐다. 이글은 나 같은 분들이 조금이나마 개발의 편의를 제공하기 위해 쓴다.먼저 구현하는데 큰 도움을 주신 개발자 Boris님, Wayne Kim 그리고 최종 문제에 인사이트를 주신 스터디를 같이 하고 있는 B님께 먼저 감사말씀을 올립니다. 나는 두분이 올려주신글을 참고하여 구현에 성공할 수 있었다.두분이 올려주신 코드를 고대로 활용.. 2024. 6. 30.
반응형

티스토리툴바