contentEditable에 placeholder 적용하기(흉내내기)

contentEditable에서 placeholder를 적용하려면..위의 코드와 같은 방식으로 작성했을때 과연 아래의 사진과 같은 결과가 나올까요?직접 해봤다면 원하는대로 적용이 되지않음을 알 수 있습니다.placeholder는 input이나 textarea 태그인 경우에만 사용할 수 있습니다.따라서 ContentEditable은 엘리먼트를 input처럼 편집할 수 있지만 placeholder 어트리뷰트는 적용할 수 없음을 알 수 있습니다. 그렇다면 placeholder를 사용할 수 있는 방법은 없는걸까요..?😭가능합니다!가상클래스를 이용한 방법으로 placeholder인것 처럼 동작할 수 있게 만들 수 있는데 방법은 아래와 같습니다.:empty : 자식, 텍스트가 없는 요소 선택:before : 의사..

• format_list_bulleted 프로젝트/개발괴발
• · 2024. 8. 6.
• textsms

프론트엔드 프로젝트 : 개발자 커뮤니티 - 시작

오늘 한 일프로젝트 주제 정하기✅ 결정 = 개발자 커뮤니티 & 챌린지 : 문서 편집기 직접 구현 (예전에 진행했던 노션 클로닝 복습)프로젝트 관련 대략적인 규칙✅ 회의는 어떻게 할까 : 김창준님의 특강 -> 애자일 방법론-> 매일 스크럼 : 15분 이내로 짧고 빠르게 종료 (절대 대충 X)-> 팀의 개발 시간 : 월~금요일 10시 ~ 19시로 정하되 매일 스크럼에서 어떤 태스크를 진행할 지 계획하고 당일 17:00 까지 마치도록 노력하기. 만약 끝마치지 못했다면 팀원이 함께 그 문제를 해결하도록 노력 🤟✅ 아토믹 디자인 사용하기9월 5일 10시까지 해야할 일 기술 스택 정해오기 -> 정당한 이유 필요(해보고 싶어서 선택했다는 안됨) 스토어는 어떤것 사용할 것인가? CSS는 어떤것을 사용할 것? 일정 정..

• format_list_bulleted 프로젝트/개발괴발
• · 2024. 8. 6.
• textsms

2023년 8월 회고 MIL

이제는 계속 반복하는 말인것 같지만 또 말하겠다.벌써 8월이 끝나다니...!😂 데브코스와 함께한 시간이 벌써 절반밖에 남지 않았다!눈코뜰새없이 바쁜 한달을 보냈는데 과연 나는 무엇을 했을까 회고해보도록 하자.8월 한달 동안 무엇을 했을까?강의Vue 강의React 기초 강의React 심화 강의강의 후기Vue 강의를 들으며 React와는 다른 매력을 가진 Vue에 매력을 느꼈고 과제를 진행하며 익숙해지는 시간을 가졌다.React 기초 강의와 심화 강의를 들으며 기존에 학습했던 React보다 더 깊이있는 공부를 할 수 있었고 (ref, custom hook 등) 요즘 많이 쓴다는 storybook도 사용해볼 수 있는 기회가 되었다.혼자서 공부했다면 많이 쓰인다는 것도 모른채 React만 주구장창 공부했을텐데..

• format_list_bulleted 회고
• · 2024. 8. 6.
• textsms

Vue로 영화 검색 페이지 만들기 회고(+ TS 사용 후기)

DemoGithub한 주 동안 무엇을 했는가?월요일, 화요일 : vue 강의 듣기수요일, 목요일, 금요일, 토요일, 일요일 : vue 강의를 들으며 영화 검색 페이지 제작 과제프로젝트 접근 순서1. 의욕만 앞선 ["일단 강의를 다 듣자!"] 결심-> 일단 강의를 먼저 듣기 시작했고 점점 조급해져오는 마음에 일단 구현 먼저 하고 필요할 때마다 강의를 보자는 생각을 함vite를 이용해 기초 세팅 먼저 하고 무대포로 일단 코드를 짜기 시작처음에 검색페이지를 만들고 하는것 까진 좋았으나......기본 요구사항에 존재하는클라이언트(브라우저)에서 API Key(7035c60c)가 노출되지 않아야 합니다! 항목은 무시한채 그대로 Network에서 고스란히 보여줘버리기!이 문제를 해결하기 위해선 서버가 필요하다는 것을..

• format_list_bulleted 프로젝트/기타 (프로젝트)
• · 2024. 8. 6.
• textsms

2023년 7월 회고 MIL

6월 회고를 작성한지 얼마 안된것 같은데 벌써 7월이 지나버렸다..시간이 정말 빠르게 가는것을 느끼고 있고 이번 회고는 이번달에 무엇을 배웠고, 지난달 내가 무엇을 하려고 했는지, 이를 어떻게 달성했는지 위주로 작성하려고 한다.7월 한달 동안 어떤 것을 배웠나?강의VanilaJS를 이용한 구현무한스크롤 UI 구현디바운스와 스로틀intersection observer고양이 사진첩 만들기투두리스트 Drag & Drop 구현CSSfloat, position, flex, grid 등...@supports, @mediaSCSSTypeScript 기초타입인터페이스, 데코레이터, 제네릭모듈Vuecouputed, watch컴포넌트 기초Vuex, Vue Router 기초강의 후기VanilaJS일단 이번 강의를 들으며 프..

• format_list_bulleted 회고
• · 2024. 8. 6.
• textsms

[23.06.27~23.07.06] 노션 클로닝 회고

이번 23.06.27~23.07.06 약 2주간 노션 클로닝 프로젝트를 진행했습니다.먼저,기본 요구사항바닐라 JS만을 이용해 노션을 클로닝화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링각 Document 우측 + 클릭시 클릭한 Document의 하위 Document로 새 Document 생성 & 편집 화면으로 이동Document Save API를 이용해 지속적으로 서버에 저장History API를 이용해 SPA 형태로 제작보너스 요구사항div와..

• format_list_bulleted 프로젝트/Vanilla JS 문서편집기
• · 2024. 8. 6.
• textsms