본문 바로가기

분류 전체보기

 (39)
비동기 통신 1. 동기적 처리와 비동기적 처리 동기(Suncronous) : 요청을 보낸 후, 해당 요청의 응답을 받아야 다음 동작을 실행 ( 코드 한 줄 실행 완료 후 다음 줄 실행) 비동기( Asynchronous) : 요청 후 응답과 관계없이 다음 동작을 실행 자바스크립트는 동기적 처리가 기본. 비동기 처리를 지원하는 일부 기능이 있다. 주요 비동기적 처리 Rest API 요청 파일/ 데이터베이스 처리 타이머, 암호화/복호화 등 console.log("안녕하세요."); setTimeout(()=>{ console.log("김은하입니다."); },3000) console.log("개발자입니다."); // 안녕하세요. // 개발자입니다. // 김은하입니다. 비동기 처리의 문제점 결과 값이 없는데 다음 코드가 실행되..
23년 2분기 공부 계획 짜보기 게임 파인더 프로젝트가 일단 완성이 되었다. 리펙토링을 할 예정이긴 하다. 우선 nextjs로 서버단을 구현하는 것으로 리펙하면서 배포해보고 성능 최적화등 다양한 것들을 시도해 봐야 겠다. 시도해 보고 싶은건 많다. 그리고 아직 타입스크립트를 실전에서 어떤 식으로 잘 쓰는지 연습이 부족해서 타입스크립트와 next js를 일단 열심히 공부해 봐야겠다. 진짜 딱 알고 있는 react 지식으로 구현만 한 상태이다. sass 활용도 부족하다. 너무 새로운 것들을 한꺼번에 도입한 느낌이 적지 않다. CS는 일단 알고리즘 공부를 하려고 한다. 할게 많아서 시간 관리를 잘 해야 할 것 같다. 컴퓨터 구조와 운영체제 책을 샀는데 병행 할 시간이 부족할 것 같기도 하고.... 이게 좀 고민이다. 빨리 코테 책을 1회독 ..
알고리즘 ) 당장 좋은 것만 선택하는 그리디 그리디 그리디, 당장 좋은 것만 선택하는 알고리즘이다. Greedy의 뜻 탐욕법, 욕심쟁이 알고리즘 등 다양하게 불리는데 현재 상황에서 지금 당장 좋은 것만 고르는 방법을 뜻한다. 그리디 알고리즘은 기준에 따라 좋은 지 안좋은지 판단해야 하기 때문에 '가장 큰 순서대로' , '가장 작은 순서대로'와 같은 기준을 알게 모르게 제시해준다고 한다. 이런건 정렬과 관련이 있으므로 정렬과 자주 등장한다고 함. 예제 유명한 예제는 거스름돈 예제가 있다. 거스름돈으로 500원 100원 50원 10원으로 거슬러 줄 때 거슬러 줘야 할 동전의 최소 개수를 구하는 문제가 대표적이다. 대표적인 그리디 문제로 가장 큰 화폐단위부터 거슬러준다.는 생각만으로 간단하게 풀 수 있다. 이때 그리디 알고리즘의 정당성 중 하나는, 가지..
JavaScript의 이벤트 루프란? 흔히 자바스크립트를 배우다 보면 비동기 함수를 배울 때 처음 듣게 되는 자바스크립트의 이벤트 루프. 이번엔 이벤트 루프가 뭔지 설명해보려고 한다. 난 하나씩 처리하지 자바스크립트는 싱글 스레드 언어이다. 스레드? 나는 컴퓨터 조립을 몇 번 하면서 CPU를 구매할 때 처음 알게된 단어이다. 지금 검색창에 cpu를 쳐서 아무 cpu나 들어가 보길 바란다. 가보면 스레드 표시를 볼 수 있다. 스레드는 쉽게 말해 일꾼이다. 일을 처리할 수 있는 일꾼의 수라고 생각하면 된다. 그 말은 일을 처리할 일꾼이 많으면 많을 수록 한 번에 많은 양의 일을 처리 할 수 있다는 뜻이다. 자바스크립트는 싱글 스레드라고? 그럼 한 번에 한 개만 가능하다는 것인가? 그렇다. 왜 그렇게 만들어졌을까? 자바스크립트는 웹 페이지에서 보..
TypeScript에서 객체에서 Key로 String을 쓰지 못하는 이유 ( String과 String Literal ) 객체의 Key가 String이 아니라고? TypeScript를 처음 쓰면 익숙하지 않은 불편한 상황들을 만나게 될 때가 종종 생긴다. 평소처럼 코딩하면 생기는 붉은 줄들을 볼 수 있다. 이번에 만난 문제 또한 그렇다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type TypeScript는 기본적으로 객체의 프로퍼티를 읽을 때, string타입의 key 사용을 허용하지 않는다는 문구의 등장. 나는 분명 JavaScript의 객체의 키값은 Map이 아닌 경우에는 무조건 String만 된다고 알고있었는데.. 이게 무슨 상황? 이런 현상은 단지 이게 TypeScript라서 그렇다는 ..
리액트 hook처럼 생긴 상태 관리 라이브러리 recoil 사용하기 왜 recoil 을 썼는가? 간단하게 다양한 상태를 관리하고 싶었다. 예전 프로젝트에서 props drilling이 일어나는 것을 보면서 상태 관리를 해야 겠다는 필요성을 느꼈지만 내 프로젝트에 빨리 도입 해 볼 수 있는 기술을 찾다가 recoil을 도입하게 되었다. https://recoiljs.org/ko/docs/introduction/getting-started Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org 공식 recoil 튜토리얼 페이지에 들어갔을때 너무 놀랐다. 배워야 할 양이 너무 적었기 때문이다. 그리고 모양 조차 함수형 컴포넌트에 익숙한 나에게 hook처럼 보였기 때문에 더 친화적이었다. 그 밖의 이유들 수업 때 들었던 redux는 상대적으..
이벤트 전파 ( 이벤트 버블링과 이벤트 캡처링 ) 이벤트 객체는 이벤트를 발생시킨 DOM요소를 시작으로 DOM트리를 통해 전파된다. 이때 이벤트가 하위에서 상위로 전파되는 것을 이벤트 버블링. 상위에서 하위 요소 방향으로 전파되는 것을 이벤트 캡처링이라고 한다. 우리는 이런 개념을 통해 공통된 이벤트를 각자 주는 것이 아닌 일종의 위임을 할 수 있는데, 이를 이벤트 위임(event delegation) 이라고 한다. 공통 조상에 하나의 핸들러로 여러 요소를 다룰 수 있는 것이다. 하지만 이것이 매번 필요한 것은 아닐것이다. 그럴 때는 방법이 있다. 이벤트 전파를 막기 위해서는 e.stopPropagation()을 사용하면 된다. function logEvent(event) { event.stopPropagation(); } 이것을 통해 우리는 이벤트 버..
Duplicate atom key 에러 메시지 없애기 (Next.js) https://recoiljs.org/blog/2022/10/11/recoil-0.7.6-release/ Recoil 0.7.6 | Recoil - Expose flag to disable "duplicate atom key" checking / logging, as it was too noisy in environments such as NextJS or some dev environments using Fast Refresh. (#733, #2020, #2046) recoiljs.org 위는 해당 오류 공식 문서 내용이다. next.js에서 recoil을 쓰다보면 만나는 고질적인 문제. Duplicate atom key "". This is a FATAL ERROR in production. But ..

티스토리툴바