letsgojieun

이번 포스팅 주제는 git 로컬저장소 생성 후 이클립스 초기 세팅부터외부 프로젝트를 clone 하는 다양한 방법 (import export)에 대한 내용을 다룰 예정이다우선 가장 처음으로 내 컴퓨터에 로컬저장소를 생성하는 방법과 이후에 이클립스의 초기 세팅방법에 대해 작성하겠다  1. 나의 컴퓨터에 로컬저장소 생성  바탕화면에 git저장소 생성하려면 우선 폴더를 만들어준다.여기선 MyGit이란 폴더를 만들었는데, 이 폴더에 바로 git을 생성하는 것이 아닌폴더 안에 새로운 폴더(여기선 acorn2020_java)를 하나 더 생성하여 여기를 git 저장소로 만들어 준다  그 후에 이클립스에서 File -> new -> Dynamic web project 클릭한다  프로젝트의 이름은 SampleProject..

조건문에서 if를 사용할 때, else if를 여러 번 반복하는 코드를 작성해야 하는 상황 또는 정해진 데이터를 처리하는 경우에도 switch문을 사용하는 것이 효율적이며 가독성 측면에서도 좋다. switch문은 각 case에 맞는 값을 찾아 해당 case 문의 코드를 실행시킨다. 조건문 switch를 사용해보자! 여기서 a 변수에는 3이라는 값이 할당되어 있다. switch문을 이용하여 a변수값과 같은 값을 갖고 있는 case를 찾은 후, case문의 코드를 출력한다. 위의 예시는 조건이 3개밖에 없어서 if 조건문을 사용해도 좋지만 만약 조건이 점점 추가되는 상황이 생길 수 있거나, 그 이상의 조건들이 있다면 switch를 사용해 주는 게 좋다. 그리고 각 console.log 밑에 brack; 는 ..

최근에 미니 프로젝트로 shopping list를 만들기 시작하였다. + 버튼을 누르면 input에서 사용자가 입력한 텍스트가 그대로 입력되는 걸 구현하는 과정에서 마우스로 버튼을 클릭하는 것처럼 엔터키를 눌러도 똑같이 적용이 될 수 있도록 코드를 작성해봤다 input에 addEventListener로 keydown 이벤트를 주었다 여기서 if문 처리를 안 하면 정말 한 글자 입력하자마자 바로 이벤트가 적용돼버리니 (말 그대로 키 누르면 바로 이벤트가 일어남) if(e.key === "Enter") 처리를 해줘야 엔터키를 눌렀을 때 input에 원하는 이벤트가 발생된다. 코드를 작성하고 테스트하는데 분명 난 '우왕'을 입력했는데 갑자기 밑에 '왕'이 같이 나오고.. '오오'를 치면 또 이벤트가 다시 발생..

