Dev. Cookbook/Javascript7 [React] 추천 React UI Components - Google Material Design을 지원하는 Material UI Backend 개발자로 혼자서 React 공부를 시작해서 간단한 앱을 만들면서 처음부터 사용하면 본질을 익히기 전이라는 생각에 라이브러리에는 큰 관심을 두지 않고 styled-components만 적용하여 개발을 해왔습니다. 그러나 역시 화면을 배치하고 디자인하는 component 스타일링 부분은 투자한 시간 대비 소득이 크지 않다는 생각이 계속 들었습니다. 물론 개인 역량이 부족하기도 합니다만... ^-^;;; 그래서 조금 찾아보니 구글 Material Design을 지원하는 Material UI Component가 있어서 검토해 보고, 작은 규모의 프로젝트나 개인 프로젝트에는 충분히 사용하면 좋겠다는 생각이 들어서 간단히 정리했습니다. 1. Material UI : MUI 란? https://mui... 2023. 12. 4. [Node, NPM] SQL Bricks, JavaScript로 SQL 구문을 생성하는 패키지 Node 환경에서 Axios를 사용해서 데이터를 크롤링하고서 이 데이터를 어떻게 처리할까 고민할 일이 있었습니다. 이 데이터를 DB로 옮겨야 하는데 어떤 방법이 좋을까 고민하다가 Spring Boot 환경에서 실행 시 데이터를 로드하는 방법이 있어서 SQL문으로 변환하는 방법이 필요했습니다. 직접 생성하는 방법도 있지만, 이미 만들어진 패키지가 있지 않을까 검색해 봤습니다. 1. 패키지 검색 https://www.npmjs.com Node 패키지를 검색할 수 있는 홈페이지 가운데 하나입니다. 여기서 검색어로 'generate sql'로 찾은 패키지입니다. https://www.npmjs.com/search?q=generate%20sql 2. SQL Bricks.js https://www.npmjs.com.. 2023. 11. 26. [JavaScript] JS에서 객체 이름 확인하는 방법 객체 관련 내용을 정리하다가 객체 이름을 확인하는 방법이 궁금해서 찾아보기 시작했습니다. 결론은 JavaScript에서 객체의 이름은 원래 없는 게 맞다고 봅니다. JavaScript는 프로토타입 기반의 동적 언어로 객체를 지원하고 있기 때문에 특정한 경우에만 객체의 이름을 사용할 수 있습니다. 1. JavaScript의 객체 생성방법 JavaScript의 거의 모든 객체는 Object 객체의 인스턴스입니다. JavaScript에서는 몇 가지 방법으로 객체를 생성할 수 있습니다. 1.1 객체 초기자 (Object initializer) 객체 초기자의 사용은 "리터럴 표기에 의한 객체 생성"이라고도 합니다. const myObject = { prop_1: value_1, // 식별자 prop_2: valu.. 2023. 11. 20. [JavaScript] this 제대로 이해하고 사용하기 Node 환경에서 코딩을 하면서 this를 사용해야 하는 경우가 있었습니다. 그런데 경우에 따라서 이 this의 동작이 달랐습니다. 다른 언어에서와는 달리 JavaScript는 this의 의미가 다르게 동작하는 경우가 있어서 제대로 이해하고 사용하고자 정리해 두었습니다. 1. this 란? 컴퓨터 프로그래밍 언어에서 this는 현재 실행 중인 코드가 속한 객체, 클래스 또는 기타 엔티티를 참조하는 데 사용하는 키워드입니다. this가 참조하는 엔티티는 실행 콘텍스트(예: 해당 메서드가 호출되는 객체)에 따라 달라집니다. 문제는 프로그래밍 언어마다 이 키워드를 약간 다른 방식으로 사용합니다. 많은 프로그래밍 언어에서 this는 한 가지 의미로 사용하는 경우가 많습니다만, JavaScript의 경우에는 사용.. 2023. 11. 19. [JSON] JSON 이해하기 - 2. JSON 기본 : JSON에서 사용하는 데이터 타입 JSON에 대한 기본적인 이해가 부족하다면 아래 글을 먼저 읽고 오면 좋습니다. https://dev-handbook.tistory.com/119 [JSON] JSON 이해하기 - 1. JSON 기본 : 개요, 특징 및 장단점, 구조 웹 개발을 하면서 정말 생각 없이 사용하게 되는 것이 JSON 인 것 같습니다. 무지성으로 사용해 오다가, 한 번 정리가 필요한 것 같아서 여러 글들을 읽어보면서 정리했습니다. 1. JSON 개요 JSON(JavaS dev-handbook.tistory.com 4. JSON에서 사용하는 데이터 타입 JSON에서는 number, string, boolean(true, false), object, array, null의 6가지 데이터 타입을 사용할 수 있습니다. 4.1 숫자 (.. 2023. 11. 6. [JavaScript] 모니터, 듀얼 모니터 및 브라우저 기준으로 팝업창 가운데 띄우기 요즘은 브라우저에서 사용자 인터페이스를 구현할 때 팝업창을 띄우는 일이 많이 줄었습니다. 그래도 가끔은 필요하기에 간단하게 팝업창을 띄우는 방법은 비교적 간단합니다. Javascript에서 window.open() 함수를 사용하면 됩니다. 팝업창을 띄우는 자세한 방법에 대해서는 아래 링크를 참고해주세요. [Javascript] window.open(), window.opener() 부모창 자식창 간의 제어 방법 그런데 팝업창을 화면의 중앙에 띄울 경우는 조금 더 복잡하게 팝업창을 띄울 위치를 계산해야 합니다. 게다가 듀얼 윈도를 사용하는 사용자들이 많아지면서 일반적인 방법의 계산으로는, 팝업창이 듀얼 윈도를 기준으로 계산이 되어, 엉뚱한 위치에 띄워지게 됩니다. 그리고 전체 화면으로 사용하고 있지 않은 .. 2022. 5. 30. [JavaScript] window.open(), window.opener() 부모창 자식창 간의 제어 방법 브라우저에서 새로운 팝업창을 열었을 때, 팝업창은 자식창, 팝업을 띄운 창은 부모창입니다. 자주는 아니지만 UI 설계 과정에서 팝업창을 사용하기도 합니다. 그리고 많은 데이터는 아니지만 간간히 부모창과 자식창 간에 데이터 전달이 필요합니다. 이때 Javascript로 부모창과 자식창을 서로 제어하기 위한 주요 함수와 속성이 window.open(), window.opener 입니다. 1. window.open() Javascript로 새로운 팝업창을 열기 위해서 사용하는 것이 window.open() 메서드입니다. window.open() 메서드의 기본 사용 방법은 아래와 같습니다. // 기본 구문 window.open(URL, [target, [windowFeatures]]); // 예제 window... 2022. 5. 26. 이전 1 다음
