창고

3 4월 쥰내바빳다... 5월도 바쁘겠지? 개발은 참 재밌어... 잊지말구 프로젝트 끝나면 node JS 재개하기 도저히..운동할 짬이 안 난다 야근이 많고 머리 존나굴려야되고 당떨어져서 간식 쳐묵하고 뱃살은 늘고 허허허 이따위로 사는데 공복혈당장애가 안 온다면 그것은 기적일것입니다 (왔다는 뜻) 멘토스 포도맛 맛있음 다른 맛은 사문난적 (수박맛 같은건 와 존재하는건데?)

미친쥰내바쁘다 다음주까지 프로토타입을 완성해야하는데 뭔가 맨날 앞단이라고 하기 민망할정도로 디자인~퍼블리싱에 가까웠는데 이제 jsp에서 하니까 전부 js로 그리구 있는데 햐 낯설면서도 재밌..다 ㅎ...야근하고 집가는중 주말에도 출근해야지... 이 프로젝트 끝나면 nodeJS 공부해서 백엔드 좀 더 낯익어지면 풀스택으로 족금씩 나아갈 수 있지 않을까???... ㅅㅂ 너무 바빠서 게임할생각도못했다.. 는 누워서할 수 있는 우마무스메는 하고있지만 나도 드디어 루돌프랑 세이운 생김 근데 오구리는 기본도 클구리도 없음 흑 ㅠ 헤헤허하헤히 일.재밋다....

튜토리얼 사이트 html5-canvas Tutorial => Dragging circles & rectangles around the... Learn html5-canvas - Dragging circles & rectangles around the Canvas riptutorial.com 데모페이지 :https://ohikmyeong.github.io/rip-tutorial-canvas/dragging/01_drag_circle_rectangle.html Dragging circles & rectangles around the Canvas ohikmyeong.github.io 배경이 그려진 캔버스위에 두개의 개체를 마우스 다운&드래그 할 수 있다 나중에 드래그 되는 개체의 z-index값이 더 높다 두..

https://riptutorial.com/html5-canvas/topic/5492/charts---diagrams html5-canvas Tutorial => Charts & Diagrams Learn html5-canvas - Charts & Diagrams riptutorial.com canvas로 파이차트등 다양한 차트를 그리려고 할 때나, 도형이나 복잡한 패스 안에 이미지를 넣거나, 그만큼 잘라내고 싶을 때 방법등을 쉽게 알아볼 수 있는 사이트 RIP tutorial html5-canvas Tutorial => Getting started with html5-canvas Learn html5-canvas - Getting started with html5-canvas riptutorial.co..

갑자기 꽂혀서 구매해서 읽었다. 엄청 여러모로 공감가서 재밌었음... 제일 공감가는건 은의트리거 쌉마이너 장르 파다가 외로움에 지쳐 sns 탈퇴해버리는 부분이었음 ^^)d 내가 좋아하는건 검색결과 0건 이런거까진 아닌데 총 10건 안되는 최신글이 2년전 뭐 그런 점이 닮았달까 그래도 최근 공식에서 아닌척 은근 커플스킨 내주고 말이야... 작중 등장인물들이 20대 초반~중후반인것 같다. 부정적 트리거를 마주했을 때 오히려 열받아서 나름 생사적인 방향으로 돌파해버리는 에너지는... 30대 이후부터는 경제적 신체적 여건에 따라 좌우되니까 작중 인물들이 sns를 그만두고 감정의 널뛰기 폭이 적어진 나름 평화로운(그러기에 좀 노잼인) 일상 보내는 부분이 너무 공감가서 웃펐다 ㅠㅠ ㅎ... 그림체가 굉장히 고전적이..

데모 사이트 : https://ohikmyeong.github.io/frontend-mini-challenges/telephone-formatter/ telephone formatter ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 telephone formatter +(000)-1234-5678 Colored by Color Scripter cs JS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 class TelephoneFormatter{ const..

