GRIDY

Web Frontend Developer

< 깜빡하고 포스팅 안하고 잠 >

이 글은 12시를 넘어 새벽 1시 반에 작성중인 글이다

너무 졸리지만 일단 오늘 최대한 많이 만들어 놓고 자고 싶기 때문에....

오늘 한 일은 단 한가지 밖에 없다.

새로 나온 '5주차 개인 과제'가 바로 그것이다.

기능 목록

1. 게시글
   1. 목록 가져오기
   2. 추가하기 (+이미지 업로드하기)
   3. 삭제하기
   4. 수정하기
2. 회원가입하기
3. 로그인하기
4. 파이어베이스 or S3로 배포!

페이지별 상세

1. 회원가입 페이지
   1. 이메일 형식 체크, 비밀번호 체크할 것
2. 로그인 페이지
   1. 이메일, 패스워드 미기입 시 로그인 버튼 활성화 막을 것
3. 메인 페이지(게시글 목록 페이지)
   1. 게시글 목록 노출
   2. 게시글 하나는 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성
   3. 게시글 하나를 클릭 시, 게시글 상세 페이지로 이동
4. 글 작성 페이지
   1. 레이아웃 선택 버튼
      1. 3가지 레이아웃 중 선택하도록 한다.
         • 이미지가 오른편에, 텍스트는 왼편에 위치한 레이아웃
         • 이미지가 왼편에, 텍스트는 오른편에 위치한 레이아웃
         • 텍스트가 위에, 이미지는 아래에 위치한 레이아웃
      2. 레이아웃 선택 시, 게시글 레이아웃(모양새)대로 보이도록 한다.
      3. 텍스트, 이미지 중 입력 안된 게 있다면 게시글 작성 버튼 비활성화
      4. 작성 완료 시 메인 페이지로 이동
5. 게시글 상세 페이지
   1. 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출

추가로 해보면 좋을 기능

• 메인 페이지 (게시글 목록 페이지)
  1. 무한 스크롤
  2. 좋아요 기능 : 게시글 중 좋아요버튼(분홍색 하트 버튼)을 누르면 [좋아요]를 +1한다. 다시 누르면 분홍색 하트가 회색 하트가 되고 좋아요가 -1개 된다.
• 이미지 여러장 업로드 (상세 페이지에서는 슬라이더로 이미지 넘겨가며 보도록 처리)
• 알림 기능 만들기 (+알림페이지도 추가할 것!)
• 좋아요 눌렀을 때 게시글 위로 하트 이미지가 나타났다 사라지게 해보기

오늘은 25일차이다.

간만에 집중하여 공부한 하루가 아닌가 싶다.

아침에 일어나서 내일부터 있을 과제에 대한 디자인을 어느정도 해놓았다.

그리고 리액트 프로젝트를 생성해놓고 파일 구조를 어느정도 구성해 놨는데, 이걸 그대로 사용하게 될지는 내일 과제가 나와봐야 알 거 같다.

코드는 좀 짜놓으려다가 리액트 공부를 좀 진행해야 할 거 같아서 잠시 킵했다.

그리고 그 이후 부터는 리액트 강의를 주구장창 듣다가, 5시에 사이드 프로젝트로 잠깐 얘기를 나누고 6시쯤부터 다시 리액트 강의를 듣기 시작했다.

노마드코더 리액트 마스터 클래스 4챕을 드디어 끝냈다.

내일부터 주말까지 과제 빨리 끝내놓고 5챕을 시작해야 겠다.

5챕에서는 지금까지 우리가 썻던 리덕스가 아닌 리코일을 사용한 상태관리를 알려주는데, 리코일은 어떤 느낌일지 궁금하다.

오늘은 아침에 일어나서 CS 스터디 준비를 했다.

그리고 비몽사몽 하다가 11시에 CS 스터디를 가서 내 발표를 하고 끝나자 마자

그리고 다음주에 있을 항해 심화 디자인을 했다.

그리고 대략적인 컴포넌트 파일만 만들고, 기존에 사이드 프로젝트를 조금 수정했다.

다음주 과제는 아래 주소에서 참고했다.

https://intrepidgeeks.com/tutorial/sailing-995-week-5-wil-feb-13-2022

그리고 저녁이 되어서 사이드 프로젝트에 관해서 잠깐 회의를 했다.

오늘 하루도 이렇게 끝

요즘 별로 하는게 없는거 같은거는 기분 탓이라고 믿고 내일은 열심히 공부해봐야겠다.

오늘은 아침부터 비몽사몽 이었다.

그래도 나름 이것저것 하기는 한게 사이드 프로젝트에서 맡았던 파이어베이스를 사용한 로그인, 회원가입 기능을 적용했고,

