안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. React의 함수형 컴포넌트에서 상태관리 함수 "useState"에 대해 학습한 내용을 공유하려고 합니다. useState? useState는 React에서 상태 관리를 위해 React Hooks에서 제공되는 함수입니다. 이전까지는 클래스 기반 컴포넌트에서 this.state 를 통해 상태를 관리했었지만, 함수 기반 컴포넌트가 활성화 되고 React Hooks를 통해서 클래스 기반 컴포넌트처럼 상태를 관리할 수 있게 되었습니다. useState는 배열을 반환하며, 반환하는 배열의 값은 다음과 같습니다. 첫 번째 원소 : 상태값을 저장할 변수 두 번째 원소 : 해당 상태값을 업데이트할 때 사용하는 함수 const [state, setStateFn] = use..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 운영체제에서 "가상 메모리 관리 - 세그멘테이션"에 대해 학습한 내용을 공유하려고 합니다. 세그멘테이션 기법 가상 메모리 방식에, 물리 메모리를 가변 분할 하는 방식이다. 프로세스가 할당되는 공간을 "세그먼트"라는 기준으로 분리하고, 그 크기는 프로세스의 크기에 맞게 가변적으로 할당된다. 하나의 프로세스를 연속된 공간에 배치하며, 여러 공간에 떨어져 있는 상태에 대한 처리를 하지 않는다. 프로세스가 들어오고 나오면서 빈 공간이 발생하게 되는 걸 외부 단편화 라고 하는데, 이 공간을 처리하는 방식이 복잡하다는 단점이 있다. 고정분할방식인 페이징 기법에 비해 권한 비트를 설정하기 편하고, 영역이 섞일 가능성이 없다는 장점이 있지만 외부 단편화라는 단점 때문에 ..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 본 글에서는 자바스크립트로 배우는 SICP를 읽은 후, 개별적으로 학습한 내용을 정리하여 습득된 지식을 정리할 겸 공유드립니다. 따라서 글의 주제나 소 주제에 대해서는 책과 같은 흐름으로 소개드리며 참고한 내용들에 대해서는 아래 레퍼런스를 남겨놓았습니다. 계산적 과정 계산적 과정, computational process 책을 통해 앞으로 다루어 지는 내용은 계산적 과정에 대한 내용입니다. 계산적 과정이란 데이터를 조작하는 하나의 추상적인 개념입니다. 실존하지만 추상적인 과정을 규칙에 맞게 구현된것이 프로그램이고 프로그램은 프로그래밍 언어로 만들어 집니다. 프로그램은 프로그래밍 언어로 작성된 과정 속에 컴퓨터 내부에서 정확하게 동작하기 때문에 개발자는 자신이..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 이번에는 React가 더욱 편리할 수 있게 도와주는 JSX에 대해서 알아보겠습니다. 이전 학습내용 React의 특징과 장점, 적용 예제까지! https://sugarsyrup.tistory.com/entry/React%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0%EC%99%80-HTML%EC%97%90-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0 개요 이전 아티클에서 HTML에서 React와 ReactDOM을 불러와서, React.createElement를 활용해 웹페이지를 구성하는 방법을 알아봤습니다. createElement보다 편리한 방식으로 JSX를 사용할 ..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 운영체제에서 "가상 메모리 관리 - 페이징"에 대해 학습한 내용을 공유하려고 합니다. 가상 메모리 물리 메모리 크기와 상관없이 프로세스에게 충분한 메모리 공간을 제공하는 것처럼 보이게 하는 기술. 가상메모리라는 기술을 통해 프로세스가 올라갈 메모리의 위치를 신경 쓰지 않아도 되며, 스왑영역을 활해서 물리 메모리의 남은 공간보다 더 큰 프로세스를 실행가능하게 해 줍니다. 스왑 영역 스왑영역은 물리 메모리의 공간보다 더 큰 프로세스를 실행하기 위해 저장장치에 위치하게 됩니다. 원래 보류상태의 프로세스가 저장되기 위한 공간이었지만 가상메모리 기술을 활용하기 위해 일반 프로세스도 할당이 가능해집니다. 저장장치에 있지만, 파일관리자, 입출력 관리자가 아닌 메모리 관..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 10주 동안 100여 명 정도 되는 사람들과 React와 TypeScript에 대해 함께 학습하게 되었는데 (NomadCoder) 진행하는 김에 학습하는 내용을 꾸준히 정리해 보려고 합니다! 이번 주제는 React를 학습하는 이유와 JSX를 활용하지 않는 React 문법 작성법에 대해 알아보겠습니다. 왜 React를 학습해야 하는가? 제가 처음 React를 학습하게 된 이유는 많은 회사에서 사용된 검증된 라이브러리라는 점이 가장 큰 메리트로 느껴졌습니다. 강의에서도 비슷한 내용과 그 외 추가적인 이유와 함께 리액트를 왜 학습하고 그 장점에 대한 소개가 있었습니다. 개발자에게 중요한 자원중 하나는 시간! 학습한 내용이 몇년뒤에 잊히는 게 아닌 꾸준히 사용할 ..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. CSS에서 요소의 Z축을 설정할 수 있는 두가지 방법이 있습니다. z-index와 transform의 속성인 translateZ가 그 대상인데, translateZ는 z-index에 비해 많이 사용되지 않을 뿐 아니라, 적용도 잘 안되는 경우가 많은데 이 부분에 대해서 얘기해보려고 합니다. z-index 위치 지정 요소와 그 자손 또는 하위 플렉스 아이템의 z축 순서를 지정합니다. z-index 값이 더 클수록 작은 값의 요소 위를 덮는 개념입니다. auto 키워드 또는 음수와 양수 값을 통해 요소의 우선순위를 지정할 수 있습니다. 카르테시안 좌표계 css의 transform 속성 translate에 대해 우선 살펴보면서 Z축이 무엇인지 살펴봅니다. tra..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 프로젝트 내 axios를 활용한 중복 코드 제거를 위해 Axios Custom Hook을 만든 경험을 공유하고자 합니다. axios에서 중복되는 설정과 로직을 React의 Hook을 통해 묶어서 관리하고, 앞으로 재사용할 때에도 편의성을 주기 위해 이 과정을 거쳤습니다. 이번 글은 Writing a custom Axios hook in TypeScript for API calls in your React application 를 많이 참고해서, 참고한 김에 번역을 했습니다. 내부 코드의 일부만 프로젝트와 저에게 맞게 수정했고 텍스트는 모두 번역/의역 한 내용임을 미리 밝힙니다. 개요 Axios는 HTTP client에서 브라우저와 Node.js에서 API ..

