분류 전체보기 (266) 썸네일형 리스트형 [git] a new branch bash 에서 github branch 만들기 작업폴더에서 GitBash 오픈 (Windows경우 파란색 글씨의 master표시 확인) 1. git branch (생성할 브랜치이름) - 브랜치 생성 2. git checkout (생성한 브랜치이름) - 생성한 브랜치로 전환 - 2번의 브랜치이름과 동일해야 한다. 3. git push - 원격 저장소에 반영하기 - 2,3의 브랜치이름과 동일해야 한다. 4. git push --set-upstream origin hella-dev - 원격 저장소 동기화 시키기 참조 https://github.com/TheCopiens/algorithm-study/blob/mast.. [React] state mirroring(상태 동기화) 부모에서 자식으로 데이터를 넘겨줄 때, 우리는 prop을 사용한다. 다만 여기서 어떤 목적성을 가지고 데이터를 전달 할 것인지에 따라서 child component에서 데이터 처리 방식이 달라진다. 1. perfect sync(완전 동기화)- 무조건 prop으로 내려 받은 키워드를 그대로 쓸 것.function Message({ messageColor }) {const color = messageColor; 2. initial data(최초의 데이터 값)- 맨 처음 데이터를 값을 설정 할 때만 사용 할 것.function Message({ initialColor }) {// The `color` state variable holds the *first* value of `initialColor`.// F.. [ React / Project2 ] 기존 프로젝트 재구성(re-factor) with React Query React Query 를 접하고 전역 데이터 state 관리할 수 있는 걸 알게 됐다. 따라서 redux와 같은(상태 관리 프로그램 등)을 대체할 수도 있다는 것을 확인 했다. 기존 code : server를 통해서 데이터 핸들링 및 reduxClient에서 Server로 request를 보내면 공공도서관 API로 대신 정보를 보내준다. Server는 받은 정보를 다시 Client로 보낸다. (*공공도서관 API는 하루 500개 무료이다.) 변경한 Code : React Query with useQuery dependent Query이번에 커피챗을 하면서 React Query를 써보라는 권유를 받아서 사용해볼 목적과 기존 프로젝트를 보수해 볼 목적으로 사용했다. 보수 목적1. fetch data가 다른.. [React/ReactQuery] 사용목적 from 공문 React QueryOverviewTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.탄스택 쿼리(FKA React 쿼리)는 흔히 웹 애플리케이션을 위한 데이터 가져오기 라이브러리로 설명되지만, 보다 기술적인 측면에서 보면 웹 애플리케이션에서 서버 상태(state)를 쉽게 가져오기, 캐싱, 동기화 및 업데이트할 수 있게 해줍니다... [ #개발자일지1:취준 ] 입문자는 무엇이 좋은 정보인지 모른다. 2024년 3월에 국비 교육을 맞쳤다. 한 달안에 취업을 할 수 있을줄 알았다. 하지만 현실은 달랐다. 미국은 현재 글을 쓰는 시점에도 금리를 내릴 생각을 하지 않는다. 금리 이야기를 하는 이유는 간단하다. 적어도 내 관점에서 금리가 높으면 일명 성장주라고 하는 테크주는 어려운 상황에 처하기 때문이다. 테크주는 개발자가 들어가서 일해야 하는 주된 회사들이다.커피쳇을 해보다.회사지원을 해본다. 연락이 없다. 아마도 어딘가 오류가 있어서 그런거라고 생각한다. 하지만 신입에겐 그런 눈이 없다. 그래서 주변에 물어 포트폴리오를 고친다. 약 3번의 큰 포트폴리오 리뉴얼(re-newer)을 했다. 하지만 연락이 없다.'나이 때문일까?'라는 생각을 해본다.그정도는 이슈는 생각하고 직무 전환을 했다. 그것때문에 다시 .. [REACT] a componenet를 나누는 방법 이 자료는 React 공식문서를 바탕으로 작성해 봤습니다.FilterableProductTableSearchBarProductTableProductCategoryRowProductRow 제품 테이블(라벤더색)을 보면 테이블 헤더('이름' 및 '가격' 레이블이 포함된)가 자체 구성 요소가 아닌 것을 알 수 있습니다. 이것은 선호도의 문제이며 어느 쪽이든 사용할 수 있습니다. 이 예제에서는 ProductTable의 목록 안에 표시되므로 ProductTable의 일부입니다. 그러나 이 헤더가 복잡해지면(예: 정렬을 추가하는 경우) 자체 ProductTableHeader 구성 요소로 이동할 수 있습니다.If you look at ProductTable (lavender), you’ll see that the .. [JS] JSON.stringify and JSON.parse 차이 둘을 먼저 구번 하기위해서 자바스크립트 JSON과 객체의 차이JSON 객체와 일반 JavaScript 객체(객체 리터럴이라고도 합니다)의 주요 차이점은 따옴표입니다 JSON(JavaScript Object Notation)은 문자열JSON 객체의 모든 키(key)와 문자열 유형 값은 큰따옴표(")로 감싸야 합니다.{ "name": "Jane Doe", "favorite-game": "Stardew Valley", "subscriber": false} JavaScript 객체객체 리터럴을 사용하면 키와 문자열을 큰따옴표로 묶을 필요가 없습니다. 단 객체 리터럴 문법에서는 대시(-)로 구분된 키는 따옴표로 감싸야 함. 따옴표를 사용하지 않으려면 키를 마켈표기법인 favoriteGames or fac.. [JS/Type] interface and type 타입스크립트 공식문서에 차이는 아래와 같다고 한다. the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.타입은 새로운 속성을 추가하기 위해 유형을 다시 열 수 없는 반면, 인터페이스는 항상 확장할 수 있다는 점이 가장 큰 차이점입니다.출처https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces interfacetypeproperty 추가 O O동일 명칭 사용 가능 OX interface Bear .. [JS] return new Response 본 글은 무료 Gemini를 통해서 작성된 자료입니다.보통 뒷단에서 쓰는 것으로 예상새 응답 개체를 생성하여 호출자에게 다시 보내기 전에 속성 및 본문 콘텐츠(data.status or header etc)를 사용자 지정할 수 있습니다.클라이언트에 보내기 전에 응답 데이터나 헤더를 조작해야 할 때 유용. fetch('/data') .then(response => { if (!response.ok) { return new Response('Error fetching data', { status: 500, statusText: 'Internal Server Error' }); } return response.clone(); // Create a copy of the origi.. [JS/Type] 더 명확한 작성법 함수 작성법 function createCourse(): { name: string; isPaid: boolean } { ... }function createCourse(): { name: string; isPaid: boolean } { ... }Return TypeInferred from the object parameterExplicitly defined after a colonType SafetyLess strict, potential for runtime errorsStricter, compiler checks for correct return typeReadabilityLess clear about the return typeClearer, self-documenting with explicit retur.. [JS/Type] void (update : 2024.04) void : 결과 값을 반환하지 않는 함수함수 : void, never, [ ]never : 반환값(return) 정의 가능.(다만, 일반적인 정의 아님) => ex) throw Error(message);- 확인 하기 어려운 값 + 함수가 예외 or 프로그램을 종료한다는 뜻The never type represents values which are never observed. In a return type, this means that the function throws an exception or terminates execution of the program.never also appears when TypeScript determines there’s nothing left in a union. .. [CSS] infinite scrolling X 포인트 : 전체 logos에서 자식 를 block에서 inline-block으로 만들어서 무제한 scrolling을 시키는 것==> No display FLEX animation from { transform : translateX( 0 ) } to { transform : translateX(-100%) }출처https://www.youtube.com/watch?v=nAjR0Oj0J8E [article] ‘신경 끄기의 기술’ 마크 맨슨 인터뷰 from 김지수의 인터스텔라 -하지만 누가 쾌락보다 고통을 먼저 계산하겠나? “실제로 우리는 만족감에 젖어 있기보다 고군분투하면서 생의 대부분 시간을 보낸다. 사는 건 어차피 고군분투다. 원하는 것을 이뤘더라도 고통과 문제는 계속된다. 문제없는 삶이란 없으니까. 그래서 질문해야 한다. 나는 어떤 종류의 고통을 견딜 수 있나? 어떤 것이 내게 가치 있는 고통인가? 고통을 당연한 것으로 여기고, 뇌가 신경 끄도록 자동으로 만든 패턴이 좋은 습관이고 루틴이다.” -그런데 당신은 마약과 파티와 술로 인생 초반을 탕진했다고 고백하지 않았나? 좋은 습관과는 거리가 멀었던 거로 아는데. “맞다. 일찍부터 인생의 쓴맛을 봤다. 십 대 때 가방에 숨긴 마약을 들켜서 퇴학당했다. 당시 나는 기능이 결여된 가족과 부모님에게 화가 나 있었던 것 같다. .. [JS] How Promise works 이 자료는 아래의 블로그에서 가져온 정보입니다. https://lydiahallie.framer.website/blog/promise-execution Promise의 Process a new promis object is created in memory. the promis object contains some internal slots( [[PromiseState]], [[PrmiseResult]], [[PromiseFulfillReactions]], [[PromiseRejectReactions]], [[PromiseIsHandled]] [[PromiseFulfillReactions]], [[PromiseRejectReactions]] These fields contain something calle.. [ React/ 원리 ] Basic, DOM by declarative DOM(선언적 DOM) 목차1. 명령적 코드 vs 선언적 코드2. 어떻게 React는 버추얼 돔으로 HTML을 그리는가2-1. POJO code2-2. Component2-3. Props2-4. JSX2-5. FRAGMENT & HTML AUTHORING2-6. FIBER AND RECONCILIATION HTML TREEchildren that is one object knows where another object is located in memory we represent that visually some arrows. The Document Object Model(DOM)a collection of objects in the comuputer's memory that represent the HTML elements .. [article/AI]Where is the A.I heading? Of course, there is the argument that new technology improves our standard of living in the long term, which makes up for the unemployment that it creates in the short term. This argument carried weight for much of the post-Industrial Revolution period, but it has lost its force in the past half century. In the United States, per-capita G.D.P. has almost doubled since 1980, while the median hous.. [Javascript/Json] Json 데이터를 만들기 위한 크롤링 최근에 누군가가 콘솔에 스크립트를 써, 정보를 추출하는 것을 보고 나도 따라해 봤다. json 데이터 만들려고 코드 작성(ai+코드 좀 수정)유용하다. 이렇게 간단한 데이터를 추출해 봤다. // Select all product tiles var productTiles = document.querySelectorAll('.product-tile'); // Iterate over each product tile productTiles.forEach(function(tile) { // Get the title var title = tile.querySelector('.tile-body .pdp-link').textContent; // Get the image URL var imageUrl = tile.que.. [Js/format ] 날짜, 통화 데이터 등의 정보를 변환해주는 함수 통화(ts)const CURRENCY_FORMATTER = new Intl.NumberFormat(undefined, { currency : "ko", style:"currency",})export const formatCurrency = (number : number) =>{ return CURRENCY_FORMATTER.format(number)} 출처 : 직접 날짜예를 들어, 현재 날짜를 한국 사용자들을 위한 형식으로 변환하고 싶다면 DateTimeFormat() 생성자로 포맷터를 생성한 객체의 format() 함수를 호출하면 됩니다.> const koDtf = new Intl.DateTimeFormat("ko", { dateStyle: "long" });undefined> koDtf.format(.. [Video/AI] 실리콘벨리 한기용 선생님의 실패 이야기 최근에 AI 글을 일고 2차 wave대한 고민을 하게 됐다. 이상하게 다른 곳에서(?) 나름의 좋은 해안을 얻었다. '내 직업만 위험한게 아니다. 모든 직업이 위험하다. 고로 지금이 가장 좋은 타임아닌가? 내가 원하는 것을 하기에' [article/AI] 2번째 AI 물결은 비루틴적(non-routine)인 것들이 목표가 된다. 글의 내용은 현재 1의 물결은 이미 우리 삶에 많은 부분을 대체하고 있다고 하고 있다. 특히 루틴적이 일(a job)들이 대체되고 있다고 했다. 다만 2번째 물결은 비루틴적인 일들이 대체될 것이라고 했다. 예를들어, DB 설계, 글쓰기는 일, 그래픽 디자인 등 고소득일도 점점 AI에 대체될 것으로 예상했다. the second wave of AI adoption could impact non-routine tasks involving the creation of databases, copywriting and graphic design, However, the second wave of AI adoption could impact non-routine tasks involving the creation .. 이전 1 2 3 4 5 6 ··· 14 다음
