Youngble_개발스토리

지난 1주일동안 기획밖에 한게없었기 때문에 요번 주차때 80% 기능구현을 하기로 계획을 잡았다. 각각 맡고싶은 파트가 미리있다면 이야기를해서 진행을 하고 그게 아니라면 우선순위 페이지마다 기능을 처리하는 방식으로 했다. github의 projects 를 통해 각각 진행상황을 todo리스트, in progress, done 식으로 작업과정을 알수있게 활용하기로했다. 내가 맡아서한 부분을 이야기하면, 원하는 기상시간에 맞춰 최적의 수면시간을 계산해주는 페이지 및 기능, 푸시알림 기능, 마이페이지 기능(알람설정), asmr 음원 볼륨 조절 및 삭제 기능 팝업페이지, 로그인 유도 팝업 페이지, 그 해당하는 리덕스 및 api 추가 및 관리를 했다. 디자이너분들이나 프론트분들과 수정사항이 생기거나 추가,변경이 있을..

우리가 보통 함수를 export 하고 import 해서 쓴다고 배우게 되는데 오늘은 이걸 이용하여 js 파일이 다르더래도, 기존값을 가져오거나 변경해도 js가 다른곳에서도 변경된게 적용되도록 해주기로 했다. 이걸 쓰는 이유는 해당 음원 볼륨을 조절하기위한 팝업에서 삭제를 눌르게 되면 음원은 멈추게 되고 음원 리스트에서도 클릭되었던것이 클릭되지않은것처럼 색을 변화 시켜주어야한다. 하지만 이때 음원리스트js와 음원볼륨조절js가 다르기때문에 이를 통제하기위해 선택한것이 1. 함수를 export로 넘겨주어 쓰는것 2. 해당 js 태그에 useState로 쓰고있는 state를 props로 넘겨줘서 쓰는 것 이였다. 먼저 테스트겸 해당 팝업에서 delete를 눌르면 test라는 함수로 url를 보내서 해당 url ..

보통 웹사이트나 앱을 이용하게 되면, 로그인을 했는지 안햇는지에 따라 컨텐츠를 이용할수있고 없고의 제한이 생긴다. 이때 보통 로그인을 했는지의 여부를 프론트쪽이나 백엔드쪽에서 체크하는게 토큰이 있는지 없는지 여부를 묻는다. 만약 해당 토큰을 가지고있지 않다면 해당 컨텐츠 접근에 제한을 두게 된다. 또는 api 연결을 할수가 없게 된다. 현재 진행중인 프로젝트에서는 localStorage에 로그아웃으로 해당 토큰을 지우지 않는한 영구적으로 저장하기로 했다. (나중에 푸시알림을 위해서 이렇게 했다.) 이때 로그인을 하게되면 받아오는 response 에서 해당 토큰을 localStorage에 저장하고, 있다면 db요청을 보내거나 해당페이지를 넘어갈때 localStroage.getItem("token")을 사용..

오늘은 해당 음원 audio 를 가져와서 재생, 정지, 볼륨조절 을 할수있게하고 이것을 팝업창에서도 실행되도록 props 로 그대로 그 값을 넘겨줘도 실행되는지를 체크하고 구현했다. 먼저 위 사진과 같이 useState을 사용하여 빈 오디오객체를 song1~3 까지 담아주었다. 담아준 이유는 만약 song1 이라는 기존 변수에 new Audio() 를 담아준다면 해당 {} 에서는 play()와, pause() , 볼륨 등등을 작동이 되지만 그 블록{}을 벗어나게 되면 밖에서는 해당음원 변수에 어떤 이벤트를 발생시켜 정지시키거나 볼륨을 줄이거나 할려고해도 먹히지않는다 이때 실행시키려는 audio와의 접점이 없다고 하여 전역 변수를 useState을 사용하여 어디서든 해당 state을 바꿔주거나 실행할수있게..

보통 useHistory를 사용하여 onClick 같은 이벤트가 발생했을때 해당 페이지 경로로 이동시킬때 사용한다. 보통은 위에처럼 history.push()에서 ()안에 원하는 경로를 써서 이동하게한다. 그런데 오늘 배운건 push 를 함과 동시에 그 안에 원하는 key : value 값을 넘겨주어서 넘어간곳에서 props로 쓸수있게 하는것이다. 이때 props 라고 쓰진 않고 해당 함수 컴포넌트 파라미터에 {location}라고 써서 가져온다. 보는거와 같이 pathname, category, zzz 라고 지정해준 key와 value 이 잘 넘어가지는 걸 console.log 와 redux-logger 를 통해 볼수있다. 만약 구글링으로 history.push 파라미터 라고 검색해보면 이런식으로 뜨게..

