전체 글 161

useRef vs let

리액트에서 변수를 관리할 때 useRef를 사용하는 것과 let을 사용하는 것은 어떤 차이가 있나?useRef()와 let의 가장 큰 차이점 : 리렌더링 시의 동작 방식- let으로 선언한 변수는 컴포넌트가 리렌더링될 때마다 초기화되어서 이전 값을 잃어버리는 반면 useRef()로 만든 변수는 리렌더링되어도 값이 유지됨. useRef()는 useState()와 다르게 상태 값이 변경되어도 컴포넌트가 리렌더링이 유발되지 않음. ** 실제로 useRef()는 주로 DOM요소에 접근할 때 사용함. ex. input에 focus를 주거나 스크롤 위치를 조정하는 경우에 ref를 활용. setTimeout()이나 setInterval()의 ID를 저장할때도 활용.컴포넌트가 리렌더링되어도 타이머 ID가 유지되어야 c..

브라우저 메모리 캐시와 디스크 캐시

- 메모리 캐시, 디스크 캐시는 브라우저가 리소스를 저장하는 방식 메모리 캐시 => 메모리, 즉 RAM에 저장돼서 빠름. 현재 열린 탭에서 CSS나 JS같은 리소스 바로 가져올 때 유용하지만 브라우저 창을 닫거나 새로고침하면 해당 리소스들이 사라지게 됨. 디스크 캐시 => 하드디스크나 SSD같은 저장장치에 저장돼서 브라우저를 껐다 켜도 남아있는 것이 특징.자주 방문하는 사이트의 이미지나 폰트 같은 리소스를 다시 다운받지 않고 사용할 수 있는 장점이 있지만 디스크는 메모리보다 접근 속도가 느려서 로딩 속도에 차이가 있을 수 있음. 브라우저가 메모리 캐시와 디스크 캐시를 각각 언제 사용하나요?브라우저는 일반적으로 페이지에서 빠르게 다시 쓸 가능성이 높은 건 메모리에 저장하고 오래 유지해야 하는 건 디스크에 ..

never와 unknown 타입

nevernever는 절대 발생할 수 없는 값을 나타내는 타입.ex. 함수가 값을 반환하지 않고 항상 예외를 던지거나 무한 루프를 도는 경우, 그 반환 타입은 never가 됨function throwError(message: string): never{ throw new Error(message);}이 함수는 어떤 값도 반환하지 않고 실행될 경우 예외를 던지기 때문에 never 반환 타입을 가짐 unknownunknown은 알 수 없는 값을 나타내는 타입.외부 API 호출 결과 처럼 값이 구체적인 타입을 미리 알 수 없고, 런타임에 타입이 결정되는 경우에 사용.any와 비슷하지만 더 안전한 방식- any는 어떤 값이든 허용하기 때문에 타입 안정성이 떨어질 수 있지만- unknonw은 특정한 타입으로 사용..

css 속성 dvh, svh, lvh 란?

1. dvh, svh, lvh?=> 세 가지 모두 뷰포트의 높이를 측정하는 단위입니다.기존의 vh는 브라우저의 뷰포트 높이를 기준으로 설정되지만, 모바일 환경에서는 동적으로 변할 수 있어서 정확한 높이를 계산하기 어렵다는 단점이 있습니다. 이를 해결하기 위해 dvh, svh, lvh가 등장했습니다. 먼저 dvh는 동적인 뷰포트 높이를 의미합니다. 사용자가 스크롤하거나 UI요소가 나타나거나 사라질 때마다 뷰포트가 변하는 경우, 이를 반영하여 실시간으로 계산된 값을 제공합니다. svh는 뷰포트가 가장 작을 때의 높이를 의미합니다. 일반적으로 모바일 브라우저에서 주소창이 보이는 상태에서의 최소 높이를 기준으로 합니다. lvh는 뷰포트가 가장 클 때의 높이를 기준으로 합니다. 모바일에서 주소창이 사라진 후 전..

<실기> 소프트웨어 개발 보안 구축 - 1

