Web Dev/5. Projects
-
[toy blog service] Next.js의 Pages 이해하기(간단한 Typescript설정)Web Dev/5. Projects 2021. 4. 11. 22:05
Project를 시작하며... - 작업한 화면: 아래는 이 화면을 구성하면서 다룬 내용들이다. 오늘 만든 화면 - 필요한 routes 와 pages - `/index.js` -> `/`: main - `/:username/index.js` -> `/:username`: 개인 블로그의 메인(Read all) - `/:username/id`: 각 포스팅 읽기(Read one) - `/:username/write`: 블로그 글 create page - `/:username/write?id=articleId`: 블로그 글 수정페이지(update) 아래에 내가 화면을 구성하면서 파악한 내용들을 정리했다. 1. TypeScript 설정을 하자: 공식 독스 - 후에 더 상세하게 살펴보기로 하고 여기서는 일단 설정만을..
-
[toy blog service] Next.js 기반 서비스 기능 도출 과정Web Dev/5. Projects 2021. 4. 11. 21:21
프로젝트를 시작하며 velog라는 멋있는 서비스가 있다. 여기서 프로젝트 구조도 볼 수 있어서, 이를 참고해서 Next.js 를 통해서 이와 비슷한 서비스를 직접 구현해보려고 한다. 아래에는 각 기능들을 캡쳐하면서 파악한 부분이다. Velog 서비스를 기준으로 분석한 기능 - 공통 화면(후순위) - velog는 home화면이 있다. 이렇게 여러사람의 글을 볼 수 있는 화면이 있다. - 우측 상단에서 개인용 설정을 볼 수 있다. - 개인 화면(CRUD) - 내 벨로그 안에서 볼 수 있는 내용들은 아래와 같다. - (READ ALL) 우선 개인 blog 메인 화면: 글, 시리즈, 소개 화면으로 구성되어있고 검색어 기능이 있다. - (CREATE) 새 글 작성을 선택하는 경우: Markdown 형태로 작성하고..
-
[다락재 쉼터] 1차 개발 마무리 후기Web Dev/5. Projects 2021. 4. 8. 21:06
이번주에 이 프로젝트를 많이 진행했다. 이 전에도 여러번 시도했다가 몇 번을 엎었는데, 이번에는 완벽하진 않아도 프로젝트 초기 세팅 부터 markup, css 부터 도메인 설정까지 마무리 했다는 것이 뿌듯하다. 프로젝트를 하더라도 전반적인 과정을 모두 경험하는 과정은 흔치 않았는데 좋은 경험이 되었다. 특히 도메인을 설정할 일이 한번도 없었는데, 이번기회에 경험해서 내가 할 수 있는 일이라는 것을 알게 된 점도 뿌듯하다. 개발은 실제로 해보기 전에는 그것보다 더 어렵게 여겨지거나, 더 쉽게 여겨지는 것 같다. 어떤 문제를 해결할때 어느정도 난이도일지 감을 잡는것이 아직 가장 어려운 것 같다. 마크업 위주의 페이지인데도, 만들면서 배운점이 많은 것을 보니 어떠한 작은 문제라도 해결하다보면 보이던 것 보다 ..
-
[다락재 쉼터] Netlify에 무료 도메인(freenom) 붙이기Web Dev/5. Projects 2021. 4. 8. 15:41
- 도메인이란? 아직 프로젝트가 테스트 단계라 돈을 내는 도메인이 필요한 상태가 아니다. 그래서 무료 도메인을 발급받아서 사용하려고 하는데, 이렇게 발급 받은 도메인은 샀다기 보다는 단기 임대의 개념이다. 처음에 이렇게 발급받은 도메인도 유료로 구매한 도메인들과 같은 효력을 가지는지 의문이 있었는데, 국제적으로 도메인은 국제인터넷주소 관리기구(ICANN)에서 여기서 하위 기관에 권한을 위임하고, 거기서또 하위기관에 권한을 주는 구조로 효력은 동일하다고 한다. 그래서나는 freenom이라는 곳에서 임시로 도메인을 발급받아서 사용하고자 한다 - 무료 도메인 대여하기 이를위해서 참고한 자료는 [나만의 인터넷 주소 도메인을 만들어보자! 무료 도메인 생성하기]라는 글이다. 다락재 쉼터를 로마자로 표현하면 dara..
-
[다락재쉼터] SEO 와 react-helment(다락재 쉼터 사이트에 SEO 적용하기)Web Dev/5. Projects 2021. 4. 7. 21:30
SEO란? - SEO자체에 대해서 이 영상을 보고 개념을 익혔다. SEO란 구글과 같은 서치 엔진이 내 페이지를 찾을 수 있도록 최적화 하는 작업을 말한다. 구글을 예시로 들자면 아래 사진을 보자 다락재 쉼터라고 검색했을때, 위에 지도가 나오고 밑에 검색된 글들이 나온다. 장소라면 지도가 보이고 경우에 따라 돈을 내고 등록하는 광고나, people also ask 와 같은 연관 질문등에대해서도 보여준다. 우리가 SEO를 할때 중요한 것은 돈을 내고 광고를 걸어야하는 AD 부분에 올라가는 것이 아니라 아래 부분에서 자리를 차지하는 것이다. 위의 3개의 글이 70%의 트래픽을 가져가고 나머지는 잘보지 않는다고 한다. 여기에 올라가려면 구글이 잘 찾을 수 있도록 웹사이트를 만들어야한다. 그렇다면 SEO를 위해..
-
[다락재쉼터] background-image cover와 contain의 차이를 간단하게 짚고 넘어가자Web Dev/5. Projects 2021. 4. 7. 16:07
Background와 관련된 내용은 항상 가물가물한 편인데 아래의 내용은 메모를 해둬야할 것 같아서 정리한다. stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion CSS background image to fit width, height should auto-scale in proportion I have body { background: url(images/background.svg); } The desired effect is that this background image will have width equal to that of the page, heigh..
-
[다락재쉼터] react-responsive 적용하기Web Dev/5. Projects 2021. 4. 6. 23:38
지도관련해서 이렇게 많은 문제가 있을줄은 몰랐는데, 지도는 fixed size라 모바일사이즈에서는 더 작은 사이즈의 지도를 보여줘야한다. 이를 쉽게 해결할 수 있는 도구가 www.npmjs.com/package/react-responsive 이다. react-responsive Media queries in react for responsive design www.npmjs.com 사용법은 굉장히 간단하다. import { useMediaQuery } from "react-responsive"; const VisitPage = () => { // 작은 지도를 보여줘야하는 breakpoint const isSmallScreen = useMediaQuery({ query: "(max-width: 768px)..
-
[다락재쉼터] Gatsby with ReduxWeb Dev/5. Projects 2021. 4. 6. 23:01
Redux를 굳이 안쓰고 contextAPI로 해결해도 될것 같으나, 학습의 취지로 Redux를 한번 사용해보고자 한다. 회사에서 여러번 엎긴했지만 세팅을 맡아서 한적은 있어서 가벼운 마음으로 튜토리얼로 이번엔 공부를 하고, 추후에 심화 학습을 하려고 한다. 아래는 Redux 공식문서이다. redux.js.org/tutorials/essentials/part-1-overview-concepts Redux Essentials, Part 1: Redux Overview and Concepts | Redux The official Essentials tutorial for Redux: learn how to use Redux, the right way redux.js.org 상태관리가 필요했던 이유 지도처리와..