cha123hein 님의 블로그

1.  문제점DB.json에 새로운 데이터 넣는 부분이 어려웠다. json-server를 사용하여 약국 데이터를 관리하고 있었는데, 평소에는 이미 입력된 데이터 값에서 불러오거나 기본틀이 있던 중에 추가를 해보다보니 새로운 데이터를 넣는데 어려움을 겪었다.2. 해결을 위한 방안처음에는 json에 저장도 안되고 데이터 형식에 문제가 있어 못불러온다는 오류가 계속 떠 일일히 기본적인 틀을 이 자료들에 다 추가를 하고 난 다음에 거기에 데이터를 입력해야하나 고민을 하다. 아예 객체형식으로 추가를 시키면 문제가 해결되겠다는 생각을 하게되었다. 3. 해결코드//댓글 삽입을 위한 코드const handleAddComment = async () => { if (!userId) { alert('로그인 후..

내 담당은 아니였지만 다 같이 해결하기 위해 고민하고 해결했던 과정이 가장 인상깊게 남아 오늘의 트러블 슈팅으로 기록을 남기게 되었다.추후에 나도 아래 방법을 사용하여 지도 마커를 표시하는데 도움이 되었다.1. 문제점이번에 서치페이지에서 카카오맵 api를 이용하여 지도를 불러오게 되었는데 아래 사진처럼 자세히 보기를 눌렀을 때 자세히 보기 아래에 하얀박스가 생성되어 보이는 문제점이 발견되어 모든 팀원들과 함께 고민하였다.개발자 도구를 사용해 해당 코드부분을 확인해보았으나, vscode입력하지 않은 코드임에도 나타나는 것이 확인되었다.카카오맵 api 공식문서를 보니 저 하얀박스는 "인포윈도우"라는 것인데 원래에는 저 위치에 말하고 싶은 정보를 넣게 하기 위해 쓰이는 박스이다. 입력을 하지 않았는데도 나타나..

1.  문제회원가입까지는 넘어갔으나, 로그인이 되지않는 상태였다. 로컬스토리지에 저장까지 잘 되는 것 같은데 오류가 있는 코드는 아니여서 이해가 안되었었다.//처음 작성해본 코드const handleLogin = async (formData) => { try { // 로그인 API 호출 const response = await login(formData); if (response) { // 프로필 정보를 가져와서 사용자 상태를 업데이트 const userProfile = await getUserProfile(response.token); setUser(userProfile); // 로그인 성공 시 홈으로 이동 ..

★ 문제길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.(n은 길이 10,000이하인 자연수입니다.)★ 문제 해결 과정간단하게 생각하면 n의 짝수에는 '수'라는 단어가 홀수에는 '박'이라는 단어가 들어가면 된다.for문과 if문을 사용하여 문제를 풀었다.★ 제출한 문제 답안function solution(n) { var answer = ''; for(i=0; i

1. 문제개별 과제를 하던 중 로그인 하지 않은 사용자를 로그인 페이지로 가게 하기 위해 useEffect hook을 사용하였다.useEffect는 사이드 이펙트를 처리하기 위한 hook인데 사이드 이펙트는 컴포넌트 렌더링 이외에 발생하는 모든 작업을 의미한다.즉 리랜더링이 될 때마다 특정작업을 시행할 수 있도록 하는 hook이다.useEffect는 () => {} 와 [] 로 구성되어 있는데의존성 배열은 useEffect가 실행될 조건이 들어간다고 보면 된다.처음에는 아래와 같이 코드를 짰다. useEffect(() => { if (!user) { navigate('/login'); } }, []); 위와 같이 의존성 배열이 비어있으면 컴포넌트가 처음 마운트될 때만 한 번 실..

수파베이스로의 연결이제 모든 기능을 구현하였으니 자료들을 수파베이스로 연결하기만 하면 되었는데 작성버튼을 클릭을 하였을 때 자료가 가야하기 때문에우선 버튼을 만들었다. navigate(-1)}>취소 등록 취소버튼은 작성을 하고 싶지않을 때 바로 전 화면으로 돌아가게 한 것이고, 등록버튼이 클릭을 하였을 때 수파베이스로 자료가 보내지도록 하였다. const handleSubmit = async () => { const fields = [ { value: postTitle, message: "제목을 입력해 주세요." },..

오늘은 유튜브 이후의 진행상황은 잠시 미뤄두고 프로젝트를 진행하면서 생겼던 트러블 슈팅에 대해서 이야기 하고자한다.사건의 발단은 해시테그 부분이였다.  해시태그 : {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