데모 사이트 : https://ohikmyeong.github.io/frontend-mini-challenges/guess-the-number/ Guess the Number ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Guess the Number Enter a Guess Between 0 to 100 SUBMIT Too Low / Too High Your Guesses : ${0},${0} RESTART GAME Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ..

익힌 시간순 2021년 셀프 생일선물로 산 우쿨렐레... 나름 꾸준히 치고 있다 1. 스티븐 유니버스 오프닝 We are the crystal gems https://www.youtube.com/watch?v=ZhQ0NQm8Uw4 https://www.youtube.com/watch?v=Z-EYldgk0sE 2. 스티븐 유니버스 Giant Woman https://www.youtube.com/watch?v=GPiyOEBnVWg 3. 스티븐 유니버스 Love like you https://www.youtube.com/watch?v=dsr2Gk11ggc 4. 스티븐 유니버스 Be wherever you are https://www.youtube.com/watch?v=iCbnqeaseRQ 5. 스티븐 유니버스..

4월이 지나고나서야 쓰는 3월달 일기 사실 중간에 쓰긴 썼었는데 새벽에 작성한 한탄+분노폭발 일기라 부끄러워 다음날 아침에 바로 가렸다... 3월은 진짜 일하느라 좋은 의미로 정신이 없었다. 지금은 월루중인데 퇴근까지 시간이 애매하게 남아서 포스팅중... 나중에 따로 지금까지 칠 수 있는 우쿨렐레 곡들을 정리해서 포스팅 하고 싶다 어언 10곡 내외가 되니까 내가 뭘 칠 수 있는지 떠올리는것도 꽤나 시간이 필요해서 원래는 아날로그로 악보를 옮기고 기록했는데 코드가 아니라 핑거스타일도 연습을 하게 되면서 그냥 악보 사서 프린트하거나 캡쳐하는게 훨씬 편하기에... 요즘의 즐거움 : 대파 키우기 3월 25일부터 물에 꼽아 키우기 시작했고 어제(4월 2일) 화분으로 옮겨줬다. 대파가 자라는 속도가 게임 레벨보다 ..

결론 : 아직 기본 기능엔 멀티 상속을 지원하지 않는다. 그래서 reduce를 이용하여 특수하게 사용해야한다. 참고 링크 : https://medium.com/@thevirtuoid/extending-multiple-classes-in-javascript-2f4752574e65 Extending Multiple Classes in JavaScript For developers coming from traditional OOP languages, I have seen them dismayed, nay, horrified that you cannot do the following in… medium.com 장점 : 멀티 상속의 개념을 쓸 수 있다! 단점 : 부품이 되는 클래스들은 모두 다시 한번 함수로 감싸..

업무를 하다보면 뜻은 어렴풋이 유추하지만 상식이 적다보니 정확한 의미를 모르는 경우가 많다. 일상생활에서야 대충 퉁치면 되겠지만 아다르고 어다른 업무에서 뜻을 자세히 모르고 뭔갈 제작한다...? 재앙이 될 수 있음. 예를들어 어린이집과 어린이집 게이트의 차이가 뭔지 모른다. 그냥 어린이집이면 어린이집이라고 할 텐데 굳이 "게이트"가 붙는 이유는 뭘까? 그래서 구글에 검색해보면 와 전혀 도움이 되지 않았어요! 그럼 그냥 직관적으로 어린이집 게이트 로만 검색해본다 어쨌든 어린이집 비슷한 공간이 나오긴 하는데 그냥 어린이집은 아닌것 같다. 여전히 애매모호하다...그래서 요즘 핫하다는 챗지피티를 이제서야 써보기로 했음. 그동안은 필요성을 못 느끼다가, 아 이런 일상생활이나 업무중 상식을 묻는데 자연어로 검색을 ..

