전체 글 (179) 썸네일형 리스트형 [#. CSS] object-fit 사용해서 이미지 비율 유지하며 사이즈 맞추기 이미지 업로드를 했는데 해당 영역에 꽉 차게 들어가느라 비율이 깨지는 경우가 발생한다 이때 가장 간단한 방법으로 CSS를 사용해서 비율이 깨지지 않도록 해보자 object-fit 속성 값 contain 콘텐츠의 가로 세로 비율을 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로 세로 비율을 유지하게 되므로, 서로의 가로 세로 비율이 일치하지 않으면 객체가 "레터박스"처럼 됩니다. cover 대체 콘텐츠의 가로 세로 비율을 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로 세로 비율이 일치하지 않으면 객체 일부가 잘려나갑니다. fill 요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를.. [#. R] package ‘KoNLP’ is not available for this version of R, R 4 version 이상에서 발생하는 문제 해결 워드클라우드를 만들기 위해 R에서 KoNLP를 사용하려고 하는데 package ‘KoNLP’ is not available for this version of R 사용할 수 없다고 뜬다 R 4.1.3 버전을 사용해서 발생하는 문제다 ① R 설치(Window 기준) ⒧ R console https://cran.r-project.org/bin/windows/base/ Download R-4.1.3 for Windows. The R-project for statistical computing. If you want to double-check that the package you have downloaded matches the package distributed by CRAN, you can compare .. [#. Base64 ] atob(), btoa() Base64 인코딩과 디코딩 베이스64 Base 64 (베이스 육십사)란 64진법 데이터로 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리킨다 Base64는 데이터가 전송 중에 수정되지 않고 그대로 전송되는 것을 보장한다 자바스크립트에서 문자열을 base64로 인코드하려면 window 객체(전역 객체) 의 btoa 메소드를 사용하면 되고, base64 로 인코드된 문자열을 디코드하려면 window 객체의 atob 메소드를 이용하면 된다 btoa => 인코딩 atob => 디코딩 var str = "Javascript is Language"; var encodingStr = window.btoa(str.. [#. CSS] Progress Bar Pointer 막대 바에서 특정 수치, 값 위치(포인터) 찍기 Progess bar에서 특정 값 위치를 찍고 싶다 HTML, CSS만 이용해서 구현해 보자 See the Pen Untitled by shab8 (@shab8) on CodePen. 아래는 참고할 만한 Progress Bar 리스트다 https://www.sliderrevolution.com/resources/css-progress-bar/ Awesome CSS Progress Bar Templates You Can Download A CSS progress bar is a great tool. It can display the progress of extended computer operations, like Downloads, Uploads, File transfers, etc. www.slider.. [#. flex] flex-flow, flex-wrap을 사용해서 flex 아이템 줄 바꿈 설정, 한 줄에 div 개수 지정하기 HTML에서 아래와 같은 구조의 영역이 있을 때 한 줄에 2개의 카드 영역만 배치하려고 한다 1 2 3 4 5 와 같은 형태가 되도록 하고자 한다 See the Pen Untitled by shab8 (@shab8) on CodePen. 이때, flex-wrap이나 flex-flow를 사용하면 된다 flex-wrap flex-wrap 속성은 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현 할 것인지 결정하는 속성이다 만약 영역 내에서 벗어나지 못 하게 설정한다면, 동시에 요소의 방향 축(row, column)을 결정할 수 있다 flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reve.. [#. Web] HTTP, Web Socket, Web RTC란? HTTP(HyperText Transfer Protocol) 텍스트 기반의 통신 규약으로 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다 이렇게 규약을 정해두었기 때문에 모든 프로그램이 이 규약에 맞춰 개발해서 서로 정보를 교환할 수 있다 브라우저(클라이언트)가 서버에 요청(Requst)하고 서버가 브라우저에 응답(Response)하면 브라우저-서버 간 통신은 끝난다 따라서 HTTP는 연결 상태를 유지하지 않는 비연결성 프로토콜이다 Request Method GET POST PUT DELETE Request Status Code 1XX (Information responses, 조건부 응답) : 서버가 요청을 받았으며, 서버에 연결된 클라이언트는 작업을 계속 진행한다 2XX (Successful res.. [#. PM2] PM2 이용해서 백그라운드에서 NODE/REACT 무중단 실행하기 https://pm2.keymetrics.io/ PM2 - Home Advanced process manager for production Node.js applications. Load balancer, logs facility, startup script, micro service management, at a glance. pm2.keymetrics.io ① pm2 설치(전역) $ sudo npm install pm2 -g ② NODE(Backend) 실행 Node는 보통 아래와 같이 실행한다 $ node ./bin/www pm2로 실행하려면 $ pm2 start ./bin/www ③ React(Frontend) 실행 $ pm2 start node_modules/react-scripts/script.. [#. React] React 18 새롭게 추가된 기능 알아보기 ① Suspense 기능 확장 데이터를 가져오기 위한 Suspense는 를 사용하여 선언적으로 데이터를 비롯한 무엇이든 "기다릴" 수 있도록 해주는 새로운 기능이다 이 페이지에서는 사용 사례 가운데 데이터 로딩에 초점을 두지만, 이 기능은 이미지, 스크립트, 그 밖의 비동기 작업을 기다리는 데에도 사용될 수 있다 기존 function Profile() { const { data: profile, isLoading } = useQuery("profile", fn); if(isLoading) { return } return Hello {profile.name}! } React 18 // 프로필을 불러오는 동안 스피너를 표시한다 컴포넌트와 Loading State가 분리된 상태다 컴포넌트 안에 데이터를 가져오.. 이전 1 2 3 4 5 ··· 23 다음
