희락코딩

Momentum-App 데모 사이트 프로젝트 목표 순수 자바스크립트만 활용하여 간단한 웹 어플리케이션 만들기, 또 한 dom조작 및 api를 활용하여 위치 기반 서비스 구현 해보기! 기능 구현 및 시연 영상 기능 구현 리스트 새로 고침시 랜덤 배경화면 출력 실시간 시계 기능 위치 기반 날씨 및 기상 정보 todolist localstorege 리셋 기능 랜덤 명언 출력 시연 영상 회고... 자바스크립트의 힘을 다시 한번 느낀다!!! 뿌듯하다... 뭔가 만드는게 너무 재미있다...!!! 다음엔 무엇을 만들어 볼까나~@

up_and_down_game 게임즐기기!! 미니 프로젝트 목표 React에서 useState와 input값에 대한 이해를 향상 시키고 렌덤함수와 setTimeout를 응용해서 간단한 웹 게임 구현하기! 미니 프로젝트 내용 리엑트를 활용한 up down 간단한 웹 게임 입니다. 사용 스택 react, html, css 기능 및 시연 영상 1부터 30까지의 임의 수를 맞추는 게임 입니다. 정답을 맞추면 셋타임아웃을 통해 새로운 렌덤 숫자가 생성됩니다. 코드 import React,{useState} from 'react' import './App.css'; function App() { const [status, setStatus] = useState('1~30 사이의 ..

애플코딩 짱짱 애플코딩 완강 후 vue로 개인 프로젝트를 진행하였다. 배울땐 쉬웠는데 막상 직접 해보려고 하니 막히는 경우가 많아서 애먹었다... 그래도 한달 공부하고 결과물을 만들어 낸 것에 대해 만족한다!!! 그리고 공부한 걸 직접 활용해서 프로젝트를 진행해보니 내가 놓쳐던 부분이나 애매하게 알게 된 내용들을 알수 있어서 좋았따!!! 다음 미니 프로젝트를 기약하며 !!! Art_Shop_ground_vue 데모 사이트 https://art-ground-shop-github-io.vercel.app/ 윈도우는 깨지는... 맥용으로 만들었음... 프로젝트 목표 Vue에 쓰여지는 다양한 메서드와 더미 api를 활용하여 데이터 바인딩을 하고 vue에 대한 전반적인 지식을 습득하기 위한 연습용 프로젝트 입니다..

저번 주말부터 시작해 인프런 강의를 통해 간단한 무비앱을 만들어 보는 시간을 가졌습니다!!! 따라 만들고 나만의 스타일로 바꿔서 만들어 보는 시간을 갖고 싶었지만 시간적으로 너무 여유가 없습니다 ㅠㅠ 여튼!!! 이번 인프런 강의 무비앱 만들기를 통해서 리엑트 프롭스의 흐름과, api 데이터 정보를 어떻게 전달되는지 알게 되었습니다! 특히 백엔드 파트 부분에서도 어떤식으로 api를 주고 받는지 간략하게라도 파악하였습니다!!! 아직 많이 부족하고 클론코딩 수준이지만 이번 무비앱을 만들어 보면서 많은 도움이 되었습니다!!! 리엑트를 활용하여 다양한 웹사이트를 경험하면서 언젠가 직접 로직을 작성해서 나만의 프로잭트 또한 만들어 볼 예정입니다!!! 여튼 인프런 무비앱 만들기 강추강추!!! https://www.i..

후.... 1주일 동안 꾸준히 1시간씩 투자해서 부트스트랩을 공부하였는데 오늘 이걸 활용해보고자 합니다! 부트스트랩과 여태 배웠던 react 의 개념들을 활용해서 나만의 디자인 컬랙션 웹사이트를 만들어 보았습니다!! 엄청 잘한것은 아니지만... react 복습차원에서 엄청 의미있는 시간이라고 생각합니다!!! 그럼 결과물 부터 감상해봅시다!!! #1. 레이아웃은 어떻게 했나 ? 부트스트랩을 활용해서 navbar와 jumbotron 이두가지를 활용했고 레이아웃은 부트스트랩 레이아웃 규격에 맞춰서 진행 하였습니다! // 부트스트랩 설치하기 npm install react-bootstrap bootstrap https://react-bootstrap.netlify.app/ React-Bootstrap The m..

로그인 입력 폼 구현하기 이번 미니 프로잭트는 로그인 입력 폼 구현하기 이다!! 벌써 이런걸 만들어 보다니... 내 자신이 너무 기특하다.. ㅋㅋㅋ 하지만 결과물이 그렇게 이쁘지는 않다.. 그래도 한단계 한단계 성장하는 ? 느낌이 든다. ㅎ? 자꾸 무엇인가를 만드는 연습을 해야 될 것같다!!! 처음에만 고통스럽지 뭔가 하나 하나씩 만들어지고 가공되는 아름다운 모습들을 바라보면 이렇게 황홀할 수가 없다... 미니프로잭트 결과물 ▷ 사용 프로그램? - vscode ▷ 기술스택? - html, css, javascript ▷ 참고자료 - 웹 프로그래밍 튜토리얼, 코드스테이츠 강의 좋았던점!!! 이해하기 어려웠지만 하나씩 풀릴때 느껴지는 희열이 너무 좋았다 1. 이번 미니프로잭트로 인해 DOM에 대해 살짝? 익..

옛날에 라인 스토어에 취미생활로 이모티콘 디자인을 하여 판매 한적이 있다!!! 물론 망했땅.... ㅋㅋㅋ버리기가 아까워서 이 이모티콘 디자인으로 재활용 할 수 있는 프로잭트가 뭐 없을까? 많이 고민하였다 ㅠㅠ 너무 사랑스럽고 귀엽다... 그래서 이 이모티콘을 재활용 프로잭트에 활용 하였다!!!! 그결과는 ?? 미니프로잭트 결과물 재활용 프로잭트 ㅋㅋㅋㅋ 미니프로잭트 후기 ▷ 사용 프로그램 - 일러스트, 포토샵, vscode ▷ 기술스택? - html, css ▷ 참고자료 - heropy , 웹 프로그래밍 튜토리얼 등등 좋았던점! 우선 자바스크립트를 활용하지 않아도 충분히 css를 활용해서 애니메이션 효과를 통해 충분히 구현 할 수 있다. 하지만 너무 제한적이여서 꼭 자바스크립트와 연결해서 쓰는 방법을 알..