정교한 이미지 작업을 하려면 120도짜리 사선그리드를 그려서 한땀 한땀 패스 따며 만들고 3D효과를 주거나 해야겠지만 그냥 아 한국사람 빨리빨리; 느낌으로 글자며 귀도리있는 도형이며 아이소메트릭 각도대로 눕혀버려야 할 때가 있다. 단순히 도형 하나, 글자 몇 개 좀 눕히자고 그 그리드를 만들거나 키자면 매우 비효율적이며 정신병이 올 수 있다. 글자는 일단 Ctrl Shift O 해서 도형으로 깨뜨려주라.(상단메뉴 문자 > 윤곽선 만들기) 그다음 도형 선택하고 우클릭>변형>회전(R) 60도로 눕혀주라 다시 우클릭 > 변형 > 기울이기 기울이기 각도(S)는 30도 기울이기 각도(A)는 -30도로 해주면 된다.

최근에 sadanandpai의 Frontend Mini Challenge(이하 FMC라고 하겠음)를 하고있다... 엔간해선 다 예전에 한번 만들어 본건데 다시 하니까 감회가 새롭고 좋은듯. 현 시점에서 20개까지 해놨는데 한 번에 다 올리긴 힘드니까 일하기 싫을때마다 하나씩 올리겠음 계산기 다시 구현하다가 자꾸 실패해서 예전에 한거 보긔... 기억력 뭔 데모 : https://ohikmyeong.github.io/frontend-mini-challenges/counter HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Counter ${0} - + Increase/Decrement by RESET Colo..

어느새 2월 중순이다. 뭘 하고 사는지 의식하지 않으면 시간이 너무 빨리 흐르는 거 같다. 올해 정말 감흥없이 신년을 맞이했는데 (게임하다가 팀보이스로 팀원이 어 새해네 해서 새해인거 알았음) 정신적 위기 호르몬은 9~12월이 피크인 것 같다. 정작 그 계절을 제일 좋아하는데 말여.. 어쨌든 요즘 정신이 제법 평안하다는 뜻임. 최근에 극장에서 퍼스트 슬램덩크를 봤다. 원래는 귀찮고 영화값도 옛날에 비해 너무 비싸져서 보러 갈 생각이 없었다. OTT 나올 때 까지 존버할 생각이었는데... 자꾸 유튜브에서 슬램덩크 관련 보여주고 넷플릭스에 옛날 TVA가 있길래 초반에 보다보니 너무 재밌어서 만화책이 다시 보고싶어짐. 근데 이사오면서 만화책을 창고 가장 아랫쪽에 놔둬버린 바람에 다시 이사가지 않는 이상 짐을 ..

https://www.youtube.com/watch?v=w0VEOghdMpQ&t=2411s 클론코딩 API 키를 발급 받지 않아도 되는 편리한 날씨 API : https://open-meteo.com/ Free Open-Source Weather API | Open-Meteo.com $ curl "https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41¤t_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m" { "current_weather": { "time": "2022-01-01T15:00" "temperature": 2.4, "weathercode": 3, ..

맙소사...... .....................

다이소에서 산 저 뭐냐 30일 챌린지 사과알 스티커 저거... 처음으로 꽉 채운게 게임 관련이라니 ^^....ㅋㅋ 여전히 장비는 30프레임 이하의 모니터( ㅋㅋ )와 1660 그래픽카드... 이지만 에임 연습 처음 할 때 마우스 dpi는 1500에 인게임 감도는 35였다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 미친 고감도... 이렇게 게임을 3~4년 하다보니 손목을 정말 안 쓰다 시피해서 몇시간 게임을 해도 손목이 아프다는걸 이해할 수 없었음 대신? 에임은 당연히 나가리감 = 모이라 메르시만 해요. 저 상태에서 에임 연습 처음 시작 할 때 느꼈던게 마음대로 뻗어나가는 마우스 커서를 제어하기 너무 힘들다(제동이 힘들다) 힘이 너무 많이 들어간다 여서 천천히 내리기 시작했는데...극고감도에서 중저감..

시간 죽이기엔 최고... https://en.gamesaien.com/game/color_tiles/ Color Tiles - Free Online Puzzle Game Click on a blank space. If the color matches the nearest neighboring tiles,vertically or horizontally, from the clicked space, you get the matching tiles. You get 1 point for each tile. You have 120 seconds to play. Each incorrect click reduces your time b en.gamesaien.com 30번 챌린지를 앞두고 29번째에 찍어올림 ㅎ... ..

