분류 전체보기 (274) 썸네일형 리스트형 [ 인지 / ux ] 뇌를 이해하여 사람을 관찰하기 (feat.대니얼 카너먼) 행동경제학자, 대니얼 카너먼는 책 ‘생각에 관한 생각’에서 첫 장부터 뇌의 시스템1, 시스템2를 설명한다.개인적 생각으론 사람은 저 두 시스템 방식으로 사고체계를 만들어간다는 전제이지 않을까 한다. 시스템 1과 시스템 2란시스템 1 : 빠르고 직관적인 사고시스템 1은 자동적이고 직관적인 사고 방식을 담당한다. 이 시스템은 우리가 일상적으로 겪는 대부분의 상황에서 빠르게 반응하고 결정을 내리는 데 사용한다. 시스템1은 무의식적, 즉각적, 정서적, 반응을 한다. 이 시스템은 빠르고 효율적이지만 때떄로 편향적이고 비합리적이다."5 + 3은?" 이 질문에 대해 즉각적으로 "8"이라고 답하는 것은 시스템 1의 역할길을 건널 때, 무의식적으로 차가 오는지 확인하고 피하는 행동도 시스템 1 시스템 2 : 느리고 .. [ Project4 / 푸딩캠프 ] 컨퍼런스-언컨퍼런스 (Feat. 생각나는 기술회고) 이번 컨퍼런스 홈페이지를 제작하면서 여러가지 기술을 사용해 봤다. 나름 흥미있었고 진담을 뺐다. 왜냐하면 실제로 사용자가 내가 만든 서비스를 사용해 봤다는 것이기 때문이다. 물론 사용자로부터 실질적인 피드백을 받지 못했지만 그래도 천리길도 한 걸음씩이다. 페이지를 만들면서 만났던 과제를 적어내려가 보려 한다.1. 결제 페이지 제작2. 스케줄러 제작3. Tab Button 별 URL만들기 개발 환경(Client)언어 : React Js + TypescriptFramework: Vite라이브러리 : react-router-dom, zod, tosspayments-sdk(ver2)PG사 : 토스 1. 결제 페이지 제작결제 페이지를 만들면서 직면한 과제는 크게 3가지 인거 같다.결제 페이지에서 CORS 오류.. [ CSS / display : flex] hover가 적용되지 않는 것 처럼 보이는 이유 이 글은 Chat ai와 질문을 통해서 결론에 도달한 글을 정리한 글입니다. 따라서 일정 부분 내용이 잘못됐을 수 있다는 것을 이해해 주시기 발랍니다. 나는 Header을 만들고 있다. Header는 보통 1depth에 마우스가 hover되면 2depth가 노출되는 구조를 가지고 있다.그래서 관성적으로 고민없이 1depth 에 display : flex 를 걸고 hover 효과를 넣은 다음에 2depth를 block으로 바뀌게 해 봤는데 작동이 안 된다. 왜 일까? 결론부터 말하면 display :flex의 속성 때문이다. display : flex의 속성flex는 display : block과 달리 자식 요소들의 크기에 따라 부모의 배치와 크기가 결정된다.flex는 기본적으로 자식 요소들이 자동으로 .. [ Article / AI ] AI는 어떻게 우리의 질문에 답할까? 채팅형 AI는 어떻게 우리의 질문에 답할까?그들은 진짜 지능을 가지고 있을까? 라는 질문에 답을 얻을 수 있을거 같은 또 하나의 증거 글이다. 현재 그들은 단지 통계에 불과한다. 다만 데이터가 너무 많으니 값이 잘 수렴하는 것이다. 의미의 관계는 점수에 의한 구분 “Animal, vegetable, object — the features can be anything that people think are useful for distinguishing concepts.” Then assign a numerical value to each feature in the list. The word “dog,” for example, would score high on “furry” but low on “metal.. [ Article / 인정협회 ] 경쟁만이 살길 일까요? 과학과 기술의 발전으로 더 많은 자유과 돈을 얻었다고 생각했지만 우리는 더 궁핍해져 간다. 이상한 세상이다.시간이 흐를수록 경쟁이 더 치열해져 간다. 사람들은 더 예민해지고 자극적인 것을 쫒는다. 오징어게임을 필두로 최근에 흑백요리사 프로그램이 화제에 오르고 있다. 경쟁의 아름다움과 당연함(능력주의)이 등급화, 서열화 가치를 너무나 자연스럽게 우리의 시각으로 내재되는 것 같다. 걱정이 되는 건 이 구조가 모든 사회를 바라보는 창이 되지 않길 바라고 싶다.현재 내가 있는 IT 채용 시장도 이와 비슷하다. 경쟁이 치열하다. 내 옆에 있는 사람이 사라져야 내가 그 자리를 차지할 수 있을 것만 같다. 이런 사회적 창(관점)이 내재화 됐다면 경쟁을 당연히 자연스러운 것이다. 아니 꼭 필요한 것이다. 더불어 만약 .. [ Project4 / conference ] 2024년 9월 28일 컨퍼런스 시작과 종료 그리고 나의 생각(Feat. 푸딩 캠프) 컨퍼런스 자원봉사 프로젝트프로젝트 총 책임은 여기서 뭐든 가져가라고 말한다. 그는 미안해 한다. 왜냐하면 이 프로젝트는 돈을 제공하지 않기 때문이다. 그래서 그는 미안해 한다. 나는 여기서 크게 2가져 왔다고 생각한다. 프로젝트 매니저, 디자이너, 백 엔드와의 협업 경험 + 실제 사용자가 사용한 사이트그리고 여기 모인 사람들. 편리한 정량적 수치, 돈나는 정량적인 부분을 좋아한다. 그중에서 돈을 가장 좋아하는 거 같다. 돈은 쉽다. 보(see)일 뿐만 아니라 많은 다른 수단과 쉽게 교환 가능하다. 하지만 노동은 어떠한가? 노동은 보이지 않는다. 그래도 다행리 결과물이 나온다. 다만 더 깊게 들어가면 여기서 '노동의 숙려도다' 이걸 또 어떻게 측정할 것인가? 경력으로 처리할 수 있다. 허나 여기도 측정 .. [ Project4 / toy ] 컨퍼런스 페이지 제작 커피챗을 무료로 제공해 주셔서 어떻게 하면 은혜(?)를 갚을까 하다가, 컨퍼런스를 여신다고해 스텝 지원 후 어찌하다 무경력인 나에게 클라이언트 페이지를 맡김. 2024년 9월 28일(토)https://conference.puddingcamp.com/ 오프라인은 마감온라인은 현재 오픈중 간략한 기술회고프론트 엔드가 나밖에 없어서 혼자했기에 망정이지 만약 누군가화 협업했다면, 디자인 패턴(디자인 시스템) 부재로 인해서 다른 사람들은 읽을 수 없을 것. [ Article / 자아 ] '왜 세상은 나를 몰라보는가?' 비대한 자아 (FEAT. 나르시시즘) 특히 나는 남들과 달리 특별하며 따라서 좋은 대접을 받을 ‘자격’이 있다고 하는나르시시즘의 자격의식과 공격성 사이에 깊은 관계가 있다 분노에는 방향성이 있다.자존감이 높은 사람은 타인을 공격(폭력)자존감이 낮은 사람은 자신을 공격(자책, 자학)그 결과 마치 세상과 남들이 자신에게 빚이라도 진 것처럼 맡겨놓은 대접과 인정 내놓으라며 때를 쓴다. 그 과정에서 왜 대단한 나를 알아주지 않냐며 주변 사람들을 괴롭힌다. 이와 달리 비슷한 상황에서 자존감이 낮은 사람들은 분노의 종착지가 타인에 대한 공격이기보다 내가 그렇지 뭐 류의 자책과 자기비난이다. 이런 이유로 바우마이스터(Baumester), 부시먼(Bushman), 리어리(Leary) 등 많은 심리학자들이 목소리를 높여 낮은 자존감보다 근거없이 부풀려져있.. [ Project4 / React ] 다른 페이지 특정 위치로 이동하기 같은 페이지에서 를 이용하면 id가 페이지를 이동할 수 있다. 그런데 다른 페이지로 이동은 어떻게 될까? 같은 페이지의 경우 페이지가 로딩되면서 페이지만 이동하고 이동하는 기능이 사라진다. scrollIntoView()우리는 보통 페이지 이동을 위해서 다양한 scorll- method를 사용한다.window.scrollIntoView({ behavior : 'smooth', block:'center'}) Catch the Hash맨 처음 말했듯이, 와 id를 활용해서 페이지를 이동한다.에 정보가 id 정보가 있으면 id='callMe' 이렇게 적으면 이쪽의 위치로 이동합니다.#callMe' /> // a tag를 클릭하면, 하단에 있는 id 값으로 이동(...)id='callMe' > ..... [ JS ] !! // ??문법 삼항 함수같은거 좀 보는데, !! ?? 이런 문법은 거의 못봐서. 검색해 봤어요. ?? - Nullish Coalescing Operator (널 병합 연산자)??는 왼쪽의 값이 null이나 undefined일 경우에만 오른쪽 값을 반환합니다. let name = null;let defaultName = "Anonymous";console.log(name ?? defaultName); // "Anonymous" 차이점:|| 연산자와 유사하지만, null이나 undefined인 경우에만 오른쪽 값을 반환합니다.||는 0, false, ""(빈 문자열)과 같은 falsy 값도 오른쪽 값을 반환할 수 있습니다. !! - Double Negation (이중 부정)여기서 "hello"는 truthy 값이므로 !!.. [ React / TossPayment-1 ] <div id='payment-method'/> 어떻게 보여줄 것인가? 이번에 프로젝트를 하면서 Toss Payment를 설치해 봤다.현재 토스 2가지 버전이 있다. 1과 2버전 있으며 API를 활용하거나 SDK를 활용한다.여기서는 Toss ver2 + SDK를 활용했다 토스를 붙이면서 고민해야 할 부분은 총 3개자 있었던 거 같다. 고민했던 지점 3가지1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?2. 결제 취소시 어떻게 작성 상태 및 데이터를 정리해 나갈 것인가?3. 결제 완료 후 어떻게 플로우를 설정할 것인가? 1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?Toss에서는 를 통해서 UI를 그린다.토스로 위젯을 부를 준비가 되면useEffect(() => { async function renderPaymentWidgets() { if (wi.. [ CSS / background-image] check box or radio에 SVG이미지 넣기 CSS에 svg background image 넣기 input[type="checkbox"]:checked { background-color: rgba(255, 255, 255, 1); /* Background color when checked */ border-color: rgba(0, 0, 0, 1); /* Change border color when checked */ background-image: url('data:image/svg+xml;charset=UTF-8,http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejo.. [ React / useState ] 부모에서 자식으로 useState Hook 넘기기 때론 지식 component에게 useState hook을 넘겨서 부모에서 정보를 처리해야 할 때가 있다.(React은 근히 정보 구조를 잘 짜야 한다.) 여튼 여기서 이야기 할 부분 아닌데, 넘기게 된다면 타입을 자알~ 써줘야 한다.타입 선언interface CustomSelect { selectedPosition : string, setSelectedPosition : React.Dispatch>} 자식 콘포넌트에 넣기const ChildCompo : React.FC =>{ return( )} 작성하는 방법을 자꾸 까먹어서 여기에 기록 [ React / Generic ] argument (Feat. unkown) Type Generic의 작성 const makeFetch = (url : string) : Promise =>{ return new Promise(( res, rej ) => { fetch(url).then(res => { if(!res.ok) throw new Error('Network response was not ok'); return res.json(); }) .then(data => res(data as TData)) })} Type arugment : unknow1. JSX와의 모호성 해결React와 TypeScript를 함께 사용할 때, JSX 문법과 제너릭 문법 사이에 모호성이 발생할 수 있다. 따라서 extend unkown을 .. [ React / vite ] .env가 vite.config.tx에서 적용되지 않을때 vite .env 보통은 아래 처럼 적용 가능하다. env를 선언이 필요하다. default defineConfig(({ mode }) =>{...}를 통해서 const env = loadEnv(mode, process.cwd(), '');설정 vite.config.tximport { defineConfig, loadEnv } from 'vite'import react from '@vitejs/plugin-react';import { sentryVitePlugin } from '@sentry/vite-plugin';// https://vitejs.dev/config/export default defineConfig(({ mode }) =>{ const env = loadEnv(mode, proc.. [ CORS / React ] CORS 원리 보다는 해결 방식<local 환경> (Feat. vite) 현재 컨퍼런스 페이지를 만들고 있다. 토이 프로젝트로.결제를 위해서 데이터를 받아와야하는데, 데이터가 들어오지 않고 있다. 이유는 CORS. 환경은 물론 Local이다.이걸 해결하기 위해서 첫번째로 ngrok을 사용했다.이렇게 해서 얻은 URL을 넘겨서 server에서 내 주소를 허용하게 해놨는데도 문제가 생겼다.로컬 환경이 아니고 서버에서 도메인을 허용해줘도 안 될때, React with Typescriptconst submitData = { method: "POST", cache: "no-cache" as RequestCache, credentials: "same-origin" as RequestCredentials, headers: { "Content-Type":"applic.. [ React / Error ] Invalid DOM property `clip-path`. Did you mean `clipPath`? (Feat. 카멜케이스) Figma에서 만든 svg를 그대로 썼는데, 아마도 React에서는 약간의 경고를 내는 거 같다. 따라서 아래처럼 바꿔주길 원한다. clip-path => clipPathstroke-width => strokeWidth [ Project3 / deploy ] Next js 14 배포 (Feat. Cloudflare + KV) Cloudflare의 KV를 통해서 배포를 했다. 이틀은 배포하는 데 시간을 보낸거 같다. 그래도 일단 배포를 완료해서 기분이 좋다. 수정해야할 사항이 많긴 하다. 전체적인 프로세는 아래의 블로그를 통해서 진행했다.https://dev.to/devarshishimpi/how-to-create-a-new-nextjs-project-with-cloudflare-pages-and-workers-43d9 How to create a new Next.js project with Cloudflare Pages and WorkersIntroduction In this guide, we'll walk through creating a new Next.js 14 project using...dev.to 나의 프로젝트는.. [ Article / AI ] 인공지능에서 지능의 진실(Feat. synthetic intelligence) AI는 무서운 도구이다. 우리 삶의 많이 변화시킬 것이다. 특히, 우리의 직업 그래서 나는 AI에 대한 글을 모아서 최대한 읽을 수 있으면 읽으려고 한다. 두려움에 마주치고 준비하기 위해서이다.여기서 말하고 싶은 핵심 내용은 아마도 현재 AI라고 불리는 LLM기반 Chapt GPT는 '모방 게임' synthetic intelligence일 뿐이라고 말하고 있다. 즉 대량의 데이터로 모방해서 확률로 근사치에 대답하는 것이지 스스로 사유하고 사색하여 대답을 하는 것이 아니다. 라고 표현한다.사실 AI는 모방 모델이지 지능이 아니다.the cognitive sciences, philosophy, neuroscience, and so on. Other disciplines could act as vehicles.. [ Project3 / actionBtn ] Server Side에서 액션을 취하려고 할 때(Feat. onClick) Server Side를 열심히 고수하고 있다. 이유는 속도가 빠르다. 가장 일순이. Situation -서버에서 supabase를 가져와 delete 수행하기 Task- Server Side로, supabase delete function를 시행할 것. Action주의 onClickonClick =>. 'use client' // 클라이언트에서 오직 사용할 수 있음. 최초 방법 1. drop down으로 넘기기 => 안됨Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call thi.. 이전 1 2 3 4 ··· 14 다음
