cha123hein 님의 블로그

1. 선택창만들기(계절)계절에 따라 메인메이지의 노래들이 정렬이 되도록 설계를 해야하는데 입력을 하다가 오타가 나거나 여러 계절을 적었을 때에는 그 계절에 해당되지 않을 수도 있겠다는 생각이 들었다.일정한 값을 supabase에 전달하게 하기 위해서 선택창을 사용하기로했다.위와 같이 선택창을 사용하면 supabase에 일정한 값으로 들어갈 것 같았다.아래와 같이 select 태그를 사용하여 코드를 작성하였다. const options = [ { value: "", label: "노래에 어울리는 계절을 선택해주세요.", disabled: true }, //disabled를 통해 선택이 안되도록 한다. { value: "전체", label: "모든 계절" }, ..

오늘은 유튜브 이후의 진행상황은 잠시 미뤄두고 프로젝트를 진행하면서 생겼던 트러블 슈팅에 대해서 이야기 하고자한다.사건의 발단은 해시테그 부분이였다.  해시태그 : {hashArr.map((tag, index) => ( handleTagClick(tag)}> #{tag} ))..

1. 기본틀 만들기페이지를 만들기 위해서 우선 기본적인 형태부터 만들었다.1. 제목2. 유튜브링크3. 유튜브 아이프레임4. 게시글 내용5. 가수이름6. 계절(선택창)7. 해시테그8. 게시글 입력 버튼이 들어가야한다. 기본적으로 우선 input 창이 들어가야하는 제목, 유튜브링크, 가수이름, 해시테그에는 아래와 같은 코드를 기본적으로 작성하여 목록 : input 창이 뜨도록 하였다.(게시글 내용은 input대신 textarea를 사용한다.)placeholder은 input 창안에 뜨는 글이다.(input 입력 시 사라진다.)//useState를 사용하여 미리 변수값들을 정해놓는다.import React, { useState } from "react";const [..., set...] = useState(..

이번 팀 프로젝트의 주제는 뉴스피드를 제작하는 것이다.뉴스피드는 '내 게시물을 포함한 모든 게시물을 볼 수 있는 공간' 인데 즉 현재 보고 있는 티스토리도 여기에 해당한다고 볼 수 있다.어떤 주제로 진행할지 여러 의견이 나왔다. ex) 맛집공유, 여행, 영화 등 아무래도 흔히 접할 수 있는 취미에 대한 아이디어가 나왔는데그 중 노래를 공유할 수 있는 뉴스피드를 만들기로 의견이 모아졌다.(아래 그림들은 과제명을 생각하며 만든 로고이다.)그 후 필수로 구현해야하는 기능과 개인적으로 하길 원했던 기능들을 적어두고 시간 상 가능하지 못할 것 같은 부분은 도전과제로 남겨두었다. 페이지를 제작하는데 메인이 될 색들을 선정하였고,어떤 페이지를 제작할지부터 고민을 하였는데, 메인페이지 / 상세페이지 / 게시글제작페이지..

★ 문제정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다.(r은 길이 1 이상인 배열입니다.인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다.)★ 문제 해결 과정1. 배열에 아무것도 없을 때 -1을 반환한다.2. 그렇지 않을 경우 Math.min 함수를 사용해서 제일 작은 수를 반환해낸다.★ 제출한 문제 답안function solution(arr) { var answer = []; for (let i = 0; i

★ 문제0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.(1 ≤ numbers의 길이 ≤ 90 ≤ numbers의 모든 원소 ≤ 9numbers의 모든 원소는 서로 다릅니다.) ★ 문제 해결 과정안에 있는 배열이 섞여있어 처음에는 그걸 하나하나 다시 정리를 해서 비교를 해야하나 생각을 했었다.하지만 단순하게 순서가 아닌 있는지 없는지 여부만 따지고, 없는 숫자를 더한 값만 구하는 거라면 단순하게 총 합인 45에서 배열의 합을 빼면 된다는 생각이 들었다. 1. 배열안에 있는 numbers의 합을 구한다.2. 총 합인 45에서 더한 값..

★ 문제프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.(phone_number는 길이 4 이상, 20이하인 문자열입니다.) ★ 문제 해결 과정1. slice함수를 사용하여 끝에서 4자리 숫자를 잘라낸다.2. 나머지 숫자의 길이만큼 *로 변환한다.★ 제출한 문제 답안function solution(phone_number) { const str = phone_number.slice(0, -4); return phone_number.replace(str, '*'.repeat(s..

★ 문제어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.(absolutes의 길이는 1 이상 1,000 이하입니다.absolutes의 모든 수는 각각 1 이상 1,000 이하입니다.signs의 길이는 absolutes의 길이와 같습니다.signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다.) ★ 문제 해결 과정1. 배열의 길이만큼 반복하도록 한다.2. signs이 true인 경우는 +를, false인 경우는 -를 하도록한다.-> 이 부분에 대해..

★ 문제array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요.divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.(arr은 자연수를 담은 배열입니다.정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다.divisor는 자연수입니다.array는 길이 1 이상인 배열입니다.) ★ 문제 해결 과정1. for문을 사용하여 조건에 해당하는 객체만 배열안에 넣는다.2. 해당되는 객체가 아무것도 없으면 -1을 넣는다.3. sort를 사용하여 오름차순으로 배열한다. 최근 너무 for문만 사용하는 것 같아 다른 병법으로도 풀어보았다.1. filter함수를 사용하여 조건에..

★ 문제String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.(seoul은 길이 1 이상, 1000 이하인 배열입니다.seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다."Kim"은 반드시 seoul 안에 포함되어 있습니다.)★ 문제 해결 과정1. 서울이라는 배열안의 객체 길이만큼 반복문을 돌린다.2. 그 객체 중 "Kim"이라는 객체가 있다면 그 배열의 순서를 출력한다.3. "김서방은" + i + "에 있다"를 출력하여 김서방을 찾는다. 다른 사람의  풀이를 보니 indexOf를 사용하여 간단하게 풀..