본문 바로가기

전체 글

[miniProject] google Momentum 만들기_02(React) 저번에 이어서 오랜만에 글을 올립니다 18일 자격증 시험이 있어 일단은 그것에 집중하느라 블로그를 쓸 시간이 없습니다 이어서 제가 한 걸 보겠습니다 검색 창 까지 봤었고 그다음은 현재 시간 시간 데이터는 자바스크립의 new Data라는 걸 이용하면 현재 표준시간을 전부 불러올 수 있습니다 // React // 현재시간 component function Nowtime() { let [realTime, realTimes] = useState(""); useEffect(() => { setInterval(() => { const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); realTimes(`${hours}:.. 더보기
[JS / javascript] addEventListener에 사용할 수 있는 문법 보통 이벤트리스너로 버튼을 클릭했을 때 ~~ 이러한 코드를 실행 주세요 라는 기능을 많이 사용한다 클릭뿐 많이 아니라 이벤트리스너로 사용할 수 있는 예약어들이 있다 내가 보려고 만드는 것이니 하나하나씩 추가하겠다 click 예를 들면 버튼을 클릭했을 때 실행할 코드~ mouseover 마우스를 요소에 스윽 가져다 놓았을 때 정확히는 내가 찾은 id라는 요소 안으로 마우스가 들어왔을 때를 얘기함 input input 창에 입력값이 들어왔을 때 더보기
[miniProject] google Momentum 만들기_01(React) 노마드코x님이 했던 클론 코딩 아님 구글 검색하다 블로그에 실시간 데이터를 가져오는 글이 있는데 보고 응용했는데 알고 보니 노마드코x님이 했던 클론 코딩에서 가져온 방법 중 하나였네요 시계 데이터 하나 빼고 혼자 처음부터 구현했다는 걸 알고 계시면 될 거 같습니다 많이 부족합니다 먼저 완성된 모습 보시고 가시죠 포트폴리오에는 사용한 기술 이런 거 적더라고요 그래서 저도 한번 적어봅니다ㅋㅋ! 사용 스택 HTML CSS (Sass) JS React React 프레임워크로 처음 만들어본 간단한 프로젝트입니다 먼저 react 뭔가 엄청 많이 깔려 있네요 나중에 블로그를 통해 react에 대해서 하나씩 배운 걸 공유하겠지만 저는 처음 써보는 거라 App.js에 모든 걸 넣었습니다 원래는 react는 이렇게 쓰면 .. 더보기
[miniproject] javascript로 blog 만들어보기 3(마무리) 지금까지 만들었던 blog 토이 프로젝트 마무리 전 페이지 참고 내가 배우고 응용 할 수 있는 것에 한계가 있는데 이 이상 시간을 질질 끌었다가는 오래 걸릴거 같아 DOM조작을 더 배우면서 다음 toy프로젝트를 만들어 보기로 결정! 그리고 추가 1. firebase라는 프로그램으로 JS이식? firebase는 쉽게 말하면 우리가 데이터를 저장하고 서버에서 받아오고 하는 것은 백앤드가 있어야 함 그것을 대신 해주는게 firebase Firebase(파이어 베이스) Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 간단하게 백앤드 없이 프론트앤드를 작업하기에는 용이하다고 하길래 튜토리얼 .. 더보기
[JS / javascript] javascript CRUD란 무엇인가? 혼자서 아주작은 프로젝트를 만들어 보고 있는 나에게 CRUD라는 중요한 것이 다가왔다 CRUD가 무엇이냐면 C = create(생성) R = read(읽기) U = update(수정, 갱신) D = delete(삭제) 이 약자들을 합쳐 놓은 소프트웨어 용어라고 보면 됨 프로젝트를 하게 되면 JS로 처음에 이 규칙을 따라 만들어보고 한 싸이클을 돌려보는게 좋다 예를 들어 가장 처음, 그리고 많이 만들어 보게 되는 TO DO LIST도 이 CRUD형태를 가지고 만드는것 더보기
[miniproject] javascript로 blog 만들어보기 2 1. DarkMode 추가해봄 2. 글쓰기 클릭 후 JS jquery로 fadeIn, Out 구현해봄 3. 제목, 이름, 내용 공백 검사 만들어 봄 4. 내용 전부 입력 시 작성 완료 alert과 함께 밑에 글(card) 부착해봄! 5. 사용방법 클릭 시 Modal창 구현해 봄 여기까지 해봄 아직 for문 직접 써보지 않음 if문만 조금 써봄 순수 자바스크립트랑 제이쿼리만 쓰니 기능은 몇 개 안되는데 코드가 더러워짐 그래도 기능은 잘 작동해서 뿌듯 아 React로 작업해보려니 아직 JS도 부족하다고 느낌막 머리가 짬뽕되는 거 같아서 더 어려워짐그래서 JS로 함 더보기
[miniproject] blog 만들어보기 JS / React 요즘 포스팅을 못 하는 이유가 이제 마음에 들었던 강의를 완강하고 혼자서 직접 만들어보는 구간이라 그렇다 1일 차에 나는 간단한 blog형식으로 만들어보기로 했다 사용하는 스택 React / JS / CSS / HTML 역시 혼자서 시도해보려 하니 처음부터 구현이 안됨 js가 부족함 검색검색검색.. 더보기
[JS / javascript] javascript로 animate 애니메이션 주는법 ! 잘 사용하는 방법은 아니지만 알아두면 간단하게 애니메이션을 줄 수 있기에 봐봄 animate 명령어를 사용하면 됨 hello JS!! 간단하기에 설명할 게 없지만 1. 제이쿼리 이벤트리스너 #헬로에 발생 2. animate 사용 marginTop 100px 뒤에 1000은 1s 1초라는 얘기 주의 JS는 -(대쉬)로 표현할 수 없기에 camelCase 사용 권장 결과 더보기