Record

1. 계정을 추가하기 전 먼저 HTTP를 통해 Git 인증을 할 수 있는 Gitlab의 Personal Access Tokens을 설정해주어야합니다. 1) Gitlab Settings 2) Access Tokens SourceTree가 GitLab에 원격으로 연결하는데 필요한 api와 read_user에 체크를 해준 후, personal access token 생성해줍니다. 이후 뒤에 나오는 access token을 잠깐 복사해둡니다. 2. Sourcetree 계정 추가 Sourcetree - New tab - Remote - 계정 추가를 클릭합니다. 위와 같이 입력해주신 후에 Personal Access Token 새로고침을 누르면 아래와 같은 창이 뜨는데 사용자 이름은 @example 암호는 위에서 ..

Sourcetree로 clone 할 때 만약 경로가 맞는데도 불구하고 "유효한 소스 경로/URL이 아닙니다."라는 문구가 뜬다면 권한 문제(프로젝트 관리자가 나에게 권한을 주지 않아서)이거나 Sourcetree에 저장된 계정 정보가 달라서 발생하는 문제이므로 아래와 같이 해결해주도록 하자. 1. C:\Users\[계정이름]\AppData\Local\Atlassian\SourceTree 폴더로 이동 2. userhosts, passwd 파일 삭제 3. sourcetree로 다시 프로젝트 clone 4. 로그인 창이 뜨면 다시 로그인

1. i18next란 JavaScript로 작성된 국제화 프레임 워크로 여러 국가의 언어를 처리할 수 있도록 하는 것이다. 2. i18next 설치 npm install react-i18next --save 3. i18next을 사용한 다국어 처리 1) 3개의 파일 생성 src/config/lang/i18n.js src/config/lang/translation.ko.json src/config/lang/translation.en.json 첫 번째 사이트를 참고하여 만들었습니다. 2) translation.ko.json, translation.en.json 파일 작성 i18n.js 파일을 작성하기 전, 한국어와 영어, 두 가지 버전을 보여주기 위한 json 파일을 만들고 데이터들을 넣어줍시다. { "he..

모바일 앱을 만드는 3가지 방법들이 있는데 1. Native App Swift 또는 objective-c 언어, Xcode로 iOS 앱을 만드는 것, Java 또는 코틀린 언어, Android studio로 Android 앱을 만드는 것으로 Native App을 코딩하는데 사용되는 자체 언어로 만든 애플리케이션을 네이티브 앱이라고 합니다. 2. Web App HTML, CSS, JS를 사용해 만들어진 애플리케이션으로 PC용 홈페이지를 모바일에 맞추어 만든 웹 앱을 의미합니다. 그냥 웹 사이트를 보는 것이기 때문에 따로 설치할 필요가 없지만 앱에서 실행할 수 있는 카메라 등을 사용할 수 없고 오로지 브라우저 API만을 사용할 수 있습니다. 3. Hybrid App Native + Web App의 기술을 함..

1. React-native란 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크로 React의 방식으로 native 앱을 개발할 수 있습니다. 2. React-native 개발환경 설치 1) nodejs 10.0 이상 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) expo 설치 만든 결과물을 스마트폰으로 확인하기 위해서는 Xcode(mac용)나 Android Studio(window, linux용)가 필요하지만 expo 오픈 소스 플랫폼을 설치하면 아주 간단하게 Application 테스트 해볼 수가 있습니다. 먼저 App store 또는 playstore에서 Expo..

React 프로젝트를 실행할 때, 보통 npm start로 실행하지만 위와 같은 명령어로 실행이 되지 않는 경우 프로젝트의 package.json 파일의 scripts 부분을 확인해야합니다. ... "scripts": { "start-client": "react-scripts start", "start": "npm run build && (cd server && npm run start)", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, ... npm run start-client // 또는 npm run-script start-client npm start 대신 위의 명령어를 실..

1. React dangerouslySetInnerHTML란 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 즉 dangerouslySetInnerHTML 태그를 사용하여 직접적으로 HTML을 삽입할 수 있습니다. 하지만 일반적으로 코드에서 HTML를 설정하는 것은 XSS 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다. 2. React dangerouslySetInnerHTML 사용법 dangerouslySetInnerHTML은 위와 같이 사용될 수가 있는데, 사용자가 입력할 수 있는..

반응형할 때 꼭 필요한 내용이라 혹시 다시 작업할 때 잊어버릴까봐 포스팅합니다! 1. meta viewport 설정 2. 4개의 반응형 분기점 - 낮은 해상도의 PC, 태블릿 가로 : ~1024px - 태블릿 가로 : 768px ~ 1023px - 모바일 가로, 태블릿 : 480px ~ 767px - 모바일 : ~480px 3. 3개의 반응형 분기점 - PC : 1024px ~ - 태블릿 가로, 세로 : 768px ~ 1023px - 모바일 가로, 세로 : ~768px 4. Media Query 사용법 @media screen and (min-width:1024px) { /* Desktop */ } @media screen and (min-width:768px) and (max-width: 1023px)..

보기 쉽게 정리하려 포스팅합니다. 1. Swiper 설치 npm i swiper 2. Swiper 옵션 1) 자주 쓰는 옵션 slidesOffsetBefore // 슬라이드 시작 부분 여백 slidesOffsetAfter // 슬라이드 끝 부분 여백 slidesPerView // 한 슬라이드에 보여줄 개수 spaceBetween // 슬라이드 사이 여백 initialSlide // 시작 위치 값 centeredSlides // true 시 슬라이드가 가운데로 배치 navigation={{ // 네비게이션 적용, nextEl: '.swiper-button-next', // 다음 버튼 클래스명 prevEl: '.swiper-button-prev', // 이전 버튼 클래스명 }} pagination={..

보기 쉽게 정리하려 포스팅합니다. 1. React style /* React의 경우 */ 2. React className /* React의 경우 */ 3. React onClick import React from "react"; import "./Example.css"; class Example extends React.Component { funcExample = (idx) => { console.log(idx); } render() { return ( this.funcExample(1)}> ) } } export default Example;