개요 안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 엄브렐라 프로젝트에서 Session 방식과 JWT Token 인증 방식 로그인이 무엇이고, 왜 JWT Token 인증방식으로 로그인 구현했는지와 코드를 함께 공유하려고 합니다. 로그인 시스템에서 사용자를 식별하여, 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 보안절차. 웹에서 HTTP를 활용한 데이터는 stateless 특징상 누가 요청하는지 시스템에서 알 수 없다. 로그인이라는 절차를 통해 파일 및 프로그램 등의 컴퓨터 시스템의 접근 권한을 관리할 수 있기 때문에 보안에서 중요한 역할을 한다. 따라서 로그인을 하지 않았거나 권한이 없는 유저에 대해 접근 및 동작제어를 확실하게 해야 한다. 권한 없는 자원에 대해 접근이 불가능한 구..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 프로젝트 내 로그인 폼을 구현하는 과정에서 react-hook-form과 yup라이브러리를 사용한 방식을 공유하려고 합니다. react-hook-form과 yup을 도입하게 된 계기 기존의 react에서 을 통해 내용을 받을 때는 불편한 점이 있었습니다. 입력값을 처리하는 과정에서 onChange와 같은 함수와 react의 상태로 처리하게 되면서 불필요한 렌더링이 발생하는 문제가 있었습니다. 그 외에도 onSubmit함수와 유효성 처리, 에러 처리 등 필요한 기능만큼이나 함수와 상태가 늘어났고 react-hook-form을 도입하기 전까지는 매우 비효율적으로 처리될 수 밖에 없었습니다. react-hook-form은 이전에도 몇번 도입시킨 적은 있으나, 이..

안녕하세요, 프론트엔드 개발자 설탕시럽입니다. 23년 1월 28일부터 양일간 열린 TECHIT/멋쟁이 사자처럼 에서 개최한 DEV. DESIGN CON 2023(이하 줄여서 "DDC 2023"으로 명칭)의 DEV DAY에 참석하게 되었습니다. 현업에 계신 개발자 분들의 컨퍼런스를 들어볼 수 있는 좋은 기회이자, 새해를 시작하면서 의지를 다질 수 있는 좋은 기회라고 생각해서 참석했습니다. 지금 어떤 위치에 있고, 어떤 방향으로 성장할 것인가? 개발자로 시작했다면, 어디까지, 얼마나, 어디로 가야 할까요? 이호준 / 위니브(제주코딩베이스 캠프) 처음 개발을 배울 때와 달리, 이해하고 있어야 하는 지식과 개념은 점점 늘어나고 공부하고 싶은 라이브러리와 언어들이 점점 늘어난다. 내가 가진 시간은 제한적이라서 어..

안녕하세요, 프론트엔드 개발자 설탕시럽입니다. 이번에 프로젝트를 시작하게 되었고 실시간 채팅 기능을 구현하게 되었는데, 그 과정에서 react에서 Web API를 이용한 websocket 처리하는 방식에 관한 경험을 공유하려고 합니다! 1. Websocket? websocket은 http 프로토콜과 달리 실시간으로 서버와 클라이언트가 양방향 통신을 지원하여, 양방향 모두 자유롭게 데이터를 보낼 수 있는 프로토콜입니다. http/https처럼 ws/wss를 통해 웹소켓과 보안이 강화된 웹 소켓을 이용할 수 있습니다. 위에서 설명한 데로 실시간 채팅과 화상회의 기능 구현을 위해 websocket 방식을 적용하게 되었습니다. 2. React in WebSocket websocket은 웹 API에서 지원해주기 ..