본문 바로가기

💻 프론트엔드19

히어시티 EJS -> React 마이그레이션 과정(~ing) 프로젝트 소개 https://here-city.com 엔시티 찐팬인 친구의 기획으로 시작한 시즈니를 위한 웹페이지입니다. 레코드샵 : 키워드 맞춤 플레이리스트 엔슐랭 가이드 : 엔시티 팬들의 맛집 태그를 통합해서 지역별로 트위터 글들을 모아주는 서비스 엔가네 초이스 : 식사 메뉴 랜덤 추천 시티보드 : 엔시티 텍스트 대치 모음 네오스테이션 : 엔시티 춤동작으로 노래를 맞추는 게임 시즈니고사 : 엔시티 자컨 모의고사 NBIT: 엔시티 팬들을 위한 MBTI 테스트 그동안 통계를 바탕으로 핵심 기능을 추려서 마이그레이션을 진행하려고 합니다 레코드샵 엔슐랭 가이드 -> 트위터 API 유료화로 고민 중,, 시티보드 NBIT 마이그레이션 하는 이유 사실 팀원들의 개인 사정으로 콘텐츠 업데이트를 멈춘 상황이기에 서비.. 2023. 12. 29.

[자바스크립트] 비동기 처리와 이벤트루프 비동기 프로그래밍 vs 동기 프로그래밍 무슨 차이일까? 동기 처리 : 현재 실행 중인 태스크가 종료할 때까지 다음 태스크가 대기하는 방식 -> 실행 순서가 보장되지만 실행 중인 태스크가 종료될 때까지 이후 태스크들은 블로킹 됩니다. 비동기 처리 : 현재 실행 중인 태스크가 종료되지 않더라도 다음 태스크를 실행하는 방식 -> 블로킹이 발생하지 않지만 실행 순서는 보장되지 않습니다. 자바스크립트 비동기 코드 예시 function a(){ console.log('a'); } function b(){ setTimeout(a, 300); console.log('b'); } b(); //실행결과 //'b' //'a' 자바스크립트가 비동기 처리를 지원하지 않는다면 a함수가 실행된 후에 b함수가 실행되어야 합니다. 이.. 2023. 12. 27.

[자바스크립트] 클로저 클로저를 이해하기 위한 개념 렉시컬 환경 해당 개념을 모르신다면 실행 컨텍스트 포스팅을 먼저 읽는 것을 추천드립니다! 클로저 외부 함수보다 오래 유지되어 생명 주기가 끝난 외부 함수의 변수를 참조하고 있는 중첩 함수 예제 function coffeeMachine() { let coffeeBeans = 10; const makeCoffee = () => { if (coffeeBeans { console.log(`현재 남아 있는 원두는 ${coffeeBeans}g 입니다.`); }; .. 2023. 12. 27.

[자바스크립트] 실행컨텍스트 📌 실행 컨텍스트(Execution Context) 식별자와 스코프, 코드 실행 순서를 관리하기 위해 구현한 내부 메커니즘 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨텍스트 스택으로 관리합니다. 실행 컨텍스트 스택 실행 컨텍스트는 스택 자료구조로 관리됩니다. 코드가 실행되면 해당 코드의 실행 컨텍스트가 생성되어 스택에 push되고, 실행이 종료되면 pop 됩니다. 렉시컬 환경 식별자와 스코프를 관리하는 자료구조입니다. 환경레코드와 외부 렉시컬 환경에 대한 참조로 구성되어 있습니다. 환경레코드 스코프에 대한 식별자와 바인딩된 값을 관리합니다. 외부 렉시컬 환경에 대한 참조 상위 스코프를 가리킵니다 스코프 체인 = 외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드.. 2023. 12. 27.

[자바스크립트] 스코프 📌 스코프(Scope) : 변수에 접근할 수 있는 범위 = (식별자를 찾아내기 위한 규칙) 스코프는 전역 스코프와 지역 스코프로 나눌 수 있습니다. 변수는 선언 위치에 의해 스코프를 갖게 됩니다. 전역 스코프를 갖는 전역 변수는 전역에서 참조 가능하고, 지역 스코프를 갖는 지역 변수는 선언된 지역과 하부 지역에서만 참조할 수 있습니다. 변수를 참조할 때, 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작해서 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다. 스코프 체인 전역 객체와 중첩된 함수의 스코프 레퍼런스를 차례로 저장하고, 스코프가 어떻게 연결 되고 있는지 보여주는 것을 말합니다. 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리합니다. 렉시컬 환경은 식별.. 2023. 12. 27.

[자바스크립트] This 📌 This 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다. 함수 호출 방식 1. 일반 함수 2. 메서드 호출 3. 생성자 함수 호출 4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출 5. ES6, 화살표 함수 호출 1. 일반 함수 일반함수 호출 this는 전역 객체인 window를 가리킵니다. -> 객체를 생성하지 않는 일반 함수에서는 this의 사용은 의미가 없습니다 function normal(){ console.log(this); //Window } normal().. 2023. 12. 27.

이전 1 2 3 4 다음

티스토리툴바