본문 바로가기

전체 글

(11)
React Native와 ReactJS 차이점 ReactJSReactJS는 사용자 인터페이스 및 웹 애플리케이션 구축을 위해 프런트 엔드 웹을 지원하고 서버에서 실행되는 JavaScript 라이브러리이다. 재사용 가능한 구성 요소의 개념을 따른다.페이스북에서 만든 자바스크립트 오픈소스 라이브러리.웹, 웹 앱, SPA등 개발 시 사용.프론트와 서버 사이드 모두 제공.가상의 DOM을 사용하며 이는 전체 새로고침보다 빠르다(필요한 부분만 고침).HTML태그 사용.컴포넌트 재사용이 용이함.return( Hello World )React NativeReact Native는 호스트에서 사용할 수 있는 JavaScript 엔진을 사용하는 모바일 프레임워크로, JavaScript에서 다양한 플랫폼(iOS, Android 및 Windows Mo..
HTML 태그 요약 및 정리 개요HTML 태그 요소 정리를 하고, 기록을 위해서 작성을 해본다.태그를 많이 있어 각 사용 쓰임에 따라 정리를 따로 해봤다. HTML5 새로 포함된 태그 요약HTML5에 새로 포함된 태그들이 있다. 이러한 HTML5 태그(요소)는 더 나은 문서 구조를 제공한다.태그설명이 요소는 블로그, 잡시, 신문 기사 등 문서에서 독립적인 콘텐츠를 정의하는데 사용된다.기사가 전체 페이지의 나머지 부분과 약관 관련되어 있음을 지정한다.HTML에서 오디오 파일을 재생하는데 사용된다.bdi는 양방향 격리를 의미합니다. 외부 텍스트 문서에서 다른 방향으로 형식이 지정된 텍스트 일부를 격리한다.캔버스를 그리는 데 사용된다.데이터의 기계 판독 가능한 버전을 제공한다.텍스트 필드에 자동 완성 기능을 제공한다.사용자에게 필요한 추..
[네이밍 규칙 정리] Camel case, Kebab case, Snake case, Pascal case 개발을 하다보면 여러가지 네이밍 규칙을 마주하게 된다.프로젝트를 혼자 하는 것도 있지만 대부분 2명이상과 할 때가 많다.네이밍 규칙을 만들면 정리가 되고,파일, 폴더, 변수, 클래스, 컴포넌트 등 바로 직관적으로 의미를 알 수 있어서 네이밍 규칙은다수 프로젝트에서는 필수라고 볼 수 있다.단어 사이의 공백 제거프로그래밍에서 다른 종류의 프로그램은 특별한 목적을 위해 공백(' ') 문자를 예약하기 때문에종종 단어 사이의 공백을 제거한다.공백 문자는 예약되어 있으므로 인간 언어로여러 단어로 표현하는 개념을 나타내는 데 사용할 수 없다.이름을 정할 때 여러 규칙 중에 카멜 기법, 케밥 기법, 스네이크 기법, 파스칼 기법에 대해서 알아보자.1.카멜 기법(Camel case) 카멜 기법은 다음과 같이 첫 번째 단어..
[Mac ] 윈도우OS와 맥OS에서 많이 사용하는 단축키 비교 맥을 사용하면서 윈도우에서 사용하는 것처럼 단축키가 필요할 때가 있는데맥에서 필자 기준으로 '자주 사용하는 단축키'를 정리하면서WindowOS와 MacOS 단축키 비교해보았다. 수정하겠다..자주 사용하는 단축키가 아니라 많이 사용하는 단축키로.. 들어가기 앞서 MacOS 키는 아이콘으로 대체 했다.여기서만 언급하고 아래 표에서는 아이콘으로만 사용하겠다.⌥ (option)⌘ (cmd / command)⌃ (ctrl / control)⇧ (shift)⇪ (caps lock) 파일/폴더 관련 단축키기능WindowOSMacOS파일 / 폴더 복사파일 선택 후 Ctrl + 드래그파일 선택 후 options(⌥) + 드래그클립보드에 복사Ctrl + C⌘ + C클립보드에 내용 붙여넣기Ctrl + V⌘ + V파일 잘라내..
[Mac ] 맥북 마우스 휠 스크롤 방향 바꾸는 방법 개요맥북을 처음 구매 하고 사용했을 때 당황했었다.맥북의 트랙패드나 매직 (무선)마우스를 사용했는데 스크롤 방향이 뭔가 이상했다. 검색을 해보니 MacOS에서 스크롤 방향이 반대로 되어 있는 것이고설정에서 바꿀 수 있어 맥북 처음 사용자를 위해 공유한다. 방법설정은 간단해서 요약 다음과 같다. -> 시스템 설정 -> 마우스 -> 자연스로운 스크롤 활성화 해제(or 설정)   1. 시스템 설정 들어가는 방법하단의 독(Dock)의 시스템 설정을 실행하거나상단의 애플로고를 클릭한 후 시스템 설정을 클릭하여 들어가도 된다.또는CMD + 스페이스 눌러 '시스템 설정'을 검색을 해서 들어가도 된다. 2. 스크롤 조금 내려 마우스를 클릭한다.왼쪽 메뉴 스크롤을 내려 마우스를 찾아서 클릭하면 된다.또는CMD + 스페..
npm 설치 시 reason: self signed certificate in certificate chain 에러 해결 방법 필자는 리액트 설치를 할 때 에러가 났지만 react뿐만 아니라 npm, vue 등 설치시에 에러가 발생하기도 하고,gulp때도 마찬가지다.  이런 에러는 SSL 문제라서 쉽게 오류를 해결할 수 있다. npm config set strict-ssl false -g이렇게 명령어를 치면 대부분 해결이 가능할 수 있다. SSL 관련 용어는 아래 다음과 같다. 참고하면 좋을 듯 싶다.※ Strict SSL 관련하여 알면 좋은 용어들SSL: 연결을 안전하게 유지하고 한 시스템에서 다른 시스템으로 전송되는 중요한 데이터를 보호하는 표준 인터넷 기술이다. 사이버 범죄자가 개인 정보를 포함하여 전송되는 정보를 읽고 수정되는 것을 방지한다.TLS(Transport Layer Security): 업데이트되어 더욱 안전한 ..
Git fork 클라이언트 사용하기 Git GUI 클라이언트 중에 근래 주로 사용하는 것은 git fork 클라이언트입니다. 인터페이스가 제일 깔끔한 것은 Git Kraken이지만 멀티 계정 및 비공개 repository 등 모든 항목을 이용하려면 려면 결제를 해야 사용할 수 있습니다. git hub desktop은 github에 한정되어 있으며 여러 계정을 사용할 수 없습니다. 예를 들어 개인 계정과 회사 계정을 별도로 사용하고 싶은데 github에서는 그것을 제공하지 않습니다. 기능 요약 기본 기능 + 최근 저장소를 빠르게 열기가 가능합니다. 스테이지/언스테이지 라인별로 변경 최근 커밋 메세지 접근할 수 있습니다. 모든 커밋에서 저장소 파일 트리 찾기 가능합니다. 직관적으로 병합 충돌 해결 가능합니다. Reflog로 손실된 커밋 복원할..
CSS 방법론(BEM, SMACSS, OOCSS) 시작하기 오래전부터 올린 다는 것이 게을러 작성을 못했다가 근래에 다시 글을 올리면서 이 방법론도 꼭 공유하면 좋겠다 생각이 들어 공유를 합니다. 고수들은 읽지 않아도 됩니다 😅 CSS 방법론의 공통적인 특징 CSS 방법론 만들어진 게기는 CSS 활용도가 높아지고 대규모 프로젝트가 많아짐에 따라, 복잡한 설계의 필요성을 느끼지 못했던 CSS에도 다양한 방법론들이 생기기 시작했습니다. 불필요한 작업을 최소하고 작성된 코드를 빨리 파악하고 유지보수성까지 고려한다면 명확하고 일관되는 규칙이 필요합니다. 코드의 재사용을 높일 수 있습니다. 쉬운 유지보수를 위해 확장이 가능하게 하기 Class명으로만으로도 의미 파악 쉽게 하기 방법론의 종류 SMACSS(Scalable and Modular Archietechur..