jannabee로그

📘 홍보담당자에서 웹기획자로.이 길이 두렵지만, 그래도 걸어보기로 했다.한 기관의 홍보 담당자로서의 생활을 멈춤하고,프론트엔드 공부를 하고 있는 일상 기록.몸과 마음이 함께 흔들리면서 사랑해 마지 않았던 일을 멈추게 됐다.최근에 직업심리검사를 했는데, 진취형/사회형/

프론트엔드 개발자 혹은 웹퍼블리셔 신입으로서의 포트폴리오일지,혹은 7년간 쌓아온 홍보마케팅 경력을 앞세운 웹기획자로서의 포트폴리오일지,그 방향성을 잡는 것부터가 꽤나 험난했다.하지만 어쨌든!하루 한 뼘씩이라도,코드 한 줄씩이라도,진행하고 있다는 사실 자체에 성취감을 느

지난 포스트에서는 왜 포트폴리오를 VS코드 스타일로 만들게 되었는지에 대한 과정을 공유했다.이번엔 그 중에서도 ✨핵심 중 하나인 사이드바 메뉴에 대해 정리해보려 한다.menu-item 클래스를 가진 리스트들이 사이드바 메뉴로 구성되고on 클래스를 통해 선택된 메뉴 표시

메인 히어로 섹션 - 타이핑 애니메이션 구현기 > 포트폴리오의 첫 인상, 히어로 영역 개발자가 봤을 때 매력적일 수 있도록 VS코드 감성을 녹인 포트폴리오 페이지를 만들기로 했다. 해서, 페이지의 첫 인상인 히어로 영역에 타이핑 애니메이션을 구현했다. 🎯 구현 목

아주 단순하게 <p> 태그 하나만 있는 HTML인데도, head 부분에 defer 없이 스크립트를 넣으니 “환영합니다”가 뜨지 않았다.수업에서 “브라우저 로딩 전에 JS가 실행되면 오류가 발생할 수 있다” 라고 배운 덕분에 쉽게 원인을 찾았지만,이렇게 간단한 구조

오늘은 즐거운 일요일! 월요일 학원에서의 사투를 위한 오늘의 단련 코스를 chatGPT에게 부탁했다. 친절한 그? 그녀?가 짜 준 커리큘럼은 아래와 같다. 과연 4시간 안에 뽀갤 수 있을지..ㅎㅎ 벨로그 기록과 함께 도전 시작! [x] DOM 조작, 이벤트 핸들링

기존에 만들었던 가상 브랜드 '차분일기'의 홈페이지의 nav에 offsetTop 메소드를 이용해서 스크롤 이동을 가능하게 했다. 이제야 진짜 nav 역할을 하게 됬구만^^@ offsetTop 핵심 요약 el.offsetTop = offsetParent(가장 가까운

오늘의 공부 주제는 Firebase, 그중에서도 Authentication(인증) 기능이었다.Firebase를 활용하면 별도의 백엔드 서버를 직접 구축하지 않고도 회원가입부터 로그인, 로그아웃까지 기본적인 사용자 인증 흐름을 손쉽게 구현할 수 있다.회원가입 (Sign

Firebase Authentication 기초: 이메일 로그인 전 과정 직접 만들어보기포스팅에 이어 firebase-auth.js 구조를 좀 더 뜯어보면서 복습하고자 한다.firebase-init.js에서 Firebase를 연결해두면,firebase-auth.js는

Firebase Authentication UI를 만들면서, CSS는 Tailwind CSS를 활용했다.이번 글에서는 Tailwind CSS가 뭔지, 그리고 왜 쓰면 편한지 직접 느낀 경험을 기록해둔다.Tailwind CSS = “디자인용 레고 블록”기존 방식: CSS

파이어베이스에서 카카오 로그인을 자동으로는 지원을 안해준다 (구글 로그인처럼 되지 않아서 유료 옵션을 사용해야 함) 연습용이나 포폴용의 사이트에서 그런 옵션을 사용하기는 어려우니, 선생님께서 가라로 구현하는 방법을 가르쳐주셨다. 시작은 카카오 데벨로퍼 페이지에서 친

오늘은 firebase의 기능 중 firestore에 대해서 알아봤다.사실 처음에 firebase가 뭔지 그 개념을 모르는 상태에서 수업을 들었는데,백엔드, 서버의 mvp 버전이라고 이해하게 됐다.Firestore는 Firebase에서 제공하는 클라우드 NoSQL 데이

포트폴리오에 넣을 클론 프로젝트로 부산국제영화제 홈페이지를 작업중이다. 이제 하단 부분만 남았는데, 푸터 바로 직전에 마지막으로 넣을 슬라이드로 스폰서 슬라이드가 오늘의 작업 과제. 요즘 축제 홈페이지에서 저런식으로 스폰서를 노출시키는 경우가 많은데 스폰서 로고가 딱

너무 어려운 게시판 구현하기..게시판 구현하는 걸 firestore Database로 실습했다.index 페이지 만드는 것부터가 어려웠는데...list라는 클래스를 부여한 div 태그 안에 데이터를 만드는 것부터 시작이다.import { collection, getDo