ALL
-
기초적인 git 명령어 git init .git 파일을 생성하여 깃으로 관리할 수 있도록 하는 작업 .git파일이 없고 git init이 안 된 상태에서는 버전관리를 할 수 없음 git clone 리포지토리URL 원격 저장소의 리포지토리를 로컬 저장소로 가져오기 git remote origin main 리포지토리URL 로컬 저장소와 원격 저장소 연동하기 git remote -v remote된 원격 저장소 확인하기 git add . git add -A 현재 로컬에 모든 변경사항을 스테이징 하기(커밋을 할 수 있는 상태로 바꾸기) git add 파일경로 파일 경로에 있는 변경사항을 스테이징 하기(커밋을 할 수 있는 상태로 바꾸기 git commit -m "커밋 메세지" 스테이징 된 변경 사항들을 커밋하기 g..
[Git] git init부터 push까지, 로컬 저장소와 원격 저장소 연결하기, init, remote, status, branch, add, commit, push 등 기본적인 명령어 알아보기기초적인 git 명령어 git init .git 파일을 생성하여 깃으로 관리할 수 있도록 하는 작업 .git파일이 없고 git init이 안 된 상태에서는 버전관리를 할 수 없음 git clone 리포지토리URL 원격 저장소의 리포지토리를 로컬 저장소로 가져오기 git remote origin main 리포지토리URL 로컬 저장소와 원격 저장소 연동하기 git remote -v remote된 원격 저장소 확인하기 git add . git add -A 현재 로컬에 모든 변경사항을 스테이징 하기(커밋을 할 수 있는 상태로 바꾸기) git add 파일경로 파일 경로에 있는 변경사항을 스테이징 하기(커밋을 할 수 있는 상태로 바꾸기 git commit -m "커밋 메세지" 스테이징 된 변경 사항들을 커밋하기 g..
2023.08.17 -
Retrofit이란? Retrofit 은 서버와 클라이언트 간 http 통신을 위한 라이브러리입니다. 안드로이드에서 통신에 사용되는 코드들을 간편하게 사용할수 있게 하여 http요청과 JSON 형식의 데이터를 사용하는데 용이합니다. 레트로핏 사용 방법 mainfest 수정하기 레트로핏을 사용할 때 네트워크를 사용해야 하므로 위 코드를 mainfest에 적어 (uses-permition만) 네트워크 연결을 할 수 있게 합니다. build.gradle implementation 'com.squareup.retrofit2:retrofit:2.9.0' // 레트로핏 implementation 'com.squareup.retrofit2:converter-gson:2.9.0' // 역직렬화할 수 있게 build.g..
[AndroidStudio][Kotlin] Retrofit, 레트로핏으로 api 사용하기Retrofit이란? Retrofit 은 서버와 클라이언트 간 http 통신을 위한 라이브러리입니다. 안드로이드에서 통신에 사용되는 코드들을 간편하게 사용할수 있게 하여 http요청과 JSON 형식의 데이터를 사용하는데 용이합니다. 레트로핏 사용 방법 mainfest 수정하기 레트로핏을 사용할 때 네트워크를 사용해야 하므로 위 코드를 mainfest에 적어 (uses-permition만) 네트워크 연결을 할 수 있게 합니다. build.gradle implementation 'com.squareup.retrofit2:retrofit:2.9.0' // 레트로핏 implementation 'com.squareup.retrofit2:converter-gson:2.9.0' // 역직렬화할 수 있게 build.g..
2023.08.16 -
JSX란? 리액트에서 컴포넌트는 자바스크립트 함수로 작성합니다. 이 함수의 반환값은 HTML 값입니다. 이처럼 자바스크립트와 HTML태그를 섞어서 사용하는 문법을 자바스크립트 XML 즉, JSX라고 합니다. JSX는 공식 자바스크립트 문법은 아니지만, 리액트 공식 문서의 예제로도 사용될 만큼 많은 리액트 개발자가 사용합니다. JSX와 자바스크립트 표현식 JSX 문법을 이용하면 HTML태그에서 자바스크립트 표현식을 직접 사용할 수 있습니다. Body.js import React from "react"; function Body(){ const name = 'react' return ( body {name} ); } export default Body; App.js import React from "reac..
[React] JSX와 자바스크립트 표현식JSX란? 리액트에서 컴포넌트는 자바스크립트 함수로 작성합니다. 이 함수의 반환값은 HTML 값입니다. 이처럼 자바스크립트와 HTML태그를 섞어서 사용하는 문법을 자바스크립트 XML 즉, JSX라고 합니다. JSX는 공식 자바스크립트 문법은 아니지만, 리액트 공식 문서의 예제로도 사용될 만큼 많은 리액트 개발자가 사용합니다. JSX와 자바스크립트 표현식 JSX 문법을 이용하면 HTML태그에서 자바스크립트 표현식을 직접 사용할 수 있습니다. Body.js import React from "react"; function Body(){ const name = 'react' return ( body {name} ); } export default Body; App.js import React from "reac..
2023.08.15 -
웹뷰는 웹 애플리케이션을 안드로이드 어플 내에서 보여주게 하는 webkit 입니다. html, css, js로 만든 웹 페이지를 마치 앱처럼 사용할 수 있습니다. WebView 추가 먼저 웹뷰를 사용하려면 인터넷에 관한 권한이 있어야 합니다. mainfest에서 인터넷 권한 설정과 clear text error를 방지하기 위해 속성을 true로 변경합니다. 레이아웃에서 웹 뷰 추가 레이아웃 파일에 웹 뷰를 추가합니다. 액티비티 파일에서 webview에서 보여줄 url을 설정합니다. val webView = findViewById(R.id.webview) webView.webViewClient = WebViewClient() webView.loadUrl("https://hulrud.tistory.com/"..
[AndroidStudio][Kotlin] WebView로 웹 페이지 안드로이드 앱으로 빌드하기웹뷰는 웹 애플리케이션을 안드로이드 어플 내에서 보여주게 하는 webkit 입니다. html, css, js로 만든 웹 페이지를 마치 앱처럼 사용할 수 있습니다. WebView 추가 먼저 웹뷰를 사용하려면 인터넷에 관한 권한이 있어야 합니다. mainfest에서 인터넷 권한 설정과 clear text error를 방지하기 위해 속성을 true로 변경합니다. 레이아웃에서 웹 뷰 추가 레이아웃 파일에 웹 뷰를 추가합니다. 액티비티 파일에서 webview에서 보여줄 url을 설정합니다. val webView = findViewById(R.id.webview) webView.webViewClient = WebViewClient() webView.loadUrl("https://hulrud.tistory.com/"..
2023.08.15 -
run 했을 때 다음과 같은 에러가 난다면 mainfest에서 네트워크 설정을 해주셔야 합니다! net::ERROR_CACHE_MISS 위 에러는 웹 뷰 url을 로드하는데 네트워크 설정이 되어있지 않아 발생하는 오류입니다.
[AndroidStudio][Kotlin] 웹 뷰 에러 net::ERROR_CACHE_MISS,run 했을 때 다음과 같은 에러가 난다면 mainfest에서 네트워크 설정을 해주셔야 합니다! net::ERROR_CACHE_MISS 위 에러는 웹 뷰 url을 로드하는데 네트워크 설정이 되어있지 않아 발생하는 오류입니다.
2023.08.13 -
안드로이드를 하다 보면 EditText의 값이 변경되었을 때 이벤트를 추가하고 싶은 경우가 있습니다. 이때 edittext의 addTextChangedListner를 사용하면 됩니다. addTextChangedListner val editText = findViewById(R.id.edittext) editText.addTextChangedListener(object : TextWatcher{ override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) { TODO("Not yet implemented") } override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3:..
[AndroidStudio][Kotlin] EditText의 addTextChangedListener, TextWatcher, TextWatcherAdapter안드로이드를 하다 보면 EditText의 값이 변경되었을 때 이벤트를 추가하고 싶은 경우가 있습니다. 이때 edittext의 addTextChangedListner를 사용하면 됩니다. addTextChangedListner val editText = findViewById(R.id.edittext) editText.addTextChangedListener(object : TextWatcher{ override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) { TODO("Not yet implemented") } override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3:..
2023.08.13 -
기존 리포지토리 모두 commit, push 해주기 바꾸기 전 누락된 수정 사항이 없도록 리포지토리를 업데이트 해줍니다. git pull origin git add . git commit -m "clean" git push origin 기존 remote된 레포지토리 제거하기 git remote remove origin 새로운 레포지토리 추가하기 git remote add 레포지토리url
[Git] 연결된 리포지토리 변경하는 방법기존 리포지토리 모두 commit, push 해주기 바꾸기 전 누락된 수정 사항이 없도록 리포지토리를 업데이트 해줍니다. git pull origin git add . git commit -m "clean" git push origin 기존 remote된 레포지토리 제거하기 git remote remove origin 새로운 레포지토리 추가하기 git remote add 레포지토리url
2023.08.11 -
배경 스프링으로 API를 만들고, 로컬 서버를 열어서 레트로핏으로 get 요청을 보내보려고 했습니다. 근데 제대로 요청을 보내지 못하고 onFailure()가... t.toString() 로 무슨 에러인지 알아보았습니다. UnknownServiceException: CLEARTEXT communication to 10.0.2.2 not permitted by network security policy security 설정 챗gpt와 구글링을 통해 저 security 설정 문제임을 알게되었습니다. UnknownServiceException: CLEARTEXT communication to 10.0.2.2 not permitted by network security policy 위 에러 메세지는 네트워크 보..
[AndroidStudio][Kotlin] 안드로이드 스튜디오 로컬 서버 연결 security 설정, localhost가 안되는 이유, UnknownServiceException배경 스프링으로 API를 만들고, 로컬 서버를 열어서 레트로핏으로 get 요청을 보내보려고 했습니다. 근데 제대로 요청을 보내지 못하고 onFailure()가... t.toString() 로 무슨 에러인지 알아보았습니다. UnknownServiceException: CLEARTEXT communication to 10.0.2.2 not permitted by network security policy security 설정 챗gpt와 구글링을 통해 저 security 설정 문제임을 알게되었습니다. UnknownServiceException: CLEARTEXT communication to 10.0.2.2 not permitted by network security policy 위 에러 메세지는 네트워크 보..
2023.08.08 -
Readme 만들기 깃허브 프로필을 꾸미는 Readme는 하나의 repository 입니다 new를 눌러 repository를 생성해주세요 repository name은 본인의 아이디로 해주세요! 저는 이미 hyeg0121 이라는 Readme repository를 만들었기 때문에 경고가 나옵니다 그 후에 Add a READMEFILE 에 체크하고 레포지토리를 생성합니다 레포지토리에 들어가보면 생성이 된것을 확인 할 수 있어요 연필모양을 클릭하여 수정에 들어가면 이런 코드가 보여요! 이 코드를 수정하면서 Readme를 꾸며나가는 겁니다 이 코드를 꾸밀 때 markdown 언어 혹은 HTML을 사용할 수 있는데 저는 둘 다 사용하여 Readme를 꾸며보겠습니다 Header & Footer https://gi..
[Github] 깃허브 리드미 꾸미기 총정리Readme 만들기 깃허브 프로필을 꾸미는 Readme는 하나의 repository 입니다 new를 눌러 repository를 생성해주세요 repository name은 본인의 아이디로 해주세요! 저는 이미 hyeg0121 이라는 Readme repository를 만들었기 때문에 경고가 나옵니다 그 후에 Add a READMEFILE 에 체크하고 레포지토리를 생성합니다 레포지토리에 들어가보면 생성이 된것을 확인 할 수 있어요 연필모양을 클릭하여 수정에 들어가면 이런 코드가 보여요! 이 코드를 수정하면서 Readme를 꾸며나가는 겁니다 이 코드를 꾸밀 때 markdown 언어 혹은 HTML을 사용할 수 있는데 저는 둘 다 사용하여 Readme를 꾸며보겠습니다 Header & Footer https://gi..
2023.07.29 -
async 함수 async와 await이라는 문법을 사용하면 프로미스를 더 편하게 사용할 수 있습니다. async 는 function 앞에 위치합니다. async function fnc(){ return 0; } 함수 앞에 async를 붙이면 그 함수는 항상 프로미스를 반환합니다. async function fnc() { return 'hello'; } fnc().then(alert); 명시적으로도 프로미를 반환할 수 있습니다. async function fnc() { return Promise.resolve(1); } fnc().then(alert); 위 두 개의 코드의 결과는 같습니다. 즉, async가 붙은 함수는 반드시 프로미스를 반환해 프로미스가 아닌 returun값은 프로미로 감싸 반환합니다...
[JavaScript] async와 awaitasync 함수 async와 await이라는 문법을 사용하면 프로미스를 더 편하게 사용할 수 있습니다. async 는 function 앞에 위치합니다. async function fnc(){ return 0; } 함수 앞에 async를 붙이면 그 함수는 항상 프로미스를 반환합니다. async function fnc() { return 'hello'; } fnc().then(alert); 명시적으로도 프로미를 반환할 수 있습니다. async function fnc() { return Promise.resolve(1); } fnc().then(alert); 위 두 개의 코드의 결과는 같습니다. 즉, async가 붙은 함수는 반드시 프로미스를 반환해 프로미스가 아닌 returun값은 프로미로 감싸 반환합니다...
2023.07.29 -
프로미스 객체란? 프로미스(Promise) 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 즉 비동기 함수의 실행 상태에 따라 각각의 함수를 호출하여 작업의 결과를 나타내는 것입니다. 예시 비동기적으로 이미지파일을 생성하는 createImageFile() 이라는 함수가 있을 때, 이 함수의 파라미터로는 (1)이미지 파일의 이름, (2)성공 시 호출할 함수, (3)실패 시 호출할 함수가 있습니다. function createImageFile(fileName, successCallBack, failureCallBack){ // 이미지 파일 생성중 if(success) successCallBack(fileName); else failureCallBack(fileName); } 프로미스가 나타..
[JavaScript] Promise 객체 기본 개념프로미스 객체란? 프로미스(Promise) 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 즉 비동기 함수의 실행 상태에 따라 각각의 함수를 호출하여 작업의 결과를 나타내는 것입니다. 예시 비동기적으로 이미지파일을 생성하는 createImageFile() 이라는 함수가 있을 때, 이 함수의 파라미터로는 (1)이미지 파일의 이름, (2)성공 시 호출할 함수, (3)실패 시 호출할 함수가 있습니다. function createImageFile(fileName, successCallBack, failureCallBack){ // 이미지 파일 생성중 if(success) successCallBack(fileName); else failureCallBack(fileName); } 프로미스가 나타..
2023.07.29 -
node, npm 버전 확인하기 cmd에 node -v 와 npm --version 을 입력하여 node와 npm이 설치되어 있는지 확인합니다. yarn install npm install -g yarn 을 입력하여 yarn 을 설치하고 yarn --version 으로 버전을 확인하여 잘 설치 되었는지 확인합니다. yarn 으로 react install yarn global add create-react-app 으로 create-react-app 을 설치합니다. 그 후 create-react-app 프로젝트명 을 입력하여 해당 프로젝트에 리액트 앱을 생성합니다. cd로 생성한 디렉토리로 이동 후 yarn start를 입력하면 생성한 리액트 앱이 실행됩니다! react-router-dom 설치 yarn a..
[React] npm 으로 yarn 설치 & yarn으로 react 설치node, npm 버전 확인하기 cmd에 node -v 와 npm --version 을 입력하여 node와 npm이 설치되어 있는지 확인합니다. yarn install npm install -g yarn 을 입력하여 yarn 을 설치하고 yarn --version 으로 버전을 확인하여 잘 설치 되었는지 확인합니다. yarn 으로 react install yarn global add create-react-app 으로 create-react-app 을 설치합니다. 그 후 create-react-app 프로젝트명 을 입력하여 해당 프로젝트에 리액트 앱을 생성합니다. cd로 생성한 디렉토리로 이동 후 yarn start를 입력하면 생성한 리액트 앱이 실행됩니다! react-router-dom 설치 yarn a..
2023.07.28 -
이 글은 node.js 공식 문서를 참고하여 작성되었습니다. Node.js란? Node.js란 또 하나의 자바스크립트의 런타임입니다. Node.js 가 없을 때에는 자바스크립트의 유일한 런타임은 웹 브라우저 입니다. 하지만 Node.js 로 인하여 독립적인 런타임이 생기게 되었고 어떤 환경에서도 자바 스크립트를 실행할 수 있게 되었습니다. Node.js 설치하기 https://nodejs.org/ko 먼저 위 사이트에서 좌측 버튼을 클릭하여 node.js를 다운로드 해주세요. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 셋업 위자드를 실행 시키시고 Next를 누르다보면 필요한 tool을..
[Node.js] Node.js 설치하고 자바스크립트 파일 실행하기이 글은 node.js 공식 문서를 참고하여 작성되었습니다. Node.js란? Node.js란 또 하나의 자바스크립트의 런타임입니다. Node.js 가 없을 때에는 자바스크립트의 유일한 런타임은 웹 브라우저 입니다. 하지만 Node.js 로 인하여 독립적인 런타임이 생기게 되었고 어떤 환경에서도 자바 스크립트를 실행할 수 있게 되었습니다. Node.js 설치하기 https://nodejs.org/ko 먼저 위 사이트에서 좌측 버튼을 클릭하여 node.js를 다운로드 해주세요. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 셋업 위자드를 실행 시키시고 Next를 누르다보면 필요한 tool을..
2023.07.27 -
netstat -a -o 현재 사용하고 있는 포트를 확입합니다. kill하고자 하는 포트의 pid를 확인하셨다면 ctrl + c 를 눌러 검색을 종료합니다. taskkill /f /pid 아까 찾은 pid taskkill /f /pid 아까 찾은 pid 번호 위 명령을 통해 사용 중인 포트를 kill할 수 있습니다!
[CMD 명령 프롬프트] 사용중인 포트 kill 하기netstat -a -o 현재 사용하고 있는 포트를 확입합니다. kill하고자 하는 포트의 pid를 확인하셨다면 ctrl + c 를 눌러 검색을 종료합니다. taskkill /f /pid 아까 찾은 pid taskkill /f /pid 아까 찾은 pid 번호 위 명령을 통해 사용 중인 포트를 kill할 수 있습니다!
2023.07.23 -
발생 상황 Elastic Beanstalk로 서버를 배포하는 과정에서 에러 메세지도 없는데 502 에러가 난 상황 원인 파악 환경의 서버 포트를 지정하지 않아 생겼다고 판단했다. 해결 방법 구성 클릭 맨 밑 업데이트, 모니터링 및 로깅에서 [편집] 위와 같이 환경 속성 추가 저는 위 방법으로 바로 문제를 해결했습니다! 짧은 글이지만 도움이 되었길 바랍니다.
[AWS] Elastic Beanstalk로 서버 배포 했을 때 502 Bad Gateway 해결하기발생 상황 Elastic Beanstalk로 서버를 배포하는 과정에서 에러 메세지도 없는데 502 에러가 난 상황 원인 파악 환경의 서버 포트를 지정하지 않아 생겼다고 판단했다. 해결 방법 구성 클릭 맨 밑 업데이트, 모니터링 및 로깅에서 [편집] 위와 같이 환경 속성 추가 저는 위 방법으로 바로 문제를 해결했습니다! 짧은 글이지만 도움이 되었길 바랍니다.
2023.07.23 -
동기와 비동기 동기 (Synchronous) 자바스크립트에서 코드는 기본적으로 작성한 순서에 따라 위에서부터 아래로 순차적으로 실행되는데, 이처럼 순차적으로 코드를 실행하는 것을 동기라고 합니다. console.log("1번"); console.log("2번"); console.log("3번"); 위 코드를 실행하면 결과는 1번 2번 3번 이 됩니다. 마트에서 계산을 하기위해 카운터에서 기다릴 때를 생각해보세요. 앞 사람의 계산이 끝나야 뒤의 사람의 계산이 시작됩니다. 동기도 이처럼 앞의 작업을 완료가 되어야 다음 작업을 실행할 수 있습니다. 자바 스크립트는 기본적으로 동기적으로 동작합니다. 동기적으로 동작하는 코드는 작성된 수서에 따라 작업이 진행되므로 작업의 흐름을 파악하기 쉽습니다. 그런데, 위와 ..
[JavaScript] 비동기 처리와 콜백 함수동기와 비동기 동기 (Synchronous) 자바스크립트에서 코드는 기본적으로 작성한 순서에 따라 위에서부터 아래로 순차적으로 실행되는데, 이처럼 순차적으로 코드를 실행하는 것을 동기라고 합니다. console.log("1번"); console.log("2번"); console.log("3번"); 위 코드를 실행하면 결과는 1번 2번 3번 이 됩니다. 마트에서 계산을 하기위해 카운터에서 기다릴 때를 생각해보세요. 앞 사람의 계산이 끝나야 뒤의 사람의 계산이 시작됩니다. 동기도 이처럼 앞의 작업을 완료가 되어야 다음 작업을 실행할 수 있습니다. 자바 스크립트는 기본적으로 동기적으로 동작합니다. 동기적으로 동작하는 코드는 작성된 수서에 따라 작업이 진행되므로 작업의 흐름을 파악하기 쉽습니다. 그런데, 위와 ..
2023.07.19