본문 바로가기

전체 글

(266)
[ HTML ] 웹접근성 확인 tool at Chrome 쉽게 chrome에서 웹 전근성을 확인 할 수 있는 방법 1. 개발자 툴을 연다.2. Ctrl + Shift + P3. acc 검색한다.4. 체크, Enable full-page accessbility tree 5. 클릭, Roload DevTools6. 사람 버튼이 활성화 됨.
[ React / project2 ] 기존 프로젝트 변경하기 Vanilia => Type 이 글은 기존 JSX를 TSX로 바꾸는 과정을 정리한 글이다.TypeScript는 여러가지 이점을 가지고 있다.1. type이 정해져 있기 때문에 잠재적 애러를 감소 시킨다. vanilia의 경우 type 불일치가 종종 일어난다.2. 정확한 type 정의는 코드을 읽기 쉽게 만든다. 내가 만든 것이라면 크게 상관없을지 모르지만 다른 사람들과 공유하는/되는 코드는 모든 사람들이 읽기 쉽게 작성하는 것이 좋다. 1. github Clonegit clone -b {branch_name} --single-branch {저장소 URL} {폴더명} 예전에 클론해본다고 하루 날린적이 있는데, 선행학습이 돼서 다행이다.참조https://life-explorer.tistory.com/406본격적인 시작 2. type 정..
[article/AI] 테드 창 말하는 AI ―개인적 수준이 아닌 사회적 수준에서 재귀적인 발전이 기술 발전의 중요한 동력이라고 생각한다. 인공지능도 사람처럼 사회적 학습을 할 수 있을까? 사회를 이룬 인공지능이 자신들보다 더 나은 인공지능을 만들어낼 수도 있을까?“인공지능 프로그램 사이의 상호작용은 사람들 사이의 상호작용과 아무런 공통점이 없다. 인공지능은 도구일 뿐이다. 도구일 뿐인 인공지능을 결합해서 개선이 이루어진다면, 그것은 단순히 그 도구를 이용하는 인간의 우수성을 보여줄 뿐이다. 먼 미래에 인공지능 프로그램들이 정말 사람과 같아질 수도 있다. 하지만 그게 무슨 의미가 있을까? 우리는 이미 수십억명의 인간이 있는데 말이다. 우리가 사람들이 협력을 통해 만들어낼 수 있는 커다란 이점을 원한다면 우리는 이미 어떻게 할지 잘 알고 있는 셈이다..
[ git/clone ] git 클론 하기(특정 브런치 가져오기) git clonegit clone -b  git clone: This is the main command for cloning a Git repository.: This is the URL of the remote repository you want to clone from.-b : This option specifies the branch you want to clone. (optional): This is the name of the local directory where you want to clone the repository. 예시git clone https://github.com/user/repository.git -b feature-branch my-local-repository  특정 ..
[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 ..