전체 글

이번 주는 개인학습 주차였습니다.그동안 안다고 생각했지만 다시 생각해보니 정확히 모르고있었던실행컨텍스트, this바인딩, 클로저 등의 개념에 대해 공부하였고, 이해할 수 있었습니다.이번 주차에 공부한 내용을 정리해보려고 합니다.실행 컨텍스트JavaScript에서 "실행 컨텍스트(Execution Context)"는 코드가 실행되기 위한 환경이나 상태를 말합니다. 실행 컨텍스트는 JavaScript 엔진이 코드를 실행할 때 관련 정보를 담고 있는 내부 데이터 구조입니다. 실행 컨텍스트에는 변수, 객체, 함수 호출 등 코드의 실행에 필요한 모든 정보가 포함되어 있습니다.실행 컨텍스트의 구성 요소실행 컨텍스트는 크게 세 가지 주요 구성 요소를 가지고 있습니다:변수 환경(Variable Environment):..

드디어 제가 클로저에 대해 조금 이해한 것 같습니다..! 그동안 여러번 공부했지만 이해하지 못했던 것 같은데이제야 드디어 약간(?) 알겠어서 정리해봅니다.공식 정의(?)가 아닌 제가 이해한 바를 정리해보려고 합니다. 클로저란?상태를 안전하게 변경하고 유지하기 위해(은닉화) 사용하는 JS의 기능으로중첩된 함수에서, 외부함수의 생명주기가 종료했음에도 여전히 상태가 참조되고 있는 것! 일반적인 상황// 함수가 호출될때다 증가해야하는 상태변수let num = 0;// 상태 변경 함수const increase = () => { return ++num}console.log(increase()); // 1// 만약 여기서 num = 100; // 이런식으로 변경해버리면console.log(increase());..

