전체 글

프론트엔드 개발 전반을 다루는 기술 블로그입니다.
programmers

[Programmers Level 1] 진료 순서 정하기 Javascript

문제정보 정수 배열 emergency가 주어집니다. 그리고 응급도가 높은 순서대로 재구성한 배열을 리턴합니다. 예시를 보면 직관적으로 이해될거에요 예시 emergencyresult [3, 76, 24][3, 1, 2] [1, 2, 3, 4, 5, 6, 7][7, 6, 5, 4, 3, 2, 1] [30, 10, 23, 6, 100][2, 4, 3, 5, 1] 간단하게 생각하면 emergency의 요소들의 크기를 비교해서 제일 큰수는 1 두번째로 큰 수는 2 이런식으로 순서를 매겨주면 되는군요 나의풀이 function solution(emergency) { let answer = [] for(i=0;ib-a); return emergency.map(v=>sorted.indexOf(v)+1); } map으로 ..

programmers

[Programmers Level 0] 팩토리얼 Javascript

문제정보 처음엔 팩토리얼값을 구하는 문제인줄 알고 팩토리얼 값을 구하는 코드를 짰는데 통과가 안되어서 뭐지..? 했네요 매개변수로 주어지는 정수 n보다 같거나 작은 팩토리얼값을 구하는 문제였어요 예시 nresult 362880010 73 나의풀이 function solution(n) { let counter = 1 let answer = 0 for(i=1 ; i= counter) { answer = i } } return answer } 간단하게 구현했습니다. 10!보다 큰 수는 주어지지 않으니까 i를 10까지 반복하고 팩토리얼을 n과 비교해주면서 가장 큰 팩토리얼을 찾고 리턴해줬습니다. 다른사람의 풀이 function solution(n) { let i = 1; let f = 1; while (f*i ..

programmers

[Programmers Level 0] 중복된 문자 제거 Javascript

문제정보 문자열이 매개변수로 주어집니다. 모든 중복을 제거한 문자열을 리턴하면 됩니다. 중복을 제거하는 방법에는 다양한 방법이 있지만 저는 Set() 을 이용한 방법을 사용했습니다. 예시 my_stringresult "people""peol" "We are the world""We arthwold" 나의풀이 function solution(my_string) { let set = new Set(my_string) return [...set].join('') } set()에 my_string을 넣어주고 스프레드연산자를 이용해 배열로 만들어준 다음 문자열로만들어줬습니다. 다른사람의 풀이 function solution(my_string) { return [...new Set(my_string)].join('..

programmers

[Programmers Level 0] 합성수 찾기 Javascript

문제정보 정수 n이 매개변수로 주어지고 n이하의 합성수의 개수를 리턴하는 문제입니다. 합성수란 약수가 3개이상인 수를 뜻한다고하네요 예컨대4는 1,2,4로 나눠지기때문에 합성수이고 3은 1,3으로만 나눠지기때문에 합성수가아닙니다. 이것도 예전에 풀어보다가 막혀서 남겨뒀던 문제인데 오늘 다시 풀어보니 풀리네요.. 저는 for문을 중첩해서 문제를 풀었습니다. 예시 nresult 105 158 나의풀이 function solution(n) { let answer = 0 for(i=1; i

programmers

[Programmers Level 0] 피자 나눠 먹기(2) Javascript

문제정보 정수 n이 매개변수로 주어지고 n명이 모두 동일하게 피자조각을 나눠 먹어야합니다. 피자조각은 한판에 6개입니다. 예시 nresult 61 105 42 입출력 예 #1 6명이 모두 같은 양을 먹기 위해 한 판을 시켜야 피자가 6조각으로 모두 한 조각씩 먹을 수 있습니다. 입출력 예 #2 10명이 모두 같은 양을 먹기 위해 최소 5판을 시켜야 피자가 30조각으로 모두 세 조각씩 먹을 수 있습니다. 입출력 예 #3 4명이 모두 같은 양을 먹기 위해 최소 2판을 시키면 피자가 12조각으로 모두 세 조각씩 먹을 수 있습니다. 나의풀이 function solution(n) { let counter = 6 let answer = 1 while(counter % n != 0) { counter += 6 ans..

leetcode

35. Search insert Position easy

문제 링크 https://leetcode.com/problems/search-insert-position/ Search Insert Position - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제 정보 오름차순으로 정렬된 정수배열 nums와 정수 target이 매개변수로 주어집니다. 정수배열의 요소 중 target이 있다면 해당 인덱스를 반환합니다. 정수배열의 요소 중 target이 없다면 target이 들어가야할 인덱스를 반환합니다. example In..

leetcode

1281. Subtract the Product and Sum of Digits of an Integer

문제링크 https://leetcode.com/problems/subtract-the-product-and-sum-of-digits-of-an-integer/ Subtract the Product and Sum of Digits of an Integer - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제정보 간단한 문제여서 딱히 test case를 갖고오지 않아도 될것같습니다. 정수 n이 매개변수로 주어지고 n의 각 자릿수의 곱과 각 자릿수의 합 간의 차이를..

Network

TCP와 UDP의 특징과 차이점

이 글은 MDN과 킹무위키 그리고 많은 블로그들을 토대로 쓰여졌습니다. 틀린 내용이 있다면 아무튼 내잘못은 아닌듯함 TCP와 UDP는 네트워크 프로토콜의 한 종류입니다. 언뜻 생각하기엔 무조건 TCP가 좋은게 아닌가 싶지만 두 방식 모두 일장일단이 있기 때문에 사용처가 다른 프로토콜이라고 할 수 있습니다. OSI 7계층구조로 보면 전송계층에서 이루어지는 프로토콜입니다. OSI 7계층이 뭔지를 모르고 보더라도 전송 계층이라고 하면 아...뭔가를 전송하는구나...라고 예상할 수 있겠네요 맞읍니다 TCP,UDP는 무언가를 전송하기 위한 방법입니다. TCP(Transmission Control Protocol) 전송제어 프로토콜 나무위키 설명에 따르면 이렇습니다 컴퓨터가 다른 컴퓨터와 데이터 통신을 하기 위한 ..

TIL/html

마크다운(MARKDOWN) 언어 vsc(vs코드)에서 작성하기

마크다운 언어란 마크업 언어의 일종으로 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)라는 사람이 만든 언어입니다. HTML과는 달리 읽기쉽고 쓰기 쉬운 문서양식을 지향한다는데요 확장자가 .md , .markdown이라고합니다. 지금까지 전혀 모르고있던 README.md 파일의 비밀이 풀리는 순간이네요.. 왜 이사람들은 읽으라면서 읽을 파일을 txt파일이아니라 처음보는 확장자로 만들어놨지? 했었는데 마크다운으로 작성해서 그런거였군요.. 근데 깃허브에서 작성하려고하니까 이거.. 내가 잘 작성하고있는지도 모르겠고 어떻게 작성하라는지도 몰?루겠고 그냥 블로그가 그리워질뿐이고 그랬는데 찾아보니까 아주 간단한 문법으로 사용할 수 있으면서 vsc에서 작성하는것도 편리하게 할 수 있더라고요!..

css

css border 기능으로 테두리만 있는 말풍선, 꽉찬 말풍선 만드는 사이트

css border 말풍선? css에서는 border속성을 통해서 말풍선을 만들수가 있습니다. border 속성을 적용한 개체에 width,heigth값이 극단적으로 낮은 상태에서 border값만 키워주게되면 이런식으로 테두리가 세모모양이 되는것을 이용해서 구현하는 방식입니다. 그리고 말풍선모양을 만들때 필요하지 않은 border 라인들은 색상을 transparent(투명)하게 설정해주면 되는것이죠 https://projects.verou.me/bubbly/ Bubbly — CSS speech bubbles made easy projects.verou.me 꽉찬 말풍선은 잘 만들어진 사이트들이 있었습니다. 가장 괜찮았던 사이트가 위 bubbly라는 사이트였는데 사이트 디자인이 직관적이어서 금방 사용할 수..

냠냠맨
React와 TypeScript를 좋아하는 개발자