JNarin Development Story

리액트에서 게시판 모양을 하는데 table이라는 html을 사용하게 되었다. 그 과정에서 좀 정리가 필요할 것 같아 오늘도 이 글을 쓰게 되었다. 1. 태그란 table은 행과 열로 이루어진 표를 의미한다. 2. Table에 쓰이는 요소 혹은 태그 2-1. 필수 요소 - table - tr : 행을 구분 짓는 태그이다. - td : th에 대한 내용을 적는 태그이다. 2-2. 선택적 요소 - caption : 표 설명이나 제목을 입력하는 태그이다. - thead : table에서의 머리 부분으로 전체 테이블의 내용이 무엇인지 알 수 있다. - tbody : table의 내용에 해당하며, thead에 대한 내용을 정리하여 보여준다. - tfoot : table의 마지막 결과물에 대한 정리를 할 수 있다. ..

리액트를 하면서 프로젝트를 자동으로 업데이트되는 방법이 있다는 것을 알게 되었다. 하지만 아직 시도는 해보지 않았지만, 이번기회에 시도를 해보려고 한다. 1. 프로젝트에 gh-pages를 설치를 한다. yarn add --dev gh-pages 위 명령어를 사용하는 이유는, 개발자모드에서만 사용하기에 이렇게 패키지 설치를 진행하였다. 하지만, --dev를 제외한 상태로 패키지를 설치할 수 도 있다. 2. 설치가 완료 된 후 아래와 같이 패키지에 추가적으로 작성한다. // 생략 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-script..

우연히 회사에서 slack을 도입하면서 연동하는 방법에 대해 알게 되었다. 그리고 그 방법을 개인 프로젝트에 적용하여서 내 기록을 남기며 기억하기 위해 오늘도 이 글을 끄적이게 되었다. slack을 사용하는 법 먼저 slack을 사용하기 위해서는 회원가입이 필요하다. 먼저 메인 홈페이지에 방문한다. 아래처럼 무료 체험하기 Google로 가입하기가 있는데 어차피 이메일을 입력하기로 되어있어서 그냥 가입해보는 게 가장 낫다. (체험이면.. 게스트용이 따로 있어야 하는거 아닌가...? 기존 네이버가 삭제도 되지 않고 여전히 유지 중인데... 탈퇴 기능이 없고 비활성화 기능은 존재한다. 가입할 아이디 하나만은 신중하게 가입하기를 권장한다.) 먼저 개인 프로젝트를 하게 될 경우, 워크스페이스를 먼저 생성해야 한다..

리액트를 하다 보면서 HTML과 다른 점이 몇 가지가 있다. '이상하다... HTML에서는 됬는데 왜 리액트에서는 에러가 발생하지?' 라는 의문점, 리액트를 하시면서 몇개를 느낀 것들이 있을 것 같다. 그래서 오늘은 그 몇가지 다른 점을 여기다 정리를 해보려고 한다. 1. class html에서 직접 style값을 작성할 때 쓰이는 옵션으로, 원래 html에서는 class="name"으로 태그 안에 넣는다. 하지만 리액트에서는 className을 넣어 클래스를 사용한다. 이렇게 쓰이는 이뉴는 리액트에서는 클래스 함수, 화살표 함수 이런 두 가지 방식으로 코드를 작성을 하게 된다. 그렇기 때문에 class가 아닌 className이라는 명칭을 사용하는 것 같다. 2. label for html에서는 lab..

오늘은 티스토리 스킨을 바꾸면서 종종 까먹는 설정을 다시 설정하기 위한 방법을 적으려 한다. 처음 설정을 한 후 종종 까먹어서 다음번에도 기억하기 위해서 작성하게 되었다. 1. 네이버 웹마스터도구 일단 네이버 웹마스터 도구에 대해 설명을 하려 한다. 네이버 웹마스터 도구는 본인이 운영하는 웹사이트의 검색 수집, 색인 반영 현황을 제공하고 검색에 친화적인 사이트로 관리하는데 필요한 진단 리포트를 제공하는 서비스다. 2. 네이버 웹마스터 도구를 왜 쓰는가? 필자가 이것에 대해 알게 된 이유는, 티스토리 블로그를 관리하면서 느낀 게 아무리 열심히 해도 네이버에 유입이 너무 적었던 이유였다. 그래서 주변에 물어보니 네이버는 티스토리 수집을 막는다는 이야기를 들었고, 유입을 높이기 위해서는 네이버 웹마스터 도구를..

자주 쓰이고 있지만, 아직까지도 헷갈리는 map함수, 그래서 오늘은 정리를 해보려고 한다. 물론 이 정리를 시작으로 개념정리가 되어도, 얼마든지 까먹을 수 있으니... 수시로 찾아와서 한번씩 점검을 하려 한다. 1. map function? map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다. (여기서 callback function은 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료하는 것을 의미한다.) arr.map(callback(currentValue, index, array), thisArg) map함수는 callback, thisArg함수를 가지고 있으며, callback은 currentValue, in..

써보고 싶었지만 아직까지 써보지 않다가 이번에 알게 되어서 쓰게 된 코드펜 다른 사람도 이 편한 기능을 썼으면 해서 오늘은 코드 펜에 대한 이야기를 쓰게 되었다. 1. 코드펜이 무엇인가? 코드펜(CodePen)은 사용자가 HTML, CSS, Javascript를 작성하면 실시간으로 보여줄 수 있는 온라인 코드 편집기다. 또한 코드 펜은 티스토리나 다른 블로그에도 올릴 수 있도록 코드를 가져올 수 있는 것이 큰 장점이라고 할 수 있다. 먼저 궁금하신 분들을 위해서 해당 링크를 남겨둔다. 코드펜 바로가기 클릭하기 2. 코드 펜을 왜 쓰는가? 그렇다면 개발자들이나 코딩을 하는 사람들은 코드펜을 쓰는 이유가 무엇인가? 아래의 장단점을 필자가 느껴본 지극히 개인적 견해임을 참고하길 바랍니다. 1) 코드 펜의 장점..

리액트를 많이 사용하고 협업을 하게 된다면 가장 중요한 것 중 하나이다. 하지만 초반에 설정하고 나면, 쉽게 잊혀가는 기능 중 하나이다. 오늘은 이에 대한 내용을 정리하였다. Prettier이란? prettier은 VS Code Extension 중에 코드를 정렬해주는 Formatter이다. - 독보적인 코드 포멧터다. - 다양한 언어를 지원한다. - 대부분의 편집자와 통합을 할 수 있다. - 옵션이 거의 없다. 왜 Prettier을 왜 쓰는가? - 저장을 누르면 코드가 포맷이 된다. - 코드 리뷰에서 스타일을 논의할 필요가 없다. - 시간과 에너지를 절약할 수 있다. Prettier을 어떻게 쓰는 것인가? 1) Extension 설치 Visual Studio Code에서는 Extension에 prett..