TIL

event.target

DOM과 Virtual DOM

클래스형 컴포넌트 LifeCycle

styled components 사용하기

useState useEffect useRef useContext

React Router Dom

React.memo useCallback useMemo

Redux

Firebase Authentication Cloud Firestore Storage

JJINTEN: 찐텐으로 즐기자!!

뉴스피드 프로젝트 회고

비동기적 방식이란? 실행 중인 코드의 완료 여부와 무관하게 다음 코드로 넘어가는 방식이다.

JSON json-server

Redux Toolkit

axios란? node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다.

📌 Thunk

📌 Custom Hooks Custom Hooks 왜 쓰는가? 아래의 예시처럼 반복되는 로직이나 중복되는 코드를 우리만의 훅으로 관리할 수 있다! 예시 > 📌 Custom Hooks 만들기 1) 폴더구조 2) useInput.js 생성 및 hook 만들기

📌 React Query란? 1) 등장 배경 Redux-thunk, Redux-Saga와 같은 기존의 미들웨어는 코드량이 너무 많고, Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아니라는 문제가 있다. 이러한 문제점을 보안하기 위해 React Quer

📌 Throttling & Debouncing? 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법이다.

📌 인증(Authentication)과 인가(Authorization) 인증(Authentication) : 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 (예: 로그인) 인가(Authorization) : 특정 리소스에 접근할 수 있는 권한이 있는지 확

✔️ Git?? 내 컴퓨터에서 코드 관리하는 것이다.변경점을 기록하기 때문에 버전 관리 도구라고 할 수 있다. ✔️ Github?? 내 코드를 백업하기 위해 사용한다.협업 & 코드 공유를 위해 사용한다.

아웃소싱 프로젝트 S.A.

아웃소싱 프로젝트 회고

타입을 제대로 이해하고 활용하면 코드의 품질과 유지 보수성이 향상되고 실수를 줄일 수 있다!

TypeScript는 일반적인 타입 변환을 쉽게 하기 위해서 몇 가지 유틸리티 타입을 제공한다. 이러한 유틸리티는 전역으로 사용 가능하다.

클래스는 객체 지향 프로그래밍(OOP)의 핵심 구성 요소 중 하나로 객체를 만들기 위한 틀(template)이다.

useNavigate로 state 전달하기

AWS란? AWS는 Amazon Web Services의 약어로, 아마존닷컴이 제공하는 클라우드 컴퓨팅 플랫폼이다.

📌 Elastic Load Balancer 1. Scalability(확장성) vs Availability(고가용성) Scalability와 Availability는 모두 분산 시스템에서 중요한 개념이지만 서로 다른 개념이다. Scalability는 시스템이 커지거

📌 Route 53 1. DNS란? Domain Name System의 약어로, 인터넷에서 사용되는 컴퓨터나 기기들의 주소를 인터넷 사용자가 쉽게 이해하고 기억할 수 있는 도메인 이름으로 변환해주는 시스템이다. 인터넷에 연결된 모든 기기들은 IP 주소를 가지고 있

📌 Cloudfront 1. Cloudfront란? AWS가 제공하는 Content Delivery Network 서비스이다. S3 데이터를 각 Edge Locations에 캐싱해서 근처의 유저가 요청을 할 때는 그 지역에 캐싱된 곳에서 바로 데이터를 보내줄 수 있

React 심화 프로젝트 (코리니🐘) > ## 0. 프로젝트 목표 / 아이디어 / 요구사항 📌 프로젝트 목표 트러블 슈팅을 정리 할 수 있다. 기술 스택 선정의 이유를 설명 할 수 있다. 인증/인가 고려한 웹 서비스 구현 할 수 있다. 💡 아이디어 mai

1. Glitch로 json-server 배포하기 아래 출처 github를 들어간다. ✅ 출처 github Use this template로 Create a new repository 해준다. Repository name 설정하고 Create repositor

🐘 코리니 : 코딩을 시작한지 얼마 안 된 우리와 같은 "코린이", 주니어 개발자들을 위한 커뮤니티 서비스입니다.

1. 프로젝트 소개 이름 : POPlace (가제) 주제 : 팝업스토어 아카이빙 설명 : 서울의 팝업스토어 정보를 검색 및 공유할 수 있는 웹 애플리케이션으로 해당 팝업스토어에 대한 후기를 남겨 다른 사용자들과 공유할 수 있고 해당 팝업스토어의 위치를 기반으로 주변의

Git Issue 활용하기

React-Quill, Supabase storage 사용하기

React에서 상태 관리를 하는 이유? 리액트에서 상태관리를 하는 이유는 리액트가 상태의 변경에 따라 UI를 업데이트 하기 때문이다. 리액트에서 state, 즉 상태는 로컬 상태 관리 그리고 전역 상태 관리 이렇게 두 가지 방식으로 처리된다. 첫째로 로컬 상태 관리

1. 입출력 장치 1) 입력 장치 입력 장치란 사용자가 컴퓨터에게 명령하는 창구를 말한다. 입력 장치의 종류에는 키보드, 마우스, 터치스크린, 마이크, 스캐너, 카메라 등이 있다. 사용자는 입력 장치들을 통해 컴퓨터에게 명령을 요청하거나 데이터를 입력한다. 2)

