윤민상 블로그

배경예전에 웹 서비스 캐시 똑똑하게 다루기 라는 글을 읽었다. 과연 똑똑하게 다루는 방법은 뭘까? 지금 내가 하는 프로젝트는 어떤 방법을 사용해야할까? 타사 서비스들은 어떻게 다루고 있을까? 이런 여러가지 고민들을 했고 정리해보려고 한다. 기초 지식캐시 컨트롤에 대한 기초 내용은 다루지 이 글에서 다루지 않습니다. 다만 필수적인 내용만 가볍게 정리하고 넘어갑니다. no-cache: 브라우저(로컬) 캐시를 사용하지 않는다. 단, cdn(중간서버) 캐싱은 사용한다.(사용 전 서버에 재검증)no-store: 모든 캐시(브라우저, cdn)를 사용하지 않는다.max-age: 브라우저 캐시 유지 시간s-max-age: cdn 캐시 유지 시간public: 브라우저와 중간 서버가 모두 캐시를 저장할 수 있음privat..

배경 약 1년 반 전 컴포넌트를 잘 만드는 방법(리액트) 글을 썼다. 우연히 출퇴근길 개발 읽기에 올라갔고 많은 사람들이 내가 쓴 글을 읽었다. 1년 반이 지난 지금 나는 컴포넌트에 대해서 얼마나 잘 알고 있을까? 2편을 적어보면서 스스로 판단해보기로 했다. 컴포넌트를 잘 만드는 방법 2편인 만큼 아주 기본적인 내용은 생략한다. 실무에서 누구나 겪을만한 내용들을 다뤄보겠다. composition pattern 정의 컴포지트 패턴(Composite pattern)이란 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴으로, 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 한다. - by 위키피디아 정의만 봐서는 알기 힘드니 어떤 경우에 사용할 수 있는지 또한 어떤 장점이 있는지 예..

배경 개발을 하다보면 추상화라는 용어를 굉장히 많이 보게 된다. 그리고 개인적으로도 추상화를 하기 위한 노력들을 많이 해왔다. 모호하게 잡혀있던 개념들을 정리해야겠다는 생각이 들어서 이 글을 쓰게 되었다. 이 글은 사전적 정의부터 추상화를 해야하는 이유, 코드에 적용하는 방법, 웹 프론트엔드에 적용하는 방법까지를 다루는 글이다.( + 개인적인 잡담) 추상화란 추상화의 사전적 정의 - 미술에서 추상화(抽象畫)는 대상의 구체적인 형상을 나타낸 것이 아니라 점, 선, 면, 색과 같은 순수한 조형 요소로 표현한 미술의 한가지 흐름이다. - 컴퓨터 과학에서 추상화(abstraction)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다. 현실 세계의 추상화 사전적 정의로..

배경 라이브러리없이 밑바닥부터 개발하는 경험은 정말 소중하다. 1년전 우아한테크캠프를 통해서 이를 배웠으며 한번씩 기회가 될때마다 공부해왔다. 그리고 이제 좀 쓸만한? 리액트 비스무리한 라이브러리를 만든것 같아서 글을 적는다.(참고로 컴포넌트에 관한 3번째 글이다...) 사전지식 리액트를 만들어야하는데 리액트의 동작방식을 몰라서는 안된다. 최소한 공식문서는 정독하고 혼자서 가볍게라도 만들어보는 걸 추천한다. 이미 나와있는 자료들을 보고 내가 새롭게 만들어보는것도 좋은 방법이지만 아무것도 머리속에 넣지 않고서 머리를 쥐어뜯으면서 생각해보는 것이 더 도움이 된다고 생각한다. best practive를 찾아서 공부하는 건 좋은 방법이지만 그것만 쫓아서는 좋은 개발자가 될 수 없다고 생각한다. 혼자서 코딩해보고..

컴포넌트란 프론트엔드 개발자라면 컴포넌트라는 말을 들어봤을 것이다. 컴포넌트가 뭘까?? 간단하게 말하면 컴포넌트는 독립적인 단위 모듈이다. 리액트를 예시로 들면 컴포넌트를 여러개 만들고 이걸 조합해서 하나의 페이지를 만든다. 이게 기본적인 설명의 전부다. https://hanamon.kr/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-component%EB%9E%80/ 컴포넌트를 만드는 방법 간단하게 생각해보기 정책, 디자인, 백엔드 등의 사전작업이 모두 이루어졌고 새롭게 프론트엔드 프로젝트를 시작한다고 가정해보자. 이제 컴포넌트 관점에서 어떻게 진행을 해야할지 생각해보자. 아무리 작은 규모의 프로젝트라고 할지라도 버튼, 인풋, 모달 등은 존재한다. 그리고 이것들은 많은 화면에서 비슷..

배경 사실 이전에도 글을 올렸었다. 그런데 많이 부족한 내용이였고 버그도 많이 있었다. 이번에 기회가 있어서 새롭게 간단한 프로젝트를 만들었는데 저번보다 훨씬 괜찮게 만들었다고 생각해서 다시한번 글을 올리게 되었다. 그리고 황준일님의 블로그를 참조했다. 리액트 동작 살펴보기 먼저 spa 라이브러리 중 가장 유명한 리액트를 생각해보자. 훅스는 비교적 만들기가 더 어렵다. 기본 useState, useEffect의 경우는 클로저를 이용해 간단하게 만들수 있지만(쉽지는 않다) 프로젝트 전체에 적용하는데는 더 많은 시간과 비용이 필요하다. 그래서 일단은 추상 클래스를 만들것이다. 리액트에서는 setState로 state를 변경하고 render, componentDidMount, componentDidUpdate..

배경 테스트에 최근에 관심이 생겨서 백엔드는 해봤는데 프론트 개발자가 프론트 테스트를 제대로 해보지 않았다. 그래서 차근차근 조금씩 학습할 예정이다. 프론트엔드에서 테스트가 필요한 이유 백엔드는 당연히 테스트가 필요하다. db에 접근하기 때문에 실수가 나오면 안되고 ui를 보고 직접 테스트하는게 불가능하기 때문에 어차피 수동으로 테스트를 해볼려면 일일히 postman을 이용해서 하나하나 테스트해봐야 한다. 그리고 많은 쿼리가 들어오면 서버가 터지기도 하기 때문에 진짜 필수다. 그런데 프론트에서도 필요할까??? 사실 간단한 프로젝트에서는 필요하지 않다. 그냥 버튼 몇 번 클릭해보면 눈으로 확인 가능하니 말이다. 하지만 프로젝트 규모가 커지고 실제로 배포해서 사용자가 있는 서비스에서는 사소한 오류라도 나와서..

리액트란 리액트는 쉽게 말해서 사용자 인터페이스를 만들기 위한 Javascript 라이브러리다. 그런데 리액트는 사용자 인터페이스를 만드는 여러 라이브러리 중에 하나일 뿐인데 왜 모두 리액트에 열광하는 것일까? 먼저 리액트는 대표적인 SPA(SinglePageApplication)이다. SPA를 처음 접한다면 충격적일 것이다. SPA는 말 그대로 하나의 페이지로 된 어플리케이션이라는 말이다. 즉 HTML 파일이 하나인 어플리케이션이다. 그렇기 때문에 새로고침 현상 즉 깜빡거리는 현상이 없어진다. SPA라는 조건 한가지 때문에 리액트를 사용하지는 않는다. 바닐라자바스크립트로 간단한 프로젝트를 만들고 리액트로 프로젝트를 만들어본 사람은 리액트의 편리성과 이점들을 알게된다. 리액트의 특징 1. Virtual ..