모험 일러스트 (+ interactive art)

인터랙티브 웹 개발 노하우를 수강하며 배운 내용을 토대로 직접 구현해보고 싶었다. 오로지 재구현만을 목표로 Layer 를 나눠서 입체감을 느낄 수 있도록 급하게 그려봤다. 작업과정이번에는 아쉽게도 전체적인 작업 과정을 영상으로 담지 못해서 그린 과정만 간략하게 공유 넘 욕심낼 것 같아서 급하게 끝냈다 최종결과 원래는 뭔가 스토리나 더 다양한 요소를 넣어보고 싶었지만, 욕심내지 않기로 했다. 안할것 같아서... ㅋㅋ 해당 그림은 6가지 레이어로 되어있고, 3개의 레이어만 마우스의 mousemove 이벤트를 받아 위치에 따른 transelate 작업이 이루어진다. parallax_3.style.transform = "translate3d(" + mx / 140 + "px ," + -scrollTop * .2..

• format_list_bulleted 👨‍🎨 디자인
• · 2022. 12. 17.
• textsms

[강의리뷰] “디자이너의 스킬업을 위한 Lottie 완벽 이해하기” 후기 | 인프런

디자이너의 스킬업을 위한 Lottie 완벽 이해하기 https://inf.run/p8xU 디자이너의 스킬업을 위한 Lottie 완벽 이해하기 - 인프런 | 강의더 이상 Gif, Video에 의존하지 않아도 됩니다. 에프터이펙트에서 제작한 애니메이션을 코드로 출력해서 자바스크립트를 통해 다양한 인터렉션을 구현하는 방법을 배워볼게요. 여러분도 매력적인www.inflearn.com 후기이 강의는 에어비엔비 라이브러리인 Lottie.js 를 손쉽게 사용하는 방법에 대해 알려준다! 이제 직업으로는 더 이상 디자이너는 아니지만 ... 궁금해서 수강했다. Lottie가 궁금한 사람, 바로 활용이 필요한 사람에게는 추천드리는 강의지만 기초 지식으로 AfterEffects, Html, Css, Js의 기초가 필요하기 때..

• format_list_bulleted 📃 기록/강의
• · 2022. 12. 16.
• textsms

파일 업로드 확장자 제한, 같은 파일 첨부 막기

다 쓰고 나니 뭘 당연한걸 썼나 싶네 .. 첨 알았을 땐 좀 놀랐음 ㅠ 지금까지 거의 단순 조회하는 업무만 하다가 파일 업로드를 맡으니 당황.. 알고보니 간단한 작업이었다 ㅠㅋㅋㅋ 역시 선 취업 후 공부의 폐해 내 업무 : 파일 보내기 기능 구현 - 파일 확장자 제한하기 (엑셀만) - 같은 파일 연속 첨부 가능하게 하기 api 등록하는 것부터 멘.붕이었다. 지금까지 그냥 이런식으로 등록함 ... 요청하기: (params) => httpClient .post(`api주소`, params) .then((response) => response), 하지만 파일 업로드는 좀 다르더라 ... 업로드해라: ({ formData }) => httpClient .post(`api주소`, formData, { header..

• format_list_bulleted 🧠 저장/Javascript
• · 2022. 12. 13.
• textsms

[근무일지] 비전공 프론트엔드 개발자 3개월 근무 후기

우와 시간 완전 빠르다.. 벌써 3개월이 지났다니! 하지만 아직도 난 회사에서 뚝딱뚝딱 얼렁뚱땅 초보 개발자 🤖입사 동기도 없고 ... 또래도 별로 없는 이 곳에서 아주 외롭게 성장 중이다. 성장 중 ... 맞겠지? ㅋㅋㅋㅋㅋㅋ다른 개발자들의 회고를 읽어보면 굉장히 거창하던데,,, 사실 난 별 거 없다.그냥 오늘 하루 실수 안하려고 아둥바둥댈뿐.. 😭현재 회사에서 우리 팀이 개발한 서비스(나는 숟가락만 얹는..) 출시를 앞두고 통합테스트를 진행하고 있다.개발 막바지에 합류를 하게 되어서 코어 개발자분들이 열심히 개발하는 모습을 옆에서 간접? 체험? 하는 것과사업적인 얘기를 옆에서 듣는 것도 나중에 도움이 될 것 같은 그런 느낌이 든다. 뭔가 재밌다 :) 😇 아무튼 그동안 잘한 것들1. 지각 0번 -..

• format_list_bulleted 📃 기록/개발자 일지
• · 2022. 11. 28.
• textsms

localStorage에 JSON을 쓰는 이유

Javascript 📌 localStorage localStorage 객체 : 지역적으로 사용할 수 있는 저장소 객체 데이터 저장을 할 땐 일반적으로 세션이 큰 걸 활용하지만 간단하게 만들때는 localStorage도 ㄱㅊ localStorage 객체의 메소드 getItem('키') 특정한 키로 값을 꺼낼때 setItem('키','값) 특정한 키로 특정한 값을 저장할 때 removeItem('키') 특정한 키로 어떤 값을 제거할 때 clear() 전체 제거 하나씩 가져오는 구조 document.addEventListener('DOMContentLoaded', () => { const p = document.querySelector('p') const button = document.querySelecto..

• format_list_bulleted 🧠 저장/Javascript
• · 2022. 11. 24.
• textsms