수빈이의 개발새발

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 생각보다 프론트가 해야 할 일은 많이 없다! 제대로 정리된 글이 별로 없어서 어렵게 느껴졌지만 ㅜㅜ 위의 그림처럼 백쪽은 다 빼고 오직 프론트 부분만 다..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 트럭 여러 대가 강을 가로지르는 일차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 다리에는 트럭이 최대 bridge_length대 올라갈 수 있으며, 다리는 weight 이하까지의 무게를 견딜 수 있습니다. 단, 다리에 완전히 오르지 않은 트럭의 무게는 무시합니다. 예를 들어, 트럭 2대가 올라갈 수 있고 무게를 10kg까지 견디는 다리가 있습니다. 무게가 [7, 4, 5, 6]kg인 트럭이 순서대로 최단 시간 안에 다리를 건너려면 다..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 ..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 ..

포트폴리오 프젝을 하면서 이런 식으로 해당 태그를 클릭하면 그 태그가 나타내는 부분으로 스크롤이 이동해야 하는 기능이 필요했다 그래서 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 바에 영감을 받은 ..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 길이가 같은 두 개의 큐가 주어집니다. 하나의 큐를 골라 원소를 추출(pop)하고, 추출된 원소를 다른 큐에 집어넣는(insert) 작업을 통해 각 큐의 원소 합이 같도록 만들려고 합니다. 이때 필요한 작업의 최소 횟수를 구하고자 합니다. 한 번의 pop과 한 번의 insert를 합쳐서 작업을 1회 수행한 것으로 간주합니다. 큐는 먼저 집어넣은 원소가 먼저 나오는 구조입니다. 이 문제에서는 큐를 배열로 표현하며, 원소가 배열 앞쪽에 있을수록 먼저 집어넣은 원소임을 의미합니다. 즉, pop을 하면 배..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 다음 규칙을 지키는 문자열을 올바른 괄호 문자열이라고 정의합니다. (), [], {} 는 모두 올바른 괄호 문자열입니다. 만약 A가 올바른 괄호 문자열이라면, (A), [A], {A} 도 올바른 괄호 문자열입니다. 예를 들어, [] 가 올바른 괄호 문자열이므로, ([]) 도 올바른 괄호 문자열입니다. 만약 A, B가 올바른 괄호 문자열이라면, AB 도 올바른 괄호 문자열입니다. 예를 들어, {} 와 ([]) 가 올바른 괄호 문자열이므로, {}([]) 도 올바른 괄호 문자열입니다. 대괄호, 중괄호, ..