Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned require와 import의 차이점, 배열, 객체를 const로 선언 후 요소나 속성을 추가할 수 있는 이유 .require와 import의 차이점과 상황 예시 require: CommonJS 키워드. NodeJS가 채택 CommonJS: 자바스크립트 언어의 활동 영역을 확장하기 위해 조직된 그룹 module.exports 객체에 모듈 전체를 내보내고 require 를 통해 모듈을 불러오는 방식 → 불필요한 모듈 로드 가능성 require : 가져오기 exports : 내보내기 module.exports : 내보내기 import: ES6 키워드 import : 가져오기 export : 내보내기 export defaults : 내보내기 파일 시작 부분에서만 ..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목적 , 정리로 세분화) 모던 자바스크립트 Deep Dive = 스터디 발표 마무리 ( 발표 ) 취업대비반 = 일일 2개 면접질문 준비 (주제: cs 및 js) Group Study review 총 4명이서 진행한 모던 자바스크립트 : Deep Dive 스터디 그룹이 매일 반복해 약 20분씩 4명이 돌아가며 발표하였고 그렇게 총 시간 1달 가량 꾸준하게 본인이 맡게 된 챕터를 발표했다. 진행 과정에서는 서적의 분량이 꽤나 많고 어려운 용어들이 다소 등장해서 당황스러운 부분도 있었다. (900페이지 이상...) 하지만 누구 하나 빠지지 않고 꾸준하게 발표 자료도 정리하고..

❤️‍🔥TIL : Today I Learned 버블 정렬, 선택 정렬 정렬 알고리즘 중에서도 버블 정렬과 선택 정렬의 이해와 방법을 설명합니다. 정렬 이란? - 무작위로 섞여있는 데이터를 어떤 기준에 맞춰 정렬하는 알고리즘은 여러 가지가 있고, 정렬 알고리즘은 다양한 경우에 매우 유용하게 사용된다. 각종 데이터 목록을 정리하고 싶을 때 분포도의 중위값을 알아내고 싶을 때 데이터에서 중복값을 잡아내고 싶을 때 이진 탐색을 하고 싶을 때 정렬의 종류와 비교 내용은 아래와 같다. + 자 그런데 우리가 javascript 에서 자주 사용하는 sort() 메서드가 이미 존재하는데.. 정렬 알고리즘이 왜 필요할까요?? 정렬 알고리즘을 배워야하는 이유는 시스템 정렬이 항상 좋은 퍼포먼스를 보장하지는 않는다. 또한 데..

❤️‍🔥TIL : Today I Learned 모듈 모듈을 설명하고 추가 지식을 공유합니다. 모듈의 일반적 의미 - 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. - 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 전역 X - 기본적으로 비공개 상태이다. 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화 되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적으로 존재하여 애플리케이션과 분리되어 존재한다. - 하지만, 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재 의미가 없다. 모듈은 재사용되어야 의미가 있다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다. 모듈 사용자는 모듈이 공..

❤️‍🔥TIL : Today I Learned 에러 처리 에러 처리의 필요성 에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. 에러 처리의 필요성 console.log('[Start]'); foo(); // ReferceError : foo is not defined // 발생한 에러를 방치하면 프로그램은 강제 종료된다. console.log('[End]'); 위 예시 코드에서 [End] 가 출력되지 않는다. 이러한 현상이 프로젝트에서 발생한다면... 끔찍하다. - try...catch console.log('[Start]'); try { foo(); } catch (error) { console.log('[에러 발생]', error); // [에러 발..

❤️‍🔥TIL : Today I Learned 브라우저 저장소 local storage, session storage, cookie 브라우저 저장소에 대해서 차이점을 설명합니다. 브라우저 저장소란? - 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다. - 우리가 이용할 수 있는 공간은 크게 Web Storage와 cookie로 분류할 수 있다. + 사이트의 도메인 단위로 접근이 제한된다. 예를 들면, A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다. 이는 데이터의 보안 측면에서 당연하다. Web Storage - HTML5 부터 제공하는 기능으로, 키/값 쌍으로 데이터를 저장하며 키를 기반으로 데이터를 조회한다. - 데이터의 목적에 따라 영구저장소(Loca..

❤️‍🔥TIL : Today I Learned this this가 동작하는 원리와 용법을 설명하고, 어떤 부분에서 가장 큰 차이가 생기는지 비교합니다. this란? - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 결정된다. this 바인딩 - 바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩 하는 것이다. this 바인딩은 this(키워드로 분류되지만 식별자 역할을 한다)와 this가 가리킬 객체를 바인딩 하는 것이다. ..

❤️‍🔥TIL : Today I Learned AJAX Ajax !== "아작스" Ajax == "에이잭스" JSON !== "제이썬" JSON == "제이슨" Ajax 란? 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. + 특정 기술이 아니고, 새로운 접근법을 설명하는 용어이다. 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 + 이러한 비동기 방식으로 웹의 페러다임이 획기적으로 변했다고 할 수 있다. 기존 전통적인 방식은 html태그로 시작하여 html태그로 끝나는 완전한 html을 response 받아 처음부터 다시 렌더링하는 방식으로 동작했..