다음과 같은 this 바인딩에 대해 생각해볼 수 있는 코드를 실행해보는 과정에서 예상하지 못한 동작이 발생했습니다. var fullname = 'Ciryl Gane'var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function () { return this.fullname; } }, getName: function() { return this.fullname; }, getFirstName: () => { return this.fullname.split(' ')[0]; ..

오늘은 바닐라 자바스크립트로 DOM에 요소를 추가하는 상황에서documentFragment 객체에 대해 알게 되었습니다.react를 사용하면 볼 일이 많이 없을 수도 있지만 새로운 개념을 알게되어 정리합니다! Document Fragment 의 정의DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는, 가상 메모리에 존재하는 DOM 노드 객체입니다. DocumentFragment 노드를 사용하면 메인 DOM 트리 외부에 경량화된 DOM을 만들 수 있어 브라우저 repaint 영향 없이 메모리에서 DOM 조작이 가능합니다. 용도와 효과-메인 DOM의 조작(manipulation)이 필요할때 페이지 reflow 등 성능적 영향을 최소한으로 줄이기 위해 사용합니다.-Document Fr..

오늘은 화살표함수와 일반함수에서의 this 바인딩이 너무 헷갈려서 다시 공부했습니다.안녕하세요! 자바스크립트에서 일반 함수와 화살표 함수의 this 바인딩 차이를 이해하는 것은 중요한 부분입니다. 두 함수 유형의 this 바인딩 방식의 차이는 다음과 같습니다:1. 일반 함수일반 함수에서 this의 값은 함수가 호출되는 방식에 따라 결정됩니다. 즉, 누가 함수를 호출하느냐에 따라 this가 결정됩니다. 다음은 몇 가지 일반적인 경우입니다:객체의 메소드로 호출될 때: this는 메소드를 호출한 객체를 가리킵니다.단독 함수로 호출될 때: 엄격 모드(strict mode)에서는 this가 undefined가 되고, 비엄격 모드(non-strict mode)에서는 this가 전역 객체(global object)를..

오늘은 전 팀원님과 지난 팀프로젝트 코드 리뷰를 진행했습니다! 꽤나 시간이 걸렸지만 한 줄 한 줄 이야기 나누면서 이해도도 높아지고 함께 코딩한다는 것이 어떤 느낌인지도 확실히 알 수 있었습니다. 그 과정에서 내 코드를 돌아보며, ' 좋은 함수' 란 무엇인지에 대해 되새겨 보았습니다. 특히, 함수 보다 상위 스코프에서 정의된 변수를 사용할 경우, 함수 실행시 해당 상위 변수를 파라미터에 넣어서 쓰는게 좋은지, 아니면 그냥 상위 변수를 참조해도 되는지가 명확하지 않았습니다. 그래서 '좋은 함수'에 대해 다시한번 되짚어 보았습니다. 1. 순수 함수 (Pure Functions): 가능하면 순수 함수를 사용하는 것이 좋습니다. 순수 함수는 동일한 입력에 대해 항상 동일한 결과를 반환하며, 외부 상태를 변경하지..

첫 WIL 을 작성해보려고 합니다. 캠프 첫 주차를 무사히 통과했고, 배운 것이 참 많은 한 주 였습니다. (사전캠프 때부터 함께하긴 했지만)새롭게 만난 팀원들과 함께프로젝트를 진행하는 것이 쉽지많은 않았던 것 같습니다.  전공자 분들이 계셨지만, 프론트엔드 팀프로젝트는 모두 처음이셔서 하나하나 찾아보고 배우면서 진행해야 했기 때문입니다. 하지만 우리 팀은 케미(?)가 잘 맞았고, 금요일 쯤에는 흩어지는게 아쉬워서수업 종료 이후에도 모두가 남아 계속 이야기를 이어갈 정도로 팀워크가 좋았습니다. [github]1주일을 돌아보면, 우리가 가장 어려워했던 것은 github을 이용한 협업과정 이었습니다.명령어와 동작을 하나하나 이해하고, 알아가게 된 뒤에도 병합상황 등에서 뜻대로 되지..

오늘 첫 팀 프로젝트를 완료하고 발표까지 마쳤습니다! KPT 에 의거하여 회고를 작성해보려고 하니다. 먼저 K(Keep - 현재 만족하고 있는 부분) 로는, 1. 팀원 분들과의 협업 프로세스가 안정적으로 잘 진행되었다고 생각합니다. 2. 역할 분담 역시 자연스럽게 효율적으로 잘 이루어 진 것 같습니다. 다음으로 P(Problem - 문제라고 생각되는 부분) 로는, 1. 다른 팀의 발표를 보며, 디자인의 중요성을 다시한번 느꼈습니다. 2. readme 작성도 중요한 부분임을 배웠습니다. 3. crud 에서 auth 는 반드시 필요한 것임을 배웠습니다. 마지막으로 T(Try - 해결책) 로는, 1. 프론트엔드에서 디자인이 차지하는 부분이 정말 크다는 것을 체감했고, 디자인을 직접 해야하는 상황이라면, 전체 ..

오늘은 팀원분들과의 팀프로젝트 마지막 날이었습니다. 거의 하루종일 git & github 때문에 어려웠던 날이었습니다. ㅜ. ㅜ 우리는 각각 branch 를 나눠 작업하고 main 에 병합하는 방법으로 진행해보기로 했는데, 아직 익숙하지 않다보니 계속 에러와 마주쳤습니다. 특히 pull, merge 등 병합 상황에서 conflict가 발생했을 때 충돌 부분을 수정하는 것이 무언가 아직은 부담스럽고 어렵게 느껴졌습니다. 그러나 어려움 끝에 각각 작업한 결과들을 main에 성공적으로 병합할 수 있었고 시간 내에 프로젝트를 완성하였습니다. 물론 여러가지 부족한 점이 많지만 첫 팀프로젝트를 무사히 완료한 것에 뿌듯함을 느낍니다. 마지막으로 오늘 겪었던 git 문제 해결 상황을 정리합니다. ■ 개인branch 에..

오늘도 팀원들과 함께 팀프로젝트를 진행하였습니다. 바닐라 환경(?) 그러니까 아무것도 없는 폴더에서 시작하여 html 마크업부터 하고, js, css 작성 및 연결하는 상황인데, 오늘의 문제는 env 사용시 마주친, "process is not defined" 였습니다... vite 혹은 react, next 프로젝트에서는 env사용시 클라이언트에서도 NEXT_PUBLIC 등을 붙여주면 접근이 가능했는데, 바닐라 환경(?)에서는 계속해서 process 에 접근하지 못하는 문제가 있었습니다. // 문제가 된 코드 const request = await fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${..