기존의 코드를 리덕스 코드에서 리덕스 툴킷 코드로 변경해보았다.

확실히 코드를 짧게 쓸 수 있으니 훨씬 편한 거 같다.

로그인, 회원가입은 적용했으나, 아직 로그인 체크 라던지 회원가입시 회원 정보를 저장하는 그런 부분은 구현되지 않았기 때문에, 이 부분도 적용해야 한다.

저녁에는 회의로 내가 짠 코드를 소개해드리고, 앞으로 어떻게 진행할지 조금 얘기했다.

그리고 내일은 CS 스터디가 있으므로 발표 내용을 조금 정리했다.

https://intrepidgeeks.com/tutorial/sailing-995-week-5-wil-feb-13-2022

위는 5기 5주차 개인 과제의 내용인데, 이걸 참고해서 다음주에 만들 디자인을 대략적으로 구성해보고 있는 중이다.

아래는 현재 구상중인 디자인이다.

로고도 진짜 이쁘게 만들어보고 싶은데,,, 그런거에는 전혀 재능도 없고 시간도 효율적으로 써야하므로 그냥 대충 폰트 박았다.

아직 로그인 페이지 디자인만 했고, 일단 자고 일어나서 천천히 구상해봐야 겠다.

오늘은 사이드 프로젝트 작업을 조금 진행해 보았다.

사이드 프로젝트 리덕스 코드에 update, delete를 추가해주었고, 어제 본 리덕스 툴킷 강의를 참고하여 리덕스 코드를 리덕스 툴킷 코드로 바꿔주었다.

< 아래 이미지는 기존과 달라진거 없음 >

리덕스 툴킷 강의를 듣고 나서 정말 툴킷이 완전 편하다는 것을 깨달았다.

항상 리덕스 코드 작성하면 createStore에 줄이 깔리는데, 왜 권장하지 않는지 알 것 같다.

기존에 해야하는 복잡한 리덕스의 코드가 아주 짧게 정리가 된다. (필요한 코드만 작성하면 되는 느낌)

내가 쓴 방법은 툴킷 중에서 createSlice를 쓴 방식인데, 기존에 리덕스로 작성할 때에는 항상 함수형 프로그래밍 방식처럼

값을 새로 만들어 반환해줘야 하는데, 툴킷을 쓰면 그냥 기존 값을 바꿔줘도 된다....

이거는 나중에 따로 정리해봐야 할거 같다.

이 외에는 자잘하게 검색한게 다라서 큰 거는 한거 없다.

오늘은 21일차이다.

3주를 마무리하는 겸에 오늘은 redux, firebase 개념을 조금 정리하는 시간을 가졌다.

이번 한주를 되돌아보며

이번주에는 입문주차가 끝나고 숙련주차가 시작된 주이다.

1주일동안 시간이 많이 있었는데, 집중을 잘 하지 못했다.

항해 강의를 5주차까지 완강하고, 노마드코더 React Hooks 강의와 Redux 101 강의를 들었다.

근데 강의라는게 그렇지만 듣다가 졸리고, 듣다가 루즈해져서 사이사이 띄엄띄엄 쉬는 시간이 많았다.

그리고 리액트 분들이랑 조금 친해지면서 떠들기도 하다 보니 시간이 조금씩 나가는 것도 있었다.

프론트분과 함께 작업하는 프로젝트는 나름 꾸준히 진도가 나가고 있는 상황이고, 내일 회의하면서 어떻게 진행할지 얘기해볼 것 같다.

DOM

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.

서버리스

서버리스는 클라우드 컴퓨팅의 모델 중 하나로 사용자가 서버를 직접 관리할 필요가 없는 모델을 의미합니다.
서드파티의 서비스 및 기능 사용과 관련이 있으며, 관리대상 서버를 포함하지 않은 응용 프로그램의 운용을 의미합니다.

서버의 소프트웨어적인 부분은 사용자가 직접 관리를 해야 합니다. 서버에 깔린 운영체제 등을 업데이트하고, 데이터를 백업하고, 보안에도 신경 써야 하는 등 생각보다 귀찮은 일이 많습니다.

서버리스는 동적으로 서버의 자원을 할당합니다.

즉 사용자가 없다면 자원을 할당하지 않고 대기하다가 요청이 들어오면 그 때 자원을 할당해서 요청을 처리하고 다시 대기 상태로 들어가게 됩니다. 자원을 효율적으로 사용할 수 있는 것입니다.

비용 또한 대기상태를 제외한 실제 사용 자원에 대해서만 청구가 되기 때문에 굉장히 경제적입니다.

참고자료

https://velog.io/@coco1606/DOM-%EA%B3%BC-%EC%84%9C%EB%B2%84%EB%A6%AC%EC%8A%A4