SUVIN

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제 접근법해당 문제는 해시와 정렬을 함께 활용해야겠다는 방향으로 접근했다.먼저, 장르별 총 재생 수를 저장한 Map을 만든 후, 이를 재생 수 기준 내림차순으로 정렬하여,정렬된 장르 순서만을 담은 배열을 도출했다. 이 배열은 곧 곡을 수록할 장르의 우선순위가 된다.그 다음, 각 장르에 해당하는 곡들을 [고유번호(index), 재생 수] 형태로 Map에 저장하고,재생 수 기준으로 내림차순 정렬하여 장르 내 우선순위를 정리했다.마지막으로, 각 장르별로 가장 많이 재생된 곡의 고유번호를 결과 배열에 추가하고,해당 장르에 곡이 2개 이상인 경우 두 번째 곡..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 해시(Hash)란?해시는 키(Key) - 값(Value) 쌍을 저장하는 자료구조로, 보통 해시 테이블(Hash Table) 또는 **해시 맵(Hash Map)**을 사용한다.해시로 출제되는 문제는 주로 아래와 같은 유형을 가지고 있는데 "의상" 문제는 빈도수 카운팅을 활용한 문제이다. 중복 검사빈도수 카운팅 ✅두 배열 간 공통 요소 찾기부분 배열의 합 문제 2. 문제 접근법해당 문제는 결국 의상의 "조합"을 도출하는 문제이며, 조합의 경우의 수를 구하기 위해 해시를 활용해야 하는 문제라고 생각했다.나는 의상의 개별적인 이름에는 관심을 두지 않고, 각 ..

시간 복잡도와 공간 복잡도가 등장한 이유시간 복잡도와 공간 복잡도는 어떤 알고리즘이 더 효율적인지 분석하기 위해 탄생한 개념입니다.컴퓨터는 연산 속도와 메모리에 한계가 있기 때문에 같은 문제를 풀더라도 더 빠르고 메모리를 적게 사용하는 방법을 찾는 것이 중요합니다.초기 컴퓨터는 연산 성능이 낮고 저장 공간이 부족했기 때문에 프로그래머들은 어떤 알고리즘이 실행 속도가 빠른지, 얼마나 많은 메모리를 사용하는지 분석하는 방법을 연구해 왔습니다.이 과정에서 시간 복잡도와 공간 복잡도를 정의하고, 알고리즘을 빅오 표기법(Big-O Notation)으로 표현합니다. 1. 시간 복잡도(Time Complexity)프로그램이 올바르게 실행되는 것도 중요하지만, 빠르게 실행되는 것이 더욱 중요합니다.알고리즘을 잘못 선택..

npm install create-react-appnpm install react-router-dom@6npm install swiper ... 웹 프론트엔드 개발자라면 모를 수 없는 npm항상 써오기만 했던 npm을 내가 직접 npm에 배포에 다른 개발자들이 사용할 수 있게 한다면? 재미있을 거 같아서 바로 가보자고..🤤   사전에 필요한것🧐어떤 라이브러리를 만들 것인지에 대한 아이디어 나는 실제로 react 컴포넌트를 npm 라이브러리로 배포하면서 컴포넌트화와 재사용성에 대해 많이 배우고 얻었다. (이 전에 스터디했던 내용이 더 바탕이 많이 되어주었지만.. 이에 대한 내용은 다음 글로 남기겠다)    1. npm 회원가입 및 로그인 npm | HomeBring the best of open sou..

백앤드랑 협업해 프로젝트를 진행하면서 카카오 소셜 로그인 구현을 맡게 되었다! 찾아보니 여러 가지 방식들이 있었지만 다 방식이 달라서 엄청 헤맸던.. 소셜 로그인 부분에서 프론트와 백의 역할이 있지만 나는 프론트 담당이었으므로 프론트에서 해야 할 일만 포스팅하겠다! 우리 프로젝트는 REST API를 사용해 카카오 로그인을 구현하였다 관련 문서는 ↓ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 생각보다 프론트가 해야 할 일은 많이 없다! 제대로 정리된 글이 별로 없어서 어렵게 느껴졌지만 ㅜㅜ 위의 그림처럼 백쪽은 다 빼고 오직 프론트 부분만 다..

