본문 바로가기

DEVELOP

 (151)
[CSS] 부모가 display: flex; 일때 특정 내용물 한줄로 나타내기 제목 : 내용 이런 구조가 있는데 제목 부분이 반응형일때 아래처럼 두줄 이상으로 안내려가길 원한다. 이럴땐 flex-shrink 를 사용하면 된다. flex-shrink 란 해당 요소가 화면 크기 변화로 인해 축소될 경우 비율을 선택하는 것인데 이 상황에선 한줄로 표현되길 원하는 것이므로 축소가 되지 않게 아래와 같이 스타일을 적용해주면 된다. flex-shrink: 0; 참고) flex: 1 1 auto 에 대해서 알아보자면, 위의 언급한 flex-shrink가 여기서 가운데 1 자리에 해당된다. 즉, 첫번째 1은 flex-grow 두번째 1은 flex-shirnk 마지막 auto는 이 요소가 최소한으로 줄어들수 있는 min-width 값을 설정해주는 것이다. auto로 할 경우에는 자동으로 비율을 조..
[Github] user.name, user.email 전역 변경 두개 이상의 깃허브 계정을 쓸경우 메인으로 사용하는 계정으로 전역설정하는게 정신 건강에 좋다. [기존 전역 계정 변경] 우선 확인을 해야한다. cat ~/.gitconfig 위의 명령어를 입력하면 아래와 같이 내용이 나온다. [user] name = github name email = github@email.com [core] ... 그럼 로컬 계정 설정하는 명령어 가운데에 --global를 추가하여 전역 계정을 설정해보자 git config --global user.name "github name" git config --global user.email "github@email.com" 그리고 다시 cat 명령어로 확인 cat ~/.gitconfig 전역 계정이 변경되었음을 확인할 수 있다.
[Github] 이미 push한 작성자 변경하기 깃허브의 계정을 회사, 개인 계정으로 분리하여 사용하였는데 이력관리 및 기여도를 높이고 싶기 때문에 하나로 계정을 병합하고 싶었다. 그러기 위해선, 1. 회사에 개인 계정을 초대 요청 2. 기존 회사 계정으로 커밋 및 푸시해둔 부분을 찾아 작성자를 변경 이러한 노가다가 필요하다! (이 글은 push를 다른 사람 계정으로 잘못 반영했거나, 원치않은 계정으로 push를 날렸을 경우에도 유용하다.) [변경 원하는 커밋 해시값 알기] 1번을 완료후, 변경하고자하는 레파지토리를 로컬에 연결해둔 후 터미널 오픈 (VSCode로 프로젝트를 연결 > 왼쪽 상단 Terminal > New Terminal 로) $git log 명령어를 입력후 커밋히스토리를 확인 및 깃허브 브라우저 해당 프로젝트 페이지에서 커밋내역 확인하..
[React.js] 공부한 이론 정리 useState 데이터 초기값 설정 및 업데이트 import {useState} from "react"; const [state, setState] = useState(초기값); ----------------------------------------------------------------------------------------------------------------------------------------------------------------- useEffect 특정시점(초반 한번 일회성등)에 함수 실행 import {useEffect} from "react"; useEffect(()=>{}, []); // []는 react가 지켜볼것(hook)이 없으므로 초기 한번 실행한다. ---..
[정보처리기사] 작업 순서 FIFO와 LIFO 데이터를 처리하는 순서의 종류로는 대표적으로 두가지를 뽑을수 있다. 처음 이 두 용어를 접했을땐 좀처럼 이해가 되지않고 와닿지 않았는데 예시를 듣고 생각하다보니 점점 이해가 가는것같다. 기록용으로 남겨두고자 한다. FIFO는 First In First Out으로 흔히 말하는 선입선출을 뜻한다. 예시로는 문자나 대화창. 대화순서에 맞춰 답장을 하는 구조. 처음 들어온 박스를 먼저 Out시키는 구조. LIFO는 Last IN First Out으로 마지막에 들어온 박스를 제일 먼저 Out시키는 구조. 예시로는 브라우저 뒤로가기가 있다. 사용자가 브라우저로 서칭을 하다 뒤로가기 버튼을 누르는 순간 최근 마지막에 방문한 페이지가 나오게되는 원리이다. 이해가 가지 않을땐 예시를 찾아보는것이 좋을거 같다. 😀
[React.js] 버전 호환 문제 React.js 17버전과 React Router 버전5와 결합했을 때 충돌이 생기지 않는다. React.js 18버전과 React Router 버전6와 결합했을 때 충돌이 생기지 않는다. 참고로 React Router 버전5와 React.js 18버전을 함께 사용할 경우, 예를 들어 메인페이지에서 링크 클릭후 서브페이지로 이동을 원할 시 url은 변경되나 페이지가 렌더링되지 않는 현상이 있다. 직접 겪고 당황하여 찾아봤는데 React.js 버전을 17로 다운그레이드 하거나, Switch 컴포넌트 대신 Route를 쓰고 element={}로 해당 되는 컴포넌트를 작성하는 특징이 있는 라우터 버전 6으로 라우터 버전 업그레이드를 권장하는 거같다. 또한 React.js 18버전일 경우, 타입스크립트에서 Re..
[React.js] github clone 로컬 충돌 해결 방법 초반에 리액트로 만든 레파지토리를 다른 로컬에서 clone 받았을 경우, node_modules 폴더가 없고 터미널에 아무리 npm start를 날려 봐도 react-script가 없다는 말만 계속 나오는 경우나 실행이 되지 않는 경우.. 적지 않게 당황한다. 나중에 협업을 위해 그리고 내 자신과의 협업을 위해 기록용으로 남겨두고자한다. (알아낸거라 틀린 부분도 있을 수있어서 참고 부탁드립니다!) node_modules 은 해당 로컬에만 위치하고, 깃헙에 협업을 위해 푸시할경우, 그전에 레파지토리명/.gitignore 파일 (깃이 푸시할때 무시해도 좋은 것들을 나열하는 느낌? 이부분은 더 공부가 필요) 생성후, node_modules 를 작성후에 푸시를 해주자. 이유는, node_modules는 용량이 ..
[javascript ES6] 내가 이해한 화살표 함수 화살표 함수가 분명 간단하고 사용하기 편리한건 알겠는데 자꾸 헷갈려서 기록용으로 적어보려 한다. 우선 내가 이해하기로는 function sampleFun () {} const sampleFun = () => (); 이렇게 사용될 수 있다. 단 이럴경우는 함수 내에 return 값만 있을 경우 {} 중괄호와 return이라는 용어를 생략할 수있다. 만약 return외의 값들 (변수 등등)이 들어가야 하거나 딱히 return 값이 없을 경우 아래와 같이 화살표 함수를 쓰면 된다. let count = 0; const sampleFun = () => { count = count+1; span.innerText = `Total clicks : ${count}`; }

티스토리툴바