본문 바로가기

분류 전체보기63

[Javascript] 변수의 스코프, 호이스팅, TDZ 지난 번에 변수의 정의와 선언, 할당에 대한 글을 정리했었다. 이번에는 모던 자바스크립트 딥 다이브 책을 참고해서 변수 스코프를 공부해보고 설명할 예정이다. [이전글] [Javascript] 변수의 정의와 선언, 할당 오늘부터 틈틈이 모던 Deep Dive를 정독하면서 정리한 개념을 블로그에 올릴 예정이다. 개발 공부를 막 시작했을 땐 이 책을 보고 좌절했었는데, 개발 공부를 어느 정도하고서 책을 다시 보니 내용 dalsong-00.tistory.com 변수의 스코프 스코프(Scope)란 '유효 범위'라는 의미이다. 그러니 변수의 스코프는 변수의 유효한 범위를 의미할 것이다. 스코프를 이해하기 위해 다음 예제를 살펴보자. console.log()의 결과 var1, var2, var3은 정상적으로 1, .. 2023. 3. 14.
[Javascript] parseInt()와 toString() 2023년 2월 5일 작성 알고리즘 문제를 풀다가 내가 parseInt()에 대해 제대로 파악하지 못하고 사용했단 걸 알았다! 깨달음을 얻게 해준 문제는 이진수 더하기이다. 처음에는 특정 진수끼리 더하게 해주는 매서드가 있는 줄 몰라서 10 + 11 을 하면 21이고, 2를 10으로 바꿔서 101 로 나타나게 해줘야 하나? 하면서 고민을 했다. 그러다가 매서드를 검색하고서 '아니 parseInt()에게 이런 기능이 있단 말야?' 하고 깜짝 놀랐다. 나에게 parseInt()는 가끔 숫자를 입력했는데도 불구하고 그것이 숫자가 아니라고 하는 혹시 모를 오류를 방지하기 위한 수단이었다. 그래서 매개변수를 하나만 받는 줄 알았는데 알고 보니 선택적으로 다른 매개변수를 받을 수 있었다! parseInt(strin.. 2023. 3. 10.
젊을 때 사서 고생하자 나는 새로운 일을 처음 경험할 때 그 일이 힘들고 어렵기를 바란다. 첫 번째 이유는 힘든 일을 해야 '힘듦'에 대한 기준이 높아져서 웬만한 일을 거뜬히 해낼 수 있기 때문이다. 두 번째 이유는 힘든 일을 함으로써 내 멘탈이든 지식이든 과거의 나보다 더 성장한다는 걸 알기 때문이다. 그래서 '젊었을 때 사서 고생하자'는 마인드로 대학생 때 다양한 아르바이트를 했다. 공장 아르바이트 대학교 1학년 여름방학 때 PCB 공장과 화장품 포장 공장에서 일을 했다. 친구와 같이 PCB 공장에서 일을 했었는데, 일이 끝나면 대표님이 나와 친구를 데리고 술을 마셨다. 이 분은 왜 20살 여자애들 두 명을 데리고 혼자 술을 마실까? 궁금한 생각이 든 한편 덕분에 맛있는 음식을 먹어서 대표님에 대한 이미지가 나쁘진 않았다... 2023. 3. 10.
[Git] 프로젝트 중 사용한 git 명령어 클론 프로젝트를 하면서 팀원들과 git hub로 협업을 했다. feature/login_UI, feature/login_Fn, Feature/SignUp_UI 등 기능과 UI를 구분해 화면별로 브랜치를 만들고 어느 정도 완성이 되면 main 브랜치로 merge를 했다. 나는 git에 익숙하지가 않아서 문제가 생길 때마다 땀을 삐질삐질 흘렸는데, 다행히 팀원들이 git에 대해 잘 알아서 나를 많이 도와줬다! 다음에 또 팀원들에게 물어보지 않도록 git 명령어를 정리해보자~! 브랜치를 만들어야 할 때 상황 로그인 화면의 UI를 작업하기 위해 브랜치를 만들어야 한다. 명령어 git branch : 브랜치 만들기 git checkout : 브랜치로 이동하기 git checkout -b : 브랜치 작성과 체크아웃.. 2023. 3. 9.
[모던 Deep Dive] 브라우저의 렌더링 과정 * 이 글은 모던 Deep Dive 자바스크립트 브라우저의 렌더링 과정을 단순 요약한 글입니다. 브라우저의 렌더링 과정 브라우저 렌더링 과정은 브라우저가 서버로부터 필요한 것을 요청하고, 서버는 응답해주는 방식으로 진행된다. 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고, 서버는 응답한다. 2. 브라우저 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성한다. 그리고 이를 결합하여 렌더 트리를 생성한다. 3-1. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax tree)를 생성하고 바이트 코드로 변환하여 실행한다. 3-2. 자바스크립트에서 DOM AP.. 2023. 3. 8.
[Javascript] Sort() : 배열을 정렬해주는 매서드 2023년 1월 18일 작성 sort() sort 매서드는 기존 배열을 재정렬해준다. 새로운 값이 반환되지 않고 기존 배열이 오름차순 혹은 내림차순으로 정렬되어 반환된다는 것을 명심해야 한다! numArr.sort() 를 하면 숫자를 문자로 변환하고, 유니 코드 순서대로 정렬하기 때문에 243이 28보다 앞에 나온다. 맨 첫자리를 기준으로 오름차순 정리한다고 보면 된다. 매개변수 : compareFunction 정렬 순서를 정하고 싶을 땐 매개변수를 활용해야 한다. 숫자 정렬 숫자를 정렬할 때 오름차순은 numArr.sort((a,b) => a-b), 내림차순은 numArr.sort((a,b) => b-a) 해주면 된다. (a-b) 가 음수인 경우 b가 더 크니 a < b 로 판단해 정렬해주는 원리인데 .. 2023. 3. 6.