분류 전체보기
-
Linting & Testing ... @Today I Learned 2020. 6. 10. 00:07
오늘 접한 용어들이다. 아직 생소하지만 계속 쓰다 보면 익숙해지겠지? linting : 잠재적인 에러를 방지하기 위해 코드를 분석하는 프로그램을 실행하는 일련의 과정을 말한다. lint(또는 linter) : linting을 지원하는 도구다. lint를 통해 내 코드가 스타일 가이드를 잘 지키고 있는지 확인하고, 개선할 수 있다. 오늘 사용한 것은 ESlint다. ESLint가 검사해주는 것은 크게 포맷팅, 코드 품질이다. 포맷팅은 들여 쓰기와 같은 스타일을 검사해주는 것이다. 코드 품질 검사는 변수를 선언해놓고 사용하지 않은 것이 있거나, 세미콜론을 빠뜨렸다거나 하는 문제들을 찾아준다. Testing : 내가 작성한 코드가 의도한대로 동작하는지, 또는 에러는 없는지 확인하는 것. 오늘은 페이스북에서 만..
-
git workflowToday I Learned 2020. 6. 8. 21:39
코드스테이츠 이머시브 1일차다. 오늘은 git을 활용해서 다른 사람과 협업하는 과정의 흐름을 익혔다. 1. 공동으로 작업하고자 하는 파일의 원본 레포에서 fork해서 나의 레포로 복사해오고, clone해서 내 local로 가져온다. 2. 터미널에서 git remote add 를 입력해서 서로의 레포를 연결한다. 3. 코드를 입력한 뒤 commit을 하고, 내 레포로 push한다. 4. 페어가 내가 작업한 파일을 받아와서 작업하려면, git pull 을 입력하면 페어의 local로 가져와서 작업할 수 있다.
-
함수 이해하기JavaScript 2020. 6. 4. 11:40
1. 함수를 변수에 담을 수 있다. function testFn(){ return 'testFn called'; } let fnA = testFn; 변수 fnA에는 testFn함수가 담긴다. 이 변수를 활용해서 testFn함수를 실행시키려면 일반적으로 함수를 실행시킬 때처럼 소괄호를 붙여주면 된다. 콘솔 창에 입력하면 결과는 아래와 같다. fnA(); // "testFn called" 함수의 '실행'을 변수에 담는 것과 구분해야한다. 함수의 실행을 변수에 담을 경우, 만약 그 함수가 어떤 값을 return 하도록 선언되었다면, 그 함수의 리턴 값이 변수에 담긴다. let fnB = testFn(); fnB; // "testFn called" 2. 함수 안에 함수가 있을 수 있다. 함수 안에서 함수를 만들..
-
동기, 비동기JavaScript 2020. 5. 27. 21:39
동기, 비동기의 개념을 알기 위해서는 먼저 콜백함수에 대한 이해가 필요하다. 콜백함수 - 아래에서 보면, 다른 함수(A)의 전달인자로 넘겨주는 함수(B) 즉, B가 A의 콜백함수다. function B(){ console.log('called at the back!'); } function A(callback){ callback(); } A(B); 그런데 이때 함수 A는 콜백함수 B를 필요에 따라 즉시 실행할 수도 있고(동기적), 나중에 실행할 수도(비동기적) 있다. - 동기(Synchronous) : 요청에 대한 결과가 동시에 일어난다 - 비동기(Asynchronous) : 요청에 대한 결과가 동시에 일어나지 않는다 아래는 동기적인 실행에 대한 예시 function waitSync(ms){ var st..
-
TIL 20.05.22Today I Learned 2020. 5. 22. 23:46
유효성 검사 예제를 통해 DOM을 맛보았다. 자바스크립트와 HTML이 연결되어 상호작용하는 아름다운 이야기......이다. 그리고 목업으로만 만들어둔 twittler페이지가 실제로 작동하도록 js파일을 연결해서 함수를 짜보았다. 처음이라 아주 간단한 기능을 구현하는데도 한참 헤멨다. 노트북이 열 받고 팬이 돌아가는 것처럼 나도 열받고 물을 마시고... (세상만물이 뭔가 애를 쓰면 열이 나나보다...)아무튼, 한참 헤메다 내가 원하는 것들이 구현되니 정말 기뻤다! 오늘의 코딩일기 끝.
-
DOM을 활용한 간단한 유효성 검사 예제JavaScript 2020. 5. 22. 23:35
DOM(Document Object Model) : JavaScript를 이용해서 엘리먼트의 속성값을 얻어내거나 변경하는 방법 아이디, 비밀번호를 입력해 회원가입 버튼을 누르면 피드백을 주는 페이지를 만들어보자. (*여기서의 목표는 단순히 버튼, 텍스트 입력 등 사용자의 입력을 받을 수 있는 html태그를 만들고 javaScript를 이용해 값을 얻어내는 연습을 위함이다. 기능적인 면은 고려하지 않았다.) html파일의 body태그 안에 아래와 같이 코딩해보았다. ID: 비밀번호: 비밀번호 확인: 회원가입 이제 javaScript를 이용해 사용자가 입력한 값을 얻어내고, 피드백을 줄 수 있게 해보자. let userID = document.querySelector('#userID'); let pw = d..
-
TIL 20.05.21Today I Learned 2020. 5. 21. 22:34
블로그 이름을 부트캠프 생존일기로 바꿔야할까보다... 어제, 오늘 총 2일간 html, css, dom을 다뤘다. 이게 이틀만에 할 수 있는 공부가 아닌게 분명한데, 코스에서 요구하는 지금 단계에서의 수준은 '어쨌든 당장 필요한 것만이라도 알아내서 써먹어보는 것'이니... 구글링과 강의시청 등등 할 수 있는 모든 수단을 동원해서 따라가려고 하고 있다.(따라가고 있는거 맞나?) 그래서 오늘은 페어와 함께 html, css를 활용해서 트위터와 비슷한 '트위틀러' 페이지를 꾸며봤다. 일단 기능은 생각 안하고 목업(실물모형)을 구현하는 과제였다. 어찌어찌 코드를 우겨넣어서라도 눈에 보이는 웹페이지를 보고 있자니, 비록 아름다운 코드는 아니라도 나름 뿌듯했다. 프론트엔드는 잘만 하면 정말 재밌겠다는 생각이 들었다..
-
원시 타입과 참조 타입JavaScript 2020. 5. 19. 20:58
자바스크립트는 원시 타입(primitive type)과 참조 타입(reference type)이라는 두 가지 자료형을 제공한다. 원시 타입 : 숫자(Number), 불린(Boolean), null, undefined, 문자열(String) 참조 타입 : 객체(Object), 배열(Array), 함수(function) 원시 타입 데이터는 변수에 할당할 때 원시 데이터 값이 그대로 담긴다. 변수를 복사하게 될 경우 그 변수에 담고 있는 원시 데이터 값이 복사된다. let x = 10;// 원시 타입인 숫자 10을 x라는 변수에 담았다. console.log(x)// 10 let y = x; x = 7; console.log(y)// 10 이와 달리, 참조 타입 값은 변수에 할당하게 될 경우 데이터 값이 직접..