자바스크립트 강의 들으면서 위치를 이용해서 함수를 만드는 상황이 많이 생긴다. 엘리먼트의 width, height 또는 위치 관련된 값을 가져오고 싶다면 getBoundingClientRect() 를 사용하여 정보를 얻어올 수 있다. Rect = element.getBoundingClientRect(); 여기서 Viewport는 사용자에게 보이는 화면이며 x,y가 (0,0)으로 좌측 상단을 기준으로 한다. getBoundingClientRect()를 Rect라는 변수에 먼저 할당하고 const x = Rect.width const y = Rect.height 으로 x,y 축 높이와 너비를 할당할 수 있다. function randomNum(min, max) { return Math.random() * (..

저번 git add, commit 했던 방법에 이어서이번 포스팅에선 local directory 에서 git remote repository 원격저장소로 보내는 방법에 대해 알아보자  우선 git commit -m 을 통해 커밋 메시지를 "add index.html"로 작성하여 commit 하였다그럼 커밋은 내 로컬 디렉토리에 저장이 된다  만약 현재 나의 branch가 master로 되어있다면git branch -M main을 통해서 현재 git의 메인브랜치 이름인 main 으로 변경한다원래 git 의 메인브랜치는 master였는데 인종차별 관련 이슈로 main으로 변경하였다 그리고 처음에 나의 로컬 디렉토리와 github 원격저장소가 연결이 안되어있으므로git remote add origin명령어를 ..

async await ? promise를 조금 더 간결하고 동기적으로 실행되는 것처럼 보이게 만들어준다 프로미스 체이닝(. then. then. then... catch)을 계속하면 코드가 난잡해질 수 있는데 여기에 간편한 API로 async await 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 작성할 수 있도록 도와준다. 즉 깔끔하게 프로미스 사용이 가능하다! syntactic sugar : 기존에 존재하던 것 위에 간편하게 사용할 수 있도록 API를 이용하는 것 (ex. class) 여기 프로미스에서 resolve, reject 아무것도 호출하지 않았기 때문에 현재 프로미스 상태는 pending으로 남아있다 (결괏값도 없음) 꼭 resolve, reject로 완료를 해줘야 한다. 프..

Promise 프로미스란? 자바스크립트서 제공하는 비동기 간편하게 처리 가능하게 하는 오브젝트이다 정해진 장시간의 기능을 수행하고 정상적으로 수행됐다면 성공의 메시지와 처리된 결괏값 전달해주고 만약 예상치 못한 문제 발생하면 에러를 전달해준다 드림코딩에서 새로운 강의를 런치할때 미리 수강생을 받기로 했다 (이메일을 통해서 미리 등록받는 시스템) 그래서 한 사람이 등록을 완료하면 몇시간, 며칠 뒤 코스 오픈하면 바로 메일로 공지가 발송된다 이는 준비되기 전 미리 등록해놔서 수업이 완료되자마자 공지를 받은 것이다. 이미 오픈 된 뒤에 다른사람이 강의 신청하면 이미 수업이 오픈되어있어서 기다릴 필요 없이 바로 메일 공지를 받고 바로 수업에 참여가 가능하다. 콜백을 쓰지않고 프로미스 오브젝트를 통해 비동기 코드..

앞전에 JSON에 대한 포스팅을 작성했지만 한번 더 정리하는 마음으로 JSON 포스팅을 작성하게 됐다 HTTP란? 우선 HTTP가 무엇인지 이해하고 넘어가자 브라우저 위에서 동작하고 있는 웹사이트나 애플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지 정의한 것이다 여기서 Hypertext는 링크뿐만 아닌 전반적인 문서와 이미지 등 모두 포함한다 AJAX란? 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술을 의미하며 대표적인 오브젝트로는 XHR이 있다 XHR은 서버에게 데이터를 요청하고 쉽게 받아올 수 있으며 비교적 최근에 생긴 fetch API를 사용하면 쉽게 받아올 수 있지만 인터넷 익스플로러에선 지원을 해주지 않는다 (사용불가) XML은 마크업 언어 중 하나인데 요즘은 X..

Join 배열에서 문자열로 변환 . join은 배열에 있는 함수를 문자열로 변환해준다 const result = fruits.join();에서 () 괄호 안에는 생략도 가능하고 구분자를 넣어주고 싶다면 ', ' '^' 등 구분자를 추가하는 것이 가능하다 Split 문자열에서 배열로 변환 위와 반대로 문자열을 배열로 변경하려면 .split을 사용한다. split엔 옵션으로 구분자와 나올 수 있는 개수를 제한하는 것이 가능한데, 만약 구분자를 넣지 않으면 옆의 과일 이모티콘이 하나 하나 구분되는 것이 아닌 전체가 한 개로 묶여서 split은 구분자를 꼭 넣는 것이 좋다. 또한 fruits.split(', ', '2')로 개수를 2로 첫 번째 두 개의 배열을 지정받아서 사과와 키위만 출력된다. Reverse ..

Object 오브젝트와 자료구조 ? 오브젝트는 여기서 토끼와 당근을 말한다. 토끼에는 귀 두개 라는 property와 뛴다, 먹는다 라는 method가 존재한다. 당근에는 주황색과 비타민이라는 property만 존재하고 행동을 하는 method는 없다 이렇게 서로 연관된 특징, 행동을 묶어놓는 것을 object 오브젝트라 한다. 여기서 토끼와 당근같은 비슷한 오브젝트를 묶는 것을 자료구조라 한다. 이렇게 비슷한 종류의 데이터를 한 곳에 모아놓는데 자바스크립트는 동적타입언어라 여러종류의 데이터를 한 곳에 같이 담는 것이 가능하다. (ex. 되도록 하지말기) Array declaration Array를 만들 때, arr1 보다 arr2가 더 흔하게 쓰이는 방법이다. (대괄호에 배열 넣어주기) 총 길이는 2로..