전체 글 21

React 앱 컴포넌트화

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

메모 2024.04.29

2. TypeScript Interface 인터페이스

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

typescript 2024.03.24

1. TypeScript Type System

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는 코드에 주석을 추가하 문서화하기 쉽도록 배열에 대한 전용 유형 구문을 제공합니다. 구문은 기본적으로 []..

typescript 2024.03.10

Sonar Qube - 정적 분석 툴

오늘은 지난시간에 알아본 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..

메모 2022.07.19

Sonar Lint - Code feedback 플러그인

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

메모 2022.07.18

[암호화] AES256 적용

암호화는 개인정보유출을 막고 사이버보안을 지키는데 필수요소이다. 암호화는 단방향과 양방향으로 나뉘고 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'; // 암호화 ..

nodejs 2022.03.10

timepicker with Swiper.js

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

html,css,js 2021.06.29

JS - toggle 버튼 구현

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

html,css,js 2021.06.28

[css] -webkit-padding, -webkit-margin

작업 중 chorme 브라우저에서 padding 값을 다르게 설정하고자 하였다. 자연스럽게 -webkit-padding-left : 100px을 지정하니 css가 먹히지 않았다.. 구글링을 통해서 검색하니 padding-left 를 -webkit-padding-start로 지정해야 한다고 한다. 까먹지 않게 기록해두자~ -webkit-margin-before (margin-top) -webkit-margin-end (margin-right) -webkit-margin-after (margin-bottom) -webkit-margin-start (margin-left) -webkit-padding-before (padding-top) -webkit-padding-end (padding-right) -web..

html,css,js 2021.05.20

[Postman]을 이용한 API 테스트

여러분은 API 개발 시 어떤 식으로 진행하시나요? 저는 Postman 의 도움을 많이 받는데요. 아래 글을 보며 같이 진행해보시죠. 1. 다운로드 먼저 postman 공식페이지에서 다운로드 후 설치해주세요. 링크 https://www.postman.com/downloads/ 2. Workspaces 추가 (사용시 postman 회원가입이 필요합니다. 회원가입 부분은 패스) Workspaces 목록에서 + New Workspace 버튼을 클릭 후 새로운 워크스페이스를 생성합니다. 3. New Request 생성 Collections 항목에서 New Request 를 생성합니다. 4. 테스트 테스트할 POST 를 작성합니다. POST 형식의 body에 테스트용 JSON을 담았고, headers 에는 Con..

메모 2021.05.18