[TIL] WEEK5🚀

프로그래머스 데브코스 프론드엔드 21일차

go notion go notion! 🏊‍♀️

노션 클로닝을 시작하고 다음 주를 맞이했다. 시작하고라고 쓰고 시작 준비중... 이라고 읽는다. 🤦‍♀️
우선 to do app과 자동 완성 편집기를 완성하고 밀린 TIL, 과제 PR등을 다 쓰고 오늘에야 제대로 책상에 앉았다!
요구사항과 API를 확인하고 나름의 설계를 한뒤, 코드를 짜려고 했는데 막막했다. 💦

아날로그 + 노가다 매니아 라 그런지 아직 노트와 펜이 편하다... (하지만 테블릿은 포기못해⭐)

우선 오늘 하려고 했던 일은!

1️⃣ 전체적인 구조 짜기
2️⃣ dummy data로 로직 확인하기
3️⃣ 자동완성 분석하고 + 새롭게 적용시켜보기

전체적인 구조를 짜다 우선 상위 컴포넌트에서 innerHTML를 사용하게 된다면, 하위 자식요소(appendChild)들이 모두 무시된다는 것을 몰라서, 왜 랜더링이 안되는지에 대해 오랜 시간 방황했다... (https://oniondev.tistory.com/m/17)
또, 서버에서 받은 데이터를 계층적으로 랜더링 해야하기 때문에 계층을 잘 나타내도록 구현해야하는데, html를 써야할 지 c 프로그래밍 할 때 쓰던 tab 개수를 조절해야하는지 혼란이 와서 이것 역시 방황했다...
아직 프론트엔드 베베라 그런지 어디까지 DUMMY_DATA로 써야하는지, 어디에서 서버를 부르고 state에는 어떤 것을 관리해야하는지 점점 무섭다... 두렵다...

💡 그래서 우선 실습 강의를 코드 위주 말고, 내용 위주로 다시 듣고 -> 완벽한 이해로 구현해보기로!!! 코드가 술술 써내려질때 까지 안녕~!

도망가는거 아니예요... 코딩하러 갈꺼라구욧... 💦💦💦💦💦

프로그래머스 데브코스 프론트엔드 22일차

Notion Project 🥕

오늘은 우선 1) PostsPage, PostsList를 만들고, 2) Editor, EditorPage 는 할 수 있으면 만들어보쟈 🌞

PostsPage, PostsList 만들기

(처음부터 App.js로 만들쟈 ~!)

• ✔ DUMMY_DATA로 데이터 랜더링
• ✔ PostsPage로 옮기기
• ✔ api에서 불러오기
• ✔ 버튼 구현
• ✔ 추가 기능 구현
• ✔ setState로 갱신하기

코드가 안 짜질땐 다같이 무야호를 외쳐요 ~! 무야호~!

오씌... 걍 미쳐버렸는데? 이걸 다했다고? 😶 그치 쉬이 될리가 없지…

프로그래머스 데브코스 프론트엔드 23일차

Notion Project 🥕🥕

어제 겨우 겨우 api에 맞춰 새로운 post를 생성하는 기능을 구현했다. 생각보다 추가될 post의 부모 id 찾는것, 그걸 현재 state로 넘겨주는것에서 오래 걸렸다 😭 (삭제는 기본 구현 사항을 다 지킨 후에 할 예정!)
오늘 해야하는 일 -> editor 기능 구현 editor, list 데이터 연동 (history api 로 spa 구현 는 할 수 있으면!!!!!)

Editor, EditorPage 만들기

(생각해보니까 자동완성 편집기와 다르게, 서로 연결 안되어있는걸? 연동하는 부분에 대해 생각해보아야겠다리~)

• ✔ Editor.js 생성
• ✔ EditorPage.js 생성
• ✔ key up 이벤트 추가
• ✔ 이벤트 디바운스
• ✔ id, content, title 어떻게 연결할 것 인지에 대한 고민
• ✔ 서버 및 로컬 스토리지와 연결
• ✔ document 트리에 있는 리스트 눌렀을 때 editor에서 가져와 뿌리기

(수정 2021-09-01-18:47)

프로그래머스 데브코스 프론트엔드 24일차

Notion Project 🥕🥕🥕

드디어 드디어 기본 요구사항을 다 만들었다!!!! 중간에 매우매우 많은 삽질이 있었지만, 그것 또한 개발의 일부라 생각한다... 오늘은 자잘한 버그 잡기 + 할 수 있는 보너스 요구사항 구현하기 + UI 개선하기 (css 적용) 을 목표로!

자잘한 버그 잡기

1️⃣ ~~페이지 수정 후 다른 페이지를 조회했을 때 이전 content가 고대로 넘어오는 현상이 있어요!~~
 - textarea의 value 값으로 수정
2️⃣ PostsPage, EditPage 위치가 왔다갔다 (상하가 바뀌어요 😂)
3️⃣ ~~실시간 editing 또는 fetch 후 반영! (수정 post에 대해서)~~
 - App.js에서 의존성을 고려해 함수를 호출했어요!

보너스 요구사항 구현하기

• ✔ editPage에 옆 또한 아래에 해당 post의 자식 post들의 링크넣기!
• ✔ textarea 말고, div로 바꿔서 마크다운 문법 치환해보기
• ✔ editor 내에 다른 post의 title이 있다면 편집 페이지로 이동하기!
• ✔ 삭제!

UI 개선하기

css를 해야한다이거죠? 예쁘게 만들어보고 싶다! 😘

프로그래머스 데브코스 프론트엔드 25일차

Notion Project 🥕🥕🥕🥕

기본 기능 + 삭제 기능 + 수정 정보 실시간 업데이트 + 깃허브 링크까지 수준으로 기능을 완성했다.
오늘은 제출일이고 사정장 css를 먼저 작업하고 제출 후 나머지 기능을 완성해봐야겠다!

MainPage

• 간단한 소개 페이지

PostsPage

• 제목 + 페이지 구조 보여주기

EditPage

• input과 textarea

렌더링?

• 가장 상위 div에서 flex를 이용해 (좌) 리스트 (우) 에디터가 되어야하는데, 리스트의 상태가 변화함에 따라 렌더링을 다시 하기 때문에 순서가 뒤죽박죽된다. -> 최상위 div에 위치가 고정된 하위 div를 만들고 그 안에 필요한 컴포넌트를 렌더링하는 방법으로 구현!

결과

짠! 일단 기본 요구사항은 다 만족시켰고 CSS가 되려 로직짜는것보다 어렵고 두려웠는데 CSS 공부 경험없는 JS가 CSS를 도와줘서 해결!!! (CSS은 어려워…)