Journal

TIL - 2022.02.08 화요일

오늘 배운 것 1. Firebase - Firestore db 삭제 기능 구현 Firebase db 삭제 기능을 구현하기 위해 내게 필요한 것은 총 두가지였다. - 1. 해당 문서의 id를 뽑아오는 기능 - 2. 해당 id를 매개로 문서를 삭제하는 기능 Firebase 공식 문서 정말정말 불친절하다.. 그래도 여러 선지자들의 인도를 잘 짜맞춰서 기능 구현에 성공했다. 첫 번째, 해당 문서의 id를 뽑아온다. useEffect(() => { const fetchWishBoard = async () => { const wishBoard = collection(getFirestore(firebaseApp), "wishBoard"); const result = await getDocs(wishBoard); //..

TIL - 2022.02.07 월요일

오늘 배운 것 1. progreSQL 으로 API 만들기 실습 (typeorm 사용) typeorm을 이용해서 progreSQL API 만드는 실습을 했다. 지금까지 계속 써왔던 graphQL API를 직접 재현해보는 작업을 했다. 백엔드는 처음이라 그런지 코드를 치면서도 이게 뭔지 감이 안와서 힘들었다. 온통 어두운 골목에서 간신히 벽 더듬으며 걷는 느낌이라고 해야하나.. 하지만 이것도 익숙함의 문제이겠거니 싶다. 프론트엔드 코드야 접해온 기간이 길다보니 금방 적응했지만, 백엔드 코드는 낯설다보니 더 버겁게 느껴지는 듯. 많이 써봐야 익숙해지겠거니 생각하며 나름 열심히 뚜닥거려봤다. 그래도 오늘 CRUD API를 각각 1번 이상씩 구현하는 것에 성공했다. 작동하는 것도 확인했다. 소소한 성취. 2. d..

보건교사 안은영 - 정세랑

- 주의 - 보건교사 안은영에 대한 직접적인 스포일러는 최대한 거른다고 걸렀다. 하지만 그럼에도 불구하고 간접적인 스포일러가 있을 수 있음. 스포일러에 예민하다면 주의. (소설/드라마 둘 다) 사실 난 새로운 한국 픽션을 읽은 지 정말 오래되었다. 보건교사 안은영도 계속 관심이 많았던 소설인데, 한국 소설은 늘 시작만 하고 완독에 실패했던 아픈 기억 탓에 손이 안 갔다. 그러다가 2020년에 넷플릭스 오리지널로 보.교.안 드라마가 제작되었다. https://youtu.be/wdKX_rhiAEU 솔직히 말하자면 드라마 자체는 기대 이하였다. 예고편을 보고 너무 큰 기대를 품었기 때문일까? 전체적인 비주얼과 캐릭터 하나하나는 정말 매력적이었지만, 서사 전개가 급박한데다 설정에 대한 설명이 충분하지 않아서 전..

TIL - 2022.02.04 금요일

오늘 배운 것 1. 백엔드-프론트엔드 Architecture 오늘은 브라우저와 프론트엔드, 백엔드, DB가 연결되어있는 구조를 배웠다. 이러한 구조를 Architecture 라고 한다. 개발이란 기본적으로 협업이기 때문에, 서비스를 구동하기 위해 각 서버들이 어떤 방식으로 연결되어있는지 기본적인 구조는 이해하고 있어야 한다. 특히나 서버 사이드 렌더링(SSR) 방식을 사용하거나 모바일 앱 등을 개발하는 경우, 프론트엔드 개발자에게도 서버에 대한 충분한 이해가 필요하다. 프론트엔드, 백엔드, DB(데이터베이스)는 각각의 서버 프로그램이 설치되어 돌아가고 있는 '서버 컴퓨터'이며, '서버 컴퓨터'는 보통 컴퓨터를 생략하고 '서버'라고 부른다. 1. 브라우저가 프론트엔드 서버에 데이터 요청 2. 프론트엔드 서..

TIL - 2022.02.03 목요일

오늘 배운 것 1. 넷플릭스 리뷰 커뮤니티 - 댓글 수정 및 댓글 무한스크롤 기능 구현 댓글 목록 컴포넌트에서 각각의 댓글 Item들을 별도의 컴포넌트로 분리한 뒤, 수정 기능을 구현했다. react-infinite-slider를 이용해서 무한스크롤 기능도 구현 완료했다. 중간에 이유를 알 수 없는 오류가 자꾸 발생해서 고생했는데, 전부 오타 혹은 함수명 지정을 잘못한데에서 오는 에러였다. fetchBoardComments를 fetchBoards로 쓴다던가, page를 pages로 쓴다던가.. 2. 넷플릭스 리뷰 커뮤니티 - 메인 랜딩페이지 제작 컨텐츠를 다루는 서비스는 컨텐츠 외적인 요소가 최대한 간결해야 한다고 생각한다. 랜딩 페이지를 어떻게 만들까 한참 고민하다가, 영화라는 이미지를 강조하기 위해 ..

TIL - 2022.01.28 금요일

오늘 배운 것 - 오늘은 react-infinite-scroller 를 이용하여 무한 스크롤을 구현하는 방법을 배웠다. 게시판 목록 api를 불러와서 무한 스크롤 형태의 게시판 목록 만드는 데에도 성공했다. 중간에 오타 때문에 난 에러를 잡느라 시간을 한참 소비했지만 결국은 원인을 찾아냈다. 다행이다. page를 pages라고 치는 바람에 생긴 문제였음.. 하하 - 무한 스크롤에 이용하기 위해 스프레드 연산자도 배웠다. 현재 페이지에 이미 뿌려져있는 댓글의 배열과 새로 불러오는 댓글의 배열을 합치기 위해 사용했다. 스프레드 연산자를 알고 나니 이미 많은 곳에서 이미 사용되고 있다는 사실이 눈에 보인다. slick의 세팅값을 전달하는데에도 스프레드 연산자가 사용되고 있다. - 배너에 쓰는 slick의 아이..

TIL - 2022.01.27 목요일

오늘 배운 것 자유게시판에 페이지네이션을 만들어서 넣었다. 이것저것 고려하고 신경쓸 게 많아서 시간이 예상보다 훨씬 더 걸렸다. 완성된 모습이 아주 마음에 들지는 않지만, 기능을 제대로 구현했다는 것 만으로도 성공적인 첫 시도라고 생각한다. 메모해뒀던 페이지네이션 만드는 프로세스를 여기에도 옮겨둔다. (내가 보려고 해둔 메모라 나만 알아볼 수 있음 주의) 1. map을 이용해서 fetchBoards 한 데이터를 뿌려준다. 2. 한 번에 10개의 페이지를 노출시킨다고 할 때, 각각의 페이지는 {시작 페이지 + index }페이지가 되며, 시작페이지는 [1, 11, 21, 31 .. ]의 등차수열이다. 3. 시작 페이지에 해당하는 state를 만들고, 해당 state를 활용해서 fetchBoards의 var..

TIL - 2022.01.26 수요일

오늘 배운 것 오늘은 리액트의 기본 레이아웃을 어떻게 짤 수 있는지 배웠다. 모든 페이지에서 제일 처음 공통으로 렌더링되는 파일인 _app.tsx 에 따로 만든 Layout 컴포넌트와 글로벌 스타일 컴포넌트를 삽입한다. 그리고 레이아웃 내부의 바디 영역에 props.children을 이용해 각각의 페이지 컴포넌트들이 로드되게 한다. 이렇게 하면 LayoutHeader, LayoutBanner, LayoutNavigation 은 모든 페이지에서 공통으로 보인다. 그리고 그 밑의 Layout Body 영역에 게시판의 목록, 글쓰기, 수정 페이지 등이 필요에 따라 렌더링된다. 유지보수하고 관리하기 정말 편리한 구조다. 위의 내용을 활용해서 작업중이던 자유게시판의 기본 레이아웃 구조를 만들었다. 큰 틀을 먼저 ..

TIL - 2022.01.25 화요일

오늘 배운 것 오늘의 제일 큰 성과! 유튜브 동영상을 리액트에 쉽게 넣을 수 있도록 도와주는 React-player를 반응형으로 코딩해서 자유게시판에 넣었다. 알고보니 간단한데, 스스로는 생각해내지 못했을 것 같은 기발한 방법이라 무릎을 탁 쳤다. Position이랑 padding을 활용하면 된다. 역시 세상에는 고수가 많구나. 그 방법을 내가 이해한대로 구체적으로 적어보자면.. 우선 React-player를 감싸고 있는 div에 relative를 주고 react-player에 absolute를 줘서 부모 div의 height 값을 제로로 만든다. 그리고 padding-bottom 혹은 top에 원하는 비율을 퍼센테이지로 환산해서 입력하면 일정한 비율로 유튜브 플레이어가 들어간다. 앱솔루트의 새로운 활용..

TIL - 2022.01.25 월요일

오늘 배운 것 오늘은 코드 정리하는데에 많은 시간을 썼다. 하나의 페이지 컴포넌트 안에 덩어리째 묶어두었던 [ 게시글 보기 / 댓글 입력 / 댓글 보기 ] 를 세 개의 컴포넌트로 쪼개서 보기 편하게 만들었고, 타입스크립트로 마이그레이션하면서 미처 다 지정해주지 못한 요소들의 타입을 정리해주었다. 근데 워낙 코드가 섞여있어서 전부 끝내지는 못했음. 일단 상세페이지만 완료했다. 내일 코드리뷰라 코드를 공유할만한게 뭐가 있나 하다가, 그동안 생각만 하고 작업은 안했던 css 수정 작업을 진행했다. 넷플릭스 리뷰 게시판을 테마로 잡았다. 촉박하게 한 것 치고는 그럭저럭 마음에 들게 나왔다. 일단 내일 코드리뷰를 끝내고 차근차근 디테일을 손보자.. 작성자 부분에 들어간 linear-gradient 에도 트랜지션을..