Youngble_개발스토리

현재 진행중인 프로젝트의 기능중 하나가 해당음원의 볼륨조절이다. 하지만 이 볼륨조절이 사용 환경에따라 될수도 있고 안될수도있다. 순수 JS 를 사용하여 input 태그의 type range로 하여 사용할때나 커스터마이징을 위해서 input 태그를 쓰지 않고 mouse 이벤트와 touch 이벤트를 통해 해당 x,y 좌표(y는 볼륨에선 쓰지않는다)를 받아 그값을 style.left 값에 넣어주고 그 left 값을 audio객체에 닮긴 변수의 .volume 에 넣어주게 하여 조절하게 했다. 하지만 문제는 웹브라우저에서 잘 기능이 되고 안드로이드 모바일을 통함 웹 pwa 를 통해서도 잘되지만 문제는 IOS아이폰 환경에선 볼륨컨트롤을 할수 없다는 것이다. iOS-Specific Considerations iOS-..

현재 우리가 진행하고있는 프로젝트의 화면이다. 왼쪽은 모바일로 볼때와 오른쪽은 웹사이트나 일정 크기이상일때 보이는 화면이다 우리는 웹앱으로 앱에서 좀더 사용자들이 많고 접근하기 좋게 만들기 위해서 반응형웹이면서 PWA로 앱처럼 설치하여 쓸수있게 하기로했다. 이때 서비스 기능중 푸쉬알림 기능을 사용하기로 했었는데 서비스워커를 이용한 방법을 사용해야했다. 테스트하면서 적용한 순서는 다음과 같다. 먼저 npx create-react-app my-app --template cra-template-pwa 를 터미널에 입력하여 새로운 cra 프로젝트 파일을 pwa 형식으로 만들어준다. https://create-react-app.dev/docs/making-a-progressive-web-app 그런후 공식문서 사..

특정한 경로 안에 있는 src 경로를 쓸때, 인터넷에 있는 url을 쓰는게 아닌 정적파일 static으로 저장하여 쓸때 src에 require를 사용하여야 절대경로? 를 알수있게된다. Webpack file-loader outputs [object Module] I am using webpack with HtmlWebpackPlugin, html-loader and file-loader. I have a simple project structure in which I use no frameworks, but only typescript. Thus, I write my HTML code directly to i... stackoverflow.com 위에서 보듯이 리액트에서 정적인 파일 경로의 src를 불러..

지난 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시간뒤로 간다. 밀리세컨으로 보기에는 사용자나 개발자에게 가독성도 떨어지고 효율이..

history 패키지는 임의의 환경(브라우저까지 포함)에서 구동되는 JavaSciprt 애플리케이션에서 세션 히스토리(방문 기록)의 관리와 내비게이션 등을 쉽게 할 수 있도록 도와주는 라이브러리이다. 이는 세션 히스토리를 다루는 방법을 구동 환경을 기준으로 세 가지로 나눠서 제공하고 있다(createBrowserHistory, createHashHistory, createMemoryHistory). 필자는 react-router-dom 패키지에서 클라이언트 사이드 라우팅을 구현하는 원리를 알고 싶은 것이기 때문에, 이 셋 중에 HTML5 history API를 기반으로 구현되는 history 객체를 다루는 방식에만 주목할 것이다. 이 history 객체는 history 패키지가 제공하는 createBro..