티스토리

Yeri

검색하기

블로그 홈

Yeri

yerica.tistory.com/m

yerica 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[웹디자인 / 폰트] 웹디자인시 폰트는 어떻게 해야 할까? 웹사이트나 앱을 들어가면 정말 많은 정보가 한번에 모여 있는 것을 볼 수 있다.만약 모든 글자들이 같은 크기, 같은 색상, 같은 모양으로 모여 있다면 어떨까?아마, 정보가 너무 많아서 어디서부터 뭘 봐야할지 알 수 없게 될 것이다. 이를 방지하기 위해, 글자의 크기와 대비 등 여러 방법으로 계층을 나누어 독자의 시선을 유도하는 것이다.이러한 계층을 나누는 방법을 타이포그래피, 편집디자인 에서 찾아 볼 수 있었다. 타이포그래피 계층이란?타이포그래피 계층(Typography Hierarchy)은 텍스트의 정보 구조를 시각적으로 구분해 독자가 어떤 정보를 먼저 일고, 어떻게 이해할지 자연스럽게 유도하는 디자인 기법이다.쉽게 말하면, 중요한 내용을 더 눈에 띄게, 덜 중요한 내용은 작고 덜 튀게 표현해서 콘텐츠.. 공감수 1 댓글수 1 2025. 4. 7.
[css] 글자 밑줄 긋고 밑줄에 스타일 넣기 / text-decoration https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration text-decoration - CSS: Cascading Style Sheets | MDNThe text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.developer.mozilla.orghttps://hianna.tistory.com/679.. 공감수 0 댓글수 0 2025. 4. 3.
[CSS] 가상 클래스(:root)로 전역 변수(var) 다루기 의사 클래스란?'의사 클래스(pseudo-class)'의 'pseudo' 즉 의사(擬似)는 한자로 '비길 의'에 '닮을 사'로, 유사한 비슷한 이란 의미를 담고있다. 영어 'pseudo-'는 접두사로 허위의, 거짓의, 가짜의, 유사의 라는 의미로 사용된다. '의사 클래스'는 다른 말로 '가상 클래스'로도 불리는데, 일반적으로 '의사 클래스'라는 용어가 더 정확하고 많이 사용된다. 1. 의사 클래스의사 클래스 (pseudo-class) 는 HTML 요소의 특정 상태에 스타일을 적용할 수 있도록 도와주는 CSS 문법이다.예를들어, a:hover {} 를 사용하면, a 태그 위에 마우스가 올라갔을 때 { } 괄호 안의 css 속성이 a태그에 적용되도록 한다. 선택자 혹은 클래스(class)나 아이디(id) .. 공감수 0 댓글수 0 2025. 4. 3.
[Quill] Quill로 텍스트 에디터 만들기 스며드는 것 안도현 꽃게가 간장 속에 반쯤 몸을 담그고 엎으려 있다 등판에 간장이 울컥울컥 쏟아질 때 꽃게는 뱃속의 알을 껴안으려고 꿈틀거리다가 더 낮게 더 바닥 쪽으로 웅크렸으리라 버둥거렸으리라 버둥거리다가 어찌할 수 없어서 살 속에 스며드는 것을 한때의 어스름을 꽃게는 천천히 받아드렸으리라 껍질이 먹먹해지기 전에 가만히 알들에게 말했으리라 저녁이야 불 끄고 잘 시간이야 https://velog.io/@onezerokang/Quill.. 공감수 0 댓글수 0 2025. 3. 26.
[ 웹디자인 ] 아이콘 " 목차 "">" 목차 " 01. 아이콘 사이즈아이콘 사이즈는 구글 머터리얼 가이드에 따르면 18px, 24px, 36px, 48px의 사이즈로 각각 만들어 사용하는 것을 추천한다.가장 많이 사용하는 사이즈는 24px 이며, 16의 폰트를 쓸 때 가장 잘 어울린다고한다. 02. 아이콘 만들기18px * 18px 의 경우 여백 1px24px * 24px 의 경우 여백 2px36px * 36px 의 경우 여백 3px48px * 48px 의 경우 여백 4px아이콘을 만들 때, 보통 원하는 사이즈에 1~4px 정도의 여백을 주어 작업해야한다.여백을 주지 않으면 아이콘의 끝이 잘릴 위험이 크기 때문이다. 03. 비트맵과 백터포토샵 = 비트맵 형식 = 픽셀(px)일러스트 = 백터 형식 = 앵커 포인트(data)비.. 공감수 1 댓글수 0 2025. 3. 25.
[웹디자인] 폰트는 어떻게 하면 좋을까? " 목차 "">" 목차 "01. 윈도우와 맥의 기본 운영체제 폰트윈도우 : 돋움, 맑은 고딕맥 : Apple SD Neo 고딕02. 폰트 크키본문 : 14 ~ 17px최소 폰트 : 10px 이상Chrominum 계열 브라우저(크롬, 엣지, 오페라 등)는 기본적으로 가독성을 위해 10px 이하 폰트를 강제로 키워서 보여준다. Firefox 는 개발자 설정 그래도 렌더링 하는 경향이 강하지만 Safari 같은 경우 데스크탑에서는 대부분 설정한 폰트대로 보이지만 모바일에서는 작은 글씨를 확대하는 경우가 존재한다.웹 접근성(가독성) 측면에서도 대부분의 가이드라인에서는 12px 이상을 권장한다.만약, 강제로 작은 글씨로 만들고 싶다면 transform: scale() 을 사용하거나, -webkit-text-siz.. 공감수 1 댓글수 1 2025. 3. 25.
[웹디자인] 브라우저, 해상도, dp/pt/px, mdpi/xhdpi/..., 이미지 크기 " 목차 "">" 목차 " 01. 사이트 로딩속도 체크3G 환경에서 체크. 사이트 로딩속도가 10초 이상이 되면 고객 이탈률이 급격히 높아진다.( 해외에서는 5초내외, 우리나라는 1-2초 내외면 최고 ) 02. 브라우저 점유율 (2024.12 기준)크롬 54.3%삼성전자 인터넷 16%애플 사파리 14%마이크로소프트 엣지 7.18%네이버 웨일 6.71%03. PPI, DPIPPI(Pixels Per Inch) : 1인치(2.54cm) 당 픽셀 수, 디지털 화면에 주로 쓰임DPI(Dots Per Inch) : 1인치 당 점(dot) 수, 인쇄물 출력에 주로 쓰임PPI와 DPI는 모두 화면이나 인쇄물의 '해상도'와 관련된 단위이다.PPI는 디스플레이의 선명도를 의미한다.72ppi 는 옛날 웹 기준의 저해상도,.. 공감수 0 댓글수 0 2025. 3. 25.
[ASP.NET] AJAX Control Toolkit 에서 제공하는 자동완성 기능 컨트롤 / AutoCompleteExtender " 목차 "">" 목차 " AutoCompleteExtenderAutoCompleteExtender란?ASP.NET AJAX Control Toolkit 에서 제공하는 컨트롤 중 하나로,사용자가 텍스트를 입력하면, 서버 측 웹 메서드를 호출하여 추천 목록을 받아와 자동완성 리스트를 표시해준다.그래서 보통 검색창, 주소 입력, 이메일 자동완성 등에서 많이 사용된다.더보기https://learn.microsoft.com/en-us/shows/asp-net-site-videos/how-do-i-use-aspnet-ajax-autocomplete-control [How Do I:] Use the ASP.NET AJAX AutoComplete ControlThe AutoComplete extender contro.. 공감수 1 댓글수 1 2025. 3. 24.
[ ScreenToGif ] PC 화면 녹화, 움짤, GIF 파일 만들기 " 목차 "">" 목차 "ScreenToGif 홈페이지PC 화면을 녹화해서 GIF로 만드는 방법 중,무료이며 직접 촬영 후 GIF로 저장 가능한 프로그램 ScreenToGif를 소개해보겠다. 공식 사이트https://www.screentogif.com/ 홈페이지에 접속하여 현재 컴퓨터의 버전과 방법을 클릭하면 된다.Installer 혹은 Portable 버튼을 클릭하면 다운로드되는 파일로 프로그램은 설치하면 된다. 본인은 간단히 사용할 것이기 때문에 Installer를 클릭하여 설치하였다.설치 후 사용 방법은 간단하다. 프로그램 기능 프로그램을 실행하면 다음과 같은 창이 뜬다. 위 화면에서 원하는 기능을 선택하여 사용하면 된다.녹화 : 기본 화면 녹화 기능웹캠 : 녹음, FPS 설정, 삭제 등 웹.. 공감수 3 댓글수 2 2025. 3. 20.
[ASP.NET] Web Form - <asp:TextBox> " 목차 "">" 목차 " ASP.NET Web Form : TextBox✅ ASP.NET Web Form의 TextBox란? ASP.NET Web Form에서 는 사용자가 입력할 수 있는 텍스트 필드를 생성하는 서버 컨트롤이다.이 컨트롤은 HTML의 과 유사하지만,서버 측에서 관리할 수 있으며 다양한 속성과 이벤트를 지원한다. 기본형 기본형태로 작성할 경우 렌더링시 text 타입의 input으로 변환된다. ASP.NET Web Form : TextBox01. 주요 속성 속성설명 ID컨트롤을 식별하는 고유한 이름 runat="server"서버 컨트롤임을 지정 Text텍스트 박스의 기본값 TextMode입력 유형 지정 Enabled입력 가능 여부 ( true / false ) ▶ Enable=".. 공감수 1 댓글수 1 2025. 3. 7.
[ css ] Style Queries / 스타일 쿼리 효율적으로 사용하기 " 목차 "">" 목차 " Style Queries 01. At-rules (@)CSS에서 @로 시작하는 규칙(At-rules)는 특정 조건에서 스타일을 정의하거나 CSS의 동작을 제어하는 역할을 한다.대표적인 @규칙으로 다음 9가지가 있다.미디어 쿼리 (@media)컨테이너 쿼리 (@container)서체 임포트 (@font-face)CSS 모듈 (@import)키프레임 애니메이션 (@keyframes)CSS 계층화 (@layer)CSS 지원 여부 확인 (@supports)페이지 스타일링 (@page)카운터 스타일 (@counter-style)이 외에도 추가적인 @ 규칙이 존재하지만 위 규칙이 가장 많이 사용된다. Style Queries 02. 스타일 쿼리(Style Queries)란?일반적.. 공감수 1 댓글수 1 2025. 2. 19.
[html] ARIA(Accessible Rich Internet Applications)란? 📌 ARIA(Accessible Rich Internet Applications)란?ARIA(Accessible Rich Internet Applications)는 웹 접근성을 높이기 위한 속성을 제공하는 기술이다.특히 동적 콘텐츠(예: JavaScript 기반 인터페이스)나 스크린 리더를 사용할 때 사용자가 더 잘 이해할 수 있도록 보조 기술에 정보를 추가하는 역할을 한다.🎯 ARIA가 왜 필요할까?일반적인 HTML 태그(, 등)는 기본적으로 의미(semantic)를 가지고 있어, 브라우저와 보조 기술(스크린 리더 등)이 쉽게 해석할 수 있다.하지만 JavaScript로 동적으로 UI를 변경하는 웹 애플리케이션에서는 HTML 태그만으로는 충분하지 않을 수 있다. 비표준 UI 요소 (예: 버튼) .. 공감수 1 댓글수 1 2025. 2. 17.
[html] Amazon searchbox 속성 1. autocomplete="off"브라우저가 입력 값을 자동으로 완성하는 기능을 끌지(off), 켤지(on) 설정하는 속성입니다.on이면 사용자가 이전에 입력한 값을 바탕으로 추천 목록을 제공합니다.검색창 같은 경우, 브라우저의 자동 완성 기능이 방해가 될 수 있어서 off로 설정하는 경우가 많습니다.2. dir="auto"텍스트의 방향을 설정하는 속성입니다.값으로는 ltr(왼쪽→오른쪽), rtl(오른쪽→왼쪽), auto를 사용할 수 있습니다.auto로 설정하면 입력한 텍스트의 언어에 따라 방향이 자동 결정됩니다.예: 영어(left-to-right, ltr), 아랍어(right-to-left, rtl) 등3. aria-label="Amazon 검색"aria-label 속성은 접근성을 위한 속성으로, .. 공감수 0 댓글수 0 2025. 2. 17.
[JavaScript] ESM(ECMAScript Modules) 이란? 자바스크립트 공식 모듈 시스템 공부하기 Module?자바스크립트에서 Module은 프로그램을 기능별로 나눈 독립적인 코드 단위를 의미한다.자바스크립트가 발전함에 따라, 스크립트의 규모가 커지기 시작했고 이후 복잡한 프로그램을 작은 단위로 나누어 관리하기 위해 모듈이 도입되었다. 현재 자바스크립트에선 ESM(ECMAScript Modules)와 CommonJS라는 두 가지 모듈 시스템이 사용 중이다.ESM은 ES6(2015) 이후의 표준 모듈 시스템으로 최신 브라우저와 Node.js 에서 지원되고,CommonJS는 Node.js에서 많이 사용되는 모듈 시스템이다. Module 장점Module은 기능별로 분리되어 있기 때문에 코드의 가독성와 유지 보수성이 기존 코드보다 높다.또한 작성한 코드를 여러 곳에서 재사용 할 수 있어 코드 중복이 적고, .. 공감수 1 댓글수 1 2025. 2. 14.
[HTML/CSS/JavaScript] <table>, <template> 태그로 표 생성하고 꾸미기 태그 1. 태그 기본형https://yerica.tistory.com/66 태그는 HTML 문서에 표를 만드는 태그이다. , , 등으로 문서의 영역을 구분하는 기초적인 부분은 넘기고,여러가지 속성으로 표를 구성하는 방법에 대해 알아보겠다. 기본적으로 각각의 브라우저는 에 대한 속성을 가지고 있다.크롬에서 의 기본 속성은 아래와 같다.table { display: table; border-collapse: separate; box-sizing: border-box; text-indent: initial; unicode-bidi: isolate; border-spacing: 2px; border-color: gray;}tr { display: table-row.. 공감수 2 댓글수 1 2025. 1. 22.
[ Visual Studio Code / 브라우저 ] JavaScript 디버깅 / 중단점 사용하기 현재 나는 JavaScript까지밖에 할줄 모르니,, 자바스크립트를 디버깅하는 방법에 대해 정리해보려고한다. 자바스크립트를 디버깅하려면 먼저 자바스크립트의 실행 환경에 대해 알아야한다.JavaScript 실행 환경 자바스크립트는 원래 웹 브라우저에서 동작하도록 설계된 언어이다.그러나, 시간이 지나 Node.js가 등장 하며 브라우저 밖에서도 실행할 수 있게 되었다.현재 자바스크립트는 브라우저 혹은 Node.js 위에서만 실행된며, 다른 환경(예: Python, Java 실행환경)에서는 동작하지 않는다. 1) 브라우저자바스크립트는 Google Chrome, Firefox, Safari 등 과 같은 웹 페이지에서 실행 가능하다. 브라우저는 JavaScript가 실행될 수 있도록 다음과 같은 기능을 제공하.. 공감수 3 댓글수 0 2025. 1. 6.
JSON(JavaScript Object Notation)이란? ( 메서드 : stringify / parse ) JSON 이란?만들어낸 객체를 네트워크를 통해 어딘가에 보내거나 로깅 목적으로 객체를 출력하고 싶다면,우리는 원하는 정보가 있는 객체 프로퍼티를 전부 문자열로 전환해야 한다. 만약, 우리가 만들어낸 객체가 복잡한 형태라면 어떨까? 개발 과정에서 프로퍼티가 계속 추가되거나 삭제, 수정된다면? 일일이 수정하는 방식은 꽤나 번거롭고 실수(오류)가 발생할 확률이 높을 것이다.JSON 은 이와 같은 문제를 해결하기 위해 나온 범용 포맷이다. JSON(JavaScript Object Notation)은 직역하자면 "자바스크립트 객체 표기법"으로 데이터를 쉽게 교환, 저장하기 위한 텍스트 기반의 표준이다. RFC 4627 표준에 정의되어 있는 JSON은 본래 자바스크립트에서 사용할 목적으로 만들어진 포맷이지만,데이.. 공감수 2 댓글수 1 2025. 1. 3.
[JavaScript] map() 과 filter() Array.prototype.map()map()은 Array.prototype에 정의된 함수이다. 따라서, 배열 객체에서만 사용할 수 있다. map() 메서드는 배열의 각 요소를 순회하며 콜백 함수를 적용한 결과를 모아 새로운 배열을 반환한다. 이때, map()은 새로운 배열로 복사하여 반환하기 때문에 원본 배열에 영향을 주지 않는다.map() 메서드의 기본형은 다음과 같다.//정의된 배열 arr에 map() 메서드를 적용let arr = [];arr.map(function(currentValue[, index[, array]]) { // 실행할 함수 로직;}[, thisArg]);형태별 구문 형식// 화살표 함수map((element) => { /* … */ })map((element[, ind.. 공감수 1 댓글수 1 2025. 1. 2.
[JavaScript] Date 값을 일관되게 출력하기 내장객체 Date() 값을 받아 yyyy-mm-dd 형태의 문자열로 변환시켜보려고 한다. UTC 기준먼저, 협정 세계시(UTC)를 기준으로 계산할 것인지, 로컬 시간대로 계산 할 것인지에 따라 차이가 존재한다.UTC는 서버다 데이터 베이스에서 사용하는 표준시간대로, 로컬 시간대와 상관없이 UTC기준의 날짜와 시간을 제공한다.toISOString() 메서드를 통해 가져오거나 다음과 같은 UTC 메서드를 통해 가져올 수 있다. toISOString() 메서드가 ISO 8601 표준형식( 예: 2024-12-27T04:19:13.272Z )으로 UTC 시간을 반환하도록 설계되어있기 때문에 UTC 시간 기준으로 형식을 변환하는 것이라면 간단하게 다음과 같이 코드를 작성할 수 있다.const date = new .. 공감수 2 댓글수 2 2024. 12. 27.
[JavaScript] 옵셔널 체이닝 " ?. " 옵셔널 체이닝(optional chaning)이란?옵셔널 체이닝은 ES2020(ECMAScript 2020)에서 정의된 표준 연산자이다.다른 연사자( +, - , *, /, .등)처럼 값을 평가하는 역할을 하는데, 옵셔널 체이닝은 객체나 속성에 접근할때 동작한다.옵셔널 체이닝을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.옵셔널 체이닝 연산자(?.)는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고,연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있다.?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만 만약 참조가 nullish(null 혹은 undefined)라면 에러가 발생하는 대신 표현식의 리턴값을 undefined로 리턴한다. 따라서 참조가 누락될 가능성.. 공감수 2 댓글수 1 2024. 12. 26.
[JavaScript] 정규 표현식, 정규식(Regular Expression) 정규 표현식(Regular Expression) 또는 정규식은 특정 문자 조합을 찾기 위한 패턴으로, 문자열에서 특정 패턴을 찾거나, 대체하거나, 분리하는데 사용된다.JavaScript에서 사용되는 정규식은 객체로서, 리터럴 표현으로 생성하거나 RegExp() 객체를 생성하여 사용할 수 있다.정규식 리터렬 표현은 /패턴/플래그 형식으로 구성되고, RegExp() 객체로 생성할 경우 new RegExp('패턴', '플래그')로 생성하여 사용된다.정규식 기본형 1. 정규식 리터럴 표현백슬러시( / )로 시작과 끝을 정의한다.백슬러시 사이에는 검색하고자 하는 패턴을 정의하고 뒤에 플래그를 붙여 동작 방식을 제어한다./패턴/플래그 2. 정규식 객체 생성RegExp 생성자를 사용하면 정규식 객체를 만들 수 있다... 공감수 1 댓글수 1 2024. 12. 19.
[JavaScript] Number.isInterger() 정수인지 확인하기 Number.isInterger() 메서드를 사용하면 값이 정수인지 확인할 수 있다.Number.isInteger(value)대상 값이 정수 혹은 정수로 표현할 수 있는 부동 소수점 숫자면 true를 반환한다.정수가 아니거나, 값이 NaN 혹은 Infinity, 혹은 숫자가 아닌 다른 것인 경우 false를 반환한다.+) 아주 작은 값인 경우 정수로 표현된다.일부 숫자 리터럴은 정수가 아닌 것처럼 보이지만 실제로는 정수를 나타낼 때가 있다.ECMAScript 부동 소수점 숫자 인코딩의 정밀도 제한(IEEE-754)으로 인해 발생한 것이다.예를 들어 5.0000000000000001는 5와 1e-16만큼만 차이가 나며, 이는 너무 작아서 표현할 수 없다. (참고로, Number.EPSILON은 1과 1보다.. 공감수 0 댓글수 0 2024. 12. 19.
해상도 관련 블로그 https://brunch.co.kr/@plusx/6 공감수 0 댓글수 0 2024. 12. 18.
[ios/safari] 아이폰 css 작성 시 주의사항 ** 아이폰을 쓰지말자..! 각 브라우저별로 기본 스타일을 가지고있다.따라서 iOS/Safari 에서도 일관된 스타일을 유지하기 위해 CSS 초기화가 필요하다.이외에도, iOS에서만 가지고 있는 여러 문제들을 함께 다뤄보겠다. CSS 스타일1) CSS 초기화 사이트를 이용하여 기본 스타일 제거브라우저별 스타일을 초기화 하기 위해서 리셋 스타일을 제공하는 사이트를 많이 이용한다.보통 Normalize나 Reset이 가장 많이 사용된다. Normalize CSS는 유용한 스타일들을 유지시키고, 버그 및 브라우저 간 차이점을 일치시켜준다.github를 통해 지속적인 업데이트를 하고있기 때문에 Reset CSS보다 안정성이 높다.하지만 스타일에 대한 가이드가 명확하게 없으며, 만들고자하는 스타일의 변화가 크다.. 공감수 2 댓글수 2 2024. 12. 18.
[html] 개발자도구에서 미디어쿼리가 안되는 이유 반응형 작업을 하기 위해 미디어쿼리를 사용했는데,브라우저를 바로 줄일 때는 반응형이 되는데 개발자 도구에서 해보려고하면 안되고,,,,개발자 도구에서 스타일을 확인하면 미디어 쿼리 코드가 아예 사라지는 이유를 찾았다.#크롬 기기툴반전환 안되는 이유..#엣지 장치 에뮬레이션토글 안되는 이유.. 이유는 바로 태그에 있었다.meta 태그란?메타 태그는 데이터를 설명하는 데이터로, 해당 문서에 대한 정보를 담고있다.검색엔진이나 문자인코딩 방식등을 지정하고 싶다면, 메타 태그에 내용을 명시해야한다.메타 태그에 있는 3가지(http-equiv, name, content) 속성을 통해 meta 정보의 이름과 내용을 지정한다. +) 참고 블로그1. 메타 태그 정리 2. 메타 태그 종류 모음 결론결과적으로 안됐던 이유.. 공감수 3 댓글수 3 2024. 12. 17.
[programmers - js] 모음 제거 / 정규표현식 캡처링, includes, replaceAll 나의 풀이function solution(my_string) { const arr = ['a', 'e', 'i', 'o', 'u']; for(let a of arr){ my_string = my_string.replaceAll(a, ''); } return my_string;} 다른 사람의 풀이정규표현식 캡처링 / replacefunction solution(my_string) { return my_string.replace(/[aeiou]/g, '');}includes는 배열 메소드이자 문자열 메소드function solution(my_string) { return Array.from(my_string).filter(t => !['a', 'e', 'i', .. 공감수 0 댓글수 0 2024. 12. 16.
[programmers - js] 짝수, 홀수 개수 / for...of 반복문 나의 풀이function solution(num_list) { let a = []; let b = []; num_list.forEach((x) => x % 2 == 0 ? a.push(x) : b.push(x)) return [a.length, b.length]} 다른 사람의 풀이for ... of 반복문for( a of b) 반복문은 b 배열의 각 요소를 a에 할당하며 순회한다. function solution(num_list) { var answer = [0,0]; for(let a of num_list){ answer[a%2] += 1 } return answer;}위의 예시에선 num_list 배열의 각 요소를 a에 할당하며 순회했다.ans.. 공감수 0 댓글수 0 2024. 12. 16.
[programmers - js] 중앙값 구하기 / sort((a,b) => a - b) 나의 풀이sort() 메서드를 통해 오름차순으로 배열을 정렬한 뒤, 배열의 개수를 절반으로 나누고 정수로 만들어 인덱스를 출력했다.function solution(array) { let arr = [...array].sort((a,b)=> a - b); let i = Math.floor(array.length / 2); return arr[i];} sort() 메서드sort() 메서드는 요소를 문자열로 변환한 다음 유니코드 순서에 따라 정렬하는 메서드이다.이를 숫자 배열에 사용하면 예상치 못한 결과가 나올 수 있다.(예를들어, 숫자 10 이 숫자 2보다 앞서서 정렬됨)이때, sort 메서드에 콜백 함수를 전달하여 숫자 배열을 올바르게 정렬 할 수 있다. sort ( ( a, b ) =>.. 공감수 0 댓글수 0 2024. 12. 16.
[programmers - js] 배열의 유사도 나의 풀이좀 무식하게 푼듯,,,function solution(s1, s2) { let arrNum = 0; for (let i = 0; i 다른 사람의 풀이filter 와 includesfilter 메서드는 배열에서 특정 조건을 만족하는 값들만 남기는 메서드이고,includes 메서드는 배열에 특정 값이 포함되어 있는지 확인하는 메서드이다. function solution(s1, s2) { const intersection = s1.filter((x) => s2.includes(x)); return intersection.length;}s1.filter 메서드 안에서 배열 s1의 각 요소 x에 대해 s2.includes(x) 조건을 확인하여 s2에 포함된 요소들만 걸러낸다. 조건.. 공감수 0 댓글수 1 2024. 12. 16.
[programmers - js] 문자열 뒤집기 나의 풀이function solution(my_string) { return [...my_string].reverse().join('')}.reverse() 메서드는 배열 객체의 데이터 순서를 거꾸로 바꾼다.그렇기 때문에 my_string을 먼저 스프레드 문자로 배열로 바꾼 다음 reverse 메서드로 뒤집었다.여기에서 바로 출력하면 [ ' j ', ' a ', ' r ', ' o ', ' n' ]과 같이 출력되기 때문에, 배열 객체의 데이터들을 소괄호 안의 문자로 연결하여 1개의 문자형데이터로 반환시켜주는 join() 메서드를 사용하여 문자열로 반환했다. 공감수 0 댓글수 1 2024. 12. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.