공부하자 공부 공부하자 공부

오늘은 기술면접 연습을 했는데 '이거 발표도 못하면 면접도 못본다!' 라는 생각으로 발표에 참여를 했다. 무척 떨렸지만 이전처럼 말에서 떨림이 줄어든 것 처럼 보였다. 스터디의 힘이라는 생각을 했다. 우리 스터디는 원하는 주제로 강의하는 형식이라 도움이 많이 되었다! 칭찬을 받아서 더욱 좋았다! 그리고 KPT회고 방법을 사용해 section1을 회고하면서 우리 기수 노션에 적었다. 동기들이 적은 회고를 보고 응원하는 시간도 있었는데 생각보다 많은 댓글이 달리면서 기분이 좋았다. 동기들 중 아직 모르는 분들이 많아 더 알아가야겠다는 생각을 했다. 1. 기술 면접 연습 답변을 두괄식으로 답변하고 내용 설명은 뒤에서 한다! 일반적으로 CSS를 불러오기 위해 요소를 요소의 자식 요소로 하고, JavaScript..

어제와 오늘 개인프로젝트를 과제로 내주셨다. 값이 객체로 된 배열을 이용하여 질문하는 페이지를 만드는 것이었는데 생각보다 쉽지 않았다. 한 개의 난관을 5시간이나 생각했던것 같다. 하면서 로컬스토리지에 저장하는것도 배웠는데 페이지네이션이 정말 이해가 안갔다. 찾아보고 손으로 직접 쳐가며 해봤지만 이해가 안갔다. 블로그에 다시 정리하면서 이해해보려고 한다! 페이지네이션... 1. HTML로 틀 만들기 페이지를 나타내는 숫자를 가장 아래 나타내기 위해 main태그 안 마지막에 태그를 추가했다. button 태그들은 누르면 페이지가 업되거나 다운되는 버튼으로 사용하고 div태그 안에 페이지 번호를 나열하려고 한다. 2. div 태그 안에 나열할 button 만드는 함수 만들기 const pageNum ..

오늘은 로그인 페이지 꾸미기를 했다. 저번 CSS때 동기분들께 엄청난 히트를 쳤기 때문에 약간.... 아니! 많이 부담이 되었다...ㅋㅋ이번에도 육각형으로 꾸며야하나....? 하다 했던걸 또하면 분명 질릴거다 해서 새롭게 해보기로 했다. 이미 이벤트핸들러를 배웠겠다 클릭시 모든 속성들이 날아오게 하자! 라는 상상을 하고 시작을 했다. '첫 난관은 어떻게 클릭하면 날아오게 하지?'였다. 당시 onkeyup만 배운 상태였다. 아! onclick을 써볼까? 해서 onkeyup랑 비슷하게 코드를 짜서 넣었더니 실행이 안됐다....그래서 찾아봤다. 어떻게 쓰는거냐 너! 누군가의 블로그 중 HTML에 사용한는 것을 배웠다. 막 setAttribute를 검색해봤어서 '음 ~ 다른 속성이구나?' 생각했다. 사용 방법은..

오늘은 자바스크립트를 이용하여 html을 조작하는 DOM을 배웠다. 처음에는 어떻게 연결되는지 이해가 잘 안갔지만 실습을 하면서 이해를 했다. 그리고 이벤트 핸들러를 배웠는 아주 재미있었다! 1. DOM으로 새로운 요소 만들기 let one = document.createElement('div') div element를 만들어 변수에 할당해 줬다. 아직 트리 구조에 연결하지 않았기 때문에 어떤한 변화도 나타나지 않는다. 2. 만든 요소를 트리구조에 연결하기 document.body.append(one) document.body로 위치를 잡아주고 append를 사용하여 body안으로 넣어준다. 하지만 그래도 아직 보이지 않는다.(개발자 도구에선 확인가능) 3. 자바스크립트에서 HTML Element 조회하..

어제부터 페어님과 JavaScript Koans의 자료를 풀었다. 갈수록 막히는 부분이 생기고 아에 모르는 부분도 나와서 같이 찾아보며 진행을 했다. 상당히 좋은자료여서 두고두고 볼것 같다. 개인적으로 어려웠거나 새로 안 내용을 정리하겠다! 1. 타입 it('expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.', function () { expect(123 - '1').to.equal(122); }); 숫자에 문자열 - 가 들어간건 처음봤다. 처음에는 +처럼 숫자가 문자열이 될줄 알았지만 수로 계산되었다. 2. Scope function defaultParameter(num = 5) { return num; } expect(defaultParameter(10)).t..

오늘은 클로저 함수, spread, rest를 배웠다. 페어활동도 했다. 이번 페어 활동은 둘이 으쌰으쌰하며 해서 너무나 좋았다. 클로저 함수는 이해가 된것 같으면서도....안된것 같고..... 이상하다...? 1. 클로저 클로저 함수는 외부 함수의 변수를 사용하는 내부 함수를 말한다. (또는 외부 함수의 변수를 기억하는 함수, 함수를 리턴하는 함수) //화살표 함수 const add = x => y => (x + y); let add1 = add(7); // x에 7이라는 값을 넣은 함수 add1(6); // x에 7이라는 값을 넣은 함수의 y에 6이라는 값을 넣음 //output : 13 //함수 표현식 const add = function(x) { // 외부 함수 return function(y) ..

오늘은 원시자료형과 참조자료형의 차이에 대해 배우고 스코프를 배우게 되었다. 어제 열심히 var, let, const의 차이를 스터디에서 강의하려고 만들고 나서 시간표를 봤더니 오늘 내용이 90% 겹쳤다. 약간 망연자실 했지만 어쩌겠나 복습하는겸 해야지! 원시자료형과 참조자료형은 수업 때 블로깅을 했으니 그 다음 스코프에 대한 내용을 블로깅 해야겠다. 스코프 1. 스코프 란? 스코프는 변수가 가지는 유효범위이다. 스코프에는 전역 스코프와 지역 스코프가 있다. let abc = 100; // 전역 스코프에 선언한 변수 if(true) { let bbc = 10; // 지역 스코프에 선언한 변수 } 전역 스코프에 변수를 선언하게 되면 변수의 유효범위는 전체 영역이 된다. 지역 스코프에 변수를 선언하게 되면 ..

1. 원시자료형 원시자료형은 객체를 제외한 js의 언어 타입이며 7가지의 타입이 있다. 1) String(문자열) - 텍스트 데이터를 나타낼때 쓰인다. 2) Number(숫자형) - 기본적인 숫자를 나타낼때 쓰인다. 3) BigInt(숫자형) - Number의 안전 한계를 넘어서는 큰 정수를 안전하게 저장하고 연산할때 쓰인다. 4) Boolean(불리언) - 논리 요소를 나타내며 참과 거짓을 나타낼때 쓰인다. 5) Null(널) - 의도적으로 할당된 값을 빈 값으로 만들고 싶을때 쓰인다. 6) Undefined - 값을 할당하지 않은 변수는 undefined의 값을 가진다. 7) Symbol - 고유하고 변하지 않는 값을 말한다. 원시자료형은 데이터를 저장하는 데이터 박스에 하나의 데이터만 담긴다. 이유..