2021/04(62)
-
textarea로 입력 받은 글을 줄바꿈 살려서 출력하기
textarea로 입력받은 글을 출력하게 되면 줄바꿈이 적용되지 않는 것을 볼 수가 있다. 그 이유는 데이터베이스에 저장될 때 개행문자가 \n, \r, \r\n 이런식으로 저장이 되기 때문이다. 처음에 검색해보았을 때 저런 개행문자를 정규표현식으로 모두 찾아서 replace, replaceAll 메소드를 통해 으로 바꾸어주면 된다는 방법을 보긴했었는데 어떤 이유인지 되지 않아서 헤맸다가 생각보다 간단한 방법으로 1초만에 바꿀 수 있었다. 바로 pre 태그로 출력하면 된다. 그러면 복잡한 방법 필요 없이 그냥 바로 해결이 된다! 🌭 textarea로 입력받은 글을 p로 출력했을 때(줄바꿈 적용 안된 모습) 🍕 textarea로 입력받은 글을 pre로 출력했을 때(줄바꿈 적용 된 모습)
2021.04.02 -
CSS 3줄 이상일 때 더보기/간략히 버튼 보이게 하기(ellipsis)
.video__description p.video__description__text=video.description .description_moreDetails 더보기 .video__description { font-size: 14px; line-height: 25px; padding-bottom: 50px; padding-left: 60px; border-bottom: 1px solid #e0e0e0; } p.video__description__text.abstracted { height: 75px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: verti..
2021.04.02 -
Safari에서 버튼 그라데이션/테두리곡선 고치는법
개발할 때 크롬으로 테스트해보면서 만든 후 배포한 다음에 사파리에서 테스트를 해보니 버튼이 그라데이션과 테두리곡선이 적용된 것을 볼 수 있었다. 내가 원하는 디자인으로 보이지 않아서 방법을 찾아보았다. 사파리에서는 기본적으로 버튼에 그라데이션과 테두리 곡선이 들어가있다고 한다. 이는 간단하게 이 코드를 통해 해결할 수 있다. 또한 내가 input에 text-shadow 넣은 것도 적용되지 않았었는데 그 문제도 이 코드를 통해 해결될 수 있었다. input, textarea, button{ -webkit-appearance: none; } 해결 전 해결 후
2021.04.01 -
[11] #Bonus Time - 배포하기
배포하기 전에 빌드하기 이제 우리가 만든 것을 빌드(build)해야 한다. 빌드란, 실행가능한 파일로 만드는 것을 말한다. 우리가 작성한 코드를 예전 코드로 변환하는 과정을 거쳐야 실행할 수가 있다. 🍫@babel/cli 설치 npm install --save-dev @babel/cli 이 명령어로 @babel/cli를 설치한다. 🍫src 폴더 만들어서 넣기 src 폴더를 만든 후, node_modules, package.json, package-lock.json, README, .env, .eslintrc.js, .gitignore만 제외하고 모든 걸 src폴더 안에 넣는다. 🍫 .gitignore에 잊지말고 build를 추가해주기 🍫 app.js 상단에 @babel/polyfill을 import 해주..
2021.04.01 -
[11] #Bonus Time - 3) Mongo Atlas
데이터베이스를 우리 컴퓨터 안에 두고 있으니까 이건 별로 좋은 방법은 아니다. 데이터베이스를 클라우드에 두어야만 한다. **Mongo Atlas가 Mongo Lab을 인수했으므로 MongoLab이 더 이상 동작하지 않는다. 클러스터가 필요하다. 클러스터를 만들고,, 이 부분은 해당 강의를 듣고 다른 사람들의 덧글을 참고했었다. 그리고 배포 할 때 데이터베이스 URL을 환경변수(.env)의 MONGO_URL_PROD에다가 저장해놓았다.
2021.04.01 -
[11] #Bonus Time - 2) 영상 시간 안뜨는 버그 해결하기
영상 시간 안뜨는 버그 해결하기(Blob Duration Bug) 나도 전체 영상 시간이 NaN NaN NaN으로 나오는 영상이 있었는데, 니콜라스도 그 버그를 고치는 것을 알려줘서 다행이었다. Blob이 영상 전체 시간을 가지고 있지 않아서 그렇게 나온 것이라고 한다. https://github.com/evictor/get-blob-duration 여기 get-blob-duration 이라는 라이브러리가 있다. 내가 하고 싶은 걸 해주는 녀석이다. 이게 무엇을 말하는 거냐면 Blob의 길이(duration)를 알려주는 것이다. get-blob-duration 설치하기 npm install get-blob-duration videoPlayer.js에 가서 수정하기 import getBlobDuration..
2021.04.01