bkdragon's log

스레드는 프로세스 내에서 실행되는 가장 작은 단위의 작업이다. 프로세스는 운영체제에서 실행 중인 프로그램을 의미하며, 각 프로세스는 최소 하나 이상의 스레드를 포함한다. 스레드는 같은 프로세스 내에서 자원을 공유하며, 독립적으로 실행될 수 있다. 프로세스가 하나의 스레드를 가지면 싱글 스레드 프로세스이고, 여러 개의 스레드를 가지면 멀티 스레드 프로세스이다.메인 스레드메인 스레드는 프로그램이 시작될 때 자동으로 생성되는 스레드로, 프로그램의 기본 작업을 수행한다. 메인 스레드는 프로그램의 주요 작업을 수행하며, 프로그램의 종료와 함께 종료된다.스레드의 사용이유스레드는 주로 병렬 처리를 위해 사용된다. 예를 들어, 대규모 데이터 처리를 할 때 여러 스레드를 사용하여 작업을 분할하고 동시에 처리함으로써 처리..

웹 서버와 웹 애플리케이션 서버는 웹 기반 애플리케이션을 제공하는 데 중요한 역할을 한다. 두 서버는 서로 다른 기능을 수행하며, 종종 함께 사용된다.초기 웹은 주로 정적 HTML 페이지로 구성되어 있었으며, 이러한 페이지를 제공하기 위해 웹 서버가 개발되었다. 그러나 웹 애플리케이션의 복잡성이 증가함에 따라, 동적 콘텐츠를 생성하고 비즈니스 로직을 처리할 수 있는 웹 애플리케이션 서버의 필요성이 대두되었다. 이러한 서버는 데이터베이스와의 상호작용을 통해 사용자 맞춤형(동적) 콘텐츠를 제공할 수 있게 되었다.이제 각각을 더 자세히 알아보자.웹 서버 (Web Server)기능:주로 정적 콘텐츠(HTML, CSS, JavaScript, 이미지 등)를 클라이언트에게 제공하는 역할을 한다.클라이언트의 요청을 받..

버그는 개발자의 실수로 인해 발생하는 것이고, 에러는 사용자의 잘못된 사용 방식에 의해 발생하는 것입니다. 따라서, 버그가 없도록 개발하고 에러에 대한 예외 처리를 미리 준비하는 것이 좋은 방식입니다.이제부터 에러에 대한 예외 처리를 '에러 핸들링'이라고 언급하겠습니다.웹 애플리케이션에서 에러 핸들링은 크게 두 가지 방법이 있습니다. 하나는 클라이언트 사이드에서의 처리, 다른 하나는 서버 사이드에서의 처리입니다. 좀 더 간단히 말하면, 프론트엔드에서의 처리와 백엔드에서의 처리입니다. 각각에 대해 제 생각과 결론을 소개해보겠습니다.클라이언트 사이드 (프론트엔드)클라이언트 사이드에서는 사용자의 잘못된 행동을 막는 것이 중요합니다. 예를 들어, 접근할 수 없는 페이지로의 접근 시도를 막는 것이 있습니다. 이는..

오랜만의 글이다! 최근에 취업에 성공해 바쁘게 살고 정신없이 살다보니 소홀해진 것 같다. 공부는 꾸준하게 하고 있다. 오늘은 변신가능한 폼을 만들어서 소개해보려고 한다. 페이지를 사용하다 보면 다양한 형태의 폼을 만날 수 있다. 처음 페이지를 들어가서 거의 바로 회원가입 폼과 로그인 폼을 만날 텐데 이 둘만 하더라도 약간의 형태가 바뀐다. 프론트엔드 개발자로서 이런 것들을 한번에 처리하고 싶은 욕구가 생겨서 만들어보게 되었다! 물론! 로그인 폼, 회원가입 폼, 글 작성 폼 등 책임을 세분화하여 하는 것이 좋다. (코드를 이해하는 면에서도 그렇다 내가 짜서 잘 모르겠지만 어쪄면 변신 폼은 약간 어렵고 난해한 코드일 수 있다.) 포인트는 다음과 같다. 1. context api 없는 합성 컴포넌트 2. 비제..

