일안하고블로그

VSCode 테마 변경 VSCode에서 테마는 일반적으로 내장되어있는 테마도 있고 따로 익스텐션을 받아서 설정 하는 방법도 있습니다. 우선 내장되어있는 테마를 변경하는 방법부터 알아보겠습니다. 1. vscode 화면에서 F1버튼을 누르세요. 2. theme 검색 3. color theme 클릭 여기서 본인에 맞는 테마를 변경하시면 됩니다. 저는 최근에 panda Syntax 테마를 받았는데요 . vscode 좌측 5번째 아이콘을 클릭 하시면 됩니다. 여기에서 원하는 theme를 install 하고 리로드를 하시면 됩니다. 리로드후, 다시 F1버튼을 누르고 theme를 검색하면 이렇게 테마가 추가되어있습니다. 원하는 테마를 골라서 사용하시면 좋을것같습니다.

React-BootStrap 부트스트랩을 따로 배우거나 한 것은 아니지만, 회사에서 사용을 하고 있기때문에 사용법과 장점들을 많이 알고 있었던 상태에서 리액트에도 React-BootStrap이라는 라이브러리를 활용해서 적용 할 수 있다고 하여 정리를 하면 쉽게 쓸 수 있을 것 같아서 , 정리를 해봅니다. 참조 한 사이트는 여기 입니다. create-react-app으로 프로젝트를 만듭니다.$ create-react-app react-boot1설치가 완료 되었으면, 프로젝트 폴더 이동$ cd react프로젝트 이동후, 실행.$ yarn start화면이 나오면 성공입니다.다음으로, Command 혹은 Bash 창에서 start 프로젝트를 중지 합니다.정지 후, react-bootstrap을 설정해줍니다. $..

React 생명주기(LifeCycle) 리액트에서 정말 중요하지만 정리가 필요한 것이 리액트 생명주기입니다. 매번 할때 마다 구글링을 하고 정리가안되어 헤깔렸던 리액트 생명주기를 한번에 정리해 보겠습니다. 컴포넌트 초기생성컴포넌트 업데이트컴포넌트 제거 컴포넌트 생성과정 See the Pen [React LifeCycle] 컴포넌트초기생성 by 최대한 (@sheldhe) on CodePen. 위의 예시에서 Result 버튼을 누르시고 console을 확인하시면 테스트 결과를 확인 할 수 있습니다. 컴포넌트 생성과정 constructor -> componentWillMount -> render -> componentDidMount 컴포넌트의 실행과정을 살펴 보겠습니다. constructor : 컴포넌트 생성..

React PropTypes 리액트 TypeChecking PropTypes를 정리하기위해 사이트를 참조하였습니다.리액트 앱이 커지면서 여러 유형 검사를 통해 많든 버그들을 발견 할 수 있게되었습니다. 일부 응용 프로그램인 TypeScript나 Flow와 같은 자바스크립트 확장 응용 프로그램으로도 검사를 할 수 있습니다. 하지만, 리액트 자체적으로도 TypeChecking 기능을 내장하고 있습니다. 또한 리액트 PropTypes를 통해 버그만 잡는 것이 아닌 가독성향상 및 커스텀화로 중요성이 커지고 있습니다. 지금부터 예제를 통해서 하나씩 설명해 보도록 하겠습니다. 알아두어야 하는 내용React.Proptypes는 15.5버전 부터 다른패키지로 옮겼습니다.prop-types 라이브러리를 사용 할 것입니다..

Codepen으로 React 작업해보자 매번 간단하게 테스트를 할때마다 프로젝트를 만들고 테스트를 하는것보다, 좋은 방법이 있습니다.CodePen을 설정하는 것인데요, CodePen은 리액트 관련해서도 많은 라이브러리를 제공해줍니다. 지금 부터 바로 코드펜으로 기본적인 리액트 설정을 하겠습니다. 우선 new pen을 해주세요. Codepen을 어떻게 쓰는지 모르신다면, 아래 링크를 확인해주세요. 링크를 확인 해주세요. 2018/07/18 - [Site & Program ] - Codepen 사용 다음 상단 우측에 setting 버튼을 클릭해주세요. 1. 다음으로 리액트를 JavaScript에 설정을 해야합니다. JavaScript를 클릭합니다. 2. react 라이브러리와 react-dom 라이브러리가 ..

