포시코딩

개요 React에서 무한스크롤 구현할 일이 있어 여기저기 검색해봤는데 나오는 블로그마다 죄다 어렵게만 설명하고 있어서 답답해가지고 내가 직접 간단하게 구현해본 방법을 공유해본다. fetcher, React query, Throttle 이딴거 죄다 필요없다. JavaScript에서 기본 제공하는 Intersection Observer API를 통해 구현하는 법을 알아보자 React가 아닌 일반 JS에서 구현하는 방법을 아래 참고 https://4sii.tistory.com/377 [IntersectionObserver] 무한 스크롤 (Infinite scroll) https://github.com/10-10-gaza/wonbin GitHub - 10-10-gaza/wonbin Contribute to 10..

오늘은 묵혀놓은 궁금한 것들을 해결하는 시간을 가져보았다. 구글링 및 그동안 공부한 것들 종합 + 튜터님한테 직접 물어보는 방법을 통해 아래 다섯가지 상황과 결과를 정리해보았다. api 통합 vs 분리 개요 대기중인요청 진행중인 요청 완료된 요청 위 세가지 요청 리스트 api에 대해 정리하던중 다시 path를 깔끔하게 재할당 해줘야하는 상황이 생겼는데 두가지 선택사항이 생겼다. 방법 찾기 1. 라우터에서 부터 나눠지게? /api/orders/waiting?p=1 /api/orders/doing /api/orders/done?p=1 2. GET /api/orders로 들어가 컨트롤러에서 type에 따라 다른 service 호출? /api/orders?type=waiting&p=1 /api/orders?ty..

console.log와 alert의 파라미터 타입 확인 개요 // 1 console.log('1. orderId=' + orderId); // 2 console.log('2. orderId=', orderId); // 3 alert('3. orderId=' + orderId); // 4 alert('4. orderId=', orderId); 예전에는 1번처럼만 사용했었는데 2번처럼 하는게 가능하다는 걸 알게 되고 나서부터는 계속 2번처럼 써왔다. 그러다가 똑같이 문자열로서 작성하는거니 alert()에도 같은 방법으로 사용했는데 뒤의 값이 나오지 않는 문제를 겪었다. 문제 발견 및 해결 일단 모든 값을 다 찍어서 비교해봤다. 이렇게 비교해보니 console.log()에서부터 다르다는걸 알았는데 콤마(,)가..

개요 회원가입에서 회원정보와 이미지파일을 같이 전달하기 위해 방법을 찾다가 정보도 너무 없고 그나마 있는 정보들도 중구난방식이라 오랜 시간에 걸쳐 방법을 찾은 후 정리를 위해 포스팅함 잘못된 시도 저장 function test() { let file = document.querySelector('#input_file').files; let data = new FormData(); data.append('file', file); $.ajax({ type: "POST", url: '/file', data: data, processData: false, contentType: false, success: (res) => { console.log(res); } }); } @app.route('/file', me..

문제 발견 // 설명을 위해 요약된 코드 state.group.members.map((member, i)=>{ {test(e)}} value={member}/> }) redux state에 members 라는 Object Array가 있고 거기서 하나씩 꺼내 input value에 넣어줬는데 클라이언트든 서버든 계속 object Object로 출력되고 안에 내용을 꺼낼 수도 없는 상태가 되버려 한참을 헤맸다. 해결책 도출 value 값에 JSON.stringify()로 넣어주기 꺼내온 값을 value에 그대로 박아 넣는 과정에서 문제가 생긴거라 판단해 JSON.stringify로 감싸봤다. state.group.members.map((member, i)=>{ {test(e)}} value={JSON.st..

처음엔 나도 다른 사람들처럼 for문 두개로 2부터 n까지 모든 수로 나눠보며 소수를 찾는 방법으로 풀이했는데 정확도만 측정하는 테스트에서조차 시간초과나는 테스트케이스가 있었다. 솔직히 이런 소수를 다뤄본적이 많이 없었기 때문에 해당 문제의 질문답변 항목을 보던중에 엄상우 라는 분의 https://school.programmers.co.kr/questions/21359 글에서 정수론 관련하여 소수의 대한 성질을 이용해 연산 과정을 급격하게 줄이는 방법을 알게됨 해당 글의 3번은 앞의 1, 2번에서 다 해결되므로 알고만 있는거로 하고 (소수인지 여부를 묻는데 짝수면 1, 2번의 과정 없이도 바로 판별이 가능하므로) n은 2이상 1000000이하의 자연수고 n이 소수인지의 여부를 묻는게 아닌 그 사이에 소수..

https://kyounghwan01.github.io/blog/React/clipboard-copy/#%E1%84%89%E1%85%A5%E1%84%85%E1%85%A9%E1%86%AB 클립보드 텍스트 복사하기 클립보드 텍스트 복사하기, react, queryCommandSupported, javascript, react16, react hook, 리엑트, 프론트엔드, 웹, web, javascript copy to clipboard, navigator, clipboard kyounghwan01.github.io https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard Navigator.clipboard - Web APIs | MDN Th..

UserStorage.js 'use strict'; class UserStorage { users = { id: ['test', 'test2', 'test3'], psword: ['1234', '1234', '1234'], }; } module.exports = UserStorage; UserStorage 라는 class가 있을 때 외부에서 users 라는 field 에 접근하기 위해 다음과 같이 사용할 수 있다. 1. 인스턴스 사용 const UserStorage = require('경로'); const userStorage = new UserStorage(); console.log(userStorage.users); 2. class 자체에서 접근하기 const UserStorage = require(..

HTML 파일에서 script 파일을 불러와야 할 때가 있다. 이 때, 옵션으로 defer 혹은 async 를 볼 수 있는데, 이 옵셥들은 무엇을 의미하는걸까? 먼저, 자바스크립트는 HTML 태그 안에서 사용할 수 있다. 버튼 body 태그 안에서 위처럼 코드를 짰을 때, 버튼을 누르면 alert 으로 hi 가 나와야 하지만 이 코드는 제대로 작동하지 않는다. 무엇이 문제일까 button 을 만드는 HTML 보다 먼저 스크립트가 선언됐기 때문에 btn 이라는 id 를 가진 요소가 만들어지기도 전에 실행 되버려 작동하지 않게 된 것이다. 이를 해결하려면 스크립트 부분을 body 태그 상에서 제일 하단에 위치시키거나 따로 js 파일로 빼서 script 를 불러오는 방식으로 진행해야 할 것이다. test.js..

document.addEventListener('keydown', (e)=>{ 이벤트리스너로 방향키가 눌릴때마다 ctx.clearRect(0, 0, canvas.width, canvas.height); 캔버스를 깨끗이 지워준다음 다시 그리게 할거임 if(e.code == 'ArrowLeft'){ 왼쪽키가 눌릴때 왼쪽으로 50 만큼 이동하게 할건데 0 아래로 이동하면 화면 밖으로 나가버리니 if(snakeHead.x > 0){ snakeHead.x -= 50; 조건을 달아준 후 이동되게 한다. 다른 방향키들에도 각각 조건에 맞게 입력하면 document.addEventListener('keydown', (e)=>{ ctx.clearRect(0, 0, canvas.width, canvas.height); i..