우파루파의 개발 기록

이번 포스팅에서는 서버 작업을 하기 위한 기본적인 정보 중 하나인 Protocol과 IP, IPS 및 한 번쯤은 들어봤을 TCP/IP 등에 대한 개념에 대해 알아보겠습니다. Protocol과 IP Protocol 먼저 프로토콜이란 무엇일까요? 이 포스팅을 읽고 계시는 분이라면 한번쯤은 들어봤으리라 생각되는 단어이고, 그만큼 웹/서버 모두에 있어서 필수적으로 이해해야 하는 개념인데요. 프로토콜이란 컴퓨터 내/외부에서 데이터를 전송할 때 사용하는 교환 방식을 정의하는 규칙 체계의 집합을 말합니다. 어렵지 않도록 조금 풀어서 설명하자면, 데이터를 요청하고 응답하는 과정에서 서로 간의 정해진 형식으로만 통신할 수 있도록 정해둔 규칙을 말하는 것입니다. 특정 방식으로만 데이터를 요청할테니, 응답 시에도 특정 방식..

이번 포스팅에서는 HTTPS와 HTTP의 개념에 대해 정말 간단히 용어 정리와 개념 정리 다룹니다. 이전 포스팅과 마찬가지로 간단히 훑고 넘어가시는 용으로 읽어보셔도 좋을 것 같습니다. HTTP & HTTPS란 HTTP? HyperText Transfer Protocol 의 약어입니다. 클라이언트 ↔ 서버간의 통신 규약을 말합니다. HTTPS? HTTP Secure 의 약어입니다. HTTP와 같으나 보안이 강화된 규약을 말합니다. 클라이언트? 서버에 요청을 보내는 요청자를 말합니다. 주고 받을 수 있는 데이터 형식 HTML Image Video Audio Text Method 자세한 내용은 MDN 문서를 참조하시면 좋습니다. GET HEAD POST PUT DELETE CONNECT OPTIONS TRA..

이번 포스팅에서는 REST 아키텍처의 개념에 대해 간단하게 개념 정리를 해보겠습니다. 단순한 개념 정리이므로 개념에 대해 훑는 정도로만 봐주시면 될 것 같습니다. REST란 Representational State Transfer 의 약어입니다. 소프트웨어 아키텍처의 한 형식이고, 네트워크 아키텍처 원리의 모음이라고 정의합니다. HTTP 통신에서 특정 자원에 대한 요청을 Resource와 Method로 표현하여 특정한 형태로 응답하는 것을 말합니다. 용어에 대한 개념은 아래에서 간단하게 짚어보겠습니다. 이외의 다른 아키텍처는 대표적으로 SOAP 이 있습니다. 특정 자원에 대한 요청의 종류 CRUD 액션 Create Read Update Delete Resource 클라이언트가 요청할 수 있는 Unique..

이번 포스팅에서는 styled-components 라이브러리의 기본적인 문법과 간단한 사용법에 대해 다루고자 합니다. 공식 문서의 글을 좀 더 단순하고 쉽게 표현한 글 입니다. 좀 더 심화된 내용은 공식 문서를 참조하시면 좋습니다. [공식 문서] (본 글은 이전에 업로드 되었던 내용을 좀 더 보기좋게 다듬어 재 업로드 한 글입니다.) className의 명시적인 주입 없이 컴포넌트를 만들고 스타일을 적용하기 import React from 'react'; import styles from './styles.css'; /* ... */ Default CSS 기본적인 CSS를 이용한다고 가정했을때, 위와 같이 사용하려는 스타일을 classname을 사용해서 일일이 지정해줘야 합니다. 그닥 나쁜 경우는 아니지..

이번 포스팅에서는 Font format의 종류와 font-face 선언 방법, 적용법을 알아봅시다. Font format의 종류 포맷과 종류별 특징 포맷 포맷별 특징 TrueType Fonts (TTF) - 가장 일반적인 글꼴 형식 - 대부분의 브라우저가 지원 OpenType Fonts (OTF) - TTF를 기반으로 제작된 글꼴 형식 - TTF와 비슷하지만, TTF에서 지원하지 않는 최신 기능을 사용 가능 The Web Open Font Format (WOFF) - OTF와 TTF로 이루어져 있는 압축된 글꼴 형식 - 압축되어 있어 가볍고 다운 받는 속도가 빠름 - W3C 권장 사항 The Web Open Font Format (WOFF 2.0) - WOFF보다 더 향상된 압축을 제공하는 글꼴 형식 S..

들어가며 프로젝트를 진행할 때 꼭 필요한 Lint 설정을 진행합니다. Lint란 무엇이고, 왜 필요한 지에 대해서 학습합니다. 최종적으로Prettier, ESLint를 사용하여 VSCode에서 저장 할 때마다 자동으로 원하는 스타일로 Auto formating 해주는 설정 방법에 대해서 알아봅니다. 본 글에서는 React + Typescript 설정을 기준으로 하며, JS 설정을 하고 계신다면 typescript 관련된 내용을 제외하고 적용하시면 됩니다. Lint가 필요한 이유 설명에 들어가기 앞서, Lint/Linter의 개념부터 알아봅니다. Lint, Linter란 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위이고, Linter란 Lint의 동작을..

들어가며 안녕하세요. 이번 포스팅에서는 Shallow compare 와 Class component 에서의 최적화에 대해 말씀드리려고 합니다. 메모리에 대한 이해가 있으시면 좀 더 쉽게 이해하실 수 있습니다. 물론 없어도 무관 합니다. 최적화란 무엇일까요? 최적화란 말 그대로 성능을 개선하여 가장 적은 비용으로 가장 좋은 퍼포먼스를 낼 수 있도록 하는 것입니다. 들어는 봤는데, 너무 어렵지 않나요? 'Webpack을 이용하여 build한 파일을 경량화하고, 의존성을 파악하여 코드 스플리팅을 진행하고.. ' 맞습니다. 최적화는 깊이 파고들면 어려운 방식들이 가득합니다. 하지만 위와 같이 어려운 작업은 하나씩 천천히 진행하면 됩니다. 너무 어려운 작업 말고, 작업 중에서도 가장 쉽게 접근할 수 있는 방법에 ..

2019년부터 운영했던 개발 블로그 포스팅의 일부를 삭제하고 있습니다. 기존 미흡한 실력으로 작성됐던 글들이 다시 돌아보니 부정확한 정보들인 경우가 많은 것 같다는 생각이 들엇습니다. 그래서 남겨두어도 괜찮을 것 같은 글들을 제외하고는 삭제하거나 비공개 처리 하였습니다. 새로이 작성하는 글들로 정확한 정보로 많은 도움이 되는 개발 블로그가 되겠습니다. 블로그 방향성은 변하지 않고 이전과 동일하게 JS 위주의 개발 정보 글이 올라갈 것 같습니다. 블로그에 남겨주신 댓글은 비공개지만 감사히 잘 보관하고 있습니다.