오늘부터 자바스크립트 팀 프로젝트를 하는 날이다. 오전 10시에 팀 프로젝트 관련 발제를 들었다. 발제는 한 20분만에 끝나서 팀원과 바로 회의를 진행하였다.
< 목차 >
1. 팀 프로젝트 기능 분배 및 기타사항
1) 누구 코드로 할지
2) 어떤 API?
3) 필수 기능 분배
4) 커밋 컨벤션 정하기
2. [기초 특강] Javascript 코드를 읽는 방법
1. 팀 프로젝트 기능 분배 및 기타사항
회의 내용을 통해 정한 사항은 다음과 같다.
1) 누구 코드로 할지
: 팀원 한 분 걸로 하기로 했다.
2) 어떤 API?
: TMDB
3) 필수 기능 분배
(1) API 연결: --님
(2) 상세 페이지 구현 & 홈으로 돌아가기: 나
(3) 영화 리뷰 작성 기능(+ 비밀번호): --님
(4) 유효성 검사: --님
나는 2번 상세 페이지 구현을 맡았다. 꽤 어려울 것 같아서 자발적으로 지원해서 도전하였다. 꼭 혼자 힘으로 해내야지
* 필수 기능 구현 후, CSS랑 선택 기능 분배
* 필수 기능 구현을 도와달라 하지 않는 이상, 본인 기능 구현 완료하면 선택 기능으로 넘어갈 것
4) commit massage: 커밋 컨벤션 정하기
- feat: 새로운 기능
- fix: 코드 수정
- refactor : 코드 리펙토링
* 태그 : 제목의 형태이며, :뒤에만 space가 있음에 유의
2. [기초 특강] JavaScript 코드를 읽는 방법
오늘 이 1시간 40분 동안 강의해 주신 내용 덕분에 기초적인 자바스크립트 문법에서 답답하게 느꼈던 부분이 많이 해소되었다.
const result = 1;
여기서 result 변수이며 '저장소'를 의미한다. 즉, 데이터를 저장하는 곳이다. 위에서 1이 저장소에 저장되는 값이다. 이렇게 데이터를 저장하는 것을 '선언'(= 저장)이라고 한다. 그렇다면 const는 뭘까? 저장할 때 '나 저장할 거임!'이라고 하는 것과 같다고 보면 된다.
선언은 값을 담는다고 했다. 그럼 담은 값을 사용하려면 어떻게 해야 할까? 바로 위 사진의 마지막 문장처럼 하면 된다.
obj.a;
const obj = ~~로 선언해서 값을 저장한 뒤, obj.a로 값을 불러오는 것이다. 저장소 이름을 먼저 작성하고 .을 하면 저장소 이름에 있는 어떤 값(예시에선 a)을 호출해달라는 의미다. 이러한 '값을 나타내줘!'를 호출이라고 얘기하며 사용한다고 이해하면 쉽다.
단순히 값만 저장하는 것이 아닌, 한 발 더 나아가 저장한 값을 여러 번 재사용할 수 있게 하는 것을 '함수'라고 한다.
function 저장명 () {
}
위처럼 사용한다. 저장명은 데이터 저장소 이름이라고 보면 되고, ( ) 안에는 들어가는 것은 '매개변수'라고 하며 사용할 때까지 값이 정해지지 않는다. 추후에 호출(사용)할 때 값이 정해지고, 그 전까지는 그냥 저장소일 뿐이다. scope(스코프)라고 부르는 { } ← 이것 안에 가공하고 싶은 로직을 적으면 호출할 때 위에서부터 한 번 돌아간다.
돌아간 결과값을 확인하려면 console.log();를 적으면 되고, 값을 직접 나타내고 싶으면 return ~~을 쓰면 된다.
다음으로 method(메서드)는 '어딘가에 값이 있는 함수'로, 어디에 적어둔 걸 사용한다. 즉, 독립적으로 사용되는 함수에 종속되어 있는 '단독으로 사용이 불가'한 함수다. 함수에 있는 값을 끌어다가 사용하는 느낌으로 이해하면 쉽다.
'[Front-end] 개발자 공부' 카테고리의 다른 글
[개발 공부 15일차] 팀 프로젝트 3일차: 상세 페이지 구현 (3) | 2024.01.12 |
---|---|
[개발 공부 14일차] 팀 프로젝트 2일차 (영화 검색 사이트 구현) (4) | 2024.01.11 |
[개발 공부 12일차] 자바스크립트 형 변환 및 전반적 기초 공부 (0) | 2024.01.09 |
[개발 공부 11일차] 개인 프로젝트 난관과 해결책 (0) | 2024.01.08 |
[개발 공부 10일차] 콜백함수, 개인 프로젝트 시작 (2) | 2024.01.05 |