[CSS] keyframes animation: usage in React : 리액트에서 키프레임/애니메이션을 이용한 동적인 이미지/컨텐츠 구현하기

글쓴이: HAN 카테고리: CSS

사이트의 Footer에 위치한 특정 이미지에 키프렘을 이용해서 사이트에 적용한 예제입니다. 사이트가 정적이고 지루한듯해서 과하지 않은 애니메이션을 넣으려고 찾았으나,보통 HTML에 CSS로만 적용을 하는 예제가 많더라구요. 저는 React로 페이지를 작성하다보니, animation에 대한 이해가 적은 지금으로써는React로 코드를 변형해 오는게 쉽지 않았습니다. (지금 작성한 코드도 정리가 조금 들된 느낌이네요.) 우선, 제가 적용한 애니메이션은 3가지로…

더보기

API Key creation for Google Cloud Service – 구글 클라우드 서비스를 이용하기 위한 API 키 만드는 방법: 구글 API 사용하기-1

글쓴이: HAN 카테고리: IT팁

Creating API keys The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project. 구글 클라우드 서비스를 이용하기 위해선, 반드시 API를 생성해야합니다. 이는, 본인의 프로젝트에서 사용한 사용량을 측정하고, 이에 대한…

더보기

Dynamic style – manipulating CSS with JavaScript – 자바스크립트 반응형 레이아웃 구현 방법 – How to dynamically create CSS class in JavaScript and apply?

글쓴이: HAN 카테고리: CSS

최근 학습한 내용의 복습과 향후 참조할 레퍼런스 용도로 제작된 내용입니다. 내용에 실수가 있거나 오탈자가 발견되실 경우, 상단의 컨텍폼을 통해 연락주시면 감사하겠습니다. 위와 같은 컨텍폼을 작성했다고 가정합니다. (하단 폼소스-1) 사용자가 입력창에 값을 입력하고 버튼을 누르면, 하단에 해당 내용이 표시되는 간단한 예제입니다. 이때, 사용자가 빈값으로 버튼을 누르면, 입력창이 빨간색으로 변하게됩니다. 여기서, css…

더보기

맥(Mac) Homebrew, Git 설치 오류 해결 방법 – How to fix Brew Error: Failed to link all completions, Permission denied

글쓴이: HAN 카테고리: IT팁

이번 에러는 맥북유저가 사용중이 맥북안에 있는 파일에 접근 권한을 제한적으로 가지고 있다.는다소 특이한 상황이였습니다.The following error is pretty common when trying to update Homebrew on your Mac, with the brew update or brew installation command: 이 경우, 아래 명령어를 입력해주시면됩니다.This is a permissions issue that can quickly be fixed with this command:…

더보기

윈도우10 OneDrive (폴더)삭제 바탕화면 경로 설정 방법

글쓴이: HAN 카테고리: IT팁

워너비 개발자 캐리안입니다. 오늘은 컴퓨터를 사용하던중 발생하는 “경로설정” 문제 – 그중에서도 “OneDrive”의 경로 설정에 대해 알아보도록 하겠습니다. 이번 사건?의 발단은, 함께 코딩을 공부하던 클럽멤버중 한분의 문의에서 시작했습니다. 멤버분의 말을 빌리자면, 강의 내용과 동일하게 프로젝트 폴더를 지정하고, 프로젝트를 실행했음에도 불구하고 지정한 프로젝트 폴더가 바탕화면에 정상적으로 보여지지 않거나, 프로젝트가 실행되지 않는다. 였습니다….

더보기

Install MongoDB without homebrew on Mac OS: MAC에 Brew없이 MongoDB 설치하기!

글쓴이: HAN 카테고리: IT팁

download MongoDB community server from its official website: https://www.mongodb.com/download-center/community Open the terminal > move to download folder : 다운로드폴더로 이동 Extract the file : 압축파일풀기 move the extracted folder : 압축풀어준 폴더를 이동시킨다 Tip: use the “ls“! and TAB ; Read the error If you meet the error “No such a…

더보기

AWS에서 웹서버 구축 프로젝트를 마치며: 실수연발

글쓴이: HAN 카테고리: IT팁

마지막주 (5주차) 프로젝트는 지금까지 만들어온 결과물을 웹서버에 올려보고, 설정파일을 만들면서 마무리 되었다. 기존에 본인 PC에서 localhost를 통해 테스트 했던것과 같은 결과물이지만, 어디서나 접속할 수 있고, 지인들에게 보여진다는 점에서 뿌듯할것 같다. 나만 그런생각하나? 프로젝트라는 작업의 시작과 끝 사실, 이번 강의에서 내가 얻고 싶었던것은, “프로젝트”라는 작업의 시작과 끝을 경험해보는것과 결과물이였다. 그런면에서 난,…

더보기