본문 바로가기

전체 글

 (47)
실행 컨텍스트 가볍게 이해하기 자바스크립트를 조금 공부하다보면 실행 컨텍스트라는 용어를 한 번쯤 들어보게 된다. 이 개념을 확실하게 이해하기 위해 간단한 예제 코드를 통해 실행 컨텍스택과 실행 컨텍스트를 저장하는 스택의 동작 방식을 알아보자.실행 컨텍스트(execute context)란?실행 컨텍스트는 말 그대로 코드를 실행할 때 필요한 정보(맥락)를 의미한다. 이 정보에는 구체적으로 변수, 함수 선언, this 값 등이 포함된다. 자바스크립트 엔진은 코드를 실행할 때 실행 컨텍스트를 생성하고, 이를 실행 컨텍스트 스택에 쌓아 관리한다.실행 컨텍스트의 종류는 크게 4가지로 구분할 수 있는데, 그 중 자주 쓰이는 전역 실행 컨텍스트(Global Execution Context)와 함수 실행 컨텍스트(Function Execution C..
[부스트캠프 9기] 멤버십 웹 풀스택 4주 과정 회고록 멤버십의 첫 4주를 마쳤다. 시간이 정말 빠르게 흘러갔다. 이 기간 동안 많은 것을 배우고, 도전하고, 또 깨달았다. 4주 간의 여정을 돌아보며 느낀 점들을 정리해보고자 한다.시작부터 꼬인 멤버십을 시작하기 전, 학교 연구실 일을 정리해야 했다. 멤버십 시작 전 일주일과 첫 주 주말까지 최대한 일을 헤치우려 했지만, 양이 너무 많았다. 결국 이미 지친 상태로 멤버십에 들어왔고, 첫 주 주말에도 제대로 쉬지 못했다. 연구실 일에 대한 스트레스로 인해 초반에 체력 관리가 제대로 되지 않았다. 첫 시작을 평탄하게 하지 못해서 너무 아쉬웠다.기술에 대한 욕심과 깨달음 초반에 미션을 수행하면서 web component와 swagger를 꼭 공부해보고 싶었다. 하지만 이 기술들을 공부하는 데 시간을 너무 많이 써서..
offsetWidth으로 강제로 랜더링시키기 로그인과 회원가입 폼을 만들 때 로그인 화면에서 회원가입 버튼을 누르면 아래처럼 로그인 모달이 180도 가로로 뒤집히면서 회원가입 폼이 나타나게 하고 싶었다. 그래서 처음에는 180도 뒤집는 flip 애니메이션을 만든 뒤에 회원가입 버튼과 로그인 버튼의 click 이벤트 핸들러를 다음과 같이 작성했다.function animateForm() { const formWrapper = document.querySelector(".auth_form_wrapper"); formWrapper.classList.remove("animate_flip_reverse"); // 반대 애니메이션 제거 formWrapper.classList.add("animate_flip"); // 애니메이션 추가}function an..
[javascript] 객체를 불변하게 만드는 것이란?(feat.getOwnPropertyDescriptor()) 자바스크립트 개발을 하다 보면, 객체를 불변하게 만들어야 하는 경우가 종종 발생한다. 이런 상황에서 보통 우리가 사용하는 방법이 바로 Object.freeze()다. 그러나 단순히 Object.freeze()를 호출하는 것이 객체를 불변하게 만드는 이유일까? 사실 객체가 불변하다는 것은 객체가 가진 내부 속성에 따라 달라진다. 이번 글에서는 이 내부 속성에 대해 알아보겠다! Internal Slot과 Internal Method 내부 속성을 이해하려면 internal slot과 internal method 개념을 짚고 넘어가는 게 좋다. 다음은 ECMAScript의 6.1.7.2 Object Internal Methods and Internal Slots 내용을 참고해 internal slot과 inte..
[부스트캠프 9기 챌린지] 3주차 회고 - 🤒 🗒️ 3줄 요약골골됐다공부한 내용을 더 열심히 정리해야겠다…벌써 한 주 밖에 안 남았다니  이번 주는 전반적으로 컨디션이 좋지 않았다. 잠을 충분히 자지 못한 게 가장 큰 문제였던 것 같다. 저번 주까지는 괜찮았는데, 이제는 한계가 온 것 같다. 😢2주차의 다짐지난주에 3주차에 실행해보겠다고 적어둔 내용을 이번 회고에서도 돌아보았다. 3개는 조금밖에 실천하지 못해서 ❓ 표시를 사용했다. (❌는 너무 슬프잖아요)⭕ 미션을 진행하는 패턴 기록하기❓ 매일 2시까지만 미션하기❓ 매일 아침에 학습 정리하기❓ 동료 코드 리뷰(질문/피드백) 작성해두기⭕ 미션을 진행하는 패턴 기록하기매일 미션을 끝내고 해결할 때 사용한 시간을 기록해 보았다. 지난주보다 챌린지에 많은 시간을 쓰지 못했고, 다짐도 잘 지키지 못해 아..
[부스트캠프 9기 챌린지] 2주차 회고 - 😴 🗒️ 3줄 요약- 벌써 2주가?- 찾았다. 나에게 맞는 패턴.- 역시 사람은 잠을 자야 한다.  챌린지 미션이 갈수록 어려워진다는 말은 들었지만 첫 주차에 너무 힘들어서 설마하는 마음이 있었다. 그런데 역시나…ㅎㅎ 저번주에 지켜보고자 작성한 항목들이 있는데 모두 지키지는 못했지만 발전한 부분도 있다. 이번 주는 저번 주와의 비교를 중심으로 회고를 작성해본다.1주차의 다짐저번 주에 2주차에 실행해보겠다고 적어둔 내용이다. 두 번째 주를 보낸 뒤 스스로 잘 지켰는지 피드백 해보는 시간을 가졌다.⭕ 미션을 진행하는 패턴 기록하기❌ 매일 학습 정리 꼬옥‼️작성하기⭕ 설계한 내용 그림으로 정리하기❌ 9시에 동료의 코드를 미리 읽고 질문 작성하기❓ 피어세션을 진행하면서 나눈 내용 기록하기⭕ 미션을 진행하는 패턴 ..
[부스트캠프 9기 챌린지] 1주차 회고 - 😇 🗒️ 3줄 요약- 다들 살아 계신가요? 😇- 나를 알아가기- 한 번 밖에 없는 기회 값지게 보내자  일요일까지만 해도 챌린지 시작할 생각에 신이 났는데 막상 시작하니 생각보다 너무 빡셌다…🤦‍♀️생각보다 매우 더…고로 일주일 동안 들었던 여러 감정과 생각을 정리하며 회고를 작성해본다.정신없이 흘러간 첫 주 DAY01 미션은 베이직에서 진행했던 미션에서 조금 난이도가 올라간 미션이였다. 그래서 구현과 학습 정리까지 원하는 만큼 마무리하고 조금은 여유로운 시간을 보냈다. 앞으로 이런 미션이 나오나? 짧은 착각을 했었다.DAY02부터 DAY04까지는 생각도 못한 난이도의 미션을 마주했다. 제 시간에 미션을 완성한 적이 하루도 없었고. 매일 새벽까지 하는 건 기본이었다. 잠을 아예 못 잔 날도 있었다.구현..
[네이버 부스트캠프 9기] 베이직 과정과 2차 문제 해결력 테스트 합격 후기 베이직 입과 결정!1차 문제 해결력 테스트를 본 후 그 다음 주 수요일 쯤 결과가 발표되었다. 공식 블로그에 나온 것처럼 1차 문제 해결력 테스트 결과에 따라 베이직 입과 대상자가 결정되는데 나는 2차 문제 해결력 테스트 대상자로 선정되었다. 하지만 부캠에서 2차 테스트 대상자 여부를 떠나 모든 사람의 입과를 권장하기도 했고, 베이직을 안하고 2차 문제 해결력 테스트 떨어지면 부스트캠프 과정 중 아무것도 해볼 수 없을거란 생각에 베이직 입과를 결정했다. 그리고 2차 문제 해결력 테스트부터는 분야별 응시 언어 제한이 생기는데 베이직을 진행하면서 내가 지원하는 web 분야의 언어인 javascript를 연습할 수 있을거라 생각했다.베이직 시작~ 베이직은 6월 24일부터 7월 5일까지 2주간 진행되었다. 규율..

티스토리툴바