1. 종횡비 조정(aspect-ratio) .imgBox { width: 300px; aspect-ratio: 16 / 9; } 너비 300px 기준으로 종횡비 16 / 9 설정한다. 너비, 높이가 둘 다 적용되는 경우 종횡비가 적용되지 않는다 2. 종횡비 AUTO .imgBox { width: 300px; aspect-ratio: auto 16 / 9; background-image: url(이미지url); } 고유한 종횡비를 가지는 경우 해당 종횡비를 따르고, 아니면 16/9로 맞춘다. 고유한 종횡비 : 이미지와 같은 이미 요소가 가지고 있는 종횡비 3. 종횡비 고정 .imgBox { width: 300px; height: 100%; object-fit: cover; display: block; } ..

1. 밑줄 긋기 // 기본 밑줄 긋기 .underline { text-decoration: underline; text-underline-position:under; // 밑줄이 너무 붙어있을 경우 추가 } // 한번에 모든 속성 주기 .all{ text-decoration: green dotted underline; } .two{ text-decoration: underline red; } 2. 속성 포함 밑줄 긋기 // 밑줄 없음 text-text-decoration-line: none; // 밑줄 긋기 text-text-decoration-line: underline; // 윗줄 긋기 text-text-decoration-line: overline; // 취소선 text-text-decoration..

오버로딩(Overloading) 오버로딩(overloading)이란? 같은 이름을 가진 메서드를 여러 개 두는 것을 말한다. 메서드의 타입, 매개변수의 유형, 개수 등으로 여러개를 둘 수 있으며 컴파일 중에 발생하는 정적 다향성이다. 1. Java 오버로딩 예 class Person { public void eat(String a) { System.out.println(" I eat "+ a); } public void eat(String a, String b ) { System.out.println(" I eat "+ a + " and " + b); } } public class CalculateArea { public static void main(String[] args) { Person a = n..

OOP 객체지향 프로그래밍은 객체들의 집합으로 프로그램의 상호 작용을 표현하며 데이터를 객체로 취급하여 객체 내부에 선언된 메서드를 활요하는 방식을 말한다. OOP는 설계에 많은 시간이 소요되며 처리속도가 다른 프로그래밍 패러다임에 비해 상대적으로 느리다. 프로그래밍 패러다임이란? 프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론이다. 1. OOP의 예 배열에서 최댓값을 찾는 로직을 OOP를 적용 const ret = [1,2,3,4,5,11,12] class List { constructor(list) { this.list = list this.mx = list.reduce((max, num) => num > max ? num :max, 0) } getMax() { return t..

MVVM MVVM 패턴은 MVC의 C에 해당하는 컨트롤러가 뷰모델로 바뀐 패턴이다. 1. 장단점 MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지고 있다. 뷰와 모델 사이의 양방향 데이터 바인딩을 지원한다. UI를 별도의 코드 수정 없이 재사용할 수 있다. 단위 테스트하기 쉽다. 커맨드란? 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법 데이터 바인딩이란? 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경된다. 2. 모델(Model) 화면 표현하는데 필요한 데이터를 관리하며 사용자가 입력한 데이터를 저장하거나, 서버로 부터 받은 데이터를 저장합니다. 데이터 변경 시 View Model에게 변경 알림을 전송합..

MVP MVP패턴은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 디자인 패턴이다. 뷰와 프레젠터는 1:1 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴이다. 1. 장단점 MVC와는 다르게 코드가 깔끔해지고, Model과 View의 결합도를 낮추면, 새로운 기능 추가 및 변경을 할 때마다 관련된 부분만 코드를 수정하면 되기 때문에 확장성이 개선된다. UI, DATA 각각 파트를 나눠어서 해야 할 일이 명확해지고, 쉽고 빠른 코딩이 가능하다. 애플리케이션이 복잡해질수록 View와 Presenter 사이의 의존성이 강해지는 문제가 있다. MVC의 Controller처럼 추가 비즈니스 로직에 집중되는 경향이 있다. 2. 모델(Mod..

MVC MVC 패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴이다. 1. 장단점 애플리케이션 구성 요소를 세 가지 역할로 구분하여 각각의 구성 요소에만 집중해서 개발할 수 있다. 재사용성과 확장성이 용이하다. 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다는 단점이 있다. 2. 모델(Model) 모델(Model)은 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다. 모델 예 사각형 모양의 박스 안에 글자가 들어있다면 그 사각형 모양의 박스 위치정보, 글자 내용, 글자 위치, 글자 포맷에 관한 모든 정보를 가지고 있어야 한다. 이러한 정보를 담겨있는 것을 모델이라 한다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거..

프록시 패턴 프록시 패턴(proxy patter)은 대상 객채에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴이다. 프록시 객체란? 프록시 객체는 디자인 패턴 중 하나인 프록시 패턴이 녹아들어 있는 객체이다. 2023.01.09 - [JavaScript] - 프록시(Proxy) 객체 JavaScript에서 사용 방법(옵저버 패턴) 1. 프록시 패턴 구조 프록시 패턴을 통해 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용한다. 프록시 패턴은 프록시 객체로 쓰이기도 하지만 프록시 서버로도 활용된다. 2. 프록시 서버 프록시 서버는 서버와 클라이언트 사이에서 클라이언트 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해..

1. 네이버 개발자 센터 네이버 개발자 센터에서 앱 등록 후 Client 정보를 발급 받는다. NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 1-1) 애플리케이션 등록 상단 탭 Application > 애플리케이션 등록 클릭 웹 서비스 url이 아직 없는 경우 localhost를 등록한다. 1-2) Client 정보 등록 후 애플리케이션 정보로 자동으로 이동하게 되는데 해당 ID, Secret은 네이버 API를 사용하기 위해 필요하다. 2. 네이버 뉴스 API 검색 > 뉴스 - S..

1. 문제 원인 NextJS의 경우 SSR(Server Side Rendering)으로 서버에서 미리 HTML을 준비해 클라이언트한테 응답해주는데 최초 웹 페이지를 렌더링 할때에는 window나 document 전역객체는 선언되지 않아 해당 변수를 참조할 수 없기 때문에 해당 오류가 발생한다. SSR이란? 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 2022.10.11 - [React] - [NextJS] Pre-Rendering, Client-Side-Rendering, Server-Side-Rendering 개념 2. 해결 방법 useEffect 사용 useEffect은 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. 렌더링 후..