박용현의 개발일지

콜백 지옥이란 간단하게 말해서 남을 고려하지 않은 코드를 작성한 겁니다.즉, 그저 내가 표현하고 싶은 것을 위해 콜백을 이어붙여 가독성, 유지보수를 최악으로 만드는 것을 뜻합니다. 그렇다면, 콜백 지옥을 해결하기 위한 비동기 제어에 대해서 알아보겠습니다.비동기(asynchronous)란, 실행 중인 코드의 여부와 무관하게 즉시 다음 코드로 넘어가는 방식으로 setTimeout, addEventListener 등이 있습니다.또한, 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드입니다. 동기(synchronous)란, 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식을 말합니다. 비동기의 간단한 이해를 돕기 위해 예시를 들겠습니다.// 비동기적 코드의 이해!setTimeout(f..

1. CallBack 함수란 다른 코드의 인자로 넘겨주는 함수입니다.다른 코드의 인자로 넘겨준다는 뜻은 콜백함수를 넘겨받는 코드가 있다는 얘기로 대표적으로 forEach, setTimeout 등이 있습니다.예시로 밑을 보시면 되겠습니다.setTimeout(function() {    console.log("hello");}, 1000); const numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) {    console.log(number);}); 2. CallBack 함수는 action에 대한 제어권을 넘겨줄테니 너가 알고 있는 그 Logic으로 처리를 해달라는 뜻입니다.그럼 여기서 제어권에 대한 이야기를 해야겠죠?CallBack 함수는 어떤 제어..

왜 밑의 두 문장처럼 호출되는지에 대해서 설명드리겠습니다. 일단 fighter.opponent.getFullname()을 호출하면 opponent 객체가 outer가 되고 이 outer안에 있는 getFullname이라는 객체의 this가 가르키는 객체는 다른 bind와 같은 지시해준 것이 없기 때문에 opponent를 가르키게 됩니다.따라서 fighter.opponent.getFullname()이 호출 되면 opponent를 가르키는 this -> fullname인 Francis Ngannou가 호출이 됩니다. 여기서  중요한 것은 fighter.opponent.getFullname()는 호출의 주체가 명확한 메서드 입니다. 그다음 fighter.getName()를 호출하면 그냥 함수로서 호출한것이 아..

오늘 자바 스크립트에서 깊은 복사와 얕은 복사에 대해서 알게 되었습니다.일단 깊은 복사와 얕은 복사 모두 참조값이 원본과 다른 객체를 생성합니다.예를 들어서var user = {    name: "john",    age: 20,}가 있다고 하고 이 객체의 값을 바꿔주는 것은 쉽습니다.하지만 이 객체의 값을 유지한 상태로 데이터를 가지고 있고 또 다른 객체를 생성해서 그 객체 값만 바꾼다고 했을 때의 방법은 새로운 객체를 하나 더 만들어서 똑같은 형태로 데이터를 할당해주는 것 보다 데이터에 할당된 값 즉, 변수를 참조해서 새로운 객체를 만들어 오는 것이 더욱 사용하기 편리하다는 의미 입니다.위의 객체는 얕은 복사든 깊은 복사든 결국 새로운 객체를 생성해 주고 user 객체안에 또다른 객체 값이 존재 하지..

이번 자바스크립트 인터넷 강의를 듣게 되었습니다.이미 C# 과 C++같은 언어를 공부를 해보고 JS의 완전 기초에 대해서 어느정도 알아보고 난 후 Js를 들으면서 Js언어가 얼마나 활용성이 높은지 알고 유연한 언어 라는 점을 알게 되었습니다.오늘 여러가지 공부를 하였지만 그 중에서 5가지만 이야기 하려고 합니다.(람다식도 중요하지만 C++에서 많이 해봤으니 넘어가도록 한다) 첫번째로는 문자열입니다.제가 모르는 부분들은 선언 이런게 아니라 함수 부분이었습니다.문자를 결합하기 위한 concat 함수, 단순하게 자르기 위한 substr, 문자열 검색을 위한 search, 문자열을 대체 해주기 위한 replace 그리고 문자열 분할을 위한 split함수였습니다.각각의 쓰임새는 알겠지만 아직 어떻게 활용하는지에 ..

