분류 전체보기169 [React] canvas & x, y좌표 값으로 길 그리기 Canvas API 자바스크립트와 HTML의 canvas 엘리먼트를 통해 그래픽을 그릴 수 있게 제공하는 API로서, HTML5의 구성요소이다. 주로 2D 그래픽을 다루는데 사용되고 있다. 비트맵 데이터의 픽셀 하나 하나를 조작할 수 있고 그래픽 처리 성능이 좋은 편이다. Method 자주 사용되는 canvas의 메소드는 아래와 같다. 메소드 기능 beginPath() 새로운 경로(path)를 생성한다. 새 경로를 생성하는 메소드이기 때문에 최초에 호출하지 않아도 된다. closePath() 경로를 닫는다. 마지막 경로에 있는 점과 시작점을 연결한다. stroke() 경로에 선을 그려준다. fill() 경로의 내부를 채운다. moveTo() 아무것도 그리지 않고 시작 위치를 옮긴다. lineTo() 현재.. 🖥️Frontend/React 2023. 11. 28. [Node] 회원 가입, 비밀번호 암호화 MongoDB 연동 및 회원 가입 기능 구현 https://tlseoqja.tistory.com/49 [Node] node.js 서버와 MongoDB 연동하기 (mongoose) Mongoose란? Mongoose 라이브러리는 MongoDB란 NoSQL DB를 Node.js에서 사용할 수 있게 도와주는 라이브러리이다. 데이터를 만들고 관리하기 위해 스키마(Schema)를 만들고, 그 스키마로 모델(Model)을 만들어 tlseoqja.tistory.com BCrypt 1999년에 publish된 password-hasing function이다. 키(key) 방식의 대칭형 블록 암호(Blowfish 암호)에 기반을 둔 암호화 해시 함수이다. OpenBSD에서 이 암호화 방식을 사용하고 있다. .NET, J.. 🖥️Frontend/Node 2023. 11. 28. [Node] nodemon 설치 (자동 코드 반영) nodemon 기존 node에서 변경된 코드를 적용하기 위해서는 서버를 종료하고 다시 재실행시켜야 코드가 적용됐다. 그러한 번거로움을 해결해주는 라이브러리가 nodemon이다. node monitor의 약자로, 노드가 실행하는 파일이 속한 디렉터리를 감시하고 있다가 파일의 상태가 변경되면 자동으로 노드 애플리케이션을 재실행시켜주는 확장 모듈이다. nodemon 적용 nodemon 라이브러리를 설치해준다. npm install nodemon 기존 노드 서버를 실행하는 명령어가 아닌 nodemon을 이용해 서버를 실행시켜준다. // 기존 서버 실행 명령어 node index.js // nodemon을 사용한 서버 실행 명령어 nodemon index.js scripts 명령어 등록 매번 긴 명령어를 직접 쳐.. 🖥️Frontend/Node 2023. 11. 28. [Node] node.js 서버와 MongoDB 연동하기 (mongoose) Mongoose란? Mongoose 라이브러리는 MongoDB란 NoSQL DB를 Node.js에서 사용할 수 있게 도와주는 라이브러리이다. 데이터를 만들고 관리하기 위해 스키마(Schema)를 만들고, 그 스키마로 모델(Model)을 만들어 데이터를 관리한다. 스키마와 모델로 데이터를 불러온 후 객체화시켜서 빠르게 수정함으로써 데이터에 접근 가능하게 만들어준다. MongoDB 데이터 베이스 생성 우선 MongoDB를 사용하기 위해 웹 사이트에 접속해서 간단한 회원가입을 진행한다. https://www.mongodb.com/ko-kr MongoDB: 애플리케이션 데이터 플랫폼 업계 최고의 최신 데이터베이스를 토대로 구축된 애플리케이션 데이터 플랫폼을 사용해 아이디어를 더욱 빠르게 실현하세요. MongoD.. 🖥️Frontend/Node 2023. 11. 23. [Node] node.js & express로 간단한 서버 구현 Node.js의 등장 크롬, 익스플로러, 파이어폭스 등의 브라우저들은 자바스크립트를 읽고 해석하는 역할을 한다. 자바스크립트 해석을 빠르게 읽고 해석하면 웹 사이트의 렌더링 성능도 빨라지게 되니 브라우저 개발자들은 자바스크립트 해석 엔진 개발에 열성이었다. 그러던 중 '크롬 브라우저 개발자'들이 혁신을 일으키게 된다. 자바스크립트 해석엔진인 V8이라는 프로그램을 개발했는데 성능이 너무 뛰어나서 V8 엔진을 분리하여 엔진에 살을 붙여 만든 것이 Node.js이다. Node.js란? 위에서도 언급했듯이 V8 엔진으로 빌드된 자바스크립트 런타임이다. 런타임은 간단히 설명하면 실행창이다. 기존에 브라우저에서 실행하던 자바스크립트를 로컬 PC에서도 실행시킬 수 있는 도구이다. Node.js 설치 node.js 사.. 🖥️Frontend/Node 2023. 11. 23. [React Native] iOS BLE Advertising BLE의 정의 및 참고 사이트 https://tlseoqja.tistory.com/38 [React Native] Android BLE Advertising BLE 란? Bluetooth Low Energy의 줄임말로, 저전력 블루투스 라고 한다. Bluetooth는 크게 Bluetooth Classic과 BLE로 구분된다. Bluetooth 3.0 까지는 Bluetooth Classic, Bluetooth 4.0 부터는 BLE로 불린다. Bluetooth Classic은 다 tlseoqja.tistory.com 코드 Swift가 아닌 Object-C를 사용해서 코드를 작성하였다. 1. BLE 권한 추가 ios 폴더의 프로젝트 폴더의 Info.plist 파일을 열어서 블루투스 사용 권한을 넣어준다. .... 📱Mobile/React Native 2023. 11. 21. [React] RTK & TypeScript RTK 기본 사용법 https://tlseoqja.tistory.com/44 [React] Redux & RTK 상태 관리 라이브러리 처음 리액트를 접하고 리덕스 강의를 보고 문법이 어렵다고 느껴졌다. 그래서 리덕스 대신 상태 관리 라이브러리인 zustand를 사용해서 상태를 관리했다. 확실히 zustand의 문 tlseoqja.tistory.com 이전 링크에서 RTK의 기본 사용 방법을 알아보았다. 이 코드를 TypeScript를 적용해서 사용하는 방법을 작성해보려고 한다. 타입스크립트란? 기존 자바스크립트의 단점을 보완하기 위해 개발된 정적 타입 언어(Static Type Language)이다. 자바스크립트의 확장된 언어이기때문에 자바스크립트의 모든 기능을 사용할 수 있다. 브라우저에서 실행하기 위.. 🖥️Frontend/React 2023. 11. 20. [React] zustand zustand 리액트를 처음 접하는 개발자라면 Redux를 사용하기엔 무리가 있을 것이다. 이유는 복잡한 사용 방법때문이다. 그래서 프로젝트를 시작할 때 zustand를 채택해서 사용했다. zustand는 Redux, Mobx와 같이 상태 관리 라이브러리 중 하나이다. Redux와 같은 방식으로 상태를 관리하지만 라이브러리가 가볍고 사용 방법이 간단하다. zustand는 Redux와 같은 Flux 방식으로 한 곳에서 상태를 관리한다. 한 곳에서 상태를 관리하게 되면 여러 컴포넌트에서 공유하는 상태를 관리하는데 효과적이다. 더욱 자세한 내용은 아래 블로그에 잘 정리되어있다. https://velog.io/@greencloud/%EC%9A%B0%EB%A6%AC-%ED%8C%80%EC%9D%B4-Zustand.. 🖥️Frontend/React 2023. 11. 18. [React] Redux & RTK 상태 관리 라이브러리 처음 리액트를 접하고 리덕스 강의를 보고 문법이 어렵다고 느껴졌다. 그래서 리덕스 대신 상태 관리 라이브러리인 zustand를 사용해서 상태를 관리했다. 확실히 zustand의 문법이 더 쉬웠고, 더욱 편리하게 상태를 관리할 수 있었다. 하지만 리덕스의 사용법을 모르고 넘어가면 안될 것 같아서 간단하게 학습을 진행하기로 했다. 리덕스 리덕스는 상태 관리 라이브러리이다. 리덕스 자체로도 사용 가능하지만 리액트와 함께 사용하면 더욱 편리하게 상태를 관리할 수 있게 된다. 리덕스는 단일 스토어에서 상태를 관리한다. 그래서 동일한 데이터는 항상 하나의 스토어에서만 관리하게 된다. Store 리덕스를 사용하려면 먼저 스토어를 생성해줘야 한다. 스토어의 상태에 접근할 수 있게 하기 위해 Red.. 🖥️Frontend/React 2023. 11. 17. [TypeScript] 공변성, 반공변성 타입의 공변성, 반공변성 타입 스크립트 강의나 블로그를 보면 공변성, 반공변성 이란 단어가 등장하게 된다. 처음 들어보는 단어라 블로그 예시를 찾아보았다. 공변성(Covariance) A가 B의 서브타입이면, T는 T의 서브타입이다. 반공변성(Contravariance) A가 B의 서브타입이면, T는 T의 서브타입이다. 이변성(Bivariance) A가 B의 서브타입이면, T → T도 되고, T → T도 된다. 불변성(Immutability) A가 B의 서브타입이더라도, T → T도 안되고, T → T도 안된다. 이는 타입 스크립트에서 타입 간에 서로 대입을 할 때 되는 경우와 안되는 경우를 파악하기 위해 알아두어야 하는 단어이다. 타입 스크립트를 사용하다보면 어떤 타입은 다른 타입에 들어가는데 어떤 타.. 🖥️Frontend/TypeScript 2023. 11. 13. [TypeScript] never never Type은 가능한 값의 집합이다. 예를 들면 string 타입은 가능한 모든 문자열의 집합을 의미한다. 따라서 변수의 타입을 지정하면, 해당 변수는 오직 지정한 타입에 가능한 값만을 가질 수 있다. TypeScript에서 never 타입은 값의 공집합이다. 그래서 never를 TypeScript의 바닥타입이라고 부르기도 한다. 집합에 어떤 값도 없기 때문에 never 타입은 any 타입의 값을 포함해 어떤 값도 가질 수 없다. type IsNever = T extends never ? true : false; type A = IsNever; type B = IsNever; 위 코드에서 Type A는 true, Type B는 false를 반환할 것 같지만 그렇지 않다. 코드를 직접 작성해서 확인.. 🖥️Frontend/TypeScript 2023. 11. 9. [React Native] iOS 배포 오류 React-Native-Splash-Screen Symbolic Link 에러 상황 xCode에서 앱을 빌드 및 업로드한 뒤 TestFlight 에 올라간 앱이 몇 분 후 Build 목록에서 사라져 버리는 현상 발생했다. 없어진 Build에 관한 오류 상황을 위 그림과 같이 메일로 전달받았다. 에러 코드 ITMS-90332: Invalid Symbolic Link - The symbolick link 'react-native-splash-screen/node_modules/.bin/react-native' resolves to an invalid location. Make sure that the symbolic link does not resolve to itself, and thatt the location exists and is contanined within the .. 📱Mobile/오류해결 2023. 10. 27. 이전 1 ··· 8 9 10 11 12 13 14 15 다음