내배캠 사전캠프 2일차
사전캠프는 오후3시부터 오후9시까지 진행하기에 오전시간은 널널하다.
2일차부터는 뭔가 오전 시간에도 개인적으로 학습을 하고싶어
원티드에서 진행하는 frontend 강의 당신의 코드는 기본에 충실한가요?를
듣기위해 필요한 과제가 있는데 그 과제를 하기로했다.
과제는 figma로 만들어진 디자인을 가지고 html과 css만으로 반응형 페이지를 만들어 깃헙페이지에 등록하는것 까지가 과제이다.
아직 css를 잘 다루는 편은 아니나 과제를 통해 뭔가 배울거리가 많겠다 싶어서 일단 머리를 박아봤다.
(과제 이미지)
시작은 큰덩어리를 나누어 레이아웃을 먼저 만들고,
위에서부터 다시 덩어리를 잘게 나누는식으로 진행했다.
사전캠프 시작 전 까지 이정도까지 작성했는데 시간이 3시간 정도 걸린듯 하다..
header부분은 flex를 사용하여 레이아웃을 작성했고,
contents부분은 grid를 사용하여 큰 레이아웃들을 작성했다.
아직 행간에 대한 배율 이해(figma에선 픽셀단위지만 css에선 반응형을 위해 배율로 많이 사용한다고한다)와 em, rem같이 반응형에 관한 지식이 아직 거의 없기에 일단은 고정 픽셀로 작성 후 추후에 공부를 해야겠다.
사전캠프 시간에는 다시 javascript 핸드북을 보면서 학습을 진행 했다.
오늘은 분량이 많은 함수, 객체 기본을 공부를 했는데
함수
함수는 워낙 많이 다루고 사용했어서 크게 어려움은 없었으나,
익명 함수 존재를 잊고 있었다가 오늘 다시 기억에서 되살렸다.
// 일반 함수 사용
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
function showOk() {
alert( "동의하셨습니다." );
}
function showCancel() {
alert( "취소 버튼을 누르셨습니다." );
}
ask("동의하십니까?", showOk, showCancel);// 익명함수를 사용하여 선언
function ask(question, yes, no) {
if(confirm(question)) yes();
else no();
}
ask(
'동의하십니까?',
function() { alert('동의하셨습니다.'); },
function() { alert('취소 버튼을 누르셨습니다.'); }
);필요에따라 익명함수를 사용하면 코드를 더 간결하게 작성 할 수 있으니 기억해두자.
그리고 함수 표현식과 함수 선언문의 차이
- 함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.
// 함수 선언문
function sum(a, b) {
return a + b;
}- 함수 표현식: 함수는 표현식이나 구문 구성 내부에 생성된다.
// 함수 표현식
let sum = function(a, b) {
return a + b;
};객체.....
객체 대괄호 표기법
객체에서는 잊고 있던 대괄호 표기법을 다시 한번 상기시키고 가야겠다.
여러 단어를 조합해 프로퍼티 키를 접근하기위해 사용한다.
let user = {};
// set
user['likes birds'] = true;
// get
alert(user['likes birds']); // true
// delete
delete user['likes birds'];대괄호 표기법을 사용하면 런타임 중 변수로 유동적인 객체의 프로퍼티에 접근이 가능하다.
let user = {
name: "John",
age: 30
};
let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
// 변수로 접근
alert( user[key] );객체내에 메서드 생성
메서드는 객체에 할당된 함수를 말한다..
메서드는 method
함수는 function
구분하자!
let user = {
name: "John",
age: 30
};
user.sayHi = function() {
alert("안녕하세요!");
};
user.sayHi(); // 안녕하세요!메서드 단축 구문 ↓
// 아래 두 객체는 동일하게 동작합니다.
user = {
sayHi: function() {
alert("Hello");
}
};
// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
sayHi() { // "sayHi: function()"과 동일합니다.
alert("Hello");
}
};위 처럼 function을 생략해도 메서드를 정의할 수 있다.
this 키워드
메서드 내부에서 this키워드를 사용하면 객체에 접근이 가능하다
let user = {
name: "John",
age: 30,
sayHi() {
// 'this'는 '현재 객체'를 나타냅니다.
alert(this.name);
}
};
user.sayHi(); // John화살표 함수에서 this
화살표 함수는 일반 함수와 달리 고유한 this를 가지고 있지 않다.
화살표 함수에서 this를 참조하면 화살표 함수가 아닌 일반 외부 함수에서 this 값을 가져온다.
let user = {
firstName: "보라",
sayHi() {
let arrow = () => alert(this.firstName);
arrow();
}
};
user.sayHi(); // 보라별개의 this가 만들어지는 것을 원치 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용하다.
여기까지가 2일차에 중점을 두고 공부한 내용이다.
아직 갈 길이 멀지만 차근차근 보고 또 보고 실습도 자주해야겠다.
조금은 알고 있던 내용들을 학습하다보니 내용이 많아져서 후다닥 끊은 느낌이 있지만
다 적지 못 한 내용들은 다음 복습때 TIL로 남길 생각이다.
TIL작성법을 몰라도 일단 써보는게 중요한거 같으니..(?) 내 마음대로 일단 적어본다..
사전캠프에서는 딱히 조별 활동을 할 일이 없는거같아 조원분들과 대화를 못해봤......
ps. 조원님들 우리 언제 대화해볼까요..? 🤣
