시간이 조금 붕 떠버려서 당황한 오늘의 TIL
오늘 공부한 것
callback, Promise, async/await
드림코딩(유튜브)의 비동기 처리 강의 시리즈를 통해 다시 한 번 복습했다.
- 동기 vs 비동기
: 자바스크립트는 synchronous(동기적) 언어이다. 즉, hoisting 된 이후부터 코드가 작성된 순서대로 실행된다.
-
비동기 처리를 반드시 해야 하는 이유
: JS는 블록 내 코드를 동기적으로 실행하므로, 시간이 오래 걸리는 코드를 비동기 처리하지 않으면 빈 데이터를 출력할 수 있다😅 -
callback 지옥
: 콜백함수만을 이용하여 코드를 작성하다보면 콜백함수 안에 콜백함수 안에 콜백함수 안....... 으로 이루어진 콜백지옥을 만날 수 있다.
promise나 async/await를 사용하여 콜백지옥에서 벗어나자🔥
class UserStorage {
loginUser(id, password, onSuccess, onError) {
setTimeout(() => {
if (
(id === "ellie" && password === "dream") ||
(id === "coder" && password === "academy")
) {
onSuccess(id);
} else {
onError(new Error("not found"));
}
}, 2000);
}
getRoles(user, onSuccess, onError) {
setTimeout(() => {
if (user === "ellie") {
onSuccess({ name: "ellie", role: "admin" });
} else {
onError(new Error("no access"));
}
}, 1000);
}
}
const userStorage = new UserStorage();
const userId = prompt("아이디를 입력해주세요.");
const userPw = prompt("비밀번호를 입력해주세요.");
userStorage.loginUser(
userId,
userPw,
(user) => {
userStorage.getRoles(
user,
(userWithRole) =>
alert(`Hello, ${userWithRole.name}! you have a ${userWithRole.role}.`),
(err) => console.log(err)
);
},
(err) => {
console.log(err);
}
);- Promise
- 비동기 처리를 간편하게 처리하도록 도와주는 JS의 Object.
- 프로미스는 resolve(성공)와 reject(실패)로 나누어 값을 전달해 줄 수 있다.
- State: pending / fulfilled / rejected
// 브라우저에서 받아오는 것처럼 보이기 위해 setTimeout 사용
const promise = new Promise((resolve, reject) {
setTimeout(() => {
if (condition) resolve('success!');
else reject(new Error('not found'));
}, 2000);
})-
async / await
: 프로미스 체이닝도 계속되면 코드의 가독성이 떨어지므로 간결하게 작성하기 위한 syntactic sugar가 async/await!
마치 동기적으로 실행되는 것처럼 보인다.- async를 사용하면 함수의 코드 블록이 자동으로 Promise로 변환된다.
- promise에서는 reject가 있지만, async/await에는 없으므로 try/catch/(finally)문을 사용하면 된다.
오늘 한 일
git & github 협업 방법 살펴보기
-
항해99 크루분들과 모여서 실험해봤다.
: 지난 미니 프로젝트에서 대부분의 크루 분들이 매일 conflict와 싸웠다. 그 기억 때문인지 다음 프로젝트를 더 원활하게 하기 위해 git을 더 잘 사용하고, github를 어떻게 활용할 것인지에 관심이 많으셨다.그 덕에 몇 가지 팁을 얻었다.
- branch로 나누어 일을 할 때, commit -> fetch -> merge -> push 순으로 한다.
- 역할 분담에 issue를 활용하면 좋다.
- issue와 pull request에서 템플릿을 이용할 수 있다.(https://soft.plusblog.co.kr/66)
- 이슈 번호(#1)를 커밋에 쓰면 해당 이슈에 커밋내용이 보이게 된다.
-
혼자 더 찾아보기
: github로 협업하는 방법에 대한 글은 많지만 내가 읽기 편하고 추천하기도 편한 글은 많지 않았다.
오늘은 이후 프로젝트 팀에서 필요하다면 공유하고 싶은 github 협업글을 찾을 수 있었다.
[GitHub] GitHub로 협업하는 방법[2] - Forking Workflow
heejeong Kwon 28 Oct 2017
저번 프로젝트에서는 한 레포지토리에서 모두가 commit 할 수 있었다면 이제는 fork를 통해 각자의 저장소에서 작업하고 PR을 하는 방식으로 꼭 진행해야겠다는 생각이 든다.
VSC plugin 추가 설치⭐
혼자서도 이런 저런 플러그인을 많이 사용하고 있지만, 역시 각자 더 좋은 플러그인을 알고있었다.
오늘 설치한 플러그인은 다음과 같다.
- Highlight Matching Tag: HTML에서 현재 수정중인 곳의 태그 쌍을 하이라이팅 해준다.
- tabout
- GitLens
사실 tabout과 GitLens는 강력 추천으로 다운받았지만 아직 제대로 써보질 못해서 덧붙일 말이 없다ㅎㅎ
내일 주특기 강의부터 유용하게 써보도록 해야겠다.
article
소프트웨어를 배우는 방법
제목이 굉장히 거창하지만, 어떻게 꾸준히 발전하며 개발을 해 나가는가에 대한 이야기라고 생각한다.
총 12가지 이야기를 하지만 그 중 가장 와닿은 건 7번이었다.
멘토가 필요하다.
멘토는 나보다 아주 조금 더 잘하면 된다.
내 옆의 사람이 멘토다.
주변 사람들의 중요성과 필요성을 강하게 느끼고 있는 요즘이라 더 와닿았을 것이다.
오늘 TIL에서만 봐도 git에 대한 고민을 같이하고, 플러그인을 추천 받았다.
한 달 전이라면 혼자 뒤적거리면서 모든 시행착오를 겪었을 것이다.
지금 항해를 하면서 완벽하게 만족스러운 것은 아니다.
하지만 함께 고민하고 어려움을 헤쳐나갈 사람들이 생겼다는 점에서는 흡족하다.✨
앞으로 80여일이 남았는데, 서로 더 많은 부분을 돕고 보완해줄 수 있으면 좋겠다.
누가 이름을 함부로 짓는가?
강렬한 제목에 이끌려 읽게 되었다.
개발 공부를 시작하면서 제일 어려운 것이 네이밍이었다. 0부터 만들면서도 네이밍이 어려운데 회사에 들어가면 오죽할까🤷🏻♀️
- boolean type의 변수에서 부정형을 쓰는 건 좋지 않다.
: 이렇게 써 본 적은 없지만 분명히 할 수 있는 실수라고 생각한다. true/false인데 부정형으로 물어보지 말자😢 - 단수/복수 네이밍을 정확히 하자
- 줄여쓸거면 단어를 제대로 알자...
- 한글 발음 그대로 쓰는 네이밍은 최악
좋은 조언, 재밌는 예시들이었지만 마지막 '영어를 잘해야 한다' 라는 말에 웃을 수 없었다.
영어를 항상 수능 성적을 아주 깎아먹지는 않을 정도, 대학은 졸업할 정도, 회사에 원서 넣어서 부끄럽지 않을 정도로만 해왔던 것이 생각났다.
모르지는 않지만 잘하지도 못하는 상태?
번역되지 않은 공식문서를 읽기 위해 끙끙대고, 영어 강의 밖에 없어서 겨우겨우 듣는 내 모습에서 이미 영어 공부가 필요하다는 것을 알았다. 회피했을 뿐..
본격적인 영어 공부를 할 수는 없지만 문서들을 보면서, 변수의 모르는 단어를 보면서 찾아보고 알아가는 습관을 들여야겠다.
공부할 것이 너무 많다🤦🏻♀️
