라이언 코딩일기

[HTML, CSS, JS] 요소를 마우스 커서에 따라다니게 하기

오늘은 JS 좌표와 관련된 공부를 했다. pageX,pageY,clientX,clientY 등등~ 공부만 하면 재미없으니 마우스커서를 따라다니는 요소를 만들었다. 핵심기능들은 아래와 같다. CSS : transform : translate() JS : eventlistener의 mousemove + eventlistener에 내재되어 있는 clientX와clientY 완성본 1,1 HTML 코드 화면에 비춰줄 div태그와, p태그를 추가, 각각 dot, coords라는 id 값을 주었다. body { background-color: #000; width: 100%; height : 100vh; } #dot { width : 50px; height : 50px; border-radius: 50%; back..

[HTML, CSS, JS] 유튜브 클론코딩 리뷰

이번 프로젝트는 유튜버 '드림코딩'님의 무료 강의 중 유튜브 클론코딩을 참고하였다. 디자인 및 문구정도만 참고, 코드는 참고하지 않았다. 강의를 보진 않았기에 어느 부분이 엘리님과 다른지 나중에 확인해 볼 필요가 있다. 마크업부터 CSS 박스모델링까지 내 코드가 훨씬 더러울테니... 이번에도 에디터는 repl.it을 사용했다. RyanTube #RyanCoding #RyanTube #Ryan 클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 1M views 1year age 1K 0 Share Save Report Ryan's Playground 1M subscribers subscribe Up Next 클론..

[React] 간단한 카카오 굿즈샵 만들기 리뷰2

저번에 기록한 카카오 굿즈샵 2편이다. 이번에 추가한 기능은 아래와 같다.장바구니에 상품 추가 시 중복방지장바구니 페이지 체크리스트 활성화장바구니 페이지 선택된 상품의 총 가격, 개수 구하기 function handleAddToBtn() { // UI 핸들링 setShow(!show); // 로컬 저장소 값 가져오기 const localCart = localStorage.getItem('cart'); const parsedCart = JSON.parse(localCart); // 로컬스토리지에 상품 정보가 없다면 item 추가 후 저장 if(!localCart) { localStorage.setItem('cart', JSON.stringify([item])); } else { // 로컬스토리지에 상품 정..

[React] 간단한 카카오 굿즈샵 만들기 리뷰

이번 프로젝트는 카카오 프렌즈샵을 보고 일부 디자인 및 이미지만 따서 간단한 페이지를 만들어 보았다. 나름 이런저런 기능을 추가해보고 싶었기에 꽤나 시간이 들어갔다. 이번 프로젝트를 하면서 localStorage 기능과 모달창 핸들링, CSS의 미디어 쿼리 기능에 많은 노력을 기울였던 것 같다. 조만간 로그인 기능 및 장바구니 체크박스 기능을 추가할 예정이다. ** 평소에는 관심도 없다가 만드는 내내 굿즈가 하나같이 귀여워서 다 사버리고 싶었다.

[React] TMDB API로 간단한 영화 리스트 만들기

이번 프로젝트는 유튜버 '인브로즈'님의 강의를 참고해서 만들었다. 처음 영상을 접했을 때는 '촬쓰'? 라는 이름으로 활동하셨던 기억이 있는데, 강의를 본격적으로 하기 위해 활동명을 변경하신 모양이다. 이번 프로젝트는 useState, useEffect, useParams, axios, react-router-dom 등을 이용하였다. import './CSS/index.css'; import { Routes, Route } from 'react-router-dom'; import { useState, useEffect } from 'react'; import axios from 'axios'; // import components import MainNavbar from './components/MainN..

[HTML, JS] 멀티 Select 공부 리뷰

오늘은 유튜버 '개발자의품격'님의 [ 웹개발 기초편 - 멀티 Select 처리 ] 편에 대해 공부했다. 태그를 이용한 실습은 거의 해본적이 없었기에 공부할 수 있어서 좋았다. 이번 공부는 시간이 없어서 CSS 작업은 하지않았다. 코드 작성은 repl.it을 이용했다. 나는 지금 제출하기 HTML 코드 특별한 점은 없다. async function main() { await replit.init(); // Uses the Replit Extensions `fs` API to grab the list of files // in your root folder, and writes it to the document. const { children } = await replit.fs.readDir('.'); do..

[React] 간단한 투두리스트(Todo-List) 만들기

리액트를 이용해 간단한 투두리스트를 만들었다. 사용한 기능은 useState Hook과 Array.map() 메소드뿐이다. (props도 이용 안 함.) 로컬 저장소, 중복방지, useEffect 등의 부가기능은 일절 없다. 나중에 이 프로젝트를 활용해 부가기능 연습을 할 예정이다. import { useState } from 'react'; import './index.css'; function App() { const [inputValue, setInputValue] = useState(''); const [todoList, setTodoList] = useState([]); // 서브밋 핸들러 function handleSubmit(e) { e.preventDefault(); const copyTo..

[HTML, CSS, JS] 모멘텀 클론코딩 리뷰

유튜버 '노마드 코더'님의 무료강의 중 모멘텀 앱을 따라 만들어 보았다. 니꼬쌤의 강의는 이 강의로 처음 접해보았다. 자막이 잘 달려있음에도 베이스가 영어로 된 강의라 초반에는 버벅거렸는데 금방 익숙해졌다. 기초에 대한 개념을 천천히, 이해하기 쉽게 잘 설명해줘서 좋았다. 나중에 유료강의도 들어봐야겠다. 일하면서 중간중간 시간날 때마다 작업을 했다. 에디터는 repl.it을 이용 앱의 주요 기능 새로고침시 배경화면 이미지 랜덤 변경 인풋창에 사용자 이름 입력시, [ Hello, {입력값} ] 출력 -- 로컬저장소 이용, 새로고침시 값 유지 우측 상단 시계 매초마다 자동갱신 좌측 상단 사용자 위치 기반 날씨정보 30초마다 자동갱신 새로고침시 중앙의 명언 랜덤 변경 하단 투두리스트(Todo list) -- ..