SW 개발 보안 생명주기요구사항 명세 -> 설계 -> 구현 -> 테스트 -> 유지보수 SW 개발 보안의 3대 요소기밀성(Confidentiality), 무결성(Integrity), 가용성(Availability) 기밀성 : 인가된 사용자만 접근 할 수 있어야 함무결성 : 인가된 사용자에 대해서만 수정이 가능하고 전송중인 정보는 수정되면 안됨. 정당한 방법을 따르지 않고는 데이터가 변경될 수 없음가용성 : 권한을 가진 사용자에 대해서/ 인가된 사용자는 가지고 있는 권한 내에서 언제든 접근할 수 있어야 함. SW 개발 보안 용어자산(assets) : 조직의 데이터 또는 조직의 소유자가 가치를 부여한 대상위험(risk) : 위협이 취약점을 이용하여 조직의 자산 손실 피해를 가져올 가능성취약점(vulnerabi..

<실기> 인터페이스 기능 구현

JSON(Javascript Object Notation)JSON은 속성-값(Attribute-Value Pair) 쌍 또는 "키-값 쌍"으로 이루어진 데이터오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. - JSON 특징AJAX(Asynchronous Javascript and XML)에서 많이 사용되고 XML(eXtensible Markup Language)을 대체하는 주요 데이터 포맷이다. JSON 표현 자료형구조사례선형 구조-리스트, 스택, 큐, 데크문자열(String)항상 큰 따옴표로 묶어야하고, 그 안에는 유니코드 문자들이 나열배열(Array)배열은 대괄호로 표시, 배열의 각 요소는 기본 자료형이거나 배열, 객체임*순서에 의미가 있음객체(Object)이름..

<실기> 통합 구현

내외부 연계 모듈 구현연계 모듈 기능 구현개발하고자 하는 응용 소프트웨어와 연계 모듈 간의 세부 설계서를 확인하여 일관되고 정형화된 연계 기능을 구현할 수 있다.EAI/ESB 방식과 웹 서비스 방식으로 구분됨. EAI 방식(Enterprise Application Integration)- 기업에서 운영되는 서로 다른 플랫폼 및 애플리케이션 간의 정보를 전달, 연계, 통합이 가능하도록 해주는 솔루션. - EAI를 사용함으로써 비즈니스 간 통합 및 연계성을 증대시켜 효율성을 높여줄 수 있고 각 시스템 간의 확장성을 높여줄 수 있다. 포인트 투 포인트(Poing-to-Point)가장 기초적인 애플리케이션 통합방법으로는 1:1 단순 통합 방법허브 앤 스포크(Hub & Spoke)단일한 접점의 허브 시스템을 통하..

<실기> 데이터 입출력 구현

데이터 저장소데이터 모델 현실 세계의 정보를 인간과 컴퓨터가 이해할 수 있도록 추상화하여 표현. 데이터 모델에 표시해야 할 요소 구조(Structure) : 논리적으로 표현할 대상, 데이터 구조 및 정적 성질을 표현연산(Operation) : 실제 데이터를 처리하는 작업에 대한 명세. 데이터베이스를 조작하는 요소. (SELECT, PROJECT, JOIN, DIVISION)제약조건(Constraint) : 실제 데이터의 논리적 제약조건. 데이터 무결성 유지를 위한 DB의 보편적 방법 데이터 모델 절차 요구조건 분석, 개념적 데이터 모델, 논리적 데이터 모델, 물리적 데이터 모델개념적 설계개념적 데이터 모델 : 트랜잭션 모델링. E-R 다이어그램. DB종류와 관계 X논리적 설계논리적 데이터 모델 : 인터페..

<실기> 서버 프로그램 구현

개발 환경 구축개발 도구(빌구테형) : 빌드 도구, 구현 도구, 테스트 도구, 형상 관리 도구 서버 하드웨어 개발 환경웹 서버, 웹 애플리케이션 서버, 데이터베이스 서버, 파일 서버웹 서버(Web Server) : HTTP, HTTPS를 통해 웹상의 정적 콘텐츠(css, javascript, image) 처리웹 애플리케이션 서버(WAS; Web Application Server) : 동적 콘텐츠(servlet, JSP) 처리ex) Tomcat, WebLogic, Jeus, Resin 데이터베이스 서버(DB Server) : 데이터 수집, 저장을 위한 용도로 사용하는 서버ex) MySql, Oracle, MS-SQL, DB2파일 서버(File Server) : 파일을 저장하고 관리하기 위한 서버. 대용량 ..

<실기> UI 설계

UML : 객체 지향 소프트웨어 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어 UML 구성 요소사물(Things) : 추상적인 개념, 주제를 나타내는 요소(명사 또는 동사)관계(Relationships) : 사물의 의미를 확장하고 명확히 하는 요소(형용사 또는 부시)다이어그램(Diagrams) : 사물과 관계를 모아 그림으로 표현한 형태(형식과 목적에 따라 9가지로 정의)UML 다이어그램구조적 다이어그램(Structural Diagram) / 정적 다이어그램(Static Diagram) : 클객 컴배 복패클래스(Class) : 클래스의 속성 및 연산, 클래스 간 정적인 관계 표현(클래스와 클래스, 클래스의 속성 사이 관계)객체(O..