본문 바로가기

🌼 TIL

🌞 1/31 내배캠 React 66일차 [Throttling & Debouncing] Throttling and Debouncing : 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 예시 (게임에서 클릭을 계속해도 총알은 일정한 간격으로 나가는 것) Throttling 이란? 예시 (게임에서 클릭을 계속해도 총알은 일정한 간격으로 나가는 것) 타입 : 크게 3가지 leading edge / trailing edge / leading & trailing edge 보통 무한스크롤 할때 자주 사용한다. Leading Edge (선두 event) : event가 발생했을 때, 첫번째 함수를발동하고 딜레이를 준다, 특정 딜레이 타임이 지나가면 다시 event를 호출하고, 다시 딜레이타임을 준다. Trailing Edge (마지막 event) : 특정 .. 더보기
🌞 1/30 내배캠 React 66일차 [프로젝트 발표] 오늘 최종 프로젝트 전 마지막 프로젝트 발표가 끝났다. 이건 우리 프로젝트 Hi, 카공이다. 프로젝트 명 👋 Hi, 카공 컨셉 📕 카페에서 공부하는 사람 (카공족) 들을 위한 사이트. 작은 카페에서 눈치 보면서 카공하지 말고 넓은 카페에서 눈치보지 말고 편하게 카공하자 !! 설명 💻 혹시 카페에서 공부해보신 적 있으신가요? 아니면 나도 카페에서 공부하고 싶은데, 어디로 가야할 지 고민하신 적 있으신가요? 작은 카페는 눈치 보이기도 하고, 카페 분위기도 궁금하고, 좋은 자리가 있는지 콘센트는 얼마나 있는지 한번쯤은 궁금하셨을 거라고 생각합니다. Hi, 카공은 카공 리뷰 사이트로 이 카페의 장단점, 평점, 나만의 명당 등을 공유할 수 있는 사이트입니다. https://hi-cagong.vercel.app/ .. 더보기
🌞 1/19 내배캠 React 58일차 [typescript] [ Typescript ] [ 오늘 한 일 ] - 어제 한 것 복습 - Ts 리펙토링 - 유데미 React 수강 - Ts 문제 풀이 🛠 오늘의 트러블 슈팅 [Typescript] useState를 props로 가져올 때 어떻게 type을 설정해줘야 하는지에 대해 : 여기서 States라는 interface를 어디에 넣어줘야할지도 모르겠어서 한참 찾았다. setState를 props로 넘길때 어떤 type을 설정해줘야 하는지 몰랐다. 위에 있는 setTodos,todos 부분이다. 그래서 찾아보다가 void로 넘기는 방법도 있지만 따로 정의 할 수 있는 타입이 있었다. 일단 import React, { useState, Dispatch, SetStateAction } from "react"; 로 SetSt.. 더보기
🌞 1/18 내배캠 React 57일차 [typescript] [ Typescript ] [ 트러블 슈팅 ] Typescript ⛔ 문제 : jsx파일을 tsx파일로 변환하는 중 ‘ —jsx ’ 플래그를 제공하지 않으면 JSX를 사용할 수 없습니다 오류 tsconfig.json 파일에서의 설정이 부족해서 생긴 에러 🛠 해결 → tsconfig.json에 “jsx”: “react 를 입력해주면 된다. → 에러 해결 [ 트러블 슈팅 ] Typescript npm install -g ts-node 시에 npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/ts-node npm ERR! errno -13 npm ERR! Error: EACCES: permission deni.. 더보기
🌞 1/17 내배캠 React 56일차 [typescript] [ Typescript ] 오늘도 typescript에 대해서 이어서 공부를 진행했다. Enum / Union / Interface /제네릭 / 타입 추론 등을 배웠다. Enum 타입 자바스크립트에는 없고 타입스크립트에만 있는 타입 enum은 특정 값들의 집합을 의미하는 자료형 enum Direction { Up, Down, Left, Right, } const up: Direction = Direction.Up; // Direction = Direction.UP | Direction.Down | Direction.Left | Direction.Right const leftOrRight: Direction.Left | Direction.Right = Direction.Left; Union 타입 : (A .. 더보기
🌞 1/16 내배캠 React 55일차 TypeScript Typescript는 자바스크립트에 타입을 추가하여 자바스크립트의 단점을 보완하는 언어이다. 자바스크립트의 단점은 무엇인가?? 동적 타입이라 프로젝트 사이즈가 커지면 유지보수가 어렵다 런타임시 (프로그램이 실행되었을때) 오류가 검출되어 오류 확인이 불편하다. 자바스크립트에 타입을 추가하여 유지보수 하기 쉬운 언어지만 그만큼 자바크스립트보단 조금 어렵다. 터미널 code . 오류 터미널창에서 code . 입력하기 → 해당 폴더를 vscode에서 열기 오류 vscode에서 cmd+shift+p 또는 fn+f1입력 → shell command 입력 → install ‘code’ command in PATH클릭 후 터미널 재실행 더보기
🌞 1/5 내배캠 React 47일차 React Native react-native css 구성 블러처리 ImageBackground - blurRadius={n} 효과 참고 : https://lily-in-abstract.tistory.com/100 LinearGradient : 자동으로 블러처리나 효과를 내주는 것 : →블랙으로 진해지기 등 stylesheet. absoluteFill = styles={{ position: “absolute”, top: 0, left: 0 }} 백그라운드 이미지를 겹쳐서 쓸 수 있다. blur처리하거나 다른 곳에 사용할 때 유용함 Stack - Native Stack : Native Stack을 자주 사용한다 (운영체제에 맞게 설정되어 빠르기 때문) Swiper : 개체를 옆으로 넘기는 효과로 설치 후 .. 더보기
🌞 1/4 내배캠 React 46일차 React Native 오늘은 다른 강의를 보며 react-native 공부를 했다 노마드 코더의 강의를 보았다. 강의에서 알려준 사이트가 있다 React-Native API기능 참조할 수 있는 사이트이다. expo.SDK https://docs.expo.dev/versions/latest/sdk/document-picker/ DocumentPicker docs.expo.dev 에러 [React Native] Vscode Terminal console.log() error : xcode/android studio가 아닌 실 기기를 사용하는 경우 console.log()를 입력하더라도 terminal에 console.log 값이 뜨지 않는다면 실 기기를 흔들기 or 세손가락 길게 터치하면 나오는 메뉴에서 .. 더보기