JayGo 개발 연습장

http란?웹은 클라이언트 PC와 서버 PC의 통신으로 구성된다. 사용자는 흔히 '서버'라고 불리는 컴퓨터에게 필요한 문서-데이터 등을 요청하고, 경우에 따라선 서버에 저장된 데이터를 '수정' 또는 '삭제'해달라는 명령을 보낸다. 서버는 클라이언트의 요청 내용에 따라 작업을 수행한 후 요청에 대한 응답을 전달한다. 웹이 동작하는 가장 기본적인 메커니즘이다.해당 과정에서 클라이언트와 서버가 서로 통신하는 데 사용되는 규약(프로토콜; Protocol)을 http라고 한다. 흔히 브라우저에서 특정 페이지에 접속하기 위해 사용하는 URL을 보면 경로 앞에 http:// 또는 https://라는 Prefix가 붙는데, 이는 해당 URL 경로로 접근한 클라이언트와 경로의 반대쪽 끝에 있어 정보를 제공해 주는 서버가..

코드 리뷰 챌린지 서비스? 만들기코드 리뷰를 위한 체크리스트 부분을 작업했다.짧지만 현업에 계신 분들과 같이 작업해 보면서 배운 게 참 많았다.프로젝트를 할 때 어떤 순서로 준비하고 진행해나가는지, 처음으로 경험해 봤다.일단 현업에 있는 분들의 대화 자체를 따라가는 게 버겁다 보니 위축되는 게 좀 있다. 내 의견이 있다가도 뭔가 전달했을 때 잘 이해를 못 하면 '내가 뭘 잘못 얘기한 건가?' 싶다. 완전 6년 전 처음 사회생활 시작할 때의 모습이 떠올라서 속상했다.그래도 좋은 자극이 됐다. 개발 지식도 지식이지만, 현업에서 어떤 흐름으로 일 하는지, 주로 사용하는 도구는 무엇인지, 뭐가 일반적인 상식이고 뭐는 아닌지, 하나씩 잘 알아가야겠다.코드 리뷰 요청 시 만들 체크리스트 기능을 만들면서는 아래의 내..

할 일 목록 관리 서비스 만들어보기아주 느리고 미세하지만 조금씩 진행을 해나가고 있다.오늘은 로그인, 회원가입 페이지의 UI 이벤트 처리 작업을 완료했다Input 컴포넌트의 Validation 경고 메시지와 Button 컴포넌트의 disable 처리, 그리고 각 상태의 초기값 설정 등을 일치시키느라 어제 새벽에 애를 먹었는데, 막상 오늘 다시 고민해 보니 꽤 쉽게 풀렸다. 좀 억울하긴 했는데, 맑은 정신으로 생각하면 안 풀리던 것도 풀린다는 걸 경험적으로 배울 수 있어서 (나름) 괜찮았다.이제 로그인 API 요청을 보내는 걸 구현해야 하는데, 아직 인증/인가에 대한 지식이 거의 없다싶이해서, 개발에선 손을 떼고 인증/인가 구현에 대한 이런저런 자료들을 찾아봤다. 아직 100% 완벽히 소화하진 못해서 틀린..

useState와 useEffect는 리액트 개발에서 밥 먹듯이 사용되는 훅이다. useState는 '상태와 상태 업데이트 함수를 정의하는 훅'이고, useEffect는 '리렌더링 후 부수 효과를 처리해 주는 훅'인데, 각각에 대한 정의와 사용법은 알고 있지만 정확한 동작에 대해선 이해하는 데 어려움이 많았다. 이번 포스트에선 해당 내용에 대해 최대한 상세하게 정리해두려 한다.useState 상태 업데이트 과정아래와 같이 상태를 정의해뒀다.input 태그에서 onChange 이벤트가 발생할 때마다 상태를 변경해 준다. 실제로 상태가 잘 변경되는지 확인하기 위해 useEffect도 함께 사용해 줬다.import { useEffect, useState } from 'react';const App = () =..

순수 함수란?MDN 문서에 따르면, 함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 호출할 수 있는 '하위 프로그램'이다. 명령문의 시퀀스로 구성된 함수 본문을 가지고, 함수에 값을 전달하면, 함수는 값을 반환한다.설명이 어렵다. 나름대로 정의를 풀어보면, 함수는 입력(매개 변수)을 받아, 함수 본문의 로직을 따라 처리하고, 결과를 반환하는 프로그램이다. 정확한 정의인지 모르겠지만, 아무튼 입력-처리-결과 이 세 가지가 함수를 이루는 중요한 요소라는 건 분명하다.자바스크립트의 함수는 다른 함수의 매개 변수로 전달될 수 있고, 반환 값이 될 수도 있으며, 변수에 할당도 가능하다(아래 예시 코드 모두 다 문제없이 실행 가능하다).// 변수에 할당const myFunc1 = console.log; // ..

