분류 전체보기

[ React + typescript ] 카카오톡으로 공유하기

웹사이트에 카카오톡으로 공유하기 추가하는 방법 1. 일단 Kakao Developers에 접속한다 우측 상단의 문서 -> 메시지 -> Javascript로 들어온다 공식 문서를 읽어보자. 애플리케이션 설정 확인 이 기능을 사용하려면 카카오디벨로퍼스(Kakao Developers, 이하 개발자 웹사이트) 애플리케이션(이하 앱) 설정에 Web 플랫폼 및 도메인 등 정보가 등록되어 있어야 합니다. 자세한 내용은 애플리케이션 등록을 참고합니다. => 공유하기 구현 전 앱 등록하라는 말 1 - 1. 애플리케이션 등록( 진작 등록되어있으면 넘어가기 ) 공식 문서를 보면 잘 설명되어 있다. 내 애플리케이션으로 들어가서 애플리케이션을 추가하는 방법은 애플리케이션 등록 공식문서에 아주 잘 나와있다. 1. 등록하기 2. ..

[ JavaScript ] 배열 무작위로 섞기

방법은 몇 가지가 있는 것 같다 방법 1. const arr = [ "a", "b", "c", ]; // 배열 arr const randomValueFromArray = (array) => { const random = Math.floor(Math.random() * array.length); // 0~2 사이의 랜덤 숫자가 random에 들어간다 return array[random]; // 0~2 사이의 랜덤 정수가 들어가서 값을 구한다 // 만약 random 값이 2라면 'c'가 나온다 } console.log(randomValueFromArray(arr)); 하지만 이것은 배열을 무작위로 섞는 것이 아니라 배열을 무작위로 하나씩 가져오는 방법이다. 만약 무작위로 섞어서 다른 배열을 만들거라면 함수를..

[ React / Typescript ] typeScript에서 객체 key에 접근하는 방법ERROR! : Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 이 에러는 string literal 타입만이 허용되는 곳에 string 타입을 사용했기 때문이라고 하는데.. 이게 대체 무슨 말일까? const helloWorld1 = "Hello World" // 1. 'Hello World' 타입 => Hello World라는 타입만 허용 let helloWorld2 = "Hello World" // 2. string 타입 => string 타입만 허용 const helloWorld3: string = "Hello World" // 3. string 타입 => string 타입만 허용 ..

[ Javascript / React / typescript]객체 value값으로 key 값 찾기.

2022 대선 공약 자가진단 웹을 만들면서 value 값으로 key를 찾을 일이 있었다. const frequency: number[] = Object.values(obj); // 1. 원하는 객체의 '값'만 뽑아서 숫자형으로만 이루어진 frequency라는 배열을 만든다(값이 숫자였기 때문에 + typescript였기 때문에 숫자형이라고 표시함) const freCandidate = Object.keys(obj).filter((key: string) => { return obj[key] === Math.max(...frequency); }); // 2. 객체 안에서 가장 큰 key 값을 가진 value를 가져오길 원했기 때문에 이렇게 코드를 짰다 // obj에서 key만 뽑아서 filter을 쓴다(fi..

[ Nomad coders ] (의식의 흐름으로 쓰는) twitter clone 타입스크립트로 다시 만들어보기 4

#3.4 ~ #4.0 #4.1 ~ # 💻 거의 firestore 내용 기본적으로 생성하는 form은 useForm을 써서 만들고 있고 firebase는... 강의 내용과 버전이 다르기 때문에 그냥 공식문서를 참고해서 사용하고 있다. useForm에서 input img를 사용하려고 했다. 노마드코더 트위터 클론코딩에서는 useform을 사용하지 않고 img가 onChange될 때 자신이 올릴 이미지의 사진을 보여주는 식으로 구성이 되었다. 이 코드를 useform을 이용해서 짜려고 하니 몇 가지 문제가 나왔다. 1. form 안에 input이 들어있어서 발생하는 문제. form 안에 input이 들어있기 때문에 form에 걸어놓은 onSubmit함수에 이미지 경로를 넣게 되면 이미지가 변경될 때(onCha..

react로 setInterval을 사용할 때 겪을 수 있는 문제들

개인 프로젝트 agenda (이제는 pilzAgenda가 되어버린) 를 진행하면서 여러 문제에 맞닥뜨리게 되었다. 그 중 하나가 시간을 나타내는 문제. 시간? 그거 그냥 api받아오던가 현재 시간 받아와서 그려주면 되는거 아닌가? 하고 안일하게 생각했던 내 자신을 반성하게 된 어제 저녁을 계기로 react에서 setInterval을 어떻게 사용해야 하는지에 대해서 글을 작성해보기로 했다. 만약 내가 바닐라 자바스크립트를 이용해서 프로젝트를 만들고 있었다면 정말로 setInterval을 이용했을지도 모른다. 일단 원하는 결과는 화면에 그려지기에. 하지만 react는 누구나 알다시피 props나 state의 변화가 없으면 재렌더링되지 않는다. 또한 너무 많은 재렌더링은 react의 효율을 떨어뜨린다 => s..

[ 줄바꿈 오류 ] warning: LF will be replaced by CRLF in...

warning: LF will be replaced by CRLF in cypress/integration/2-advanced-examples/utilities.spec.js. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in cypress/integration/2-advanced-examples/viewport.spec.js. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in cypress/integration..

[ moment.js ] react로 날짜를 관리하는 쉽고 빠른 방법

react-big-calendar을 이용하기 위해서 moment를 접하고 개인 프로젝트를 진행하면서 알음알음 사용한 moment에 대한 기록 기본 지식 1. react-big-calendar은 moment가 필요하다 2. moment는 아주 편리하다! moment.js를 사용하면 좋은 점 : 날짜 포멧이 정말 !! 쉽다 : 달력날짜를 구하기도 쉽다 : 원하는 지역, 위치의 시간을 받아올 수도 있다 설치 npm install moment --save # npm yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install ..