728x90 반응형 코딩부트캠프15 nextjs Open graph 추가하기 - 셀프 코딩 부트캠프 Open Graph 카카오톡에 URL을 붙여 넣기 하면 위와 같이 스크린샷과 간단한 내용이 나옵니다. 위처럼 잘 나오는 경우도 있지만 나오지 않는 경우도 있습니다. OG(Open Graph)를 세팅하지 않으면 저 정보가 나오지 않습니다. ... Open Graph 정보는 카카오톡뿐만 아니라 페이스북, 트위터 등 대부분 SNS에서 지원합니다. 링크를 보기 전에 간략한 내용을 볼 수 있기 때문에 마케팅 측면에서도 아주 중요합니다. OG 정보는 html 코드에서 head 태그 안쪽에 삽입하면 됩니다. 대표적으로 title, description, image, url이 있습니다. 테스트하는 방법은 간단합니다. 자신이 사용하는 SNS에 링크를 보내보면 됩니다. 카카오톡에 OG정보를 변경해도 동작하지 않는 경우가 .. 2022. 4. 11. URL 단축 암호 - 셀프 코딩 부트캠프 한 달 전쯤 웹서비스를 만들려고 리액트 공부를 시작했습니다. 오늘 드디어 간단한 서비스 하나를 완성했습니다. 간단하다고 생각했는데 삽질을 하다 보니 오래 걸렸네요. 요즘 머니파이프라인, 엔잡러 라는 말들을 많이 합니다. 블로그 + 이 서비스로 이제 2개가 되었습니다. 야호!! 사람들이 많이 이용하면 좋겠네요.. http://lock.pub/ LOCK.PUB Password protect links lock.pub 제가 만든건 URL 단축 사이트입니다. 그냥 단축 URL 사이트는 흔한 것 같아서 비밀 주소 사이트를 만들었습니다. 단축 주소를 만들 때 암호를 지정할 수 있습니다. 메모를 추가해서 링크에 대한 정보를 보여주거나 힌트를 제공할 수 있습니다. 시작 날짜를 지정하면 시작 날짜 전까지는 숨겨진 링크로.. 2022. 4. 8. 리액트 타입스크립트 zustand - 셀프 개발자 코딩 부트캠프 리액트에서 상태 관리를 할 때 대부분 리덕스(Redux)라는 것을 사용하는 것 같았다. 쉬운 작업도 복잡하게 되어 있는 것 같아서 심플한 것 찾아봄. zustand라는 게 좋아 보임. 아래는 github 주소. https://github.com/pmndrs/zustand import create from 'zustand' interface CounterState { count: number; increase:()=>void; decrease:()=>void; } const useStore = create(set => ({ count: 0, increase: () => set(state => ({ count: state.count + 1 })), decrease: () => set(state => ({ c.. 2022. 3. 23. 리액트 타입스크립트 css, sass, styled-components 리액트 컴포넌트를 스타일링할 때 여러 가지 방법 있다. css : html에서 기본적으로 사용하는 방법 sass : 확장된 css 로 작성하고 컴파일해서 사용 styled-components : 자바스크립트 안에 스타일 작성 개인적으로는 styled-components 이 가장 좋아 보였다. 정의한 스타일을 컴포넌트 처럼 사용 가능하다. props를 넘겨줄 수 있어서 상황에따라 마음데로 조절가능하다. 잘 쓰면 코드를 많이 줄일 수 있을듯 하다. react native 에서도 사용할 수 있다. # 공식사이트 https://styled-components.com/ # 참고 https://github.com/rebassjs/rebass https://github.com/styled-components/awes.. 2022. 3. 21. 리액트 타입스크립트 array map - 셀프 개발자 코딩 부트캠프 function App() { let names:Array = ["사과", "고구마", "오렌지"]; let nameList = names.map(name => ({name})); return ( {nameList} ); } export default App; array 를 render 부분에서 보여줄 수 있다. map 은 c# linq에 있는 select 와 비슷하다. c# 에 있는 extension method같은 기능이 typescript에 있다면 위와 같은 상황에서 편할것 같다. 귀찮아서 조사는 안해봄. https://jinibh.tistory.com/711 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; functio.. 2022. 3. 15. 리액트 타입스크립트 useRef - 셀프 개발자 코딩 부트캠프 useRef를 이용하면 DOM을 직접 참조할 수 있다. import { createRef } from "react"; function App() { let refInput = createRef(); function handleClick(e:React.MouseEvent) { refInput.current?.focus(); } return ( Click!! ); } export default App; 버튼을 클릭하면 input에 포커스 된다. import { createRef } from "react"; function App() { let refDiv = createRef(); return ( ); } export default App; div 를 참조할수도 있다. https://jinibh.tistor.. 2022. 3. 15. 이전 1 2 3 다음 728x90 반응형
