Web Dev
-
[다락재쉼터] 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 상태관리가 필요했던 이유 지도처리와..
-
[다락재 쉼터] React에서 Kakao Map 사용하기 + document.write문제 해결하기Web Dev/5. Projects 2021. 4. 6. 22:08
map.kakao.com/?urlX=848845&urlY=768527&urlLevel=3&map_type=TYPE_MAP&map_hybrid=false 카카오맵 당신을 좋은 곳으로 안내 할 지도 map.kakao.com 이 위치의 지도를 붙여넣어야하는데, 위의 화면에서 소스 생성을 하면 아래와 같은 코드를 준다. 문제는 내가 Gatsby/React 를 사용하고 있어서 그냥 집어 넣을수가 없다는 것이다. useEffect를 이용하는 방식: 한가지 찾은방식은 useEffect를 사용하는 방식인데, 알수없는 이유로 3. 실행 스크립트 부분에서 daum 부분이 없다고떳다. 문제는 일반적인 index.html에서 해당 코드를 붙여넣고 서버를 띄우면 보여주는데, react에서는 동작을 하질 않아 뭐가 문제인지 파악..
-
[다락재 쉼터] 폰트 설정하기Web Dev/5. Projects 2021. 4. 6. 11:58
폰트 설정을 해야하는데 이제까지 했갈렸던 것을 간단하게 정리하고자 한다. 구글폰트와 웹폰트 최적화 라는 글을 읽고 저한테 필요한 내용을 간략하게 정리했습니다. 이 블로그의 글이 좋으니까 방문해서 읽어보세요! font-family와 @font-face의 차이 font-family의 경우 제일 초기에 css를 배울때 사용한 방식으로 원하는 폰트를 지정할 수는 있는데, 단순히 font-family만 설정하면 사용자의 컴퓨터에 폰트가 없으면 보이지 않는 문제가 있다. 이런 문제를 해결하기 위해서 웹폰트라는 개념이 등장했는데, 이는 @font-face를 사용하는 방식이다. @font-face { font-family: 'Noto Sans KR'; src: url('./fonts/noto-sans-kr.ttf') ..
-
[다락재 쉼터] Gatsby프로젝트에 CSS grid 적용하기Web Dev/5. Projects 2021. 4. 5. 23:43
이제까지 만들던것을 전면 리뉴얼하기로하고 다 엎어버렸다. Responsive하게 최대한 가기 위해서 고민을 많이 하고 있다. 우선 오늘 결과물은 아래와 같다. 1. 최대 화면인 경우 2. medium size 3. Smallest size 위와 같은 레이아웃을 잡기 위해서 나는 grid시스템을 적용했다. 다소간의 엄청난 뻘짓도 있었고, 아직 완벽하게 이해한 것은 아니지만, grid를 사용하면 확실하게 responsive한 레이아웃을 잡는 것이 쉬워지는것을 경험했다. 적용 방법 우선 Header에 grid시스템을 적용하기 위해 아래와 같이 선언했다. const HeaderStyle = styled.header` grid-column: 2 / -2; border-bottom: 1px solid black; ..
-
Gatsby의 플러그인 시스템을 제대로 이해하고, 내 플러그인 만들어보기Web Dev/5. Projects 2021. 4. 5. 02:15
Gatsby를 좀 만만하게 보고 시작했었따.... 아주 매콤한맛을 보는 중이다. Markdown을 렌더링해서 나만의 블로그를 만들고 앞으로 굳이 서버가 필요없는 서비스는 Gatsby로 필요한건 Next.js로 해야지~ 룰루~ 하고생각했는데 지금 아주 매콤한맛을 보고 있다. 다시 초심으로 돌아가서 Gatsby의 플러그인 시스템을 자세히 살펴보고 Markdown parsing 하는 플러그인이 내 성에 안차서 하나 만들려고 한다. What is a Plugin? Gatsby에서는 Plugin이라는 걸 사용하는데, 이건 Gatsby APIs를 적용한 Node.js 패키지이다. 특히, 나는 Markdown파일을 변환할때 gatsby-transformer-remark란걸 사용했는데, 대체 동작원리가 이해가 안됬다...