맥북에서 LOL 설치하기 일주일에 한번정도는 집에서나 피씨방에서 롤을 합니다. 최근에 우연히 맥에서 LOL을 지원한다는 소식을 듣고 한번 설치를 해보았습니다. 우선 LOL 사이트에 접속합니다. 링크는 여기를 클릭해주세요. 사이트에 접속하면 게임다운로드를 클릭해주세요. 게임 서명을 하면 다운로드를 실행할 수 있습니다. 권장사양은 CPU 2.0Ghz / Ram : 4기가 / 하드용량: 10기가이상 / 그래픽카드 지포스 330M 이상입니다. 설치가 완료되면 리그오브레전드.app을 applications에 넣어주세요. 설치를 또하고 , 라이센스 동의만 해주면 윈도우 컴퓨터처럼 접속됩니다.다음에 맥으로 게임을 몇판 해보고 후기도 올려야겠습니다.

자바스크립트 스프레드 연산자를 접하고 사용한지 별로 안되었고 , 사실 굳이 왜사용해야하는지 잘 몰랐습니다. 가장 중요한 이유는 ES6를 사용하지만 너무 이해하기 어렵고, 꼭필요한 함수는 아니라고 생각했기 때문입니다. 사실, 아직도 100퍼센트 활용하진 못하고, "이렇게 사용하면 편하니까" 라는 생각 가지고 쓰고있습니다. 스프레드 연산자를 다른 연산자와 비교하면서 풀어나가 보도록 하겠습니다. 1. Array사용시 스프레드 연산자 - 배열 결합. concat사용 See the Pen 배열,배열 합치기 by 최대한 (@sheldhe) on CodePen. 배열을 결합하는 방법은 위에있는 것 말고 많은 예제가 있습니다. 여기를 참조하세요. - ES6 배열 결합. See the Pen ES6 -스프레드함수 Arr..

평소에 VScode를 실행할때 평범하게 클릭으로 실행 했지만, 우연히 유튜브 인터넷 컨텐츠를 보다가 vscode실행을 터미널에서 code .으로 할 수있다는것을 알았습니다. 사용 방법은 간단합니다. 원하는 프로젝트 경로로 이동후에 code . 명령을 입력합니다.하지만 명령어 입력으로 vscode가 열리게 하기 위해서는 기본적으로 vscode 에서 한가지 설정을 해주어야합니다. 1.vscode 실행 2.f1 버튼을 누르세요. 3.하나의 창이 나오는데 거기에 shell 입력 4. command install 클릭 5. 다시 f1 -> shell입력 -> teminal: Allow Workspace 클릭 6. 다시 Command 창으로 이동하시고 원하시는 workspace로 이동 후 code . 입력 vsco..

자바스크립트 모듈패턴 자바스크립트 모듈패턴에 대해서 많이 들어보셨을 거에요. 자바스크립트에서 수 많은 디자인패턴이 있습니다. 그중에서 가장 많이 사용 되어오고 있는 패턴이 모듈 패턴입니다. 앞으로 자주쓰는 모듈패턴부터 옵저버패턴, 등 많은 디자인패턴들을 정리해서 올릴예정입니다. 이번 페이지의 목표는 모듈패턴을 사용하는 이유와 모듈패턴의 예시, 마지막으로 모듈패턴의 사용방법에 대해서 정리해 보겠습니다. 모듈패턴의 키워드는 두개입니다. 독립된함수자체적인 변수와 함수(비공개 변수)모듈패턴의 사용이유와 예시 모듈(module)은 전체 어플리케이션의 일부를 독립된 코드로 분리해 놓은 것입니다. 자바스크립트를 사용하다보면 수많은 전역변수를 사용합니다. 사용을 하다보면, 전역 유효범위가 어지럽게 되는 문제가 발생 할..

See the Pen 제이쿼리 - Show by 최대한 (@sheldhe) on CodePen. 제이쿼리의 장점중 하나는 애니메이션을 구현하기 쉽고 , 많은 오픈소스가 있는 것 같습니다. 평소에도 제이쿼리를 많이 쓰지않을려고 노력하지만, 종종 쓸 수 밖에없는 환경에 놓여 사용합니다. 이번에도 종종 사용하지만 정리가 안되어있는 제이쿼리 show에 대한 기능을 정리 하겠습니다. 사용 하기 위해서 제이쿼리 ui라이브러리가 필요하여 CDN으로 사용하였습니다. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js 코드펜 사용법을 모르거나 자세히 배우고 싶으시면 아래 링크를 확인해주세요. 2018/07/18 - [Site & Program ..