Programming 썸네일형 리스트형 [React]React 기초 - inline style 작성하기 React에 인라인 스타일링하기_1 첫번째 방법으로 객체형태로 스타일을 작성합니다. 단 주의할 점은 스타일 작성 중 - 이 들어가는 css style 의 경우 카멜 표기법을 활용하여 작성해야 합니다. import React from 'react'; const Test = () => { const name = '리액트'; const style = { width: 100, // px이나 rem 같이 단위를 붙여주지 않으면 자동으로 px로 인식된다. height: 5 + 'rem', // px 이외의 다른 단위를 사용하는 방식 color: 'red', // 일반적인 color 이름을 지정하는 방식 backgroundColor: '#efefef', // HEX 코드로 작성하는 방식 border: 10, // b.. 더보기 [git] Github, Gitlab에서 파일명 변경 후 Commit 적용 안될 때 - push를 했지만 파일명이 안바뀐다? - 코드 작성 후 Commit을 완료 한 후에 파일명을 잘못 작성했을 경우가 생기곤 합니다. 이럴 때 일반적으로 파일명을 바꾼 후 다시 Push 를 할 경우 정상적으로 반영이 되지 않는 경우가 있습니다. 없으시다고요??? 제가 있었어요... git은 파일이름의 대·소문자의 변화를 인식하지 못하기 때문이라고 합니다... - 해결방법 git mv 바로 위의 명령어를 사용하여 console 창에서 파일명을 바꾸면 됩니다. - 사용법 // git mv `바꾸고 싶은 파일명의 원래 이름` `바꿀 파일명` git mv test.md Test.md 생각보다 사용법은 매우 간단합니다. ※ git 2.21.0 이전 버전에서는 --force 를 붙여줘야합니다. git mv --fo.. 더보기 [CSS]nth-child 다양하게 활용하기 nth-child 간단 사용법 위와 같은 소스에서 li 전체에 스타일을 줄 때는 ul에 있는 클래스를 지정해준 후 css를 적용하면 해당 ul의 자식인 li에게 스타일을 한번에 적용해 줄 수 있습니다. /* nav의 자식인 ul 전체에 적용 */ nav ul {border:1px solid blue;} /* nav의 자식인 ul 중 첫번째 자식을 선택*/ nav ul.nth-child(1) {border:1px solid red;} /* nav의 자식인 ul 중 세번째 자식을 선택*/ nav ul.nth-child(3) {border:1px solid green;} 위와같이 nth-child()를 사용하여 부모의 자식 요소 중 선택한 자식요소만 선택할 수 있습니다. first-child 와 last-ch.. 더보기 [MySQL]Mysql 기본적인 명령어 모음 계정관련 -- user_id 에게 모든 권한을 부여한다 `%`localhost에서든 원거리에서든 접속허용가능한 user_id라는 계정을 생성 grant all privileges on *.* to 'user_id'@`%` identified by 'password'; -- 사용자 정보 조회 SELECT user,authentication_string,plugin,host FROM mysql.user; -- 사용자 생성 create user 'root'@'localhost' identified by 'pass'; -- 권한 부여 GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost'; GRANT GRANT OPTION ON *.* TO 'root'@'localhost'; .. 더보기 [React]React 프로젝트 git에 배포 시 Link _blank React Project 배포 시 react-router-dom React로 포트폴리오를 만들고 git에 배포할 때 react-router-dom 을 사용했을 경우 배포 전 처리할 부분이 아주 약간(?)있었습니다. react-router-dom 내의 기능인 Link 를 통하여 해당 프로젝트의 화면 이동을 구현했다면 BrowserRouter 에 basename={process.env.PUBLIC_URL} 을 추가해야 배포 후 화면이동이 정상적으로 이루어지는 것을 구글링을 통해 알아냈습니다. 혼자서 무턱대고 프로젝트를 진행했다보니 원리도 제대로 파익을 못한 상태로 진행해서 이 부분에 대해서도 상당한 삽질(?)을 거쳐 알아냈습니다… 대충 위의 코드처럼 Route 에 path가 Link 와 일치하는 경우 ele.. 더보기 [React] 자주쓰는 yarn commend 목록 npm 말고 yarn React Project 생성 시 Node.js 를 설치하면 기본적으로 설치되는 패키지 모듈인 npm 을 이용하는 법이 있지만 npm 보다 속도나 기능적인 면, 그리고 보안적인 문제에서도 조금 더 좋은 yarn 을 사용하려 합니다. 실제 yarn commend 는 npm과 크게 다르지 않아 어렵지는 않습니다. yarn은 yarn.lock이나 package.json으로부터 설치만 하며, yarn.lock은 모든 디바이스에 같은 패키지를 설치하는 것을 보장하기 때문에 버전의 차이로 인해 생기는 버그 방지가 가능합니다. yarn package 설치하기 따로 파일을 다운받아 설치할 필요가 없습니다. 먼저 명령 프롬포트를 열거나 VSCode 내의 터미널 창에 아래의 코드를 입력하여 yarn .. 더보기 [JavaScript]변수에 할당 된 데이터 타입 조회 방법 JavaScript 데이터 타입 조회 방법 typeof “조회할 변수명” // 변수에 할당된 값 데이터 타입 체크 방법 var abc; console.log(typeof abc); // undefined; abc = 10; console.log(typeof abc); // number; abc = 'Hello'; console.log(typeof abc); // string; abc = true; console.log(typeof abc); // boolean; abc = null; console.log(typeof abc); // object; abc = Symbol(); console.log(typeof abc); // symbol; abc = {}; console.log(typeof abc); //.. 더보기 [React]filter, map, react-router-dom v6 활용기 filter 그리고 map 개인적으로 까먹지 않기 위해 기록한 코드입니다!!! 해당 코드가 무조건 맞는 것은 아닙니다! 분명 제가 작성한 코드보다 더 안전하면서 깔끔한 코드를 작성하신 분이 있을겁니다…. 개인적인 포트폴리오를 업그레이드 하는 중 NAS 를 집에 들여놓기엔 초기셋팅비용이 부담스럽고 서버를 대여하자니 현재로썬 그냥 단순하게 업그레이드하는 수준이라 그냥 DB를 사용하지 않고(?) github Page를 활용하기로 했습니다. React라면 REST API라도 사용해봐야하는데… JSON 대신 배열 컴포넌트를 활용하여 화면 구성을 진행하고 있습니다… 이상하게 꼬인 컴포넌트 구조 작성한 컴포넌트와 코드들입니다. 무작정 작성하며 나누다보니 이상하게 꼬인 경향이 있습니다… App.js에 Route를 모두.. 더보기 이전 1 2 3 4 5 6 7 8 ··· 10 다음