전체 글82 데이터 표준화 (정부 과제 제안서를 많이 쓰고 있어 공공기관 및 정부 기준 내용이 많습니다.) 데이터 표준화는 데이터의 품질과 연계성을 보장하며, 데이터를 활용한 의사결정의 효과를 극대화 데이터 표준코드 - 데이터베이스에서 동일한 종류의 데이터를 일관된 방식으로 표현 - 장학 사업 유형에 따른 고유한 코드를 할당한 후, 데이터베이스에서 참조 - 예시. 성적우수 장학: ‘MERIT’, 경제적 어려움 장학: ‘NEED’ 등 데이터 표준 용어 및 단어 - 동일한 의미의 데이터를 나타내는데 사용되는 용어나 단어 표준화 - 예시. '장학종류', '장학금 분류', '장학 유형' 단어의 혼용 > '장학 유형'으로 표준화 데이터 표준 도메인 - 특정 데이터 필드의 값의 범위나 데이터 형식을 지정 - 예시. 학생 고유 식별 번호, 장.. 2023. 9. 10. 데이터 암호화 방법 1. SSL/TLS를 이용한 네트워크 전송 시 암호화 - 인터넷 상의 커뮤니케이션을 위한 개인정보와 데이터 보안을 용이하게 하기 위해 설계되 어 널리 채택된 보안 프로토콜 작동 방식 • TLS Handshake 과정 - 클라이언트와 서버는 사용할 TLS 버전과 암호 알고리즘 선택 - 서버는 자신의 신원을 증명하기 위해 클라이언트에게 디지털 인증서 제공 - 클라이언트는 이를 검증하여 서버의 신원 확인 - 클라이언트와 서버는 공유된 세션키 생성 • 데이터 전송 - Handshake가 완료되면 클라이언트와 서버는 세션키를 사용해 데이터를 암호화 및 전송 - 암호화된 데이터는 메시지 인증 코드(MAC)과 함께 전송 - 이 코드를 통해 데이터의 무결성 검증 장점 - TLS 암호화는 데이터 유출 및 기타 공격으로부.. 2023. 9. 3. 호이스팅 변수 선언의 실행 시점과 변수 호이스팅 console.log(Candy); // undefined var Candy; // 변수 선언문 위의 예제에서 변수 선언문 보다 변수를 참조하는 코드가 앞에 있습니다. 자바스크립트는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(Candy)가 실행되는 시점에는 아직 Candy 변수의 선언이 실행되지 않았으므로 참조 에러가 발생해야 이치에 맞습니다. 하지만 참조 에러가 발생하지 않고 undefined가 출력됩니다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임(runtime)이 아니라 그 이전 단계에서 먼저 실행되기 때문입니다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 .. 2023. 7. 13. 개인 프로젝트 7 카드를 이름과 마나 코스트 순으로 정렬을 바꿀 수 있게 하고 모든 직업군에서 적용되는 중립 카드를 안 볼 수 있게 기능을 추가해보려고 합니다. 정렬 // 현재 정렬 상태 (1,2,3,4) const [filterOrder, setFilterOrder] = useState(1); // 중립 카드 온오프 const [onNeutral, setOnNeutral] = useState(true); // 직업 선택 시 카드 리스트 저장 const [currentCard, setCurrentCard] = useState(props.currentHeroCard); // 이름 순 카드 오름차순 정렬 const nameAscendSort = () => { setFilterOrder(1); const sortedArray .. 2023. 7. 10. 개인 프로젝트 6 카드 데이터들이 이름만 나오는 게 밋밋하다고 생각해 카드 컴포넌트에 배경 이미지를 카드 일부분의 이미지를 보여주는 방법으로 추가했습니다. https://hsreplay.net/cards/#playerClass=MAGE&gameType=ARENA 하스스톤 카드 통계 수집 가능한 모든 하스스톤 카드 통계를 비교합니다. 가장 승률이 높은 카드와 가장 많이 플레이한 카드를 찾아보세요. hsreplay.net 이 사이트를 참고해서 말이죠. div 태그 background 스타일링 위와 같이 만들었습니다. import { useEffect, useState } from "react"; import { CardStructure } from "../card.model"; interface CardProps { card.. 2023. 7. 7. 개인 프로젝트 5 하스스톤 투기장에서는 카드 덱을 구성할 동안 세 번의 보기 중 하나를 고르는 행위가 30번 반복됩니다. 그 보기들을 카드 목록들에서 보이게 하기 위해 검색창을 만들고 그 카드들이 보이게 하려고 합니다. Input 생성 및 변수 관리 App.tsx const App: React.FC = () => { // 카드 검색 데이터 저장 const [cardFilter, setCardFilter] = useState([]); // 검색 데이터 상태 끌어올리기 위한 함수 const filterCardHandler = (filter: string[]) => { setCardFilter(filter); }; return ( ); }; 위와 같이 최상단에서 데이터를 관리하기 위해 만들고 인풋창으로 함수를 내려줘 상태 끌어.. 2023. 7. 7. CSR & SSR SPA & MPA React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 기반으로 하여 SPA(Single Page Application)를 개발합니다. 하나의 페이지에서 Ajax를 통해 클라이언트에서 원하는 부분만 동적으로 렌더링 할 수 있습니다. MPA(Multi Page Application)은 페이지를 이동할 때마다 서버로부터 새로운 HTML을 받아와서 페이지 전체를 새로 렌더링 하는 전통적인 방식입니다. SPA & MPA와 CSR & SSR SPA는 웹 애플리케이션에 필요한 정적 리소스를 초반에 모두 다운로드하고 그 후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아 클라이언트에서 페이지를 갱신합니다. MPA는 새로운 요청이 있을 때 서버에서 이미 렌더링 .. 2023. 7. 3. 개인 프로젝트 4 스타일링 방법을 고민하다 인라인 스타일링으로 간단히 구현해 놓은 부분이 있고 그 부분에 className만 적용해서 바꿀 수 있는 tailwindcss를 사용해 보기로 했습니다. 설치 및 세팅 https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com 공식 사이트가 있어 설치하기 쉬었고 빠르게 적용해 볼 수 있었습니다. npm install -D tailwindcss npx tailwindcss init tail.. 2023. 6. 23. 네이티브 앱 & 웹 앱 & 하이브리드 앱 네이티브 앱 (Native App) 우리가 흔히 아는 안드로이드나 IOS 용으로 나눠서 만들어진 애플리케이션을 의미합니다. 모바일 기기에 최적화된 언어로 개발된 앱으로 안드로이드 SDK를 이용한 Java 언어나 iOS 기반 SDK를 이용한 Swify 언어로 만드는 앱이 네이티브 앱에 속합니다. 예시 편의성과 기능이 중요한 게임 앱 지도, 교통 앱 - 카카오 맵, 네이버 지도 카메라 기능 위주 앱 - 인스타그램, 틱톡 편의성, 보안이 중요한 은행, 카드 앱 잦은 업데이트가 필요하지 않은 멤버십 앱 - 스타벅스, T멤버십 장점 성능이 웹앱, 하이브리드 앱에 비해 가장 높습니다. 네이티브 API를 호출하여 사용함으로 플랫폼과 밀착되어 있어 기기마다 최적화가 가능합니다. 높은 디자인 완성도를 가집니다. 단점 플.. 2023. 6. 22. 이전 1 2 3 4 5 ··· 10 다음