팀프로젝트에서 atomic design pattern을 적용해 진행하고 있다. CSS 프레임워크를 사용하여 atomic design pattern을 적용한 경험을 공유하려고 한다. css 프레임워크는 Chakra ui를 사용했다. https://chakra-ui.com/ CRA로 앱을 설치할 때 Charka ui도 함께 설치할 수 있다. npx create-react-app my-app --template @chakra-ui/typescript atomic pattern atomic pattern은 화학적 관점에서 영감을 얻은 디자인 시스템이다. 출처 : https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole 각 단계를 간략하게 설명하면..

Redux-toolkit 을 사용해 비동기 처리를 해보자. React-query를 사용해도 좋다. Redux-toolkit에는 thunk 미들웨어가 내장되어 있어서 따로 설치할 필요가 없다. Thunk thunk는 특정 작업을 나중으로 미루기 위해 함수형태로 감싼것을 말한다. thunk는 Redux 스토어의 dispatch 및 getState 메서드를 사용하는 함수이다. 비동기 로직이 들어갈 수 있다. const getItems = () => (dispatch, getState) => { // 현재 상태 조회 const id = getState().item // 비동기 통신의 성공과 실패에 따라 다른 action을 dispatch api .getComments(id) .then(comments => di..

flex-item에 사용하는 속성들이 헷갈려서 정리 좀 해두려고 한다. flex-basis flex 아이템의 기본 크기를 설정한다. flex-direction에 따라 width(row)와 height(column)를 설정한다. 다만 단순히 width, height가 아닌 min-width, min-height 처럼 동작한다. .item { flex-basis: 100px; } 만약 이렇게 설정했다면 원래 100px가 안되던 아이템은 100px로 늘어나고 100px 넘는 아이템은 컨텐츠의 길이만큼 설정된다. .item { flex-basis: 100px; word-break: break-word; } 100px 넘어가던 item이 100px이 넘어가지 않게 하고 싶으면 word-break를 통해 컨텐츠를 ..

MVVMModel + View + View Model로 구성된 아키텍쳐 출처 : 위키백과 (https://ko.wikipedia.org/wiki/모델-뷰-뷰모델) Model : 메모리 상의 데이터 영역View : UI 영역View Model : View를 위한 Model. View를 나타내 주기 위한 Model. View와 데이터 바인딩을 통해 연결되어 있다. 데이터 바인딩메모리상의 데이터(Model)와 화면에 그려지는 데이터(View)를 동기화 하는 것.단방향 데이터 바인딩 : JavaScript(Model) → HTML(View) 한 방향으로만 데이터를 동기화 하는 것. 역으로 HTML에서 JavaScript로 직접적인 갱신은 불가능하다. React는 단방향 데이터 바인딩을 지원한다.양방향 데이터 바..

classnames는 조건부로 스타일링을 편하게 할 수 있는 라이브러리이다. {클래스명 : 조건식} 형태로 조건식이 참일 경우 클래스명을 추가할 수 있다. 공식 문서 예제를 몇가지 살펴보자. https://www.npmjs.com/package/classnames 기본 형태 {클래스명 : 조건식} 의 형태이나 조건식 생략이 가능하며 그 경우에는 true이다. classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({..

ACHT, 있어보이게 영어로 써보았다. 비동기 커스텀 훅 테스트 코드를 작성해보자. api 통신으로 데이터를 받아오기 때문에 MSW를 이용할 것 이다. 사용법 및 세팅법은 이 글에 잘 설명해두었다. 원래는 커스텀 훅을 사용하는 컴포넌트에서 테스트를 했었는데 커스텀 훅 테스트를 분리한 이유가 있다. delete 통신 성공이 204 no-content 였기 때문이다. 아래 코드의 두개의 핸들러를 비교해보자. export const getTodos = () => { return rest.get(`${baseUrl}${paths.todos}`, (_, res, ctx) => { return res(ctx.status(200), ctx.json(sampleTodos)); }); }; const deleteTodo..