본문 바로가기

전체보기789

[Javascript]텍스트필드 input 박스 포커스 했을때 class 추가/제거하기 javascript class를 이용해 객체를 생성 후 input 박스 포커스했을때와 아웃했을때 css를 추가/삭제하는 방법입니다. HTML 예시) 3개의 input 박스  CSS.focus{border:1px solid red} 포커스했을때 빨간색 라인추가하기 Javascriptclass TextField { constructor(textField){ this.elements = document.querySelectorAll('.' + textField); this.addFocusClass = this.addFocusClass.bind(this); this.removeFocusClass = this.removeFocusClass.bind(this); this.init(); } .. 2024. 5. 2.
[Javascript]코딩테스트 프로그래머스 "중복된 숫자 개수" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 중복된 숫자 개수문제 설명정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요. 제한사항1 ≤ array의 길이 ≤ 1000 ≤ array의 원소 ≤ 1,0000 ≤ n ≤ 1,000 입출력 예 입출력 예 설명입출력 예 #1- [1, 1, 2, 3, 4, 5] 에는 1이 2개 있습니다. 입출력 예 #2- [0, 2, 3, 4] 에는 1이 0개 있습니다.  문제 풀이방법1. filter()function solution(array, n){ const filtereArray = array.filter(num => num === n); return filtereAr.. 2024. 5. 2.
[Javascript]단축 평가 논리 연산자를 사용하여 조건문 처리하기(if를&&로) 조건문 처리할때 if문대신 &&단축 평가를 사용하는 방법입니다. 문제 설명n에 변수가 존재하고, true이면 실행하기 문제 풀이1. 값이 없을때 if문 예시// 값이 없을때 if문 예시let n;if(n){ console.log('true');} 2. 값이 없을때 && 논리 연산자 예시// 값이 없을때 && 예시let n;n && console.log('true'); 1번과 2번 결과물은 동일하게 값이 없으므로 출력되지 않습니다.  3. 값이 있을경우 'true' 출력// 값이 있을때 if문 예시let n = 1;if(n){ console.log('true');}// 값이 있을때 && 예시let n = 1;n && console.log('true'); 풀이 설명- 'n' 변수가 존재하고 'true'이면,.. 2024. 5. 2.
[Javascript]코딩테스트 프로그래머스 "각도기" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 각도기문제 설명각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요.  제한사항 입출력 예 입출력 예 설명입출력 예 #1- angle이 70이므로 예각입니다. 따라서 1을 return합니다. 입출력 예 #2- angle이 91이므로 둔각입니다. 따라서 3을 return합니다. 입출력 예 #2- angle이 180이므로 평각입니다. 따라서 4를 return합니다.  문제 풀이function solution(angle) { if(angle > .. 2024. 4. 30.
[Javascript]코딩테스트 프로그래머스 "배열의 평균값" 풀이 코딩테스트 연습 >코딩테스트 입문 >배열의 평균값문제 설명정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 제한사항 입출력 예 입출력 예 설명입출력 예 #1- numbers의 원소들의 평균 값은 5.5입니다. 입출력 예 #2- numbers의 원소들의 평균 값은 94.0입니다.  문제 풀이function solution(numbers) { const sum = numbers.reduce((acc, curr) => acc + curr, 0); return sum / numbers.length;}console.log(solution([1,2,3,4,5,6,7,8,9,10])); // 결과값 5.5 풀이 설명해당.. 2024. 4. 30.
[Javascript]코딩테스트 프로그래머스 "두 수의 나눗셈" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 두 수의 나눗셈문제 설명정수 num1과 num2가 매개변수로 주어질 때, num1을 num2로 나눈 값에 1,000을 곱한 후 정수 부분을 return 하도록 soltuion 함수를 완성해주세요. 제한사항 입출력 예 입출력 예 설명입출력 예 #1- num1이 3, num2가 2이므로 3 / 2 = 1.5에 1,000을 곱하면 1500이 됩니다. 입출력 예 #2- num1이 7, num2가 3이므로 7 / 3 = 2.33333...에 1,000을 곱하면 2333.3333.... 이 되며, 정수 부분은 2333입니다.  문제 풀이function solution(num1, num2){ return Math.floor((num1 / num2) * 1000);} 화살표.. 2024. 4. 30.
[Javascript]코딩테스트 프로그래머스 "나이 출력" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 나이 출력문제 설명머쓱이는 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 2022년 기준 선생님의 나이 age가 주어질 때, 선생님의 출생 연도를 return 하는 solution 함수를 완성해주세요 제한사항-0 -나이는 태어난 연도에 1살이며 매년 1월 1일마다 1살씩 증가합니다. 입출력 예 입출력 예 설명입출력 예 #1- 2022년 기준 40살이므로 1983년생입니다. 입출력 예 #2- 2022년 기준 23살이므로 2000년생입니다.  문제 풀이function solution(age) { const currentYear = 2022; // 2022년 기준 return currentYear - age + 1;} 풀이 설명현재시간 가져오는 함수 getFu.. 2024. 4. 30.
[Javascript]코딩테스트 프로그래머스 "숫자 비교하기" 풀이 문제 설명정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1 다르면 -1을 retrun하도록 solution 함수를 완성해주세요. 제한사항 입출력 예 입출력 예 설명입출력 예 #1- num1이 2이고 num2가 3이므로 다릅니다. 따라서 -1을 return합니다. 입출력 예 #2- num1이 11이고 num2가 11이므로 같습니다. 따라서 1을 return합니다. 입출력 예 #3- num1이 7이고 num2가 99이므로 다릅니다. 따라서 -1을 return합니다.  문제 풀이let solution = (num1, num2) => num1 === num2 ? 1 : -1; 풀이 설명'num1'을 'num2'로 나눈 나머지가 0인지 확인하고, 그 결과를 반환합니다. 만약 0이면 '1' (t.. 2024. 4. 29.
[Javascript]코딩테스트 프로그래머스 "몫 구하기" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 몫 구하기문제 설명정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요. 제한사항- 0 - 0  입출력 예내용 num1105num272result23 입출력 예 설명입출력 예 #1- num1이 10, num2가 5이므로 10을 5로 나눈 몫 2를 return 합니다. 입출력 예 #2- num1이 7, num2가 2이므로 7을 2로 나눈 몫 3을 return 합니다.  문제 풀이let solution = (num1, num2) => Math.floor(num1 / num2); 풀이 설명이 코드는 두 숫자를 나눈 후 'Math.floor()' 함수를 사용하여 몫을 반환합니다. 함수를 호.. 2024. 4. 29.
[영화]웃음이 많았던 범죄도시4 후기 1000만 관객 돌파 예감 역시나 범죄도시4는 관람객이 꽉 찼다.내가 자주가는 CGV는 총 7관에서 7관 모두 상영중이었고, 만석이었다. 마석 CGV를 자주가는 이유는 좌석이 리클라이너라 같은 가격에 누워서 볼수 있다. (단점은 지루한 영화는 잠이 솔솔온다.)장이수(박지환)는 범죄도시에서 빠질 수 없는 고정 역할이 되어버렸다.  이제는 장이수 포스터도 제작이 되는구나.. 장이수의 불쌍한 얼굴 표정이 재미요소를 더한다.장이수만 나오면 아주머니들이 박수를 치면서 웃던데.. 박수는 자제해주셨으면 좋겠.. 줄거리2018년 불법도박 사이트와 관련된 범죄이야기를 소재로 줄거리가 진행된다.그때 당시 한국 개발자들이 필리핀에 있는 불법도박사이트를 강제적으로 개발하게 되고, 그에 따른 사망사건들이 있었던 시기이다. 범죄도시는 실화를 바탕으로 제작.. 2024. 4. 27.
[SASS]SASS,SCSS 어느것을 사용하면 좋을까? 차이점 살펴보기 초기 버전의 Sass는 들여쓰기를 사용하여 구문을 정의하는 특이한 문법을 가졌습니다.그러나 이러한 문법은 일부 사용자에게 혼란을 줄 수 있었고, CSS와의 호환성이 떨어졌습니다. 이에 따라 나중에 SCSS가 도입되었습니다. SCSS는 CSS와 거의 동일한 구문을 가지고 있기 때문에 CSS를 작성하던 개발자들이 쉽게 스위칭할 수 있었습니다. 또한 SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 구문을 정의하기 때문에 CSS와의 호환성이 더 높았습니다. 이러한 이유로 SCSS가 Sass보다 더 인기 있고 널리 사용되고 있습니다. 결국, Sass와 SCSS는 모두 Sass의 구현 형태 중 하나이며, 프로젝트에 따라 선택할 수있습니다. 그러나 대부분의 경우 SCSS가 더 일반적으로 사용되며, Sass보다 더 널.. 2024. 4. 25.
[SCSS]SCSS문법과 예시 SCSS (Sassy CSS)는 Sass의 주요 구현 중 하나로, CSS와 거의 동일한 구문을 사용하며 Sass의 모든 기능을 지원합니다. SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 같은 구문을 사용하기 때문에 CSS 코드를 유효한 SCSS로 변환하는 것이 쉽습니다. 1.변수 (Variables)$ 기호를 사용하여 변수를 정의할 수 있습니다.$primary-color: #FF6347; 2.중첩 (Nesting)CSS 선택자를 중첩하여 코드의 가독성을 높일 수 있습니다..container { width: 100%; .header { background-color: #333; color: #FFF; }} 3.Mixin재사용 가능한 코드 조각을 생성하는데.. 2024. 4. 25.
[Javascript]코딩테스트 프로그래머스 "배열의 길이에 따라 다른 연산하기" 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 배열의 길이에 따라 다른 연산하기문제 설명정수 배열 arr과 정수 n이 매개변수로 주어집니다. arr의 길이가 홀수라면 arr의 모든 짝수 인덱스 위치에 n을 더한 배열을, arr의 길이가 짝수라면 arr의 모든 홀수 인덱스 위치에 n을 더한 배열을 return 하는 solution 함수를 작성해 주세요. 제한사항1 ≤ arr의 길이 ≤ 1,0001 ≤ arr의 원소 ≤ 1,0001 ≤ n ≤ 1,000 입출력 예arr[444, 555, 666, 777][444, 655, 666, 877]n27100result[76, 12, 127, 276, 60][444, 655, 666, 877] 입출력 예 설명입출력 예 #1- 예제 1번의 arr의 길이는 5로 홀수입니다... 2024. 4. 25.
[Javascript]코딩테스트 프로그래머스 "뒤에서 5등까지" 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 뒤에서 5등까지문제 설명정수로 이루어진 리스트 num_list가 주어집니다. num_list에서 가장 작은 5개의 수를 오름차순으로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 제한사항- 6 ≤ num_list의 길이 ≤ 30 - 1 ≤ num_list의 원소 ≤ 100 입출력 예num_list[12, 4, 15, 46, 38, 1, 14] result[1, 4, 12, 14, 15] 입출력 예 설명입출력 예 #1- [12, 4, 15, 46, 38, 1, 14]를 정렬하면 [1, 4, 12, 14, 15, 38, 46]이 되고, 앞에서 부터 5개를 고르면 [1, 4, 12, 14, 15]가 됩니다.  문제 풀이function solut.. 2024. 4. 25.
[Javascript]코딩테스트 프로그래머스 "정수" 부분 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 정수 부분문제 설명실수 flo가 매개 변수로 주어질 때, flo의 정수 부분을 return하도록 solution 함수를 완성해주세요. 제한사항0 ≤ flo ≤ 100 입출력 예flo result1.42 169.32 69 입출력 예 설명입출력 예 #1- 1.42의 정수 부분은 1입니다. 입출력 예 #2- 69.32의 정수 부분은 69입니다. 문제 풀이let solution = (flo) => Math.floor(flo);console.log(solution(3.534423)); //확인 풀이 설명Math.floor정적 Math.floor()메서드는 항상 반올림하여 주어진 숫자보다 작거나 같은 가장 큰 정수를 반환합니다. 참고Math.floor()https://de.. 2024. 4. 25.
[맛집]서울 근교 아는사람만 간다는 남양주 마석 솥뚜껑 닭볶음탕(매운탕) 서울 근교에 맛집을 찾고 있다면, 드라이브하면서 출출할 때 들려도 좋을듯하다.참고할 사항은 오전 11시 오픈인데, 오전에 갈려면 10시반~11시 사이에 미리 주차해놓고 예약 걸어두는 걸 추천한다.(늦게 가면 기본 웨이팅 100팀정도..된다) 오후 7시까지 주문을 받기때문에 오후에 갈려면 그전에 가야할것이다. 가성비가격은 일반 닭볶음탕 음식점과 비슷하다.개인적으로 맛은 보통에서 조금 더 맛있는 정도? 인데 솥뚜껑에 조리를 하니, 다른 식당과 차별화된 부분이다. 가격은 다른 식당과 별반 차이가 없다.  오뎅사리는 솔직히 좀 작고, 수제비 사리는 몇개 없다.감자사리도 있는데 감자 좋아하시면 추가하는 걸 추천한다.  매운탕은 먹진 못해봤지만, 닭볶음탕을 감안했을때 맛있을거라고.. 2024. 4. 24.
[자동차]벤츠 c300 AMG Line 신형 풀체인지(w206) 한달 주행후 장단점 정리 c300 뽑은 지 한 달이 조금 넘은듯하다. 한 달여간 1,200킬로 정도 타면서 장단점과 개인적인 생각을 작성해 본다. 장점 1. 디자인 사람이든, 물건이든, 자동차든 시각적인 요소가 제일 먼저 다가온다. 그다음이 성격, 실용성, 성능이 좋은가를 따지게 마련이다. 이렇듯 디자인은 어떤 걸 선택하고 판단하는데 매우 중요한 요소이다. 개인마다 선호하는 디자인의 차이는 있지만, 대중적으로 볼 때 c300(w206) 디자인은 대부분 괜찮다고 평가하고 있고, 나 역시도 그렇다. 특히나 실내 디자인 감성은 호불호가 크지 않다. 그래서 벤츠를 여성 오너들이 더 선호하는 이유이다. 2. 안전한 주행감과 스피드 차체가 낮은 디자인과 마력도 한몫하겠지만, 고속주행은 정말 만족스러웠다. (조수석에 탄 사람이 아주 흡족해함.. 2024. 4. 4.
[자동차]투싼을 버리고 2024년 벤츠 신형 c300 AMG Line(w206)으로 바꾸다 10년을 타야지 하고 구매했던 우리 싸니를 보내고 벤츠를 구매하고야 말았다. https://webmini.tistory.com/1161 [자동차]잘타던 현대차 중고로 판 이유 (모비스의 현실태) 2017년 10월에 구매해서 지금까지 큰 탈 없이 잘 타고 다녔었다. 첫 SUV라 애정도 많이주고, 관리도 때마다 잘했었다. https://webmini.tistory.com/869 [자동차]사랑하는 애마 올뉴투싼 블로그 포스팅을 정 webmini.tistory.com 별 탈 없이 아무런 부담 없이 6년가량을 함께 해왔었는데, 모비스의 서비스로 인해 결국 멀쩡하던 차를 중고로 팔게 되었다... 새로운 주인을 만나기 위해 이상 있는 곳을 꼼꼼히 체크하고 중고업자에게 소음기 수리비도 주고, 넘기게 됐다.. 관리를 잘.. 2024. 3. 12.
[자동차]잘타던 현대차 중고로 판 이유 (모비스의 현실태) 2017년 10월에 구매해서 지금까지 큰 탈 없이 잘 타고 다녔었다. 첫 SUV라 애정도 많이주고, 관리도 때마다 잘했었다. https://webmini.tistory.com/869 [자동차]사랑하는 애마 올뉴투싼 블로그 포스팅을 정말 오래간만에 하는군요. 로그인 했더니 휴먼계정으로 분류가 되어있어서 놀랬습니다. ㅎ 블로그에 글을 올릴만한 주제는 많았으나, 예전만큼의 열정과 살아가면서 여러가 webmini.tistory.com 자동차검사 자동차는 년식에 따라 2년, 1년 등 때마다 자동차 검사를 하게 된다. 그동안 자동차 검사 시 이상이 없었는데, 이번 자동차 검사는 소음기 쪽이 부식이 돼서 불합격 판정을 받은 것이었다. 부식이 됐으니 교체하면 되겠구나 하고 가볍게 생각을 했었다. 그런데 공업소에서는 해.. 2024. 2. 25.
[잡담]티스토리 댓글 이벤트 카카오 프렌즈 춘식이 다이어리 세트 당첨 후기 티스토리 댓글이벤트에 당첨돼서 카카오프렌즈 2024년 다이어리 세트를 받았습니다. 감사의 마음으로 후기 남깁니다. https://notice.tistory.com/2662 [마감] 댓글로 고마운 마음 전하고 카카오프렌즈 다이어리 받으세요 📒 안녕하세요. 티스토리팀입니다. 꼼꼼한 맛집 리뷰로 맛있는 한 끼를 보장해 준 블로그, 놓치면 안 될 영화의 관전 포인트만 콕콕 집어준 블로그, 어려운 개발 개념을 알기 쉽게 설명해 준 블로그 notice.tistory.com 카카오프렌즈 춘식이 카카오프렌즈에서 '라이언'을 좋아라 했었는데, 춘식이도 라이언 못지않게 귀욤귀욤 하네요. 2024 카카오 춘식이 다이어리 세트 구성 세트구성은 다음과 같습니다. 1. 다이어리 2. 탁상용 캘린더 3. 체크리스트 메모지 4. F.. 2024. 1. 6.
[영화]임진왜란 이순신 3부작 노량해전 : 죽음의 바다 영화 후기 (명량,한산,노량요약) 임진왜란때 최고의 충신이자 전략가인 이순신 장군의 전쟁 일대기를 영화로 담은 명량해전,한산도대첩,노량해전까지 간략한 요약과 후기를 남겨본다. 임진왜란 임진왜란은 1592년(선조 25)부터 1598년까지 2차에 걸쳐서 우리나라에 침입한 일본과의 싸움이다. 이때 서양에서 전래된 신무기인 조총이 등장한다. 명량 명량해전은 조선 수군의 함선 12척이 명량 해협에서 일본 수군 함선 133여 척을 격퇴한 해전이다. 이때 거북선이 등장하는데, 이미 거북선은 1415년(태종 15년) 조선왕조실록에서 거북선에 대한 기록이 처음 나온다. 일본배는 노략질을 하고 빠른 속도로 도주해야하니까 항해를 위해 폭이 좁고 날렵한 반면 조선배는 안정적이고, 튼튼한 이점이 있었다. 12척으로 일본 수군 함선 330여 척을 이기기위해 학인.. 2024. 1. 3.
[Javascript]자바스크립트 console.log 사용방법 JavaScript의 console.log() 함수는 콘솔에 메시지를 출력하는 데 사용됩니다. 이 함수를 사용하여 코드 실행 중에 값을 확인하거나 디버깅에 도움을 얻을 수 있습니다. 아래는 console.log()의 간단한 사용 방법입니다 1.텍스트 출력 console.log("안녕하세요, 콘솔!"); 2.변수 출력 let 변수 = "값"; console.log(변수); 3.여러 값 출력 let 변수1 = "값1"; let 변수2 = "값2"; console.log(변수1, 변수2); 4.변수와 문자열 결합 let 숫자 = 42; console.log("숫자는 " + 숫자 + "입니다."); 5.포맷된 출력 let 이름 = "John"; let 나이 = 25; console.log(`이름: ${이름}, .. 2023. 12. 17.
[Javascript]자바스크립트 객체(Objec의 기본 구조 및 예제 JavaScript에서 객체는 데이터와 해당 데이터를 조작하기 위한 동작을 포함하는 복합 데이터 유형입니다. 객체(Object)란? 객체는 키-값 쌍의 모음이며, 키는 문자열 또는 기호이고, 값은 어떠한 데이터 유형이나 함수가 될 수 있습니다. 객체는 중괄호 {}로 표현되며, 키-값 쌍은 쉼표로 구분됩니다. object = 물건, 물체 자바스크립트 객체는 속성(Property)과 행동(또는 메서드(Method))으로 구성됩니다. 객체는 데이터를 저장하는 속성과 그 데이터를 조작하거나 동작하는 메서드를 포함합니다. 이러한 속성과 메서드는 객체의 상태와 행동을 정의하며, 객체의 핵심적인 특징 중 하나입니다. 객체의 기본 구조 및 예제 다음은 JavaScript 객체의 기본 구조 및 예제입니다. // 객체 생.. 2023. 12. 17.
[Jquery]티스토리 Youtube 동영상 첨부시 반응형 처리하기 티스토리에서 'Youtube 동영상 첨부 시' Jquery로 반응형 처리하는 방법입니다. 글쓰기 에디터에서 동영상을 첨부했을때입니다. 위처럼 동영상 첨부를 하게 될 경우 해상도가 줄어들면 영상 사이즈가 고정되어 있어서 줄어들지 않습니다. 위 문제를 Jquery로 자동으로 리사이징 해주는 방법이라고 이해하시면 됩니다. 스킨 수정 1. 티스토리 로그인 후 '꾸미기 > 스킨 편집'으로 접근합니다. 2. 스킨 편집 HTML에서 위에 아래 코드를 삽입합니다. '저장' 버튼을 누릅니다. 코드 설명 해당 JavaScript 코드는 jQuery를 사용하여 YouTube 비디오를 리사이즈하는 함수를 정의하고, 창 크기가 변경될 때와 문서가 로드될 때 이 함수를 호출하는 이벤트 핸들러를 설정합니다. - $(window)... 2023. 12. 7.
[영화]서울의 봄을 보기 전에 봐야 할 영화들 '서울의 봄'을 보기 전에 봐야 할 영화들을 시대순으로 나열해 봅니다. 1. 남산의 부장들 475만 관객수를 기록한 '남산의 부장들'입니다. 제8대 중앙정보부 부장 김재규가 박정희 대통령 암살을 하기까지의 과정을 그린 영화입니다. 1979년 10월 26일 김재규에 의해 피격당하게 됩니다. 2. 서울의 봄 박정희 대통령이 김재규에게 피격당하고 최규하 대통령이 1975년부터 국무총리로 재직하다가 대통령 권한대행으로 비상계엄령을 선포했으며, 그해 12월 통일주체국민회의에서 대통령으로 선출되게 됩니다. 그 후에 전두환 등 신군부의 압력으로 8개월 만에 대통령직에서 물리게 되는데, 그전까지의 과정을 그린 영화입니다. 그날이 바로 1979년 12월 12일 1212 사태입니다. [영화]하나회 1212사태 실화 '서울.. 2023. 12. 7.