Curt Poem about Computer

SSAFY에서 프로젝트를 시작하면서 몇몇 질문을 받았습니다. 특히, 리액트에서 의도한 동작이 수행되지 않는 경우에 대한 질문이 많았습니다. 그런 질문의 대부분이 useState 훅에 대한 이해가 부족하였기 때문에 벌어진 일이었습니다. 그래서 이 문제가 발생하는 원인을 설명하고 간단한 해결책을 알려드리겠습니다.useState의 set 함수는 상태를 즉시 변경하지 않습니다.useState로 만든 상태 변수를 읽을 때, set 함수를 통해 상태를 업데이트 하였지만 최신값을 가지고 있지 않기 때문에 문제가 발생합니다. 다음 코드를 보시죠.import { useState } from "react";function App() { const [count, setCount] = useState(0); const [..

useEffect 훅의 목적 중 하나는 부수효과를 안전하게 처리하는 것입니다. 부수효과란 앱이 의도한 대로 동작하기 위해 실행되어야 하지만 현재의 컴포넌트 렌더링 과정에 직접적인 영향을 미치지는 않는 작업입니다. 이러한 작업들은 꼭 실행되어야하는 작업이지만 현 컴포넌트 렌더링 과정에 직접적이고 즉각적인 영향을 미치지 않는 작업들이죠. 즉각적인 변화를 주지 않고 뒤늦게 영향을 주기 때문에 무한 루프 같은 문제점이 발생할 수 있습니다. useEffect로 부수효과 안전하게 처리하기 HTTP 요청에서의 부수효과 일반적으로 이러한 부수 효과는 외부 서버에서 데이터를 불러오는 작업 등 비동기 함수를 실행하는 상황에서 쉽게 볼 수 있습니다. 다음 코드를 보시죠. import { useState, useEffect ..

axios 요청의 try-catch문에서 catch (error) {console.log(error)}로 인해 콘솔창에 나온 메세지였습니다. canceled라는 에러가 발생하였는데 요청을 취소하는 로직을 추가한 상태도 아니었습니다. Tanstack ReactQuery 라이브러리를 사용하고 있었기에 Tanstack에서 뭔가 이상을 감지하고 취소하였을 거라 생각도 해보았지만 요청이 취소될 이유가 전혀 없어 보였습니다. error의 signal 항목을 살펴보니 다음과 같이 reason이라는 항목이 있어 확인해보았습니다. code: 20에 message: signal is aborted without reason"라는 것을 확인할 수 있었습니다. 아무런 정보를 얻지못했죠. 그래서 다른 곳에 원인이 있을 것이라고..

REST는 자원(Resource), 행위(Verb), 표현(Representaions)로 나뉩니다. 이전에 자원은 URI에서 식별이 가능하여야 하고 표현은 응답(Respone)의 본문(body)에서 확인할 수 있다고 하였습니다. 그리고 리소스와 분리가 되는 행위가 있다고 했죠. 그렇다면 행위는 무엇이고 어디서 찾을 수 있을까요? 행위는 요청(request)에서 찾을 수 있습니다. URI에 주어진 리소스에 대하여 어떤 행동을 할지 정의하는 역할을 합니다. 현재 가장 널리 사용되는 HTTP의 주요 메서드는 다섯 가지가 있습니다. GET, POST, PUT, PATCH, DELETE입니다. 그 외에도 HEAD, OPTIONS, CONNECT, TRACE 메서드가 존재합니다. GET 서버에서 리소스를 조회할 것..

클라이언트와 서버가 통신을 할 때 요청이 성공적으로 완료되었는지, 오류가 있어 요청이 실패하였는지 알 수 있어야합니다. 위의 사진처럼 모든 응답에 대해 같은 HTTP 상태 코드를 반환하면 어떤 상황인지 알아보기 힘들어집니다. 그래서 서버는 클라이언트에 응답을 보낼 때 각각의 상황에 맞는 상태코드를 포함하여 응답합니다. HTTP 응답으로 주어지는 상태 코드를 통해 요청이 성공적으로 수행되었는지, 실패했다면 이유가 무엇인지에 대한 정보를 대략적으로 알 수 있습니다. HTTP의 응답은 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고 서버 에러의 5개 그룹으로 나누어집니다.상태코드는 세 자리의 숫자로 나타내며, 첫 번째 숫자는 그룹을, 나머지 숫자는 상세한 코드를 나타냅니다.정보 응답 혹은 조건부 ..

인터넷은 정보들을 하이퍼텍스트로 연결하여 정보를 공유합니다. 각 정보는 HTML의 형식으로 표현되며, URI(Uniform Resource Identifier)를 통해 정보를 식별합니다. 우리는 정보의 식별자인 URI에 프로토콜을 조합하여, 정보의 위치를 나타내는 URL(Uniform Resource Locator)을 이용하여 원하는 정보에 접근할 수 있습니다. 웹서비스에서의 프로토콜은 대부분 HTTP(HyperText Transfer Protocol)를 사용하죠. 참고로 HTTPS는 HTTP에 암호화를 더해 보안이 강화된 버전입니다. REST란 기존의 HTTP를 기존의 WEB과 충돌하지 않으면서도 더 나은 방법으로 사용하기 위해 만들어졌습니다. 더 나은 방법이란 서버와 클라이언트의 독립적인 진화를 의미..

자바스크립트의 형 변환(type conversion)과 비교 연산5 == '5'이 표현식의 결과는 true가 나옵니다. 왜 그럴까요?자바스크립트에서 두개의 '='인 '=='을 이용한 비교는 좌변과 우변의 값을 바로 비교하지 않고 자동으로(강제적으로) 자료형을 변환하고 비교를 수행합니다. 이를 묵시적 형변환이라고 합니다. 그리고 '=' 기호를 두 개 사용한 비교를 느슨한 동등 연산자라고 합니다. 느슨한 동등 연산에서는 자바스크립트가 자료형을 일치 시키기 위해 오른쪽의 자료형을 왼쪽과 일치하도록 만들어 줍니다. 위의 식에서는 문자열 '5'가 숫자 5로 변환되는 것이죠. 항상 오른쪽 자료형을 왼쪽 자료형과 일치시키는 것은 아닙니다. 그저 비교가 가능한 값으로 바꾸는 것이죠. 그래서 다음과 같은 상황도 가능합니..

컴포넌트를 사용하는 것 여러 이점 중 하나는 바로 재사용이 가능하다는 점입니다. 만약 페이지에 내용은 다르지만 같은 구조와 기능을 가진 것을 여러 번 표시해야한다면 컴포넌트를 사용하는 것이 하나의 해결책이 됩니다. 실제로는 단 한 번만 사용하는 컴포넌트를 만들 때도 많지만, 이론적으로 컴포넌트들은 얼마든지 재사용이 가능합니다. 매개 변수(Parameter)를 받아 같은 계산을 실행하는 함수처럼 컴포넌트는 데이터를 받아 같은 과정을 거쳐 결과를 보여줍니다. 여기서 우리가 넘겨주는 데이터가 바로 Prop(Property, 속성)입니다. Prop Prop은 '속성'이라는 의미를 가지며 데이터를 컴포넌트로 전달하고 그 컴포넌트에서 받은 데이터를 사용할 수 있게 합니다. 컴포넌트를 여러 번 재사용하기 위해 속성을..

CSS를 작성하는 방법은 무척이나 다양합니다. 언제나 더 쉽게 프로그래밍을 할 방법을 찾는 수 많은 개발자들이 있기 때문이죠. Vanilla CSS부터 Styled Components와 Tailwind까지 간략하게 장단점 위주로 알아봅시다.Vanilla CSS먼저 웹 개발자라면 누구나 알고 있을 기본 CSS입니다. 다른 방법의 CSS와 구분하기 위해 'Vanilla'라는 표현을 사용하였습니다. 마치 아무런 라이브러리를 사용하지 않는 자바스크립트를 바닐라 자바스크립트(Vanilla JS)라고 부르는 것처럼요. 바닐라 CSS의 장점을 뽑으라면 기본적인 CSS 외에는 추가 학습이 필요하지 않다는 점입니다. 웹 개발자라면 누구나 배웠을 CSS만 알고 있으면 사용이 가능합니다. 하지만 이점은 동시에 단점이 되기도..

우리가 데이터를 변경하기 위해서 기존의 데이터를 직접 수정할 수도 있고, 기존의 데이터를 복사하여 새롭게 만들어진 데이터를 수정하는 방법을 사용할 수도 있습니다. 전자의 경우 인덱스를 통해 접근하여 수정하거나 splice 메서드를 이용할 수 있고 후자의 경우는 map 메서드를 이용할 수 있습니다. 리액트에서는 map, concat, filter 등의 새로운 배열을 반환하는 방법(불변성을 유지하는 방법)을 권장하고 있습니다. 왜 그럴까요? 🗒️: 만약 원시값과 참조값에 대해 잘 알지 못하시면 이해가 어려울 수도 있습니다. 불변성을 사용하는 것의 이점 사이드 이펙트를 방지할 수 있습니다. 앞선 글에서 리액트는 상태의 변경을 즉시 처리하지 않고 예약해두었다가 리렌더링한다고 하였습니다. 그래서 리액트는 상태가 ..

상태와 리렌더링리액트의 컴포넌트는 상태가 변하면 해당 컴포넌트를 재평가(함수형 컴포넌트라면 함수를 재실행, 클래스형 컴포넌트라면 다시 인스턴스화)하여 새로운 내용이 반영하여 새로 UI를 그립니다. 이러한 행위를 리렌더링(re-rendering)이라고 합니다. 결국 리액트는 최초 렌더링 - 상태의 변화 - 리렌더링(렌더링)의 단계를 거치며 새로운 컨텐츠를 화면에 표시하는 것이죠. 하지만 이렇게만 생각하면 조금 헷갈릴 수 있습니다. 혼란을 줄이기 위해 조금 더 상세한 단계를 알아봅시다.먼저 리액트의 컴포넌트가 최초로 렌더링됩니다. 그리고 상태변화 요청이 오기 전까지는 계속 대기하죠. 그러다가 사용자가 버튼을 누르는 등의 행동을 통해 상태를 변화(set함수를 호출하는 로직을 실행)시키면 리액트는 해당 요청을 ..

앞선 글에서 리액트는 SPA를 만드는 라이브러리라고 했습니다. SPA는 페이지 이동없이 동적인 콘텐츠를 표시할 수 있는 어플리케이션입니다. SPA를 구현하기 위해서는 여러 콘텐츠를 사용자와의 상호작용에 따라 보여줄 수 있어야 하죠. 리액트는 훅이라고 불리는 것으로 동적인 값을 관리할 수 있습니다. '훅'이라는 용어는 함수형 컴포넌트 내에서 특정한 리액트 기능에 "연결(hook into)"하거나 액세스할 수 있는 개념을 나타냅니다. 리액트의 수 많은 'Hook' 중에서 가장 기초가 되는 Hook인 userState에 대해서 알아보겠습니다. HOOK의 규칙 useState에 대해 자세히 알아보기 전에 모든 리액트 Hook들이 가지는 공통적인 규칙 먼저 알아보겠습니다. 리액트의 모든 Hook들은 컴포넌트의 최..

var 전역범위에서 접근이 가능한 변수를 선언하는 키워드입니다. 아무런 키워드없이 변수를 선언 및 할당하게 되면 var를 쓴 것과 같은 효과를 가집니다. 이 키워드를 사용하여 선언된 변수는 변수가 선언되는 위치에 따라 변수의 유효범위가 달라질 수 있습니다. 예를 들어, 함수 내에서 var를 사용하여 변수를 선언하면 해당 변수는 함수 내부에서만 접근할 수 있습니다. 그러나 함수 내부의 블록 (예: if 문이나 for 문) 안에서 선언된 경우에도 해당 변수는 함수 전체에서 접근할 수 있습니다. 이는 var가 함수 스코프(function scope)를 가지기 때문입니다. 스코프란? 스코프는 변수를 찾아내기 위한 규칙입니다. 규칙 중에서도 범위에 대한 규칙이죠. 함수는 자신이 선언된 위치에 의해서 자신이 유효한..

리액트 리액트(React)는 페이스북에서 개발된 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위한 것입니다. 주로 SPA(Single Page Application, 단일 페이지 애플리케이션)을 구축하는 데 사용되며, 재사용 가능한 UI 컴포넌트를 효과적으로 관리할 수 있도록 도와줍니다. 또한 리액트는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화하고, 데이터가 변경될 때 효율적으로 업데이트를 처리합니다. SPA와 가상 DOM 및 DOM에 관해서 간략하게 소개드리자면, SPA는 페이지의 이동없이 동적으로 페이지의 콘텐츠를 업데이트하는 웹 애플리케이션입니다. 그리고 가상 DOM은 실제 DOM을 효율적으로 업데이트하여 성능을 향상시키는 기술입니다. Vue.js와 같은 다른 자바..

TCP/IP TCP/IP(Transmission Control Protocol/Internet Protocol) 흔히 TCP/IP라고 알려진 인터넷 프로토콜 스위트 (Internet Protocol Suite)는 인터넷과 이와 유사한 컴퓨터 네트워크 사이에서 정보를 주고받는 데 이용되는 통신 프로토콜의 모음입니다. 프로토콜? 프로토콜은 시스템과 애플리케이션 프로그램에서 정보를 교환할 수 있도록 하는 메시지 형식 및 프로시저에 대한 규칙 세트입니다. 우리가 이용하는 앱과 기기는 정보를 전송하고 수신하기 위해 이러한 규칙을 따라야 합니다. 인터넷 서비스 대부분이 TCP/IP를 기반으로 만들졌습니다. 데이터 전송의 과정에서 TCP와 IP 각각 담당하는 작업이 있지만, HTTP, FTP, SMTP 등 TCP를 ..

OSI모델? OSI 모델이 뭐길래 네트워크 파트에서 가장 먼저 소개할까요? OSI(Open Systems Interconnection, 개방형 시스템 상호 연결)란 국제표준화기구(ISO)에서 개발한 모델로, 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나눠서 설명하는 모델입니다. OSI 모델은 네트워크 통신의 복잡한 프로세스를 간단한 계층으로 분리하여 네트워크가 작동하는 방식을 설명합니다. 이런 계층적 접근 방식은 작업과 책임을 별개의 계층으로 나누어 네트워크 통신의 복잡성을 단순화하고, 초보자가 데이터 전송과 관련된 다양한 기능을 더 쉽게 파악할 수 있도록 해줍니다. 결과적으로 OSI 모델은 (실제 프로토콜은 종종 레이어 간의 경계를 모호하게 만들기 때문에)항상 실제 네트워크를 완벽하게 표현하는 ..

문제 세준이는 길 한가운데에서 전광판을 쳐다보고 있었다. 전광판에는 광고가 흘러나오고 있었다. 한참을 전광판을 쳐다본 세준이는 이 광고가 의미하는 것이 무엇인지 궁금해지기 시작했다. 전광판에는 같은 내용의 문구가 무한히 반복되어 나온다. 또, 전광판의 크기는 전광판에서 한번에 보이는 최대 문자수를 나타낸다. 만약 전광판의 크기가 L이라면, 한번에 L개의 문자를 표시할 수 있는 것이다. 광고업자는 최대한의 광고효과를 내기 위해서 길이가 N인 광고를 무한히 붙여서 광고한다. 예를 들어, 광고 업자 백은진이 광고하고 싶은 내용이 aaba 이고, 전광판의 크기가 6이라면 맨 처음에 보이는 내용은 aabaaa 이다. 시간이 1초가 지날 때마다, 문자는 한 칸씩 옆으로 이동한다. 따라서 처음에 aabaaa가 보였으..