1탄에서 만든거는... 말단이 흉하게 나오는 문제가 있었음. 코드펜을 보니 grid 속성과 grid-row의 span 속성을 사용하여 더 이쁘게 정렬하는걸 참고하여 다시 만듦 See the Pen Masonry Layout-grid by Oh Ikmyeong (@dpffpself) on CodePen. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Masonry Layout(final) css grid-row span 사용하기 Masonry Layout grid-row span 속성 이용해보기 I'm Footer Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ..

See the Pen Masonry Layout by Oh Ikmyeong (@dpffpself) on CodePen. 한 2018년 쯤에 jQuery 라이브러리 없이 어떻게 하면 Masonry Layout을 구축할 수 있을까... 고민했었다. 이 블로그 해당 카테고리의 가장 초반 글도 그거랑 관련된 내용일꺼다... 그 때 당시엔 지금보다 훠어얼씬 더 자바스크립트를 못하고 (제이쿼리만 할 줄 알았음) 문제해결능력도 엄청 낮았기에 css의 column 속성으로 하드코딩 했었다. 이건 JS와 position:absolute를 이용하여 강제적으로 포지션값을 변경하는 방식이다. 장점은 애니메이션 효과가 적용됨 (transition) 단점은 짝수개의 컬럼일때 이미지 길이에 따라 한쪽만 길게 늘어지는 것 처럼 보이..

See the Pen Like Slick Slider by Oh Ikmyeong (@dpffpself) on CodePen. 데모 및 코드 소스 코드펜에서 확인하기 : https://codepen.io/dpffpself/pen/dyjJbqo Like Slick Slider ... codepen.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 slick slider vanilla js Like Slick Slider (1)Hello World button Item(2) ....(3) 4 Thank you Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 1..

이전 버젼을 만들고 나니 원본이랑 움직임이 다르기에 수정해줌, + 이미지가 정중앙에 오도록 바꿔줌 이미지가 정중앙에 오도록 하는 방법 이미지는 width:100vmax; height:100vh; object-fit:cover; left는 left:50vw;에 translate(-50%); center는 left:50%; translate(-50%); right는 left:calc(((100vw / 3) * -2) + 50vw); 3분할로 나뉜 애들 transition을 transform에만 걸고 opacity는 걸지 않아놔야 생각한대로 움직인다. center로 움직일때는 opacity 1로 해야 빈화면이 안 보이더라고...머리로는 안 걸어도 될 것 같은데, 플래그 걸어놨음에도 불구하고 마구 움직이다보면 ..

https://mainia.tistory.com/4035 윈도우10 그래픽 카드 확인하기 보통 새로 나온 게임을 설치하기 전에 내 컴퓨터의 사양을 체크하게 됩니다. 게임에서는 컴퓨터 장치 중 그래픽 카드가 제일 중요합니다. CPU 도 그에 못지 않게 중요하지만 그래픽 카드의 성능 mainia.tistory.com (1) 내PC 우클릭 > 속성 > 장치관리자 > 디스플레이 어댑터 (2)바탕화면 우클릭 > 디스플레이 설정 > 고급디스플레이설정 > 내부 디스플레이 하단에서 정보 확인

https://codepen.io/theseventh/pen/LYVqMYb Yet another slider ... codepen.io 저 분의 코드펜을 보고 내 식대로 바닐라 자바스크립트로 짜보았음. 처음엔 background로 접근했다가 사이즈별 대응이 잘 안되어서 좀 무겁더라도 ㅎ..코드는 간단해지는 쪽으로 변경함. 이미지 객체의 사이즈를 100vw 100vh로 한 다음 object-fit:cover로 해주면 된다. 그리고 position:absolute;에 left값을 -3, -6 으로 바꿔주면 된다. 맨 처음에서 이전 버튼을 누를시에는 매끄럽진 않음..근데 귀찮다 그냥... HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ..

