Lightsail 로컬 터미널 및 vscode SSH 인스턴스 연결
Lightsail SSH 키를 활용하면 원격지로 SSH 접속이 가능하며, 보다 편리한 작업환경을 만들 수 있다. 로컬 터미널을 통한 SSH 연결 방법과 vscode SSH 인스턴스 연결 방법에 대해서 알아보자. Lightsail 인스턴스 관리 생성한 인스턴스 플랜 관리 페이지로 이동하면, [Connect] 탭 하단에 '계정페이지' 라는 링크로 이동하자. SSH키 다운로드 SSH키 탭의 기본키를 다운로드 한다. SSH 접속 다운로드 받은 파일을 다음과 같은 명령어를 통해 SSH 접속할 수 있다. ssh -i LightsailDefaultKey-ap-northeast-2.pem [username]@[ 고정IP ] * username 인스턴스의 사용자 이름으로 변경하여 접속 가능하다. vscode config..
Laravel Error: Please provide a valid cache path 에러 해결 방법
Laravel 프로젝트에서 다음과 같은 명령어를 실행했을때, cache path 오류가 발생하였다면 storage 디렉토리 구조를 확인하여 해결 가능하다. php artisan ~ composer install composer update storage 디렉토리 구조 storage 디렉토리 구조를 아래와 같이 설정되어 있어야 한다. cache path 오류가 발생했다면, 필요한 디렉토리가 생성되어있지 않은것이기 때문에 임의로 생성하여 구조를 맞춰주면 해결된다.
php mongo-php-driver 설치 및 모듈 설정 방법
php 프로젝트에서 mongo db 를 사용해야할 경우, mongo-php-driver 를 설치하여 사용할 수 있다. mongo-php-driver 깃헙을 통한 설치 방법과 php 모듈 설정 방법에 대해서 알아보자. Composer MongoDB > composer require jenssegers/mongodb:"^3.7" -- pecl 문제로 소스설치 진행으로 설치. php mongodb extension. git clone > git clone https://github.com/mongodb/mongo-php-driver.git > cd mongo-php-driver > git submodule update --init > phpize > ./configure > make all > make ins..
Centos Docker config.json 경로 및 디렉토리 구조
Docker Config.json 경로 Centos 기준 Docker config.json 경로 및 디렉토리 구조는 아래와 같다. Containers 디렉토리를 보면, 생성된 CONTAINER ID별로 디렉토리가 생성되며, 하위에 Container에 설정된 config.json 파일을 확인할 수 있다. config.json 경로 /var/lib/docker/containers/[CONTAINER ID]/config.json Docker Config.json 수정 프록시 서버 운영을 위해 이미 사용중인 CONTAINER 의 환경변수를 추가해야 했다. 우선 원본 config.json 파일을 백업한 후, 환경변수를 수정하여 CONTAINER 를 구동하여 테스트를 진행하였다. Docker Container 중지..
mac hosts 경로 및 활용 방법
로컬 개발을 진행하다 보면, hosts 설정을 변경해야하는 경우가 있다. 맥OS의 경우 /private/etc/ 경로에 hosts 파일이 있으며, 해당 파일설정을 통한 활용이 가능하다. /private/etc/hosts hosts 경로는 /private/etc/hosts 이며, 아래 명령어를 통해 수정하여 활용 가능합니다. sudo nano /private/etc/hosts 아래와 같이 localhost 에 임의 도메인을 설정하여, 활용 가능합니다.
ReactJS Tailwind css 사용 방법
react 프로젝트에 Tailwind css 설치하는 방법과 설정 방법에 대해서 알아보자. 기본 디렉토리 구조 파악이 필요하며, CRACO와 PostCss 에 대한 기본 개념을 숙지하도록 하자. 디렉토리 구조 ReactJS 프로젝트 기준으로 tailwind css 를 설치하면, 기본 디렉토리 구조는 아래와 같다. Tailwindcss설치 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 CRACO 설치 npm install @craco/craco Create React App Configuration Override 의 약어로 create-react-app을 쉽고 간편하게 설정하기 위해 구성한 레이어..
ReactJS useState를 이용한 toggle 구현 방법
소스 코드 useState를 이용하여, toggle 기능을 쉽게 구현할 수 있으니 참고하자. 핵심은 onClickGnb 호출 시, 이전 상태를 삼항연산자로 처리하면 쉽게 구현할 수 있다. const [gnbStatus, setGnbStatus] = useState(false); const onClickGnb = (e) => { setGnbStatus(prevStatus => prevStatus ? false : true); }; const GnbMenu = () => ( 메뉴1 메뉴2 메뉴3 ); ... 생략 ... {/* Gnb Menu */} { gnbStatus ? : null} 출력 결과 gnb 버튼을 클릭하여 정상적으로 작동하는지 체크해보자.