본문 바로가기

분류 전체보기

 (149)
[Trouble Shooting] 상품 수정 등록 후 뒤로가기 경로 문제 - 세컨핸드 프로젝트를 수정하면서 겪은 고민과 문제 해결에 대해서 기록해보고자 한다. - 먼저 아래 두 개의 영상을 보면 사용자 입장에서 불편함을 느낄 수 있다고 생각한다. 홈화면 - 상품상세 - 상품수정 판매내역 - 상품상세 - 상품수정 - 프로젝트의 로직은 아래와 같다. 1. 홈화면 또는 판매내역에서 상품을 선택했을 때, 해당 상품의 상세페이지로 이동을 한다. 2. 만약 내가 등록한 상품이라면 상품 게시글을 수정할 수 있고, 수정 완료가 되면 해당 상품의 상세페이지로 이동한다. - 이때, 위의 두 개의 영상에서 확인할 수 있듯이 상품의 수정 완료를 하고 해당 상품의 상세 페이지로 이동했을 때, 뒤로가기 버튼을 클릭하면 상품의 상세페이지의 진입점(홈화면 또는 판매내역)이 아닌 다시 상품 수정 페이지로 ..
React에서 서버와 통신하는 과정을 구현하는 방법 1. 사용자 상호작용으로 인한 서버 통신 - 사용자의 상호작용으로 인한 서버 통신은 예를 들어 "버튼 클릭으로 서버와 통신", "사용자 입력으로 서버에 요청", "사용자 상호작용에 의한 서버 통신" 등을 의미한다. - 사용자가 버튼을 클릭하거나 어떤 입력을 하면 이벤트 핸들러가 실행되고, 그 내부에서 서버와의 통신이 이루어지는 것을 의미한다. import React, { useState } from 'react'; function App() { const [data, setData] = useState(null); const fetchData = async () => { try { // 서버와 통신하여 데이터 가져오기 const response = await fetch('https://api.exampl..
Virtual DOM이란? - DOM(Document Object Model) : 하나하나의 Element(HTML)들을 담고 있는 웹페이지를 Document라고 하는데, 이를 브라우저가 분석해 페이지를 띄워주는 방식이다. - Virtual DOM이란 React에서 사용하는 가상 DOM으로 실제 DOM 기반으로 만들어지며 실제 DOM이 아닌 JS 객체 형태로 메모리 안에 저장되어 있다. - 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁기 때문에, React는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리한다. - 예를 들어, document.querySelector("#title").style.color = "red"와 ..
리액트에서 list 태그에 key 값을 추가해야하는 이유 - 리액트에서 배열 항목을 렌더링할 때, key 값을 추가하지 않으면 아래와 같은 오류 메시지가 콘솔에 표시된다. "Warning: Each child in a list should have a unique "key" prop." * key 값이 필요한 이유 - 고유성을 보장 : key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에게 알려주어 나중에 매칭할 수 있도록 하며 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요하다. - 성능 최적화 : key 속성을 제공함으로써 리액트는 리스트의 변경 사항을 더 빠르게 감지할 수 있다. 예를 들어, list의 일부가 업데이트되는 경우 virtualDOM에서 변화를 감지하고 realDOM과 비교하여 새로운 DO..
useReducer를 활용한 상태관리 흐름 - useReducer Hooks API는 flux 아키텍쳐를 따른다. - useReducer API는 복잡한 상태관리에서 useState보다 유리하다. - useReducer는 구체적인 상태변경을 감추고, reducer에게 맡길 수 있고, 콜백(setState 등)을 계속 하위 component에 전달해줘야 하는 불편함을 줄일 수 있다. 대신 dispatch라는 매개체 역할의 함수를 전달해준다. * flux 아키텍처 - dispatcher는 애플리케이션에서 발생하는 모든 action을 수신하고 이 action을 처리할 적절한 store에게 전달한다. - action은 dispatcher에 전달되는 객체로 애플리케이션에서 발생하는 이벤트나 사용자의 상호작용을 나타낸다. - store는 애플리케이션의 상태..
해시 테이블(HashTable) - 해시 테이블 : (key, value)로 데이터를 저장하는 자료구조 중 하나로 빠르게 데이터를 검색할 수 있다. - 해시 테이블이 빠른 검색속도를 제공하는 이유는 내부적으로 배열(버킷)을 사용하여 데이터를 저장하기 때문이다. - 해시 테이블은 각각의 key 값에 해시함수를 적용해 배열의 고유한 index를 생성하고 이 index를 활용해 값을 저장하거나 검색한다. - 따라서, 이러한 해싱 구조로 데이터를 저장하면 index를 통해 key 값으로 데이터를 찾을 때 해시 함수를 1번만 수행하면 되므로 매우 빠르게 데이터를 저장/삭제/조회할 수 있다. - 해시테이블의 평균 시간복잡도는 O(1)이지만, 데이터의 충돌이 발생하는 경우 Chaining에 연결된 리스트들까지 검색을 해야 하므로 O(N)까지 시간복..
HTTP GET과 POST 차이 - HTTP GET과 POST는 웹에서 데이터를 서버에 보내거나 서버에서 데이트를 받는 데 사용되는 두 가지 주요한 HTTP 메서드이다. GET과 POST 차이 1. 목적 - GET : 서버에 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메서드이다. - POST : 서버로 리소르를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 메서드다. 2. 데이터 전송방식 - GET : URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링(query string)이라고 부른다. 예를 들어 www.example.com/show?name1= value1&name2=value2 의 경우 서버에서는 name1과 name2라는 파라미터 명으로 각각 value1과 value2의 파라미터 값을 전달..
Context Switch - 컨텍스트 스위칭 : CPU에서 실행할 프로세스를 교체하는 기술이며 프로세스 스케줄링에서 프로세스를 계속해서 바꿔주는 기술들에 사용되는 게 바로 컨텍스트 스위칭이다. - 즉, 여러개의 프로세스가 실행되고 있을 때 기존에 실행되던 프로세스를 중단하고 다른 프로세스를 실행하는 것이다. - 컨텍스트 스위칭은 PCB(Process Context/Control Block)이라고 하는 메모르의 별도 공간에 process 상태값들을 저장하고, 해당 값들을 찾는 방법으로 구현된다. - 위 예시에서 A라는 프로세스가 running 상태이고 B라는 프로세스가 ready 상태라고 할 때, 스케줄러가 A 프로세스의 실행을 중단하고 B 프로세스를 실행할 것을 요청하는 경우 - A 프로세스의 SP(Stack Pointer)의 ..

티스토리툴바