꿈꾸는 개발자

리액트에서 글이 많은 컴포넌트를 작성할 때 때로는 bold 형식의 글이 필요할 때가 있다. 하지만 매번 그럴 때 마다 태그를 쓰기 귀찮아서, 뭔가 새로운 방법이 없을까 여러 코드를 탐험하던 중 흥미로운 코드를 찾았다. import React from "react"; export function TranslateBold({ children, className, as = "p" }) { const pattern = /(\*\*.*?\*\*)/; const text = children; const parts = text.split(pattern).filter((x) => x.length > 0); const elements = parts.map((part, index) => { if (part.match(pa..

목적 옵셔널 체이닝을 JS DeepDive를 접하면서 처음으로 알게 됐지만, 그 이후 크게 사용하는 경우가 개인적으로 없어서 잊고 지내고 있다가.....타입스크립트로 개발을 본격적으로 시작하면서 옵셔널 체이닝의 강력함을 깨닫고 잊었던 기억을 다시 되살리고자 옵셔널 체이닝에 대해 정리하고자 한다. 옵셔널 체이닝의 프로퍼티가 없는 중첩 객체를 접근할 때 보다 안전하게 접근을 할 수 있다. 예시 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 보통 위와 같은 경우에선 타입 에러가 발생하게 된다. 이전에는 && 연산자를 주로 사용해서 위와 같은 상황을 ..

정의/용법 nullish 병합 연산자는 JS에 있는 문법으로 타입을 중시하는 TS에서 많이 사용되는 문법 중 하나이다. a ?? b a가 null도 아니고 undefined도 아니면 a 그 외에는 b ??을 사용하지 않고 위와 동일한 코드를 작성하면 아래와 같다 x = (a !== null && a !== undefined) ? a : b; 추가 예시 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛 위 코드에서 ?? 병합 연산자를 통해 간편하게 실제로 값이 들어있는..

버블링(bubbling) 정의: 버블링은 한 요소의 이벤트가 발생하면 해당 요소에 할당된 핸들러가 작동하고, 이어서 부모 요소의 핸들러가 동작하는 형식을 말한다. 해당 과정은 가장 최상단의 요소(document 객체)를 만날 때까지 반복된다. 위 사진에서 태그 영역을 클릭하게 되면 p 태그에 할당된 헨들러만 동작되는 것이 아닌, div, form에 있는 핸들러들까지 순차적으로 작동하게 된다! => 이처럼, p는 가된 element에서 가장 최상단 요소까지 핸들러가 동작하게 되는 것이다. 거의 모든 이벤트는 버블링 된다(즉 예외는 존재함!) => ex) focus이벤트는 버블링X Event.target event.targe로 이번트가 발생한 target요소에 접근 가능! event.target vs thi..

공통: 얕은 복사든 깊은 복사든 생성된 객체는 기존과 다른 별개의 객체이다! 복사에 대한 정의: 여기에서 복사란, 원시값처럼 새로운 값을 복사한다는 의미로 복사되지 않았다는 것은 곧 참조값이 넘어갔다는 의미로, 상호간의 영향을 줌을 의미한다. 얕은 복사(Shallow Copy): 객체에 중첩되어 있는 객체의 경우 참조값을 복사한다 객체 트리의 노드의 최말단을 복사하지 않는 방식 (따라서, 중첩 객체의 참조값을 복사한다고 한다!) const original = { num: 3, age: 24, arr: ["a", "b", "c"], }; const clone1 = { ...original }; //참고 spread문법은 iterable한 객체만 사용할 수 있다 original.num = 4; console..

생활코딩 영상 참고 await에 대한 이해: 그림에 나온 것처럼, 좌측에 있는 promise-then() 형식의 코드를 오른쪽처럼 단순화하기 위해서는 각 promise함수에 await란 keyword을 붙여야 한다=> 추가로, await은 function() 내에 사용돼야 하며, await을 포함하고 있는 function은 async란 keyword를 앞에 추가해야 한다! run()함수를 호출하면 왼쪽과 오른쪽 코드는 완전히 똑같은 동작을 하게 된다! await/async를 사용하지 않은 코드: function timer(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(time); }, time); }); } con..

생활코딩 영상 참고-(1)-then(),catch(),: -fetch api를 사용한다(Ajax에 대한 추가적인 내용의 학습이 필요해 보인다!) 해당 사이트의 post에 각각의 글들을 json이란 데이터 타입으로 만든? url을 획득하는 것이다? 아무튼 url을 통해 서버에 통신하는 것처럼 json 데이터를 fetch할 수 있음! https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2022, serving ~1...

-codding apple 영상 참고: function first(parameter) { console.log("1"); parameter(); } function second() { console.log("2"); } first(second); //callback함수는 동기일 수도 비동기일 수도 있다=> //callback함수를 사용하는 이유: 함수를 순차적으로 실행하기 위해서 사용을 한다! //다른 사람이 작성한 코드를 가져와(여기에서는 first()) 그 다음 바로 내가 원하는 코드를 작성할 때 //이 경우 function second => callback함수를 실행하면 된다! //위처럼 callback을 중복하다 보면 이제 callback hell이 발생하게 된다=>이럴 때는 promise로 해결..