Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned 실행 컨텍스트 실행 컨텍스트란? VariablEnvironment 와 LexicalEnvironment [ VE, LE ] LexicalEnvironment(1) - EnvironmentRecord(= record)와 호이스팅 OuterEnvironmentReference(= outer) 실행 컨텍스트란 실행할 코드에 환경 정보를 제공하는 객체이다! 실행컨텍스트를 모아 콜스택에서 처리하게 된다! 콜스택에서는 가장 위에 쌓인 컨텍스트와 관련된 코드를 실행하는 방법이며, 코드의 환경 및 순서를 보장한다 컨텍스트 구성 방법 전역 공간 > eval( ) 함수 > 함수(우리가 실행컨텍스트를 구성하는 방법) 컨텍스트 구성 예시 // ---- 1번 var a = 1; f..

❤️‍🔥TIL : Today I Learned 데이터 타입 데이터 타입의 종류 데이터 할당 기본형 데이터와 참조형 데이터 불변객체 - 얕은 복사, 깊은 복사 undefined 와 null 데이터 타입의 종류 (이미지 출처 : https://velog.io/@imjkim49/자바스크립트-데이터-타입-정리) 기본형과 참조형의 구분 기준 복제의 방식 기본형(Primitive type) : 값이 담긴 주소값을 복제 참조형(Reference type) : 주소값들의 묶음을 가리키는 주소값을 복제 불변의 여부 : 기본형은 불변형이며, 참조형은 가변형이다! 식별자, 변수 let abc = 10; 식별자 - 위에서 선언한 abc 라는 변수명 변수 - abc라는 변수명에 할당한 10 이라는 숫자 데이터 데이터 할당 //..

Read API 게시글을 조회하고, 보여주는 함수이다 우선은 게시글을 클릭했을 때 우리가 가진 데이터를 보여주려면 id 가 필요했다 id 안에 게시글이 객체형태로 데이터가 들어있기 때문이다 우선 게시글에 삽입 될 HTML 태그이다 /* ...innerHTML */ fanPickList 객체가 가지고있는 id 데이터를 태그 id에 넣어주고 onclick 으로 전달되도록 구현했다. onclick="sendId(${fanPickList.id})" 처음에는 위 처럼 해당아이디를 바로 클릭하면 전달 할 수 있게 작성했으나, 레퍼런스 에러가 나서 수정했다 // 클릭한 카드의 id 받아적는 변수 let selectId = ""; // 함수가 실행 될 때마다, 해당게시글 id 를 update export functio..

❤️‍🔥TIL : Today I Learned Create API 게시글을 생성하는 함수이다 // Create API // fan-pick 라는 이름의 collection에 객체 형태의 Document를 신규 등록 export const save_fanpick = async (event) => { event.preventDefault(); const title = document.querySelector(".title2"); const content = document.querySelector(".content2"); let modalImage = await save_img(); const { uid, photoURL, displayName } = authService.currentUser; try { ..

더보기 ❤️‍🔥TIL : Today I Learned try...catch 개발을 하다보면 누구나 에러를 만나고, 또 누구라도 에러가 생기기 마련이다. 이러한 에러로 인해 다른 구문이 실행이 안되는 상황이생겨, 렌더링을 마무리하지 못하게 된다. if/else 문을 통해 예외 처리를 할 수 있지만 모든 개발자가 수많은 에러를 예측하기 쉽지는 않다. 그래서 우리는 try...catch 를 통해 코드가 중단되는 것을 방지하고 에러의 예외처리를 해놓는다면, 더 안정적인 코드를 작성할 수 있다 try(시도) 하여 에러가 발생하면 try(잡는) 문법 이다. try{ //실행될 코드 } catch (error) { //에러 발생 시 실행할 코드 } 그래서 if/else 를 사용하는 것 처럼 try 와 catch 라는..

❤️‍🔥TIL : Today I Learned forEach() 배열을 순회하며, 인자로 전달한 함수를 호출하는 반복문이다. 배열, Set, Map 에서 사용 가능하다 forEach() 문법 배열 순회 배열 순회 - Lambda 식 value, index 인자로 받기 value, index, array 인자로 받기 Set 에서 forEach()로 요소 순회하기 Map 에서 forEach()로 요소 순회하기 forEach() 문법 arr.forEach(func(value, index, array)) value : 현재 돌고있는 데이터 index : 현제 돌고있는 데이터중 index array : 배열중 하나 result = cal(b=2, a=1) : 매개변수 호출 시 매개변수명을 지정해서 대입한다면 순서..

❤️‍🔥TIL : Today I Learned 객체 { Object } 정보를 한번에 담을 수 있는 큰 범위의 데이터가 필요할 때 사용한다. 어렵게 표현하면 "물리적으로 전재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 갖고있고 다른 것과 식별 가능한 것" 이다. 객체를 생성하는 방법은 크게 3가지가 있지만 가장 효과적인 리터럴 방식을 포스팅하겠다! // 영어 버전 const person1 = { name : 'seung hyo', age : 26, sayHello : function(){ console.log(this.name + 'Hello!'); } }; console.log(person1); person1.sayHello(); // 한글 버전 const 사람1 = { 이름 : '승효'..

❤️‍🔥TIL : Today I Learned 조건문 [ if ➕ else if ➕ else ] 조건을 만족했을 때만 코드를 실행합니다! 이 조건의 결괏값이 앞서 우리가 배운 'boolean'입니다 보통 비교 연산자를 활용하며, "()" 소괄호 안에 있는 내용이 true 라면 "{}" 중괄호 안에 있는 코드를 실행합니다. false 라면 다음 조건 (else if, else)을 실행하거나 다음 조건이 없다면 넘어갑니다! 조건문에 사용되는 구문은 위처럼 3가지! if 와 else if 그리고 else 먼저 첫 조건을 가지려면 if 구문으로 코드를 작성합니다 if ('조건') { 조건을 만족할 때 실행 할 코드 } 이후 if 구문의 조건을 만족하지 않았을 때 실행하고 싶은 코드는 else 또는 else if..