옵치2는 이전 시즌 경쟁 티어에서 -5단계부터 시작하는거 같다... 이번에두 플레 입구컷까진 올리고 접으려 했으나 주말이 끝남과 동시에 다 귀찮아졌음 ~_~ 게임을 할 때 그냥 즐기면 되는것을 나이가 나이다보니까 게임 같은걸 하고 있다보면 '내가 이 나이에 게임을 특출나게 잘 하는것도 아니고, 영상을 제작하는것도 아닌데 더 다른 개인시간을 활용할 수 있음에도 불구하고(해야함에도 불구하고) 발전을 위한 노력이 귀찮고 두려워서 마냥 게임으로 도피하고 있구나.. 근데 그런 게임마저 잘 못하고 있음..ㅎㅎ 난 잘하는게 뭐냐...'란 생각이 들어서 컴퓨터를 잘 안 켜게 된다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ ㅠ(그렇다고 게임을 안 할때 생산적인 무언갈 하고있진 않다. 요즘 너무 그냥..기운이 없고 짜증만 많아서 퇴근하면 디비..

원본 : https://codepen.io/Hyperplexed/pen/MWQeYLW Magical Hover Effect (w/ Tutorial) A recreation of the amazing hover effect found here: https://linear.app/features ... codepen.io 이런거 보면 진짜 정말 대단하고 기발한 사람들이 많다...👍 마우스의 clientX, clientY 값에 따라서 background의 radial-gradient 값의 시작 좌표 값을 바꿔준다 (style.setProperty 사용) 테두리도 반짝이는것처럼 보이는 효과는 실제로 border를 준게 아니라, 좀 더 작은 DOM을 자식요소로 넣은것이다 (inset의 값이 커질수록 테두리는 굵어..

원본 : https://codepen.io/simeydotme/pen/MWXxKrP Aqua Button (pure css) Using Gradients, Variables and Filters / Blending to create a really convincing Aqua button as seen on Twitter... codepen.io 색감과 효과가 너무 이쁘다... HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 Aqua Button ..

https://codepen.io/ykadosh/pen/LXvpBK Firefly Loader (Gooey Effect) Inspired by Alexis Doreau's Dribbble at https://dribbble.com/shots/2156764-Scanner-Gooey-Effect-Firefly-Loader and this article https://css-tricks.com/... codepen.io 코드펜의 이 예제를 보고, 원하는 만큼 푸른 공을 추가하고 마우스 커서를 따라다니는 민트색 공으로 변경해봄 svg의 기능을 쓴다. css에서 푸른공들을 묶어놓은 DOM(이하 $balls)에 filter : url(#아이디) 이런식으로 지정을 해준다. 커서를 따라다니는 DOM은 총 2개여야 한다..

webisfree : 자바스크립트 history 객체 페이지 갱신 없이 페이지 전환, pushstate MDN : pushState replaceState History.replaceState() - Web API | MDN History.replaceState() 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 stateObj, title, URL로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history developer.mozilla.org 이것만으론 리액트를 완전히 대체할 수 없겠지만... 늘 궁금했음 어차피 리액트도 자바스크립트로 만드는건데 대체 어떻게 페이지 갱신없이 주소창을 바꿀 수 있는걸까?????????? 자바스크립..

Online Tutorials 영상 카피 JS로 카운트다운(D-day) 핵심 : GAP = new Date("yyyy-mm-dd, 00:00:00").getTime() - Date.now() 일 : Math.floor( GAP / (밀리세컨드 * 60초 * 60분 * 24시간) ) 시간 : Math.floor( GAP % (밀리세컨드 * 60초 * 60분 * 24시간) / (밀리세컨드 * 60초 * 60분) ) 분 : Math.floor( GAP % (밀리세컨드 * 60초 * 60분) / (밀리세컨드 * 60초)) 초 : Math.floor( GAP % (밀리세컨드 * 60초) / 밀리세컨드 ) svg 스트로크 애니메이션 핵심 : stroke-dasharray 를 $svg.getTotalLength() ..