Programming (80) 썸네일형 리스트형 [Python] 문자열 찾기 : in, find() in 찾을 문자열 in 문자열 str = "hello python" if "py" in str : print("Found 'py'")# Found 'py' else : print("Not Found") find() 문자열.find(찾을 문자열), 문자열.find(찾을 문자열, 시작 인덱스, 끝 인덱스) : 문자열 내에 찾을 문자열이 존재하면, 찾고자 했던 문자열 첫 번째 index를 반환해준다. 그렇지 않다면 -1을 반환한다. str = "hello python" if str.find("py") > -1 : print("Found 'py'")# Found 'py' else : print("Not Found") [Node.js] Node.js 과 NPM Node.js Node.js란 무엇일까? 웹의 발전에 따라 등장한 것으로써, 자바스크립트를 어느 환경에서나 실행할 수 있게 해주는 실행기라고 할 수 있다. Node.js 설치 링크 더보기 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org (LTS 버전 : 안정적이고 오래 지원되는 버전) Node.js 특징 1. 싱글 쓰레드 2. 비동기 : 싱글 쓰레드이기 때문에 비동기 방식을 사용한다. 3. 이벤트 기반 : 비동기 동작을 구현하기 위해 이벤트 기반으로 한다. 4. ECMAScript (ES6) : JavaScript의 표준.. [CSS] input, button 테두리 없애기 border에 0이나 none을 주게 되면 테두리를 없앨 수 있다. 전체 코드 input, button { border: none; } 결과 화면 [React] Chart.js로 Doughnut(도넛) 차트 그리기 React에서 데이터를 시각화할 때 Chartjs 라이브러리를 사용해보았다. 이 때, 참고하기 좋은 사이트 2개를 올려본다. 도넛 차트 외에도 다양한 모양의 차트를 볼 수 있다. 특히, 아래 2번째 사이트에서는 어떻게 사용하면 좋을지 Example이 친절하게 나와있으니, 코드를 그대로 복붙하여 금방 눈으로 확인할 수 있을 것이다!! 라이브러리 설치 yarn add react-chartjs-2 chart.js 참고 사이트 https://www.chartjs.org/docs/latest/samples/other-charts/doughnut.html Doughnut | Chart.js Last Updated: 2/12/2022, 2:48:34 PM www.chartjs.org https://react-char.. [React] .env 파일 환경변수 설정하기 React 프로젝트를 진행하면서, .env 파일에 변수를 두고 사용할 일이 있었는데 아무리 해도 적용이 되지 않아서 엄청 애먹었던 시간이 있었다. 결과적으로 가장 중요한 것은 프로젝트를 재시작하는 것이다... 잊지 말자...ㅠㅠ 1. 파일 생성 프로젝트 루트 경로로 .env 파일을 생성한다. 2. 환경변수 설정 생성한 .env 파일에 환경변수를 설정해준다. 중요한 것은 React 환경에서는 'REACT_APP_'으로 시작되어야 한다. 그리고 띄어쓰기 없이 적어야한다. 설정이 끝났다면! React 프로젝트를 재시작!!! 그래야 환경변수 설정이 먹는다!!! REACT_APP_PASSWORD=asdf1234 3. 환경변수 사용 'REACT_APP_'으로 설정해둔 환경변수를 불러온다. function Test(.. [React] AWS S3 이미지 파일 업로드 하기 지난 번에 AWS S3 버킷 만들기까지 하였다. 이어서 React에서 어떻게 AWS S3 버킷에 업로드 하면 좋을지 정리한 것이다. 1. aws-sdk 설치 후 임포트 먼저 aws-sdk 패키지를 설치해주어야 한다. yarn 또는 npm 사용에 맞춰서 다음의 명령어를 입력한다. $ yarn add aws-sdk $ npm install aws-sdk 2. aws.config.update 설정 버킷 지역과 발급 받아놓은 액세스 키를 등록해놓는 과정이다. 이 때, 액세스 키는 타인에 노출되면 위험하기 때문에 .env에 따로 빼두었다. 3. aws.S3.ManagedUpload 함수를 통해 파일 업로드 params에 버킷 이름과 저장될 파일 이름, 파일을 보낸다. 나는 저장될 파일 이름에 유저 ID에 확장자를.. [CSS] 점점 확장되어 나타나는 애니메이션 구현하기 저번에 이어서 통통 튀는 로고를 클릭 했을 때, 랜덤하게 보드게임을 추천해주고 싶었다. 이 때 보여지는 보드게임 카드가 점점 확장되어 나타날 수 있도록 구현하였다! recommend라는 useState 변수를 만들어 로고 클릭 시 값이 바뀌고, 그에 따라 CSS className도 변경되는 방식이다. 점점 확장되어 나타나는 애니메이션 구현하기 scale : 0에서 1로 변경 transition: all 0.5s 전체 코드 boardgame.js setRecommend(!recommend)} > { recommend ? : } boardgame.css .boardgame-recommend { width: 30%; height: 100px; margin: 50px auto; scale: 0; transiti.. [CSS] 통통 튀는 바운스 애니메이션 구현하기 화면 메인에 이미지 로고에 통통! 튀는 바운스 움직임을 구현하였다. 이미지는 public/image 폴더에 넣어놓았고, css 파일에서 애니메이션을 추가해주었다~! 통통 튀는 바운스 애니메이션 구현하기 애니메이션 만들기 : animation-name: bounce, @keyframes bounce 애니메이션 속성 값 지정하기 : animation-duration: 0.5s, animation-direction: alternate, animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035), animation-iteration-count: infinite 전체 코드 BounceAnimation.js import React from "react"; .. 이전 1 ··· 6 7 8 9 10 다음
