본문 바로가기

개발(Development)273

[VS Code] .git 등 숨김 파일/폴더 표시 방법 # Visual Studio Code 에디터에서 .git 등 숨김 파일/폴더 표시 방법 VS-Code 에서 .git 등의 숨김 폴더/파일을 표시하는 방법을 정리한다. 1. 설정 화면 진입 - Settings 항목을 클릭한다. 2. "exclude" 검색 - Files:Exclude 항목에 **/.git 등 숨김 폴더/파일들이 설정되어 있다. 3. 표시하고 싶은 숨김항목을 Files: Exclude 에서 제거 - 마우스를 올리면 나타나는 X버튼을 클릭하여 숨김항목을 제거한다. * 연필 모양 아이콘을 클릭하며 편집 가능하다. * Add Pattern 버튼을 클릭하여 추가도 가능하다. 2022. 8. 19.
[TypeScript] enum 기초 사용법 (+ enum이 필요한 이유) # TypeScript 의 enum 이란? Typescript 는 JS의 기본 타입 외에도 몇 개의 타입을 더 제공하는데, 그 중 하나가 열거형이라고 불리는 enum 이다. enum은 말 그대로, 여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입이다. 예를 들어, 사용자를 권한별로 관리해야할 때 enum으로 정의해두고 사용한다. enum Auth { admin = 0, // 관리자를 0으로 표현 user = 1, // 회원은 1로 표현 guest = 2 // 게스트는 2로 표현 } 근데 도대체 왜 enum을 사용하는걸까? 그리고 언제! 어떻게! enum을 사용하는게 좋을까? enum의 기초 문법은 글 하단에서 살펴보기로 하고, 먼저 enum이 필요한 이유부터 정리해본다. # enum 의 필요성.. 2022. 8. 18.
[MySQL] 이모티콘 입력 방법: Incorrect string value 해결 # MySQL 데이터베이스에 이모티콘 입력 방법 기본 MySQL 세팅 상태에서 이모티콘 입력시, 아래와 같은 에러가 발생한다. Error: Incorrect string value: '\xF0\x9F\x9B\xA9\xF0\x9F...' for column 'title' at row 1 code: 'ER_TRUNCATED_WRONG_VALUE_FOR_FIELD', errno: 1366, sqlState: 'HY000', sqlMessage: "Incorrect string value: '\\xF0\\x9F\\x9B\\xA9\\xF0\\x9F...' for column 'title' at row 1" 데이터베이스, 테이블의 Character Set 을 아래와 같이 변경해주면된다. 1. 데이터베이스 문자셋 변.. 2022. 8. 16.
[React] 모달창(Modal) 초간단 구현 방법(리덕스, 라이브러리 X) 이 글은 useState, useRef 등만을 활용하여 수동으로 모달창을 구현하는 방법입니다. 이 것만으로도 이미 충분히 간단하지만, 만약 HTML의 dialog 엘리먼트로 훨씬 더 쉽게 구현하는 방법이 필요하시다면, 아래 글을 참고해주세요. [React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 모달창 구현 방법 - redux나 별도 라이브러리 없이 아주 쉽게 모달창을 구현하는 방법 1. state 로 Modal 노출 여부를 관리한다. - useState 훅으로 모달창 노출 여부를 관리해준다. 2. Modal 창이 최상위에 노출되도록 CSS를 조정한다. - position: absolute로 위치를 조정한다. - z-index를 높게 줘서 최상위에 노.. 2022. 8. 16.
[React] useLocation 으로 쿼리 파라미터 취득 방법(URLSearchParams 활용) # 리액트: 쿼리 파라미터 취득 방법 by useLocation GET 방식으로 http://경로?키=값 형태로 접속시, 쿼리 스트링 취득하는 방법은 아래와 같다. 1. useLocation() 으로 search 취득 - search 속성에 "?키=값&키=값" 이 저장되어 있다. - {pathname: '/query', search: '?id=10&count=2022', hash: '', state: null, key: 'default'} 2. URLSearchParams 객체 생성 - search 속성의 값을 URLSearchParams 객체로 생성한다. - new URLSearchParams(useLocation().search) 3. URLSearchParams객체.get("키") 로 쿼리 취득 -.. 2022. 8. 16.
[Next.js] getServerSideProps 에서 undefined 반환 이유 # getServerSideProps 에서 undefined 가 반환되는 이유 Next.js 의 getServerSideProps은 오직 Pages 폴더에 있는 페이지 컴포넌트에서만 사용 가능하다. 즉, pages 외부 경로(src/components 등) 에 위치한 컴포넌트에서 getServerSideProps사용시, 호출 자체가 정상적으로 되지 않아 SSR이 작동하지 않는다. 따라서 아래와 같이 데이터를 받아서 사용하려 해도 애초에 받는게 없으니 undefined 로 찍힐 수 밖에 없다. type PropsType = { message: string; }; // pages 외부의 컴포넌트 function Test({ message }: PropsType) { console.log(message); /.. 2022. 8. 16.
[React] JSX 특수 문자/기호 입력 방법(꺽쇠, 괄호, 슬래시 등) # 리액트에서 특수 기호 및 특수 문자 입력 방법 HTML에서 꺽쇠( ), 괄호( {, } ), 주석용 슬래쉬 ( //, /* ) 등의 특수문자 입력시, 특수문자 표를 참고하여 &lt, > 등으로 입력한다. 하지만 리액트 JSX에서는 중괄호를 이용해 쉽게 특수문자를 표현할 수 있다. => 중괄호 내부의 따옴표 사이에 원하는 특수기호를 입력해주면 끝! 1{''}1 괄호 {'{'} 내부 {'}'} 괄호 주석 표시 : {'//'} 주석 표시 : {'/*'} 2022. 8. 15.
[Next.js] Link 라우팅 : 현재경로 active CSS 스타일링 React 에서는 네비게이션 라우팅 구현시, NavLink 를 사용하면, 해당 네비 메뉴가 선택됐을 때 자동으로 className에 active가 생겨서 선택된 네비 메뉴에만 스타일을 주기가 편했다. 하지만 Next.js 에서 Link 를 사용하면, 이 기능이 제공되지 않는다. 따라서 네비 메뉴가 선택되면, 직접 className에 active 값을 추가해줘야 한다. # Next.js에서 Link 선택 시, Active 효과 부여 방법 => 현재 경로가 선택된 메뉴와 동일할 때만 class에 active를 설정해주고 스타일링한다. 1. 컴포넌트 JS 코드 1) useRouter() 를 통해 현재 경로를 취득한다. 2) 현재 경로가 선택된 네비 메뉴와 동일할 때만 className에 active를 설정한다.. 2022. 8. 14.
[React] TypeScript useRef 사용법 (+ ref 객체 타입) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값을 할당해준다. // 값 저장 용도(number) const count = useRef(0); const text = useRef("") 2. DOM 취득 용도 - 제네릭 : 참조하는 HTML 엘리먼트를 넣어준다. - 초기값: null을 넣어준다. // DOM button 참조: 제네릭으로 html엘리먼트(button) 설정. 초기값은 null로 설정 const buttonRef = useRef(null); // DOM input 참조 : 제네릭으로 html엘리먼트(in.. 2022. 8. 11.

티스토리툴바