GABOJOK 개린D

🥎 문제 상황 요즘은 node.js 강의를 듣기 시작했다. 강의를 따라 하는데, 확장 프로그램으로 Thunder Client 를 사용한다. 어제까지만 해도 잘 되던게, 오늘 갑자기 무한 로딩이 되면서 작동하지 않았다. 🏀 찾아본 사이트 https://github.com/rangav/thunder-client-support/issues/349 An error occurred while loading view: thunder-client-sidebar · Issue #349 · rangav/thunder-client-support Describe the bug An error occurred while loading view: thunder-client-sidebar message on the side ba..

바닐라 자바스크립트를 이용해서 프로젝트를 진행하다가, export import를 이용해 모듈화를 진행해봤다. 어려웠지만 결국 만들어 냈다. 문제는 여기서부터였다. 만든 프로젝트를 확장해서 팀 프로젝트로 진행하게 되었는데, 추가 코드 작성부터 추가 리펙토링이 정말 정말 어려웠다. 일단 모듈화에 대한 이해도가 낮은 상태에서 만지려고 하니 너무 어려웠다. 어떻게 손을 대야할지도 감이 안왔다. 살짝만 만져도 다 틀어진 것처럼 느껴졌기 때문에 ㅠㅠㅠ 그래서 일단 코드를 작성한 뒤에 리펙토링을 진행했다. 리펙토링을 진행하던 과정 중에서, 기능별로 모아두기 위해 붙여주는 애들은 따로 한 파일에 모아둬야 겠다는 생각을 했다. 그래서 파일에 모았는데, 작동이 안되기 시작했다. 에러메세지를 찾아 나섯지만, 문제를 이해할 ..

실행컨텍스트에 대한 부분이 잘 이해가 가지 않았는데, 오히려 다른 것들을 넓게 보니까 이해가 되는 것 같아 같이 정리한다. 🔮 스코프 체이닝 식별자를 결정하기 위해 하는 과정이다. 현재 실행컨텍스트와, 상위 컨텍스트를 이어주는 Outer Enviroment 를 참고해 실행컨텍스트 위에서 부터 읽어가며 해당 값을 찾는다 식별자를 결정할 때에 활용하는 스코프들의 연결 리스트를 스코프 체인 이라고 하며, 실행 컨텍스트의 외부환경참조( Outer Enviroment Referenc ) 와 관련되어 있다. (상위 Lexical Environment 를 참조한다) 이 스코프는 안에서 밖을 참조하는 것은 가능하나, 밖에서 안을 참조하는 건 불가하다. 🔮 클로저 이미 호출되고 사라진 애한테 접근하는 걸 말한다. 즉 자..

👩🏻‍⚖️ Facts 1. 개인과제 제출 10.18 ~ 10.23 2. 팀 과제 진행 _ 영화 정보 사이트 추가기능 구현 10.24 ~ 10.30 순수 바닐라 자바스크립트 사용하기 벨리데이션 체크하기 장르별, 인기순, 평점순 데이터 보여주기 모든 페이지 더보기, 검색기능 상세페이지 로컬스토리지 이용 데이터 CRUD 😳 Feelings 1. 개인과제 제출 모듈화를 진행하니 확실히 코드가 깔끔해 졌다. 그렇지만 아직 정확한 동작 원리에 대해 잘 모르고 있는 것 같다. 공부의 필요성을 많이 느낀다.ㅠㅠ 2. 팀 과제 팀원들 중 한명의 작업물을 가지고 추가 기능구현을 진행하자고 결론이 나왔다. 5명중, 나의 작업물을 가지고 진행하게 되었는데, 구현하고자 했던 부분은 이랬다. 메인페이지 카드 슬라이드 기능으로 장..

내일배움캠프 에서 자바스크립트 종합반 강의가 주어져 다 들었지만, 실행컨텍스트에 대해 전혀 이해가 가지 않아 답답했었다. 그러다 내배캠 내부에서 이론에 관한 특강이 있어 공부하게 되었는데, 정말 이해가 잘 되게 알려주셨다. 이해된 이 내용을 기록하기 위해 정리한다. 일단 실행컨텍스트에 대해 알기 전에, 메모리 공간과, 인터프리터, 컴파일러에 대해 알아야 한다. 🚗 메모리 공간 각 영역별로 구분되어 있고, 각 영역별로 역할이 다르다. 코드영역 __ 실행할 프로그램의 코드가 저장된다. 데이터 영역 __ 전역변수, 정적변수가 저장되는 공간. 힙 영역 __ 프로그래머가 할당 및 해제하는 메모리 공간 힙 영역 __ 런타임에 크기가 결정된다. (객체타입 - array, 클래스, obj 등등 저장된다.) 스택 영역 ..