할 일 관리 서비스 만들기Module CSS로 정의한 CSS 파일은 해싱 알고리즘으로 클래스 명이 변경되기 때문에 다른 CSS 파일에서 접근해 스타일을 덮어쓰기 어렵다. 컴포넌트에서의 스타일을 덮어쓰고 싶다면 사용하는 곳에서 div 태그 등으로 한번 감싸고, > 같은 선택자를 이용해 접근해 변경하는 게 필요하다(네임 스페이스를 구분해준다는 점은 편하지만, 이런 점은 좀 아쉬운 것 같다).useNavigate로 생성하는 navigate 함수의 타입은 react-router-dom에서 제공하는 NavigateFunction이다. 타입 정의가 필요한 곳에 `import { NavigateFunction } from 'react-router-dom'으로 불러와서 사용하면 된다.훅이나 라이브러리에서 제공되는 다양..

Date Picker 만들기벤더사에 따라 지원되는 가상 선택자 속성에 일부 차이가 있는 경우가 있다. Chrome, Edge, Safari 등은 -webkit, Firefox는 -moz라는 접두어를 사용한다.예를 들어서, input[type='date']인 요소에 기본 제공되는 Picker Indicator(옆에 작게 나오는 캘린더 아이콘)는 ::-webkit-calendar-picker-indicator라는 가상 선택자로 접근 가능하고, 기본 제공되는 '연도, 월, 일' 텍스트는 ::-webkit-datetime-edit으로 접근해 커스텀할 수 있다.이런 벤더 프리픽스를 많이 사용하면 브라우저 간 호환이 되지 않아 특정 브라우저에서 깨지는 크로스 브라우징 이슈가 발생할 수 있다. 가급적 위험 요소가 될..

UI 컴포넌트 중 Date Picker를 구현하면서 삽질한 이런저런 내용을 기록해 둔다.구현 요구사항구현하고 싶었던 Date Picker는 이런 식이었다.처음엔 input[type='date']로 설정하면 쉽게 구현할 수 있을 거라고 생각했다. 그런데, 막상 구현하다 보니 구현에 있어 몇 가지 허들이 있었다.input[type='date']로 설정하면 input 텍스트 영역(날짜를 직접 입력하는 영역)에 '연도. 월. 일'이 기본 텍스트로 들어가 있었다. 그래서, placeholder로 원하는 텍스트를 넣어주는 게 어려웠다.브라우저에서 기본으로 제공하는 Date Picker Indicator는 원하는 모양으로 커스텀이 어려웠다.그리고, 아래로 떨어지는 Date Picker는 Date Picker Indi..

모듈 CSS 관련 공부클래스 명 중복 문제를 해결하는 방법 중 모듈 CSS가 있다.모듈 CSS는 CSS 모듈에 정의된 스타일을 자바스크립트 객체 형태로 파싱해 스타일로 제공한다.일련의 알고리즘에 따라 파싱 된 자바스크립트 객체로 정의된 클래스 명이 있는 부분에 정해진 해시값으로 클래스 명을 고유화한다.파일 경로, 사용자가 정의한 클래스 이름 등을 통해 해시를 만들기 때문에 CSS 모듈 간 클래스 이름이 중복될 일이 없다.모듈 CSS는 웹 표준으로 등록된 문법은 아니고, 번들러에 의해 번들링 되는 과정에서 해당 로직을 처리해 준다. 번들러가 번들링 시 CSS 파일을 모듈 CSS로 인식하고 파싱 해주도록 하기 위해 파일명 확장자를 모듈명.module.css 형태로 지어야 한다.기타, 모듈 CSS 관련 이런저..

프로젝트 세팅 관련 공부한 내용들프로젝트에선 보통 사이즈 단위를 지정할 때 반응형을 고려해서 루트인 html 태그에 적용된 font-size 대비 비율을 기준으로 하는 rem 단위를 많이 사용한다.별도의 처리를 하지 않으면 브라우저에서 기본 세팅되는 html 태그의 font-size는 16px이다. 해당 값을 기준으로 24px을 rem으로 표현하려면 1.5rem과 같은 식으로 사용하면 된다.16px이 기준이 되면 사이즈 계산이 어려워진다. 대신, 16px인 html 태그의 font-size를 62.5%로 설정해주면 루트의 기준 font-size가 10px이 된다. 10px로 font-size가 조정되면 rem으로 사이즈 단위를 계산할 때 굉장히 직관적이라는 장점이 있다. 24px를 표현하고 싶다면 자리수..