jineecode

유투브를 보다가 눈에 띄는 확장 프로그램이 있어서 적어둔다. Git Graph 라는 확장 프로그램인데, 소스트리처럼 깃의 상태를 그래프로 볼 수 있게 해주는 확장 프로그램이다. 설치 후에 깃 카테고리에 깃 그래프 아이콘이 생성된다. 클릭해보면 이렇게 깃의 상태가 그래프로 한눈에 들어온다.

SASS(Syntactically Awesome Style Sheets)는 CSS pre-processor (전처리기) 로서, CSS를 프로그래밍 언어스럽게 작성할 수 있다. SASS는 변수, 함수, 반복문, 연산자 등을 사용할 수 있으며 SASS 문법으로 복잡한 작업을 쉽게 할 수 있게 해주고 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해준다. Sass 에서는 두가지의 확장자 (.scss/.sass) 를 지원하며 보통 scss 문법이 더 많이 사용된다. 인스톨 방법 npm install node-sass 문법 1. 변수 사용 scss파일에선 변수를 사용할 수 있다. $main : #ff0000; .red { color : $main; } css에서 비슷한 기능인 :..

footer를 항상 바닥에 놓는 법을 몇 달 전 포스팅 한 적이 있는데 react로 들어가니 또 말썽이 생겨서 (#root, .App .wrap 까지 점점 깊게 들어가니까 계속 height를 적용해줘야 하는 경우 발생하고 컴포넌트가 많으면 스타일을 다루기 힘들어진다.) 다른 방법을 강구해보았다. jineecode.tistory.com/103?category=818703 footer 을 항상 바닥에 놓기 content의 높이가 작으면 footer 가 아래에 있지 않고 애매하게 중간에 있는 경우가 있다. 관리자도구를 확인해보면 html 자체의 높이가 작아서 나타나는 문제이다. 컨텐츠만큼 html의 height가 auto로 늘 jineecode.tistory.com 이전 글 index.html .wrap은 개..

소스트리에서 커밋까지는 되었으나 푸쉬가 되지 않아 터미널로 다시 푸쉬를 넣어보려고 했으나 깃허브 로그인창이 뜰 뿐 푸쉬가 되지 않았다. 옳은 아이디, 비밀번호를 넣어도 [git]Logon failed, use ctrl+c to cancel basic credential prompt 라는 메시지만 뜰 뿐이었다. 이 문제는 업데이트 문제였던 것으로 확인. 명령어 : git update-git-for-windows 를 치고 next를 계속 눌러주면 업데이트가 된다. 업데이트 후 다시 push를 시도해보면 성공

useEffect는 componentDidMount() , componentWillUnmount() 같은 컴포넌트 생명주기 훅이다. 사용법은 useEFfect 훅을 import를 해온 후, function 내부의 return 바로 전에 적어준다. 가급적이면 변수 이후에 적어주는 것이 좋다. (스코프로 인해 읽어오지 못할 수가 있음) import React, {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ }, []); return ( ) } useEffect 콜백함수 안에는 Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드가 있으면 적어주면 된다. 콜백함수 이후에 등장하는 대괄호 안에는 조건문이 들어간다. 대괄호에는 s..

1. 설치 : npm install react-router-dom 2. src/index.js 에 import. import { BrowserRouter } from "react-router-dom"; 3. ReactDOM 에 코드 ReactDOM.render( , document.getElementById("root") ); 와 의 큰 차이점은 주소창에 # 버튼이 있냐 없냐의 차이가 있다. 주소창에 #이 있으면 서버에 요청을 할 수 없다. 즉, 안전하게 리액트 라우터를 다루고 싶을 때 HashRouter 를 쓰게 된다. 반면 백엔드와 함께 작업할 일이 있을 경우 BrowserRouter을 쓴다고 한다. 4. App.js 에 react-router-dom에 대한 컴포넌트들 import import { L..

정처기 공부를 최종적으로 마치며 든 소감: 회고록에도 썼었지만 정보처리기사를 준비하게 된 이유는 별 거 없었다. IT를 진입하려면 기본 중에 기본인 자격증이니까. 그래, IT로 진출하려면 정보처리기사 정도는 있어야지. 비전공자니까 당연히 따야지. 그렇게 은연 중에 생각하며 반 쯤 충동적으로 접수했다. (...사실 학원 때문에 공부할 시간도 없고 몹시 바쁠 시기였는데 진짜 무슨 패기와 무슨 충동이었는지 모르겠다.) 그렇게 정처기에 대해 조금 알아보니 작년부터 정처기가 개편이 되었다는 소식에 크게 좌절했다. 기출문제도 별로 없을 뿐더러 1회차 합격률은 낮디 낮았다... 개편 전에는 문제은행식이라고 들었지만 개편 후엔 그렇지도 않은 것 같았고 수많은 후기를 보니 필기는 쉽게 합격하였어도 실기 합격을 하기는 하..

아직 react를 다룬 지 얼마 되지 않은 새싹이지만 개인적으로 느꼈던 생각을 적어둔다. 계속해서 react 라이브러리를 써보고 추가할 예정이다. 수많은 동영상이나 책에서는 react 라이브러리를 쓰면 어떤 이벤트가 일어날 때 페이지의 깜빡임이 없으며 (새로고침) 이는 virtual dom이 있기 때문이라고 익히 들어왔다. 솔직히 이렇게 백 번, 천 번 이야기해도 직접 써보지 않으면 와닿지 않았기 때문에 이러한 이론적인 이야기를 제외하고, 내가 개인적으로 느낀 장점을 솔직하게 적어본다. '왜 react를 썼나요?'라는 질문이 들어오면, 나부터 납득해야만 했으니까. 1. 처음 react를 써보았을 때 react를 사용하여 개발하기 위해서는 node.js부터 시작하여 설치해야 할 게 너무 많았다. 낯선 모듈..