React Quill 사용하기 ❓ Problem 이전 글을 보면 알 수 있듯이, React Quill 에디터를 사용하기 위한 기본 설정은 마친 뒤였다. 근데 직접 사용해보니 에디터 내에서 bold와 italic이 적용이 되지 않았다. 💡 Solution 현재 프로

Virtual DOM과 Real DOM의 차이를 설명해주세요. Real DOM은 실제 웹 페이지의 구조와 콘텐츠를 나타내는 것이다. 웹 페이지가 로드 되면 브라우저는 해당 페이지의 구조를 분석하여 트리 형태로 만든다. 이 트리는 노드(Node)로 구성되어 있으며, 각

useRef에 대해 설명해주세요. useRef는 React에서 제공하는 Hook 중 하나로 주로 DOM 요소 또는 컴포넌트에서 관리해야 하는 값들에 대한 참조를 생성하는데 사용된다. useRef를 사용하면 함수형 컴포넌트 내에서 변수를 선언하고, 해당 변수의 값이 변

var는 오래된 변수 선언 키워드로 함수 스코프를 가진다. 이는 변수가 선언된 함수 내에서만 유효하다는 의미이다. 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않는다. 이 때 변수 값은 가장 최근의 선언으로 덮어 쓰이

Promise와 Async/Await 차이 Promise와 Async/Await는 모두 자바스크립트의 비동기 프로그래밍을 다루는 기술이지만, 동작 방식에 차이가 있다. 먼저 Promise는 비동기 작업의 결과를 나타내는 객체이다. Promise는 세 가지 상태를 가진

대량의 데이터를 가지고 무한 스크롤을 구현 시 고려해야 할 점 대량의 데이터를 가지고 무한 스크롤을 구현할 때 가장 중요하게 고려해야 할 점은 성능과 로딩 속도 있다. 한 번에 로드 되는 아이템의 개수를 적절할게 조절하여 디바이스 및 네트워크 부하의 증가를 막고, 다

프로세스 생명주기 1. 대기 큐 (Waiting Queue) Job Queue : HDD(하드디스크)에 있던 프로그램들이 메모리에 올라올 때, 만약 메인 메모리가 가득 찼거나 CPU가 다른 작업을 수행중이라면 메모리에 올라오기 전에 어느정도 기다려야 하는데, 이때

Javascript의 호이스팅 Javascript의 호이스팅이란 변수와 함수 선언을 현재 스코프의 최상단으로 끌어올리는 동작을 말한다. 변수 호이스팅의 경우 스코프 맨 위로 끌어올려진다. var로 선언한 변수는 선언과 동시에 초기화되지 않으면 자동으로 undefine

웹 브라우저는 사용자가 요청한 웹 페이지를 보여주고, 서버와 통신하여 콘텐츠를 가져온다. 웹 브라우저는 사용자와 서버 간의 중개자 역할을 하며, 웹 페이지를 효과적으로 표시하기 위해 HTML, CSS, Javascript와 같은 웹 기술을 해석하고 실행한다.

쿠키(Cookie), 세션(Session), 웹 스토리지(Web Storage)는 모두 웹 브라우저에서 데이터를 저장하고 관리하기 위한 메커니즘이다. 그러나 각각의 특징과 사용 용도에 차이가 있다. 1. 쿠키(Cookie) 쿠키는 클라이언트 컴퓨터에 작은 텍스트 파

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)은 웹 애플리케이션 개발에서 사용되는 랜더링 방식이다. 1. 클라이언트 사이드 렌더링(CSR) 1) CSR이란? 클라이언트 사이드 렌더링(CSR)은 브라우저에서 모든 렌더링을 담당하는 방식이다. 초기

TCP(Transmission Control Protocol)와 UDP(User Datagram Protocol)는 컴퓨터 네트워크에서 사용되는 두 가지 주요한 통신 프로토콜이다.TCP(Transmission Control Protocol)는 신뢰성 있는 연결 지향형

📌 useInfiniteQuery란? Data Fetching이 일어날 때 마다 기존 리스트 데이터에 Fetched Data 를 추가하고자 할 때 유용하게 사용할 수 있는 React-query hook이다. 더보기 UI 또

HTTP와 HTTPS는 웹에서 정보를 주고받는 데 사용되는 프로토콜이다. HTTP는 데이터를 평문으로 전송한다. 따라서 제 3자가 데이터를 가로채거나 조작할 수 있다. HTTP는 기본적으로 TCP 포트 80을 사용하여 통신한다. 보안 계층이 없으므로 HTTP가 HTTP

📌 React의 컴포넌트 라이프사이클은 컴포넌트가 생성되고 업데이트되며 제거되는 과정을 효과적으로 관리하고 제어하는 데 사용된다. React 컴포넌트의 라이프사이클은 세 가지 주요 단계로 나눌 수 있다.constructor : 컴포넌트가 생성될 때 가장 먼저 실행되는

📌 Supabase는 데이터베이스 작업을 실시간으로 추적하고 애플리케이션에 업데이트를 자동으로 푸시할 수 있는 realtime을 제공한다. realtime은 Broadcast, Presence, Postgres Changes의 주요 기능을 포함한다. 1. Broad