포트폴리오 프젝을 하면서 이런 식으로 해당 태그를 클릭하면 그 태그가 나타내는 부분으로 스크롤이 이동해야 하는 기능이 필요했다 그래서 useRef를 통해 해당 DOM에 접근을 했다 이동할 DOM에 ref를 담아준다 배열을 통해서 담았다 아니면 useRef 3개나 만들어야해서 .. 개스레기코드다... const scrollRef = useRef([]); /// { scrollRef.current[0] = el; }} > A { scrollRef.current[0] = el; }} > B { scrollRef.current[0] = el; }} > C onClick시 실행될 함수이다 const handleScroll = (ref) => { ref.scrollIntoView({ behavior: "smooth..

이어서.. [React Project: 포트폴리오 웹페이지(0)] 디자인 - Figma 어느 정도 리액트를 익혔으니 개인프로젝트를 진행하려 한다! 리액트로 개인포트폴리오 페이지를 제작할 것이다 웹페이지를 제작하기 전에 가장 먼저 해야 할 것은 웹페이지를 어떤 식으로 만 su-vin25.tistory.com 앞서 디자인을 완성하였다면 차례대로 페이지를 만들어주면 된다 나는 기초세팅과 main페이지인 Home부터 제작을 하였다 페이지 라우팅 퍼블리싱 이 정도를 한 거 같다 1. 페이지 만들기 내 프로젝트에 필요한 페이지를 pages폴더를 생성해 그 안에 만들어주었다 2. 페이지 라우팅 나는 페이지 라우팅을 하기 위해 react-router 라이브러리를 사용하였다 Home v6.8.0 I'm on v5 The..

어느 정도 리액트를 익혔으니 개인프로젝트를 진행하려 한다! 리액트로 개인포트폴리오 페이지를 제작할 것이다 웹페이지를 제작하기 전에 가장 먼저 해야 할 것은 웹페이지를 어떤 식으로 만들지에 대한 디자인이라고 생각한다. 그래서 웹페이지 디자인에 유용한 Figma를 통해서 디자인해 보았다 Figma가 css코드도 뱉어주진만 완벽하진 않아서 사용하지 않을 거고 색상코드와 페이지 제작 시 보면서 만들용으로 사용하였다 내 피그마 페이지이다! page는 Home/ Me/ Project/ Contact 총 4개의 페이지로 이루어질 것이다 뭐 만들다 추후 수정이 있을 수 있겠지만! 1. Home Home페이지 이자 프로젝트의 Main페이지다 깔끔하고 가독성 좋게 만들고 싶었기 때문에 Mac의 Dock 바에 영감을 받은 ..

Open Graph 콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것 이런 식으로 sns에서 링크를 보냈을 때 링크에 대한 썸네일, 미리 보기 제목, 내용이 보이게 하는 것이 Open Graph태그이다 사용할 썸네일파일은public 디렉터리 밑에 넣어준다 각각이 나타내는 영역이다 //썸네일 //제목 미리보기 //내용 이렇게 생성해준다 수정을 한 것이므로 다시 한번 빌드와 배포를 해주자 npm run build firebase deploy 아라랏 근데 적용이 안된다... 데이터를 링크가 공유가 될 때마다 가져오는 게 아니라 캐시처럼 보관해 두었다 쓰기 때문에 open graph설정을 바꿨다고 바로바로 바뀌진 않는다! 그렇다고 가만히 내버려두면 아예 적용이 안될 수 ..

리액트로 개발한 프로젝트를 배포해 보자 뭐 서버를 구축해서 배포하는 방법은 구축비용이라던가 너무 복잡하기 때문에 firebase를 사용해 좀 더 편리하게 배포를 해볼 것이다. firebase 사이트로 이동해 새로운 프로젝트를 만들어보자 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com react-project로 이름을 지정해 준 후 애널리틱스 사용설정을 해제하고 프로젝트를 만들어준다 만들어진 프로젝트에 가 Hosting 메뉴에 들어가 시작하기를 눌러주고 설치코드를 복사 후 터미널로 실행해 준다 다음 내가 만든 프로젝트 위치로 이동해 준다 그냥 vscode에서 터미널에서 하면 된다! 두..