2024/07 39

24.07.24 콜백지옥 / 동기, 비동기

1. 콜백지옥function do () { $.get(url, function (result) { setTimeout(function () { startAsyncProcess(function (){ ... } }, 1000) }}연속된 이벤트나 서버통신같은 비동기적 작업을 수행할 때 이러한 콜백함수 지옥에 빠지곤한다.이렇게 연속된 콜백함수는 코드의 유지보수를 어렵게하며, 다른사람이나 미래의 내가 코드를 봤을 때 이해하기 어렵게 만든다. 2. 동기 vs 비동기동기 (Sync) - 카페에서 줄을서서 주문을 하는데, 주문을 하고 커피가 손님에게 전달될때까지 다음 주문으로 넘어가지 않는다. 비동기 (Async) - 카페에서 줄을 서..

2차 공부/TIL 2024.07.24

할인 행사

function solution(want, number, discount) { var answer = 0; let wantMap = new Map() for(let i = 0; i { if (value코드를 작성하고 문제를 다시 읽어보니 당연히 틀린것이라고 생각이 들었다.그 이유는 연속적으로 원하는 물건이 들어오는지는 확인을 하지만, 해당 연속에서 원하는 물건의 개수가 맞춰질수있는지에 대한 예외처리가 없기때문이다.또한, 알맞은 순서와 알맞은 순서 사이 틀린 값이 들어올 때도 고려하여 모든 discount배열을 돌아야 하는데 해당 부분도 부족한 것 같다. function solution(want, number, discount) { var answer = 0; for..

24.07.23 This

this는 실행 컨텍스트가 생성될 때 결정된다. 이것을 this를 bind한다라고 한다. 전역공간에서의 this는 전역 객체를 가리킨다. this에는 호출을 누가했는지에 대한 정보가 담긴다.  함수에서의 this, 메서드에서의 this함수와 메서드는 비슷해보이지만 '독립성'에서 차이가 있다.함수는 그 자체로 기능을 수행하지만, 메서드는 호출당한 객체에 대한 동작을 수행한다.함수()객체.메서드() var func = function (x) { console.log(this, x);};func(1);var obj = { method: func,};obj.method(2);함수자체에서의 this는 전역객체를 의미함을 알 수 있다.  메서드 내부에서의 thisvar obj = { methodA: fu..

2차 공부/TIL 2024.07.23

24.07.23 콜/스택, 실행 컨텍스트

실행 컨텍스트란 실행할 코드에 제공할 환경정보들을 모아놓은 객체이다. 이것들을 스택의 한 종류인 콜스택에 쌓아올리는데, 이를 통해 가장 위에 쌓인 컨텍스트와 관련된 코드를 먼저 실행하는 환경 및 순서를 보장할 수 있다.// ---- 1번var a = 1;function outer() { function inner() { console.log(a); //undefined var a = 3; } inner(); // ---- 2번 console.log(a);}outer(); // ---- 3번console.log(a);  1. 전역컨텍스트 in2. outer()을 만나 전역 중단 후 outer컨텍스트 in3. inner()을 만나 outer 중단 후 inner컨텍스트 in4. inner()실행 후 inn..

2차 공부/TIL 2024.07.23

24.07.23 변수선언과 데이터 할당 / 불변하다 vs 불변하지 않다.

let str = 'test'str = 'modify'변수 선언 및 할당 시 변수이름(식별자)와 변수(데이터)가 각각 메모리 상에 저장된다.아래와 같이 식별자(변수이름)은 1002번 주소에 str로 저장되고, 해당 식별자가 지닌 변수(데이터)의 주소를 가지는 것을 알 수 있다.데이터는 따로 주소값을 받아 저장되는데, 처음 5008번을 받고 다시 재할당되자 기존 데이터 주소는 변화시키지 않은 채로 새롭게 주소값을 받아 5009번에 modify를 저장하고, 해당 주소를 str 식별자에 붙여준다.  변수 vs 상수 - 변수 : 변수 영역 메모리를 변경할 수 있음 - 상수 : 변수 영역 메모리를 변경할 수 없음 불변하다 vs 불변하지 않다 - 불변하다 : 데이터 영역 메모리를 변경할 수 없음 - 불변하지 않다 ..

2차 공부/TIL 2024.07.23

24.07.22 JavaScript 문법 종합반 1, 2주차

리액트로 들어가기 전 Javascript에 이해를 더 잘 이해하기 위한 주차이다.1, 2주차 강의내용은 아는 것이 많았지만, 몰랐거나 까먹은 부분도 있어 해당 부분에 대해서만 정리해보고자 한다. 1. 단축평가논리합, 논리곱 연산자를 이용하여 양 변에 따라 알맞은 값을 사용한다.console.log(true || "something") // trueconsole.log(false || "something") // somethingconsole.log(true && "something") // somethingconsole.log(false && "something") // false조금 생각해 보았는데, 논리합 ||연산자는 양 변중 단 하나라도 truthy하면 true를 뱉어내므로 첫 줄 true || s..

2차 공부/TIL 2024.07.22

24.07.19 미니프로젝트를 마치며

사실상 작업은 어제 끝났었다.오늘은 발표 전 프로젝트 코드를 다시 읽어보며 내가 모든 코드를 이해했는지 확인해보았다.스크롤 기능의 특정 함수를 제외한 거의 모든 부분은 완벽히 이해하였다. 이번 프로젝트를 진행하면서 만족한부분, 부족했던부분, 해결해야할 부분을 정리해보고자 한다. 먼저 만족스러운 부분이다.팀원간의 소통이 원활했다.팀으로 이루어지는 프로젝트이다보니, 팀원간의 소통이 원활해야만 프로젝트 진행상황이나, 어려움은 없는지를 체크하여 큰 문제를 사전에 방지할 수 있기 때문에 매우 중요하다. 다행히도 팀원분들이 소통을 잘해주셔서 소통으로 인한 문제는 적었다고 생각한다.아이디어를 잘 내주셨다.팀명이나 멤버카드의 데이터나, 기능에 대한 아이디어를 잘 내주셔서 처음 기획했을때보다 조금 더 이쁘게 페이지가 마..

2차 공부/TIL 2024.07.19

n^2 배열 자르기

프로그래머스 - n^2 배열 자르기  먼저 작성한 코드function solution(n, left, right) { var answer = []; let answerStr = '' for (let i = 1; i Number(el));}// i일 때 i를 i개만큼 넣고, n까지 1씩 더하며 추가// [1 2 3 4]// [2 2 3 4]// [3 3 3 4]// [4 4 4 4]만드려는 배열을 문자열로 만들고 한 문자열에 모두 저장한 다음, left와 right에 맞춰 자르고, 배열화시킨 뒤 모든 요소를 숫자화 시키는 방식으로 풀이했다.테스트코드는 모두 성공했으나, 데이터가 매우 크게 들어올 수 있는 점을 생각하지 않아 시간초과로 실패하였다. 두번째로 작성한 코드function ..