zestlumen의 오롯이, 나의 개발 일지 인기글 TOP10
- client.defaultQueryOptions is not a function 에러 해결하기 분명 코드엔 문제가 없는데 계속 이런 에러가 떴다... 예전에 3버전이 썼던 것 같은데 package.json 들어가보니 지금은 5버전이다. 공식 문서에 들어가 보니 아래처럼 코드를 쓰라고 되어있다. 참고자료 https://tanstack.com/query/v5/docs/react/guides/queries Queries | TanStack Query Docs Query Basics A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise based method (including GET and POST methods).. 2023.10.24
- 노마드 코더니꼴라스, 배지현 :: IT 5분 잡학사전 (4) 데이터베이스 = 데이터 보관 DBMS (Database Management System) :데이터 베이스 관리 시스템 MySQL / PostgreSQL / SQLite / Oracle / MariaDB 등 SQL (Structured Query Language) = 데이터 베이스를 다루는 DBMS와 대화하기 위한 언어 ORM(Object Relational Mapping): SQL 번역기 같은 것. 사용자에게 익숙한 프로그래밍 언어로 SQL을 사용할 수 있음 파이썬-Django ORM, 라라벨-eloquent ORM, Node.js- Sequelize ORM,type ORM NoSQL document DB 대표적으로 MongoDB, 데이터를 JSON(JavaScriptObjectNotation,{key:.. 2023.10.31
- +노마드 코더니꼴라스, 배지현 :: IT 5분 잡학사전 (3) 알고리즘 컴퓨터에게 내리는 지시사항을 나열한 것 ex) 패스파인더 알고리즘(최단 경로 길 찾기), 압축 알고리즘(이미지 손상은 줄이고 용량 줄이기. png,jpg도 이걸로 만든 파일) 검색 알고리즘 선형 검색 알고리즘 (linear search) - 맨 처음부터 검색 이진 검색 알고리즘 (binary search) - 데이터 정렬이 되어있어야 사용(12345,54321 이런식으로) , 중앙값을 이용해 절반씩 배제하기, y = log x 정렬 알고리즘 버블 정렬: 1칸씩 밀면서 좌우 비교해서 교환하는 게 한 사이클, 시간복잡도는 O(N²) 선택 정렬: 전체 데이터에서 가장 작거나 큰 데이터의 위치를 따로 기억하는 방식, 시간복잡도는 O(N²)이지만 자리를 바꾸는 연산은 사이클당 1번으로 버블보다는 효율적... 2023.10.30
- 카테고리별 상품 목록 보여주기 NavBar는 아래와 같이 화면을 만들었는데 개별 화면으로 넘어가야할 것들은 리액트 라우터의 Link를 통해 넘기고 카테고리는 따로 컴포넌트를 만들었다. 카테고리 컴포넌트 useProducts()훅스를 통해서 받아온 데이터인 products에서 category만 가져온다. 중복을 피하기 위해 Set이라는 자료구조를 사용하고 새로운 배열로 만든다. [new Set(dataCategories]를 하게 되면 Set객체를 감싸는 배열이 된다는 거. [...new Set(dataCategories] 스프레드 연산자를 사용해야 새로운 배열을 생성해준다. 그리고 ALL을 추가하고 ETC는 뒤로 가야해서 저렇게 코드를 썼다...저래도 되는 건가.. 카테고리 별 상품이 보여질 페이지는 AllProduct.jsx인데 이 .. 2023.10.28
- 노마드 코더니꼴라스, 배지현 :: IT 5분 잡학사전 (2) 라이브러리와 프레임워크 빠른 개발을 도와줄 수 있는 미리 작성한 코드 라이브러리: 도서관에서 책을 빌리듯 직접 제어 가능, 다른 라이브러리 대체 가능, ex) 제이쿼리(js보다 쉽게 요소 추가), 부트스트랩(메뉴,버튼,레이아웃 등), 시맨틱 UI, 테일윈드 CSS 등 프레임워크: 프레임워크의 규칙을 따라야 하므로 직접적인 제어 불가, 규칙 변경 불가, 프레임워크 변경 시 폴더 이름, 파일 구성, 코드까지 모두 교체 필요, 완성도 높은 결과물 보장 ex) 장고(운영자 페이지는 admin.py파일, URL변경 시 url.py 파일에 코드 작성), 스프링 등 리액트는 라이브러리지만 프레임워크 같이 컴포넌트에 사용 규칙이 있다. API란? Application Programming Interface 어플리케이션.. 2023.10.27
- 노마드 코더니꼴라스, 배지현 :: IT 5분 잡학사전 (1) 개발은 재능이 아닌 끈기의 영역. 포기하지 않고 꾸준히 해나가는 것. 프로그래밍 언어 공부법 공식문서 살펴보기 문법 확인 다른 언어와 비교 함수나 변수 선언 등 특정 패턴으로 새 언어 작성해보기 튜토리얼 시작하기 프로젝트 만들기 C언어 / C++ / C# C언어: 절차 지향, 메모리 자원을 정밀 조절 가능 C++: 절차 지향+객체 지향, C언어를 확장한 슈퍼셋 C#: 기업에서 필요해 만든 마이크로스프트 언어(자바랑 비슷), 윈도우 운영체제에서 동작하는 프로그램 개발하고 싶다면 공부하기 프로그래밍 언어의 번역 인터프리트 언어: 해석하다, 동시 통역, 실시간 번역 ( 파이썬, 자바스크립트 ) 컴파일 언어: 편집하다, 도서 번역 ( C언어 ) 파이썬 황용 인공지능,데이터 분야 - 케라스,탠서플로, 판다스 등 .. 2023.10.27
- 자바스크립트와 자바의 차이점 자바 스크립트 - 준객체 지향 언어 (객체 기반이지만 객체 지향언어의 모든 특징을 가지고 있지 않음) - 인터프리터 언어 (소스코드를 분석하는 컴파일 시간이 따로 없이 소스코드와 입력 데이터 동시에 입력 받아 결과물을 출력) - 동적 결합, 객체 레퍼런스는 실행시 검사 된다. *Reference(참조): 프로그램이 메모리나 다른 공간에서 특정 변수의 값이나 레코드에 접근할 수 있도록 하는 값, 객체 참조는 클래스로 만든 객체의 주소 또는 참조값이 해당된다. - 소스가 공개되어 보안성을 가지지 못한다. 자바 - 서버에서 컴파일된 후 생성된 코드가 클라이언트에서 인터프리터에 의해 실행됨 - 객체 지향 방식, 상속성을 갖는 객체 클래스로 구성 - 애플릿 형태(작은 응용프로그램)로 HTML문서에 포함된다. - .. 2023.10.26
- React Icons 사용해서 간편하게 아이콘 추가하기 참고자료 및 문서 https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 터미널에서 리액트 아이콘 추가하기 //npm 사용 npm install react-icons --s.. 2023.10.18
- 고유한 아이디나 키 생성하는 방법 ( 타임스탬프 활용, uuid ) 데이터 관리나 사용자 관리 및 식별을 위해서 고유한 아이디나 키가 필요할 떄가 있다. 그럴 때 사용할 수 있는 고유한 아이디나 키를 생성하는 방법에 대해 알아보자. 1. 타임스탬프 활용하기 현재의 시간은 지나면 돌아오지 않기 때문에 현재의 타임스탬프와 무작위 문자열을 결합해서 생성가능하다. { id: Date.now().toString(36) + Math.random(), text: '우편물 확인', state: 'active' } 2. UUID 라이브러리 사용하기 UUID( Universally Unique Identifier)는 범용 고유 식별자로 고유한 식별자를 생성하는 데 사용되는 128비트 숫자로 데이터베이스 레코드,파일,객체 등 고유하게 식별하기 위해 사용한다. //npm 사용 npm inst.. 2023.10.17