Youngble_개발스토리

오늘은 해당 음원 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..

box-sizing 을 통해 전체 width, height이 어떤걸 포함한 사이즈인지 결정할수있게 된다. 아래 코드를 보면서 이해해보자. container가 width 500, height 500을 가진 정사각형 사이즈를 만들었고 padding 으로 25px 를 주었다. 이때 box-sizing 설정이 주석처리 되어있기 때문에 어떤 사이즈를 포함하는지 아래를 보자 computed를 보면 500x500이라는 사이즈외에 padding 때문에 상하좌우에 25px씩 늘어졌다. 따라서 이 총 box 사이즈는 550x550 이 되었다. 위와같이 box-sizing을 border-box 라고 해주게되면 padding값이 있더래도 그것과 border(테두리 굵기)까지 포함하여 500x500 사이즈가 된다. 이렇게 되면..

클론코딩이 끝나자마자 실전프로젝트가 바로 시작되었다. 토요일 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 를 추천하였다. 백엔드같은 경우도 기존의 것을 그대로 쓰되 새로 처음부터 작성할필요없이 구축한걸 쓰면 되기때문에 쇼핑몰과 같이 장바구니, 자신의 프로필관리 등 새로운 데이터를 쓰는걸 원한 반면, 프론트는 처음부터 뷰단을 공사하고 그거에 맞게 ..

진행중인 웹페이지 메인화면 오늘은 메인 화면을 꾸미는시간을 많이 보냈다. 위와같이 스토리라인 만들고 오른쪽엔 자신의 간략한 프로필 정보와 팔로우 추천목록을 보여준다. 이때 오른쪽페이지는 고정을 하고 왼쪽 포스트부분만 스크롤하게 해주었다. 먼저 해당 내용물이 한줄띄거나 30자 이상일때는 더보기 버튼이 보여서 눌르면 전체 글이 보이는 기능을 수정하였다. 위의 코드와 같이 content.length 가 30자이상이거나 length 변수(해당컨텐츠에서 \n가 있으면 split으로 나눠주게함, 그렇게하면 띄어쓰기가 있는 문자열은 배열의 길이라 2이상이됨) 가 1보다 클때 더보기가 활성화 되도록해주었다. 그리고 다음 보는거와 같이 반응형 웹 화면이 되는걸 볼수있다. 반응형 웹을 위해 쓴 부분중 가장 큰부분은 @me..