⚽️ 상황 각 영화별 상세페이지에서 리뷰데이터를 localStorage에 저장 및 삭제를 하고 싶었다 저장 하고 데이터를 보여주는 것 까지 진행이 되었는데, 삭제기능이 구현되지 않아서 팀원분과 함께 구현했다. 데이터 구조 데이터 구조는 localStorage 에서 데이터 키는 영화 아이디 값이 들어가 있었고, 값으로 해당 영화에 대한 리뷰들이 배열 안에 각각의 객체로 들어가 있었다. 그래서 삭제버튼을 눌렀을 때에, 그것에 대한 정보를 가져와서 데이터를 삭제해야 할 지가 관건이였다. 🏀 사고 과정 데이터를 집어넣을때 리뷰값을 구별할 임의값을 함께 집어넣는다. 해당 임의값을 리뷰 데이터를 감싸는 태그의 아이디 값으로 집어넣는다. 버튼 클릭 이벤트가 발생하면, 해당 요소의 부모요소에 넣어둔 아이디 값을 가져온..

🚓 nullish 병합 연산자 "??" 값이 정의되어 있는 것을 반환한다. ?? 연산자 앞에 오는 값이 null, undefined 모두 아닐 경우 앞에 오는 값을 , 그게 아니라면 뒤에오는 값을 리턴한다. //nullish 병합연산자 사용한 코드 x = a ?? b; //nullish 병합연산자 안쓴 코드 x = (a !== null && a !== undefined) ? a : b; OR연산자 (" ||") 와 비슷하지만, "||" 는 첫번째 truthy한 값을 반환하고, "??" 는 첫번째 정의된 값을 반환한다. 따라서 값이 0일 경우 완전히 다르게 작동한다. let height = 0; alert(height || 4824); // 4824 alert(height ?? 4824); // 0 또한😲..

아직 작업중인데 잠깐 브렌치를 변경해야 하는 상황이 있다면, git stash 라는 명령어를 사용함으로 해결할 수 있다. 🚗 git stash 워킹 디렉토리에서 수정한 파일들만 저장한다. 아직 끝내지 않은 수정사항을 스택에 잠시 저장했다가 나중에 다시 적용 가능하다. 브랜치가 달라져도 적용이 가능하다. git stash를 실행하면 새로운 stash가 스택에 만들어 지며 수정하던 내용이 저장된다 워킹 디렉토리는 깨끗해진다. 워킹 디렉토리에 수정하고 커밋하지 않은 경우 stash를 적용할 수 있고, 충돌나면 알려준다. git stash list 명령어를 통해 저장한 stash를 확인할 수 있다. git stash apply 를 사용해서 stash를 다시 적용할 수 있다. git stash apply stas..

🚗 localStorage 란? 브라우저에 데이터를 저장하는 방법 웹 스토리지 객체 중 하나. 브라우저에 따라 다르지만 최소 2MB 최대 5MB 까지 저장이 가능하다. 브라우저나 탭을 닫아도 데이터가 계속 유지된다. 사용자가 직접 삭제하지 않는다면 저장된 데이터는 계속 이용 가능하다. 데이터 저장은 key : value 형태로 한다 키와 값은 반드시 문자열 이여야 한다.(숫자, 객체 등 다른 자료형을 사용하면 문자열로 자동 변환된다) JSON을 사용하면 객체를 쓸 수 있긴 하다. (JSON.stringify({name : 'hehe'})) 이후 .parse() 실행. 클라이언트 측에서 관리되기 때문에 민감정보는 서버측에 안전하게 보관하는 것이 좋다. Map 자료형과 유사하지만, 인덱스를 사용해서 키에 ..

🚌 head 태그 안에 script 태그를 넣으면 body부분 보다 js파일이 먼저 실행되기 때문에 , 오류가 날 확률 높다. 이 defer 라는 애를 넣어주면, 지연실행이 되어 문제 없이 코드가 작동한다. html파일 파싱을 하다가 head에 defer가 걸린 script 태그를 만나면, 일단 script를 다운로드 하면서 html 파일을 읽어 나간다. 미리 script를 다운받았기 때문에 시간 단축 할 수 있다. 파싱이 끝나고, js 파일에게 제어권을 넘겨주고, 다음 다운받을 필요 없이 바로 js파일이 실행된다. src 속성이 명시된 경우에만 사용할 수 있다. 아래 이미지를 참고하면 이해가 빠를 것 같다. _출처 : 내일배움캠프 🚌 defer 의 기능을 내포하고 있다. js 파일마다 각기 다른 스코프..