FE

KPT회고로 작성해보았다. [목표] 코드스테이츠 수료 후 2개월 안에 복지가 좋은 회사에서 FE개발자로 일하기 내가 만들어 보고 싶은 웹사이트 개발해서 배포해보기 [Keep & Problem] Keep Problem 오전 8시 전에 일어나기 위해 1시전에는 잠든 것 금요일 저녁에 공부하지 못한 것 블로깅 주에 1번 이상은 했던 것 블로그 글 하나 작성하는데 시간이 너무 오래 걸리는 것 수업이 끝난 후 운동 30분 이상 한 것 허리가 아파서 오래 앉아있지 못한 거 북마크만 해두고 자세히 보지 않아 쌓인 레퍼런스 [Try] 1순위 2순위 3순위 오전 8시 전에 일어나기 위해 1시전에 잠들기 주말로 미루지 않고, 자습할 때 그 날 못한 부분 최대한 해보기 새로운 주제 학습보다 복습하기!! 먼저 노션에 기록하고..

JavaScript Koans 1. expect(테스트하는 값).기대하는조건 > .to.be.true > .to.equal() : 엄격한 검사 (===) 2. 타입을 혼동해서 연산하지 않는 코딩을 하자 > 변칙이 너무 많다 3. const 재할당 금지 const로 선언된 배열의 경우 새로운 요소를 추가하거나 삭제할 수 있고, 객체도 마찬가지로 속성을 추가하거나 삭제할 수 있다 > ? 주소가 할당된거라 그런게 아닐까? > const 사용 이유는 재할당이 안된다는 점때문에 재할당으로 인한 예상치 못한 오류를 방지할 수 있다는 장점이 있다. 4. 함수 호이스팅 > 함수가 작성된 곳 위쪽에서 함수를 호출하여도 함수가 작동된다. , 선언만 호이스팅 대상이며 이때 var 선언은 초기화를 한다 undefined로 >..

[스코프] scope > 범위를 나타내는 말, 변수 접근 범위 > 변수에는 접근할 수 있는 범위가 존재 밖에서 선언한 스코프 ➡️ 안에서 사용 가능 안에서 선언한 스코프 ➡️ 밖에서 사용 불가능 = 안쪽 스코프에서 바깥쪽 스코프는 접근이 가능하나 반대는 불가능하다 > 스코프는 중첩이 가능 가장 바깥쪽 스코프 ➡️ 전역 스코프(Global scope) 그 외 ➡️ 지역 스코프(Local scope) 전역변수 vs 지역변수 > 지역변수는 전역변수보다 우선순위를 가짐 let age = 20; function showAge(){ let age = 40; console.log(age); // 2번으로 나옴 } console.log(age); // 1번으로 나옴 showAge(); // ->2번으로 나옴 conso..

javascript [원시자료형(primitive data type)] 1. number 2. string 3. boolean 4. undefined 5. null 6. bignit 7. symbol > bignit : Number 값이 안정적으로 나타낼 수 있는 최대치인 2^53-1 보다 큰 정수를 표현할 수 있는 내장객체 (출처 : mdn) > symbol : ES6에서 새롭게 추가된 타입, 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용, 유일한 식별자(unique identifier)를 만들고 싶을 때 사용(출처 : javascript.info) [참조자료형(reference data type)] 1. 배열(array) 2. 객체(object) 3. 함수(function)

이번에는 배운 html과 css 로 계산기 목업을 만들고, js로 코드를 짜?(빈칸넣기) 계산기 구현을 하는 시간이었다. 이번 시간은 눈으로 확인할 수 있고, 무에서 유를 창조하는 느낌 + 서로 찾아보고 생각했던대로 진행이 잘돼서 유독 재밌었던 과제였다ㅋㅋㅋㅋ 1. 계산기 목업 (mock up) 목업이 영어인줄 몰랐다 나무목인줄,,,이렇게 알아갑니다. html코드를 짜기 전 프로토타이핑 과정을 해보고자 피그마로 페어분 만나기 전 살짝 연습해보기도ㅋㅋ했는데(피그마 처음 접해봤다!! 수업 들으면서 좋은 웹 많이 알아갈 수 있어서 좋다), 페어분께서 피그마로 제안해 주신 디자인이 너무 예뻐서!! 바로 그걸로 진행했다. 일단 어떤 요소를 사용해야 하는지 나눠보고 css flexbox속성을 이용해 정렬을 하고, ..

늦게나마 작성하는 css 복습 겸 작성 CSS - Cascading Style Sheets css는 웹 구성하는 것 중에서 꾸미는 역할을 한다 보면 된다! 개인적으로 가장 좋아하는 부분ㅋㅋㅋ 커스텀도 가능하고 자주가는 웹사이트 구성보면서 어떤 스타일을 적용했는지 확인하는게 나름 재밌다.(그리고 적용된 스타일 가져와보는것도 재밌다) css는 끝이 없는 분야라고 하셨는데 정말 그런것 같다 구글에서 찾아보면 별 신기한(이게 된다고?) 속성이 많더라고!! 내가 구현하고자 하는 기능은 거의 찾으면 있으니까 구글링 잘하는 것도 아주 중요한 능력이다. 각설하고 css를 만들어진 html에 적용하려면 3가지 방법이 있다 1. 링크 사용해서 css파일 가져오기 - 강추 (External Style Sheet) 2. 직접..

HTML기초 태그를 배웠다 일단 유명한 기본 태그들 , 속성 , type = "checkbox" type = "password" 1 버튼안에 들어갈 내용 HTML 시맨틱 요소 즉 의미가 있는 요소 HTML5에서 시맨틱 웹이 중시되면서 새롭게 만들어짐 옛날에 코딩누나 스포티파이 웹페이지 HTML,CSS로 만들면서 정리 해둔건데 Semantic Tag 부분 그림으로 확인하면 더 이해가 잘 갈 것 같다 [id와 class] id는 고유한 값에 이름을 붙일 때 사용하고 class는 반복되는 유형을 분류하기 위해 붙인 이름이다 id와 class의 차이는 고유한 영역이면 id 반복,중복되는 영역이면 class 사용한다 나중에 css를 넣을때 특별한 요소가 있는 부분이라면 id로, 중복된 스타일 적용(주의할 점이 나..

[문자열] string str.indexOf('a') // 발견한 첫번째 a의 위치를 반환 str.lastIndexOf('a') //뒤에서 부터 a 조사 후 위치 반환 str.includes('a') // a가 포함되면 true 반환 str.slice(num1,num2) // num1에서 num2까지 잘라서 나타내줌 num2가 없을경우 마지막까지, num1이 -일경우 뒤에서부터 str[] // 배열안의 값과 일치한 위치의 문자열로 반환 str.split() // split 안의 값을 기준으로 문자열을 나누고 배열로 나타냄 Array_prompt.join() // 배열을 문자열로 변환 .length // 속성으로 문자열 길이를 확일할 때 사용 str.substring(start,end) // start 부..