어제 팀원 소개 웹페이지 만들기 팀프로젝트를 마무리 한 후 지금 나에게 가장 문제가 무엇인지에 대해서 돌아봤습니다.알고리즘 코드카타를 풀면서 어떻게 지금까지 인터넷에서 문법을 찾아보면서 문제를 해결해왔는지 알 수 없을 정도로 현재 JS에 대해서 아는게 없었습니다.물론 아직 배운적이 없기 때문이라고 하더라도 C#과 C++ 그리고 C를 열심히 공부했었는데 JS라고해서 다를게 있나 싶었지만 많이 달랐습니다. 따라서 매일 코딩테스트 JS 0단계부터 단계별로 올라가 보기로 하였습니다. [1] 코딩 테스트를 진행하면서 ''와 ""와 ``의 쓰임을 이제서야 알게 되었습니다.일단 ""와 ''의 차이는 없이 쓰인다고 생각하고 이제 `` 억음 부호 backtick은 따옴표에서는 불가능한 string의 사이에 개행이 된 경..

(박용현, 이상휘, 이진욱, 정효진, 조정현) K: 현재 만족하고 있는 부분, 계속 이어갔으면 하는 부분 각자 먼저 만들어 보기  현재 저희가 목표로 했던 기능에 대한 구현을 마쳤기 때문에 만들어진 결과물에 대한 반하는 의견 없이 모두들 만족하고 있습니다. 만약 추가를 한다고 하면은 개인이 만든 프로젝트들에 대해서 리뷰를 통해 부족한 부분들을 서로 채워나갈 수 있을 것 같습니다. P: 불만/불편하게 느끼는 부분, 개선이 필요하다고 생각되는 부분 이미 html을 공부했던 사람들을 제외하고 처음 접한 사람들한테는 어떤 목표를 가지고 해야할지 명확하지 않은 부분이 있어 프로젝트에 대한 방향성이 결국 앞선 선배님들이 한 프로젝트를 비슷하게 만들거나 거기에 기능 한두개 추가하는 경우가 대부분이었던 것이 아쉬웠습니..

오늘은 프로젝트 마지막 하는 날로 회원가입 후 로그인을 하는 것을 firebase를 연동해 해봤습니다.이 부분은 3탄에서 적은 것처럼 개발자 문서를 읽으면서 하니까 쉽게 해결이 되었습니다. 하지만 여기서 div와 form의 차이를 알아야할 때가 왔었습니다.HTML에서 form은 HTML의 일반 요소와 큰 차이점을 사용방법이 아닌 쓰임새에 있습니다.form은 단순한 요소가 아니라 사용자(클라이언트)와 웹 서버가 서로 통신하는 기술 중 하나 입니다.즉, form은 HTML을 작성할 때 주로 사용자에게 정보를 입력받거나 전달받기 위해 사용되는 요소입니다.여기서 form에 기입된 값은 submit 이벤트가 발생하면, 정의된 method 유형으로 action 목적지에 전송이됩니다.여기서 전송된 데이터는 웹 서버에..

오늘은 저번시간에 말한 것처럼 데이터베이스에 값을 넣고 빼는 기능을 넣어봤습니다.데이터 값을 빼고 넣던 와중에 지금까지 부트스트랩으로 컴포넌트를 가져와서 크기를 조절하고 부모 자식 크기 생각 안하고 그때마다 값을 맞추던 것에 대한 반동을 오늘 받았습니다.일단 당장에는 문제가 없겠지만 중요작업이었다면 처음부터 다시 하나하나 구현을 해야하는 정도였습니다. 오늘 첫번째로 데이터베이스에 데이터를 저장하는 방식을 다시 한번 복기하기 위해서 예전 웹개발 초급 강의를 다시 확인했습니다.파이어베이스에 들어가서 새로운 프로젝트를 만들고 SDK를 복사해서 넣어줘야하는데 이때 까지만해도 import가 뭐에 쓰이는 거였는지 또한 const firebaseConfig = { } 이 부분에 대해서 이해를 하지 못하고 썼습니다.하..

오늘 프로젝트를 진행하면서 CSS의 style에 대해서 생각을 해보는 계기가 되었습니다.style에서 가장 많이 쓰게 된 것은 margin이라는 것이었는데 이것과 padding이 헷갈린 경우가 많았습니다.padding은 해당 요소의 내부 여백을 조절하는 것이고margin은 해당 요소의 외부 여백을 조절한다는 것을 확실하게 알게되었습니다.또한 div를 두줄로 썼을 때 자동으로 줄 바꿈이 되어 세로로 나누어 지는 것을 nav로 감싸거나 div로 감싼 후 display: inline-block을 하면 가로로 나타내어 준 다는 것을 알게 되었습니다.여기서 또한 float : left와 float : right 의 쓰임에 대해서 알게 되었는데 float은 둥둥 뜬다라는 뜻으로 받아드린다음 만약에 컨테이너 안에 사..