Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned DOM DOM (Document Object Model )은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 1. 노드 - HTML요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 위와 같은 요소들의 집합으로 이뤄지며, 요소 간에는 중첩 관계에 의해 계층적인 부자(부모)관계가 형성 된다. 이러한 관계를 반영하여 모든 노드 객체들을 트리 자료구조로 구성하며 이것을 DOM 또는 DOM 트리라고 한다. 최상위의 부..

❤️‍🔥TIL : Today I Learned parameter와 argument의 차이 Parameter : 매개변수, Argument : 인자, 둘 다 변수의 한 종류이다. Parameter (매개 변수)란? - 함수 선언의 일부로 나열되는 변수이며, 호출될 때 함수에 전달 될 것으로 예상되는 값을 나타낸다. Argument (인수)란? - 호출될 때 함수에 전달되는 실제 값 이다. 예시 function plus(x, y)에서 x와 y는 매개변수 이다. plus(2, 3)으로 호출되면 2와 3은 함수에 전달되는 인수이다. - 함수가 선언될 때 괄호 안에 하나 이상의 매개변수를 포함 할 수 있다. -매개변수는 호출 시 함수에 전달되는 값에 대한 자리 표시자 역할을 한다 최종 정리 Prameter는 함..

❤️‍🔥TIL : Today I Learned Hoisting / TDZ 호이스팅과 TDZ 에 대해서 설명합니다. 해당 포스팅에서는 변수에 집중하여 설명합니다. 호이스팅 이란? var, let const, function, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다. 왜냐하면, 선언문은 실행하기(런타임) 이전에 먼저 소스코드의 평가과정(컴파일)을 거치면서 실행하기 위한 준비를 한다. 때문에 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 호이스팅 이라고 한다. TDZ 란? Temporal Dead Zone의 약자로 변수가 let, const 키워드로 선언되었지만 아직 초기화 되지 않은 경우 발생하는 동작이며, 이 시간동안 변수에 접근하면 ReferenceErr..

❤️‍🔥TIL : Today I Learned RegExp RegExp는 정규 표현식 입니다. (Regular expression) 정규 표현식이란? 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language)다. 정규 표현식은 자바스크립트의 고유 문법이 아니고, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규 표현식은 패턴과 플래그로 구성된다. 정규 표현식의 생성 - 정규 표현식 객체(RegExp 객체)를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. 일반적인 방법은 정규 표현식 리터럴을 사용하는 것이다. 정규 표현식 리터럴은 다음과 같이 표현한다. const 영어 = 'Is this all there is?';..

❤️‍🔥TIL : Today I Learned 배열 고차 함수 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수 배열 고차 함수란? 고차함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. JavaScript에서 고차 함수는 하나 이상의 함수를 인수로 받거나 함수를 결과로 반환하는 함수이다. 이러한 함수를 배열과 함께 사용하면 배열 고차 함수라고 한다. Array.prototype.sort mutates - 원본 배열을 직접 변경하며 정렬된 배열을 반환 const numbers = [3,1,2]; numbers.sort(); console.log(numbers); // [1,2,3] sort 메서드의 기본 정렬 순서는 유니코드 포인트의 순서를..

🎯목적 : Javascript Algorithm 문제풀이 과정을 기록합니다. 나만의 해결방법을 공유합니다. 문제 "*"의 높이와 너비를 1이라고 했을 때, "*"을 이용해 직각 이등변 삼각형을 그리려고합니다. 정수 n 이 주어지면 높이와 너비가 n 인 직각 이등변 삼각형을 출력하도록 코드를 작성해보세요. 풀이 결과 해결 방법 n은 입력받은 값 3이 출력되었다. 이것을 활용하여 1,2,3 ...n 만큼 반복해서 출력해줘야 한다. 1 --- 2 --- 3 그래서 for문을 사용했고, i는 증가연산자로 n까지 증가하기 때문에 해당하는 라인의 숫자를 기억할 수 있다. 하지만 i 만큼 "*"를 출력하기 위해 다른 대부분의 풀이에서는 또 for문이 등장하여 이중포문의 형태로 문제풀이가 되었다. 나는 이중포문을 좋..

📝 WIL: Weekly I Learned Work done this week 이번 주 한 일! Project : Codefolio = 프로젝트 진행중 ( 1.0.0 > 1.1.0 version 배포 ) Project review 기획 & 디자인 회의를 하며.. 사실 우리의 mvp가 잦은 변동이 생기고 타겟(고객)층이 명확하지 못한 문제점이 제기되어 긴 기획 회의 끝에 의견을 좁히는 과정이 순탄하지는 않았다. 하지만 이것 또한 충분한 경험이라고 생각한다. 디자이너 관점, 기획자 관점, 개발자 관점을 두루 생각하게 되는 계기가 되었고, 또 의견 조율하는 과정에서의 커뮤니케이션과 기획 의도를 명확하게 전달하는 부분에서의 시행착오를 겪게 되었다. 이후 페이지 작업에 돌입해서 각자 컴포넌트별로 작업하여 나누었던..

🎯목적 : 에디터 기존의 문제점 개선 (사진 업로드 시 뷰어에서 이미지가 string 형식으로 출력되어짐) 개선 : image url과 file name으로 보여질 수 있도록 ** 최종 프로젝트 기간 매우 바쁜 관계로 우선 중요 코드만 적어놓았음** 1. UI tag handleOnEditorChange()} /> hooks 사용하여 addImage 라는 함수를 커스텀하여 만들어 주었다. 2. addImage (이미지 생성 전체 과정) const addImage = async (blob: File, dropImage: HookCallback) => { const img = await compressImg(blob); // 이미지 압축 if (!img) return; const url = await upl..