전체 글

MBTI 과몰입 테스트

일단 링크부터 https://userju.github.io/MBTI-over-immersion-TEST/ MBTI 과몰입 테스트 userju.github.io 12/22일 부터 1월 8일까지 하루에 3~4시간씩. 약 19일에 걸쳐 만들었다. 크리스마스를 맞아 서울에서 3박 4일 연말기념으로 부산에서 1박 2일 친구와 다이빙을 하러 가고 또 서울을 3박 4일동안 갔다가 드디어 배포를 완료하고 친구들에게 링크를 보냈다. 하지만 이게 끝이 아니다 내 목표는 이 프로젝트를 끝내는 것이 아니라 프로젝트를 통해 무언가를 배워가는 것이기 때문에 아직 내 프로젝트는 끝나지 않았다. 언제 끝날련지... 프로젝트 진행 이유 나는 한번 부딪혀보기 전까지는 '내가 제대로 배운 것이 맞나?' 끊임없이 의심하는 사람 중 한명이다..

방향성에 대해서

공부용 티스토리 블로그를 운영하면서 문은 열어놨지만 아무것도 가져다놓지 않은 가게처럼 천천히 흥미를 잃어가고 있다는 생각을 하게 되었다. 공부에 흥미를 잃은 것은 전혀 아니다 아직까지도 코딩은 나에게 하루하루 새로운 배움의 장이고 빛나는 아이디어를 발굴해나가는 과정이다. 새롭게 만들어보고 싶은 프로젝트가 넘쳐나고, 블로그를 놓고 있을 때 진행했던 개인 프로젝트도 왕왕 있다. 하지만 블로그를 운영하는건 다르다. 내가 배운 부분은 너무나도 협소하고 내 능력치 또한 아주 자그마하기 그지없다. 새롭게 알아가며 나누고 싶은 것들은 이미 많은 사람들의 정제되고 깊이있는 글들로 존재하고 있다. 당연하다. 나는 코딩을 배운지 얼마 되지도 않은 햇병아리일 뿐이니까. 그래도 내 글을 누가 볼까? 이게 가치가 있을까? 하는..

[css] mix-blend-mode : 사진 위 글자를 튀게 하는 법;

고정되어 있는 콘텐츠를 눈에 확 띄게 하고 싶을 때 css에서 mix-blend-mode를 이용할 수 있다. 개인 프로젝트를 진행히보다가 글씨가 조금 더 조화롭게 튀었으면 하는 마음에 찾아보게 되었다. 예제 mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: diffe..

[react] .process.env.REACT_APP_KEY undefined

문제 상황 드림코딩 강의를 들으면서 분명히 하라는 대로 했는데 계속해서 문제가 생겼다. firebase도 일부러 다운그레이드를 해서 버전 7로 실행했는데. 계속 process.env.REACT_APP_FIREBASE_API_KEY가 undefined라는 것 key 값이 잘못되었나 확인을 하고 .env 파일에서 값을 복붙해 컴포넌트에 직접 담았을 때는 정상적으로 작동되었다. 따라서 key값에는 문제가 없고, _FIREBASE_API_KEY 뿐만 아니라 .env 파일에 담아둔 키들이 활동을 못하는 것 같았다 해결방법 일단 맨 처음 할 일은 .env파일에 ,를 넣은 것은 아닌지 살펴보고 .env파일을 root에 생성한 것이 맞는지 다시 확인한다. 아무리 해도 코드에 문제가 없다면 'dotenv'를 설치하면 된..

[FISH-NEWS] 프로젝트 기록

끝났다 생각보다 후련하지는 않다 어서 새로운 프로젝트도 하고싶고 지금 짜둔 코드를 계속 리팩토링하고싶기도 하다. 하지만 리팩토링만 어마어마한 시간을 잡아먹지 않을까 두렵기도 하면서 어쨌든 첫 프로젝트를 끝낸 내가 자랑스럽다! 목표 목표는 GAME부분과 footer을 마무리하는 것이었다 이틀에 걸쳐 공부를 하다 틈틈히 만들었다고는 하지만 생각보다 GAME 부분에서 고전했다 구현 계획 GAME부분은 game board 박스 안에 물고기들이 무작위 위치로 계속 움직이고 물고기를 클릭하면 물고기가 remove된다. 동시에 클릭 위치로 낛시바늘이 이동했다가 x좌표 그대로 game board 박스 위로 다시 올라간다. 실전 코딩 일단 엘리 드림코딩101에서 배운 let ** = false 를 활용해서 게임을 만들어..

[FISH-NEWS] 프로젝트 기록

주저리 거의 막바지에 다다랐다. 엊그제 올려야 했던 글이었지만 어제 교수님을 뵙고 친구들을 만나러 전주로 가서 오늘 늦게 돌아오는 바람에 오늘에서야 작성중. 목표 책 이미지를 누르게 되면 책 이미지와 이 책에 대한 설명이 적힌 팝업 띄우기 아래 이미지가 그 예시이다. 문제 상황 위 이미지처럼 오른쪽 위에 위치해야하는 x표가 계속 사라졌다. 사라졌던 이유를 그 당시 정리해놓지 않아서 확실하지는 않지만 당시 HTML이 이런 식으로 작성되었었는데 JS로 ad__items_popup의 HTML을 변경했기 때문에 이 부분이 새로 변경한 ad__items_popup에 밀려 사라졌던 것 같다. 문제 해결 과정 당시 생각했던 방법은 두가지였다. 1. innerHTML으로 popup_close까지 만드는 것 2. HTM..

[FISH-NEWS] 프로젝트 기록

문제 상황 요즘 개인 프로젝트에 손도 대지 않고 있었다. 일단 구상되었던 header, breaking(처음 파트)와 main news 부분은 완성되었지만 main news 및 ad 부분이 아무리 해도 마음에 들지 않았고 아무리 연습용 페이지라지만 페이지를 기획한 의도가 없어 보였다. 처음 목표는 이렇게 옛날 타자기 광고를 넣으려고 했다 위 광고 사진 속 타자기와 시대가 맞지 않는 것은 제쳐두고서라도 이미지 크기가 너무나도 재각각이어서 통일된 느낌이 들지 않았고 타자기 방향도 멋대로였다. 타자기에 hover을 입혀 효과도 주었는데 대체 뭘 위한 효과고 어떻게 광고를 하려는거지? 보는 사람에게 뭘 보여주고 싶은거지?(어차피 나밖에 보지 않지만) 라는 고민만 계속 하면서 손을 놓고 있었다. 당연하게도, 밑의..

[드림코딩 : browser101] 게임 만들기 실전 2 🎇

새로운 js 파일을 만들어서 스파게티 코드 탈출을 노렸다 수업을 한번 듣고 다시 만들어본 파일이라서 엘리님의 코드를 많이 참고했다. 역시 나 혼자 한번 해보고 수업을 들으니까 코드 전개가 더 쉽게 이해되고 이런 방법이 있었구나! 놀라기도 한다. 동생이 흉작이라고 이름지어준 사진 밑으로는 새로운 js 파일 * 깃허브 링크를 올리기에는 아직 부끄러워서 내용만 복붙 "use strict"; const gameStartBtn = document.querySelector(".game__startBtn"); const playShape = ``; const stopShape = ``; const gameTime = document.querySelector(".game__time"); const ground = do..