분류 전체보기
-
[사이드 프로젝트] 미니 와인 쇼핑몰프로젝트 2023. 4. 12. 14:39
프로젝트에서 고민하고 경험한 것들 1. Typescript Typescript에 대한 갈증과 열망이 많이 올라와있었다. 개인적으로도, 회사에서도 Javascript를 주 언어로 개발을 하다보니 '분명 배열 맞는데.. 왜 null 이라고하지?' '분명 타입이 맞는데 왜 에러가 발생하지?' 와 같은 에러 해결에 고초를 겪기도 했다. 이에 전 회사에서는 Typescript를 도입을 고려했으나, 이미 비대해져버리고 얽히고 섥힌 구조들을 변화시키는 건, 당시 우선순위가 아니었기에 회사에서는 사용하지 않았다. 따라서, 이번 사이드 프로젝트에 Typescript를 적용해보고 적극적으로 사용해보고자 한다. Typescript를 사용하는데 느꼈던 단점은, 생각보다 런닝 커브가 있고 처음에는 타입 체크 에러 때문에 개발을..
-
[Javascript] 호이스팅 이해하기Javascript 2023. 3. 19. 00:14
1. 호이스팅(Hoisting) 제대로 이해하기 호이스팅 ? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. - MDN 공식 문서 그렇다. 호이스팅을 흔히, 코드를 최상단으로 끌어올린다고 하지만 작동 방식을 비유법으로 표현한 것으로 실제로 코드를 최상단으로 끌어올려지지 않는다. 호이스팅을 제대로 이해하려면 '환경 레코드(Environment Record)'를 알아야한다. 환경 레코드에 변수가 어떻게 저장되는지만 봐도 호이스팅의 동작 원리를 이해할 수 있다. 환경 레코드는 프로그램을 평가하는 시점에 선언되..
-
[Javascript] 실행 컨텍스트Javascript 2023. 3. 17. 09:57
들어가기 전에.. 자바스크립트 프로그램을 요술 기계처럼 이리 누르고, 저리 눌러가면서 작동을 한다. 오늘 글에서는 이러한 현상의 뒷면에 있는 자바스크립트 내부 구조를 설명한다. 자바스크립트에서 가장 중요한 핵심 개념 중 하나라고 생각한다. 실행 가능한 코드 (Executable Code) 자바스크립트 엔진은 실행 가능한 코드를 만나면 코드를 평가하여 => 실행 컨텍스트(Executable Context)로 만든다. 실행 가능한 코드 전역 코드: 전역 객체 WIndow 아래에 정의된 함수 ==> 전역 실행 컨텍스트(Global Execution Context) 함수 코드: 함수 ==> 함수 실행 컨텍스트(Functional Execution Context) eval 코드: eval 함수 (단, eval 코..
-
[토이 프로젝트] 메모장 구현 및 공지사항React 2023. 3. 14. 21:08
[공지사항] 기술 블로그 velog 에서 tistory로 이사했습니다! 본 게시글 이후로는 모든 기술블로그는 tistory에서만 업데이트 될 예정입니다..! React + Typescript + Node.js 풀스택 토이 프로젝트 메모장 구현 https://velog.io/@jeveloper/%ED%86%A0%EC%9D%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%A9%94%EB%AA%A8%EC%9E%A5-%EA%B5%AC%ED%98%84
-
[Javascript] Promise 와 async/awaitJavascript 2023. 3. 14. 20:53
비동기 처리란? 자바스크립트는 기본적으로 싱글 스레드 언어이기 때문에, 하나의 호출 스택(call stack)에서 처리하는 프로세스이다. 이런 상황에서 자바스크립트는 비동기 처리를 하기 위해서 큐(Queue)를 사용한다. 하나의 호출 스택에서 동기적 처리가 끝나면 큐에서 대기중인 비동기 함수들을 처리한다. setTime, addEventListener 메서드, ajax라 불리던 XMLHttpRequest 객체, fetch API 등이 대표적으로 비동기적으로 실행된다. 콜백 지옥 비동기 작업은 비동기 처리가 끝난 이후에 다음 처리를 실행하기 위한 용도로 사용하는데, 이런 흐름을 위해서 지속적으로 콜백 함수를 실행한다면 결과적으로 ‘콜백 지옥’에 빠지게 된다. // setTimeout 비동기 작업을 하는 s..
-
토큰, 세션, 쿠키 알고가자인증_인가 2023. 3. 14. 15:22
들어가기전에 토큰, 세션, 쿠키는 모두 사용자가 웹 서비스를 이용할 때, '나'라는 것을 증명하기 위해 식별하고 인증하기 위한 기술이다. 비슷하게 생긴 이 친구들을 더이상 헷갈리지 말고 깰끔하게 정리해보자. 먼저, 들어가기 전에 이런 이야기를 해본다. 은행 창구에서 은행원과 마주 앉아 적금 신청을 하고 있는데, 신분증을 달라고 한다. 은행원은 나의 신원을 확인한 뒤, 적금 상품에 가입도 해주고 첫 거래가 필요하다고 하여 다른 계좌에서 이체도 해준다. 알아서 착착. 그런데, 적금 상품에 가입 해주는 한 번의 인증과 다른 계좌에서 이체를 해주는 한 번의 인증, 총 2번의 인증이 필요하거늘 한 번의 인증으로 모든 것이 통과됐다. 나는 생각한다. '당연하지. 나는 처음에 신분증을 보여줬고 은행원이 나를 계속 기..