Programming11 React - ref, forwardRef 사용해 값 전달하기 ref React 에서 ref prop은 HTML Element에 직접 접근하기 위해 사용됩니다. 예를 들어, 아래 컴포넌트에서는 useRef 훅으로 생성한 inputRef 를 엘리먼트의 ref prop으로 넘기고 있습니다. 이렇게 해주면 inputRef 객체에 접근해서 current속성에 엘리먼트에 레퍼런스가 할당되고 이를 통해 handleFocus 이벤트 핸들러에서 엘리먼트의 focus 함수를 호출할 수 있습니다. const Form = () => { const inputRef = useRef(null) const handleFocus = () => { inputRef.current.focus() } return ( 인풋 포커스 ) } 자식 컴포넌트에 접근하기 그렇다면 부모컴포넌트에서 자식컴포넌트 내.. 2023. 2. 7. 이것만 알고가자 피그마 (feat. 개발자) 피그마(Figma)는? 클라우드 기반으로 웹 브라우저로 동작하는 UI 디자인 툴 피그마는 웹 브라우저 기반이기때문에 작업 환경에 대한 걱정 없이 사용할수 있습니다. 다시 말하자면 설치할 필요가 없고 운영체제와 상관 없이 사용할 수 있다는 장점이 있습니다. 또한 피그마는 디자인이 클라우드에 있고 고유한 URL 이 존재하기 때문에 개발자가 항상 최신 버전의 디자인을 빠르게 확인 할 수 있고(사실 개발자 뿐만 아니라 사용하는 사용자 모두) 내장된 여러가지 기능을 통해 디자이너와 개발자 사이에 커뮤니케이션을 원할하게 해줍니다. The design lives in the cloud and has a unique URL, so it serves as the source of truth for the entire t.. 2022. 10. 3. 이름 정의 규칙 (Naming Convention) 1. CamelCase 1-1. UpperCamelCase 항상 식별자의 첫번째 문자를 대문자로 표기 해야하며, 만약 여러 단어가 포함되어 있는 경우, 각 단어를 구분짓기 위해 마찬가지로 대문자로 표기한다. 규칙자체 이름에서 보여지듯 식별자의 첫단어는 대문자(U)로 지정되어 있고, 그 뒤에 Camel, Case 같이 서로 상이한 단어들을 구분짓기 위해 각 단어의 시작을 대문자로 표기한다. 나머지 문자는 모두 소문자로 표기한다. //예시 UserName BackgroundColor 1-2. lowerCamelCase 항상 식별자의 첫번째 문자는 소문자로 표기해야 하며, 나머지 규칙은 UpperCamelCase 와 동일하다. 규칙자체 이름에서 보여지듯 식별자의 첫 단어를 소문자(l)f로 지정하였고, 나머지 .. 2022. 5. 31. Github 블로그에 Custom도메인 연결하기 *아래글은 Github 블로그 운영당시에 작성한 글입니다. Hexo를 이용해 github 블로그를 만들고 SEO를 적용시켜보기도 하고 댓글 시스템도 연결하고 스타일도 조금씩 건들여보고 하다보니 결국에 나만의 도메인을 만들어서 연결해 보고 싶었다. 그래서 여러가지를 알아보다보니 Github 자체에서 Custom Domain을 간편하게 연결할수 있도록 해주고 있었다. 기본적으로 Github를 통해서 정적페이지를 호스팅 하게되면 기본도메인이 주어는데 아래와 같은 형식으로 생성됩니다. USERNAME.github.io 그래서 저는 mishka86.github.io 로 설정되었습니다. 원하는 도메인을 연결하려면 원하시는 도메인 주소를 구입하신 후에 도메인 연결을 하시면 됩니다. 저는 mishka.kr 도메인을 h.. 2021. 8. 26. Hexo 포스팅 스타일 설정하기 hexo를 통해 포스팅을 하다보니 테마커스텀에 대한 욕구가 스멀스멀 솟아올랐다. ㅎㅎㅎ;; 메인 이미지도 그리고 아이콘이나 위젯들의 위치도 이곳 저곳 옮겨보기도 하면서 나름 나만의 스타일로 하나씩 바꿔나가는 재미가 있었다. 아래 내용들은 현재 제가 사용하고 있는 icarus 테마를 기준으로 작성한것입니다. 다른 테마에서는 다른 방법이 있을 수 있습니다. 그렇게 블로그를 조금씩 꾸미고 여러가지 포스팅들도 올리고 하다가 한 가지 의문이 생겼다. 바로 포스트 리스트에서 사용하는 위젯들을 _config.yml 에서 설정으로 잡아 주었는데 포스트 상세페이지에서도 똑같이 노출이 되다보니 포스트 본문의 가로 넓이가 너무 적게 보인다는 점이었다. 그래서 _config.yml에 있는 설정들을 하나씩 뜯어보고 해당 기능이.. 2021. 8. 26. Hexo에 Disqus를 사용하여 댓글 기능 세팅하기 오늘은 블로그의 세팅중 한가지인 댓글 기능을 세팅하는 방법에 대해 포스팅해보겠습니다. 사실 hexo 테마들의 대부분은 여러 댓글 시스템들을 간편하게 세팅 할 수 있도록 되어있습니다. 그 중에 디스커스(Disqus)를 사용하여 댓글 기능을 세팅해보겠습니다. 디스커스(Disqus)란? 디스커스는 소셜 댓글 서비스의 하나입니다. 소셜 댓글 서비스란 소셜미디어(SNS)를 활용한 댓글 시스템으로 페이스북,트위터 와 같은 SNS와 연동해서 댓글을 달 수 있게 만들어 주는 서비스입니다. 소셜 댓글 서비스를 활용하여 댓글을 달면 동시에 해당 댓글이 자신이 연동한 SNS에도 발행이 됩니다. 별도의 댓글시스템을 구현할 필요없이 디스커스에서 제공하는 위젯을 설치함으로 사용 할 수 있는 것이 장점입니다. 설치순서 Disqus.. 2021. 8. 26. Hexo 배포 원리에 따른 백업(backup) 방법 Hexo를 이용해서 블로그를 만들고 관리 하다보니 문제점을 하나 발견했다. 바로 백업에 관한 문제인데 Hexo 블로그는 Github에 repository를 통해 구성되어 있으니 다른 곳에서 작업할때 그것을 clone해서 수정하면 된다고 생각했다. 그러나 다른 곳에서 clone을 해보고는 문제가 있음을 알 수 있었다. 라이브되는 repository에 올라가는건 public 폴더의 내용이라 실제로 작업한 것은 repo에 push 되지 않고 로컬에만 저장되어있는 것이다. 그래서 해결책으로 별도의 백업 repository 하나를 생성하여 별도로 백업을 하기로 했는데 이 방법도 문제가 있었다. Hexo의 테마가 별도의 git을 가지고 있어서 하나의 백업 repository만으로는 완벽하게 백업 관리가 어려웠다 그.. 2021. 8. 26. Hexo 블로그에 테마 적용하기 - icarus테마 hexo를 이용해서 github블로그를 만들었습니다. 이제는 나만의 색깔을 입혀볼 테마를 적용해 보겠습니다. 블로그 세팅 방법은 지난 블로그를 참고하시면 됩니다. hexo블로그에 테마를 입히는 방법은 사실 아주 간단 합니다. git을 이용하여 clone만 해주면 됩니다. 하지만 테마들마다 사용방법이나 설정법이 약간씩 다르고 자신의 색깔에 맞게 커스텀을 하려고 한다면 점점 복잡해 집니다. 테마마다 설정방법이 다르기 때문에 이번 포스팅에서는 제가 적용했었던 icarus테마를 기준으로 설명하겠습니다. 테마 고르기 우선 자신의 블로그에 적용할 테마를 고릅니다. Hexo Themes 에서 자신이 원하는 테마를 골라줍니다. Hexo Themes에는 많은 개발자들이 hexo를 사용하여 만든 테마 목록들을 확인하고 다.. 2021. 8. 26. Hexo 검색엔진 최적화(SEO) 시켜보기 이번에 적용해 보려고 하는 것은 검색엔진 최적화(SEO)입니다. 다행히 Hexo에는 SEO관련 플러그인들이 많이 있었다. 그 중에 많이 쓰이고 해당 블로그에 적용한 플러그인들을 소개합니다. SEO SEO란? 영어로 Search Engine Optimization 의 약자이며, 검색엔진 최적화 라는 의미를 가지고 있습니다. 검색엔진에 맞게 사이트를 제작 및 운영하는 과정 전부를 뜻합니다. 플러그인 설치 및 설정 - hexo-auto-canonical 메타 태그 중 canonical 속성은 대표 URL을 뜻합니다. 각 포스트마다 자동으로 표준 링크를 만들어 줍니다. 설치 npm install --save hexo-auto-canonical 설정 HEAD에 위치 하도록 아래 내용을 추가해줍니다. ejs 의 경.. 2021. 8. 25. Hexo 포스팅 방법 이전 포스팅 에서 'Hexo 블로그의 세팅방법'과 간단한 글쓰는 방법에 대해 다뤄보았는데요 Hexo는 간단한 포스팅 외에도 다양한 기능의 포스팅 방법을 제공해 줍니다. Hexo에서 지원하는 것들은 무엇이 있는지 한번 살펴보겠습니다. 글쓰기(Writing) 일단 기본적인 명령어 부터 하나씩 살펴보겠습니다. hexo 명령어를 사용하여 새로운 포스팅의 마크다운 파일을 생성해 줍니다. 레이아웃은 생략해도 됩니다. hexo new [layout] [포스트이름] hexo new [포스트이름] # layout을 지정하지 않으면 기본으로 post을 생성합니다. 위 명령어를 실행하면 source/_posts 폴더에 포스트이름.md 으로 새로운 마크다운 파일이 생성됩니다. 파일명에 띄어쓰기가 있다면 하이픈(.. 2021. 8. 25. 이전 1 2 다음 반응형
