분류 전체보기

냅다 함수 :: React로 시계 만들기

지금 리액트를 공부중이기때문에 이번에 외운 함수는 리액트로 시계만들기이다. 녹화하려고 여러번 반복하다보니 말할 수 있을 정도로 외웠다. setInterval 두렵지 않아..! 아직 짧은 코드만 외워서 그런지 코드 외우기보다 녹화가 더 어렵다🤣

[Git] 팀 Organization에서 나만 push 안 된 이유 (ft.403 error)

프로젝트 팀원들과 프로젝트 들어갔을 때 실수를 조금이라도 방지하기 위해 미리 연습해보자고 모였다. 동기가 만들어준 git flow자료를 가지고 했었는데 clone부터 add, commit 까지는 순탄했다 💥문제 발생 문제는 push할 때 였다. 팀원들은 성공했고 pull request까지 됐는데 나만.. 나만!! 안됐다.😭😭😭 fatal : unable to access '깃헙 주소' : The requested URL returned error: 403 의심했던 포인트들 - repository가 private인가? -> public이었다. - 토큰 기간 만료인가? -> 토큰은 21년 12월에 기한 만료 없게 발급받았다. 토큰 기간만료 ❌ 혹시나해서 소스트리로 해봤을 때는 전혀 문제 없어서 환장할 것 같..

냅다 외우기 :: [JS] 소수판별

문제를 풀고 복습하는것도 좋지만 무작정 외워서 직접 써보는것 즉, 백지 복습을 해보는게 도움이 될 것 같아서 소수판별 문제를 외워서 써봤습니다. // 소수판별 (소수: 1과 자기 자신으로만 나눠지는 수) // 소수이면 Yes, 아니면 No로 출력하세요. function checkPrime(n) { for (let i = 2; i < n; i++) { if (n % i === 0) { console.log("NO"); return false; } } if (n === 1) { console.log("NO"); return false; } console.log("YES"); } checkPrime(n); 영상으로 남기고 보니 몇 줄 안되는데 2분 가까이 걸린게 놀라웠고 이렇게 시작하기를 잘한 것 같다는 냅다..

[JS] 중복된 if문 function으로 바꿔주세요

타이머를 만들었을 때 중복되는 코드가 눈에 거슬렸다. 그리고 구현이 먼저라는게 목표였고 그 뒤에는 코드의 중복제거나 효율적으로 만들어본 적이 없는데 코드리뷰를 받아서 수정해봤다. 중복 제거 되기 전의 코드 전체 코드 더보기 let seconds = 0; const appendSeconds = document.querySelector(".num-sec"); const appendMinutes = document.querySelector(".num-min"); const appendHours = document.querySelector(".num-hour"); const btnStart = document.querySelector('.btn-disabled'); const btnReset = document..

[React] 단축키

https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

[React] Hook에 대해 알아보자. 그런데 useState 등을 곁들인

다들 Hook부터는 어려워진다. 인강을 들어도 이해하는게 힘들다고하는데 역시나 쉽지 않다. 그래서 나름 시리즈(?)에 걸쳐 Hook과 useState, useRef, useMemo에 대해 포스팅 하려고한다. Hook이란 뭘까? "기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다" 특징 - 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 이러한 훅은 함수의 최상위 레벨에서만 정의한다. 조건으로 훅을 할당하지 않는다. 렌더링 될 때 항상 같은 순서로 렌더링이 되야 한다 공식문서의 글을 읽어보면 간결하게 사용할 수 있게 한다고 이해할 수 있다. 📌 useState 변수의 변화를 감지하여 재렌더링하게 해주는 훅으로 ..

[CSS] 글자 뒤에 이미지 배치 외않되?

사건의 전말 타이머 작업을 하던 중 글자를 앞에 두고 이미지를 뒤에 두고싶었다. 이렇게 말로쓰면 너무 간단하고 문제를 해결한 지금 다시봐도 왜 어렵게 생각했는지 의문이들정도다. (하지만 그 당시에는 촉박했고 시간안에 해야한다는 생각에 다급했다) 현실 .wraps-time .num-hour::after, .wraps-time .num-min::after, .wraps-time .num-sec::after { content: ""; display: block; background: no-repeat center/80px url(../images/box.png); width: 80px; height: 80px; } 간략한 설명 .wraps-time 안에 시간(.num-hour), 분(.num-min), 초(...

발표 절대 못 한다던 내가 첫 연사를 마친 소감

나는 사람들 앞에서 절대 발표 못해 라고 장담했던 사람이다. 글과는 거리가 멀어 집필은 머나먼 얘기하고 생각했었다. 거의 운명적으로 타입스크립트 책 집필을 하게됐고 또 연사까지 이어졌다. 준비하는 과정은 생각이상으로 쉽지 않았는데 수없이 내용을 바꾸고 회의하고 또 대본 수정하고 회의하고 정신없었다. 제주에서 진행된 연사라서 연사일보다 며칠 빨리갔는데 팀원들과 계속 회의하면서 수정하다보니 하루라도 제대로 논적없다고 투덜거리기도했다. 그리고 나는 염소 발표할거니 다들 웃지 말아달라는 농담을 했었는데 결론부터 말하자면 꽤나 잘 해냈다. 영상으로 남겨놨는데 두려워서 아직 확인은 못했다. 환상의 분업 파트 분배부터 명함 디자인까지 사소한 부분까지 맞춰가는 과정에서 의견이 갈리기 쉬운데 굉장히 순탄했던 것 같다. ..

[React] 조각조각 땃따따 컴포넌트 만들어보기

앞서 리액트의 장점이 컴포넌트화라는 포스팅을 했다. 재사용 하기위해 컴포넌트가 중요하다고하는데 그래서 그 컴포넌트화가 대체 무엇인지 어떻게 하는지 정리해보려고 한다. 리액트에서 컴포넌트로 만들 때 이 3가지 방법을 사용한다. 본인이 마음에 드는걸 써도 되고 회사 컨벤션을 따라가면된다. const Section =()=>{} const Section = function(){} function Section(){} 컴포넌트를 어디까지 해야할까?? import './App.css' function Menu () { return ( menu ) } function Header(){ return ( header ) } function Main(){ return ( section ) } function Footer..

Node JS, React 많이 들어봤는데 대체 뭘까?

Node JS 란? JavaScript 런타임으로 JavaScript가 동작할 수 있는 프로그램이다. JavaScript를 브라우저가 아닌 곳에서도 사용하려고 만들어졌다. 이 때 서버를 만드는거라고 이해하게되는데 서버를 만들 수 있지만 서버만 만드는 것이 아니다. 그렇기에 확장성 있는 네트워크 애플리케이션 개발에서 사용된다. 특징 Non-Blocking I/O (비동기 Input/Output, 다 처리하지 않고 일단 전달한다.) Single Thread (error처리 필수!) 복잡하고 용량도 크고 속도도 느리다는 개발자에겐 말도안되는 단점들을 가지고있다. 하지만 왜 node 환경에서 많이들 사용할까? 그 이유는 개발 생태계때문이다. npm으로 남들이 만들어둔 프로젝트를 가져올 수 있기때문에 호환성이 좋..