choisiel의블로그

AWS AppSync는 AWS에서 제공하는 완전 관리형 GraphQL 서비스입니다. AppSync를 사용하면 클라이언트 애플리케이션이 서버에서 데이터를 가져오고, 변경하고, 실시간으로 구독할 수 있습니다. GraphQL을 사용하여 클라이언트는 필요한 데이터만 쿼리할 수 있으며, 백엔드의 구조에 대한 지식 없이도 데이터를 효율적으로 사용할 수 있습니다.GraphQL은 Facebook에서 개발한 데이터 쿼리 언어로, 클라이언트가 필요한 데이터의 구조를 명확하게 정의할 수 있습니다. REST API와 달리, GraphQL은 단일 엔드포인트를 통해 다양한 데이터 요청을 처리할 수 있습니다.AWS AppSync를 사용하면 개발자가 안전한 서버리스 고성능 GraphQL 및 Pub/Sub API를 사용하여 애플리케이..

# 객체 지향 프로그래밍객체 지향 프로그래밍 OOP(Object-Oriented Programming)은 Java, C++를 비롯한 많은 프로그래밍 언어의 기본이 되는 프로그래밍 패더다임입니다.객체 지향 프로그래밍은 각 객체가 시스템의 특정 측면을 나타내는 객체 모음으로 시스템을 모델링하는 것입니다.객체에는 함수(또는 메서드)와 데이터가 모두 포함됩니다.객체는 사용하려는 다른 코드에 대한 공용 인터페이스를 제공하지만 자체 비공개 내부 상태를 유지합니다.시스템의 다른 부분은 객체 내부에서 일어나는 일에 대해 신경 쓸 필요가 없습니다.# 클래스 및 인스턴스OOP의 객체 측면에서 문제를 모델링할 때 시스템에 포함하려는 객체 유형을 나타내는 추상 정의를 만듭니다.예를 들어 학교를 모델링하는 경우 교수를 나타내는..

#리액트의 철학. 리액트는 UI를 컴포넌트로 나눔으로써 UI를 만들어 낸다.이것의 장점은 마크업과 뷰 로직을 통합시킴으로 유지보수가 용이해지고,마크업과 내용물을 자바스크립트로 가져감으로써 수동식 string concatenation이 사라지고, XSS 취약을 완화시켜준다.리액트는 데이터가 변할 때 빛을 발하는데전통적인 자바스크립트 어플리케이션에서는 데이터가 변경되었을때 DOM을 변화시켜야 했다.리액트는 컴포넌트가 처음 초기화 될 때 render 함수가 호출되고, 간소화된 표현의 view가 만들어진다.그 view로 부터 마크업 문자열이 만들어지고 document에 삽인된다.데이터가 바뀌며, render은 다시 호출되고 이전의 render 의 리턴값과 현재 상태를 비교하여 DOM에 적용되어야 할 최소한의 ..

Interface TypeScript에서, 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음 과 같은 범주에 대해 약속을 정희 할수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 Interface 간단한 예제 let person = { name: 'Capt', age: 28 }; function logAge(obj: { age: number }) { console.log(obj.age); // 28 } logAge(person); // 28위 logAge() 함수에서 받는 인자의 형태는 age 속성을 갖는 객체입니다. 이렇게 인자를 받을 떄 단순한 타..

TypeScipt 의 Type System TypeScript의 유형 시스템은 JaaScript가 TypeScript가 되도록 선택적으로 설계되었습니다. 기본 유형 Primitive Types string, number, boolean var num: number; var str: string; var bool: boolean; num = 123; num = 123.456; num = '123'; // Error str = '123'; str = 123; // Error bool = true; bool = false; bool = 'false'; // Error 배열 Arrays TypeScript는 코드에 주석을 추가하 문서화하기 쉽도록 배열에 대한 전용 유형 구문을 제공합니다. 구문은 기본적으로 []..

오늘은 지난시간에 알아본 sonarlint에 이어 sonarQube를 적용한 정적 분석을 소개하려한다. sonarlint 관련 글 ➡️ https://choisiel.tistory.com/20 Sonar Lint - Code feedback 플러그인 개발중에 정적분석, 동적분석에 대한 요구사항이 있었고, 별도의 분석툴 없이 개발하던 나는 관련 자료를 찾게되었다. 무료툴 위주로 찾던 중에 sonarlint 와 sonarQube를 찾았고 바로 사용해보았다. choisiel.tistory.com 공식사이트 ➡️ https://www.sonarqube.org/ Code Quality and Code Security | SonarQube Catch bugs and vulnerabilities in your app..

개발중에 정적분석, 동적분석에 대한 요구사항이 있었고, 별도의 분석툴 없이 개발하던 나는 관련 자료를 찾게되었다. 무료툴 위주로 찾던 중에 sonarlint 와 sonarQube를 찾았고 바로 사용해보았다. sonarlint는 jetBrains , Eclipse, Visula Studio, VS Code에서 사용 가능하다. sonarlint의 주 기능은 코딩 할 때 품질 및 보안 문제를 식별하고 버그 감지, 맞춤법 검사와 이를 해결에 대한 권장사항을 제공해준다. sonarlint 공식사이트 >> https://www.sonarlint.org/ 내가 주로 사용하는 VS Code 에서는 마켓플레이스에서 sonarLint 검색 후 설치할 수 있다. 내 경우엔 설치가 오래걸려서 재시작도 해봤는데 그냥 오래 걸렸..

암호화는 개인정보유출을 막고 사이버보안을 지키는데 필수요소이다. 암호화는 단방향과 양방향으로 나뉘고 AES방식은 양방향 암호화로 암호화, 복호화가 가능하다. AES는 Advanced Encryption Standad의 약자로 "고급 암호화 표준"이라는 의미이다. 대칭키를 쓰는 방식으로 암호화 블럭의 크기가 128비트이면 AES128, 256비트이면 AES256으로 불린다. - Node.js에서 적용 예제 - CMD에서 모듈설치 npm i crypto // 암호화 모듈 선언 const crypto = require('crypto'); // 암복호화 관련 const key = '0000000000@asdasdas#adadadskey00'; const iv = '0000000000000000'; // 암호화 ..

timepicker 시간 선택기 구현. 안드로이드 알람앱과 비슷한 timepicker 기능 구현하고자 한다. 오전/오후, 시간부분을 슬라이드로 구현하고자하니, 마땅히 적용할 라이브러리가 없어서 swiper.js 를 사용하여 슬라이드 적용 후 나머지는 jqeury와 js 로 처리를 하였다. 자세한 코드는 아래 codepen 참고하시길. https://codepen.io/choiyoungjun90/pen/LYyYdaj timepicker with swiper.js ... codepen.io

웹 개발중에 css 작업해주신 분이 토글 버튼을 이미지로 주셨다.. 그럴수 있지.. 재 작업 고고~ 아래와 같은 형식의 토글 버튼을 작업을 하려한다. 토글버튼 부분을 클릭할 때 input이 checked 인지 확인하고 addClass, removeClass 를 통해 구현하였다. 자세한 코드는 아래 코드펜 링크를 봐주길.. https://codepen.io/choiyoungjun90/pen/qBmWzZa toggle_btn with jquery ... codepen.io