new Date를 통해 원하는 날짜를 생성, new Date()이라고 설정하고 .getTime()을 쓰면 1970년 1월 1일 자정을 기준으로 현재까지 millisecond 을 계산한것. 위에선 2021년 11(12월), 27일 시(+12),분 이므로 1970년 1월 1일부터 해당 날짜까지의 millisecond을 계산. 뒤에 -는 res4 부터 보면 60000millisecond(60초,1분)*270분= 4시간 30분 이다 이것의 1시간 30분 간격으로 더해주면 res3부터 6시간, 7시간반 ,마지막으로 9시간을 빼야하므로 res3의 60000(1분)*90(1시간30분) 더 뒤로 빼줌으로써 setTime에 설정한 시간의 9시간뒤로 간다. 밀리세컨으로 보기에는 사용자나 개발자에게 가독성도 떨어지고 효율이..

클론코딩이 끝나자마자 실전프로젝트가 바로 시작되었다. 토요일 6시까지 클론코딩을 제출한후 8시 실전프로젝트 발제후 바로 팀미팅을 가졌다. 백엔드분들과의 협업에 이어 처음으로 디자이너분들과의 만남이었기에 신기하기도 했고 어떤식으로 같이 프로젝트를 해갈까 기대도 되었다. 첫날은 토요일 늦었고 일정이 있는 분들이 있어서 다음날 다시 모이기로 했고 일요일 오후 3시부터 밤 9시까지 계속해서 아이디어+기획을 잡아나갔다. 하루동안 회의끝에 정한건 등산 모임을 할수있는 meet-up 같은 방식의 커뮤니티를 만들기로 했는데, 다음날 피드백을 받아보니 너무 기능이없고 특색이없다고 하셨다. 그렇게 3번정도의 아이디어를 바꾸고 기획잡는데만 시간을 보냈다. 팀장을 맡으신분께서 많이 돌아다니면서 튜터님과 대표님에게 피드백을 받..

FileReader를 통해 이미지나 오디오,영상등을 onload 로 읽어왔다면 이를 FormData 형식으로 바꿔줘야된다고 한다. 이때 들어간 값이 있는지 그 안에 들어간게 무엇인지 확인하기위해서 아래와같이 ... 를 사용해 spread operator 를 사용한다. 아래와 같이 console.log 에 대항하는 값들은 브라우져창에서 다음과 같이 출력된다 이와 같이 entries 를 통해 key 값과 value 값을 가진 모든 배열의 값들을 보여주고, keys()만 사용한다면 key 값만 보여준다. 이때 values()에는 "" 이들어가지는데 왜 공백으로 되어있는진 잘 모르겠다 실험결과 input으로 선택하여 바로 불러와진걸 FormData 로 만들면 아마 다 들어가기전에 코드를 읽어서 "" 로 뜨는거 ..

전주와 전전주 같은경우에 FileReader를 읽어서 이미지를 추가하거나 수정할때 사용하는 부분을 담당하지 못하여서 복습하지못하였다. 이제 실전기간이고 나중에 쓸일이 있기때문에 FileReader를 통해 어떻게 이미지, 오디오, 영상등을 읽어올수있고 이를 api 로 보낼수있는지 공부하기로 했다. 먼저 기존에 썼던 코드를 보면서 코드해석을 했는데 reader.onloadend 를 쓰는걸 보고 onload 와 차이가 있나? 라고 생각하여 찾기 시작했다. FileReader.onload 와 FileReader.onloadend 차이 즉 같은 기능으로써 이미지파일에대해서 불러오는데 onload의 성공할때마다 불러오는거와 달리 onloadend는 성공 실패 상관없이 불러옴, 아래는 받아온 files 안에 데이터를..

http://kongom2project.s3-website.ap-northeast-2.amazonaws.com/login (언제 바뀔지 모르는 s3배포) https://www.youtube.com/watch?v=hTt77tD3H2o&t=2s 요번한주간 현재 서비스중인 사이트를 골라 클론코딩을 하는 시간이였다. 첫째날 어떤 사이트를 할지 정할때 백엔드분들같은경우 쇼핑몰과 같은 새로운 프로젝트를 원하였고 프론트에선 기존의 것을 익숙하게 쓰기위해 인스타 or velog 를 추천하였다. 백엔드같은 경우도 기존의 것을 그대로 쓰되 새로 처음부터 작성할필요없이 구축한걸 쓰면 되기때문에 쇼핑몰과 같이 장바구니, 자신의 프로필관리 등 새로운 데이터를 쓰는걸 원한 반면, 프론트는 처음부터 뷰단을 공사하고 그거에 맞게 ..