2021/06
-
[Server] HTTP/HTTPS와 응답 상태별 코드의 간단한 개념development/Server | Node.js 2021. 6. 25. 23:45
이번 포스팅에서는 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..
-
[Server] REST API의 간단한 개념development/Server | Node.js 2021. 6. 24. 22:47
이번 포스팅에서는 REST 아키텍처의 개념에 대해 간단하게 개념 정리를 해보겠습니다. 단순한 개념 정리이므로 개념에 대해 훑는 정도로만 봐주시면 될 것 같습니다. REST란 Representational State Transfer 의 약어입니다. 소프트웨어 아키텍처의 한 형식이고, 네트워크 아키텍처 원리의 모음이라고 정의합니다. HTTP 통신에서 특정 자원에 대한 요청을 Resource와 Method로 표현하여 특정한 형태로 응답하는 것을 말합니다. 용어에 대한 개념은 아래에서 간단하게 짚어보겠습니다. 이외의 다른 아키텍처는 대표적으로 SOAP 이 있습니다. 특정 자원에 대한 요청의 종류 CRUD 액션 Create Read Update Delete Resource 클라이언트가 요청할 수 있는 Unique..
-
[React.js] Styled Components 간단 정리 [Basic]development/React 2021. 6. 24. 22:37
이번 포스팅에서는 styled-components 라이브러리의 기본적인 문법과 간단한 사용법에 대해 다루고자 합니다. 공식 문서의 글을 좀 더 단순하고 쉽게 표현한 글 입니다. 좀 더 심화된 내용은 공식 문서를 참조하시면 좋습니다. [공식 문서] (본 글은 이전에 업로드 되었던 내용을 좀 더 보기좋게 다듬어 재 업로드 한 글입니다.) className의 명시적인 주입 없이 컴포넌트를 만들고 스타일을 적용하기 import React from 'react'; import styles from './styles.css'; /* ... */ Default CSS 기본적인 CSS를 이용한다고 가정했을때, 위와 같이 사용하려는 스타일을 classname을 사용해서 일일이 지정해줘야 합니다. 그닥 나쁜 경우는 아니지..
-
[HTML|CSS] Font format과 font-face 선언 및 적용법development/HTML | CSS | Vanilla JS 2021. 6. 23. 00:34
이번 포스팅에서는 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..
-
[React.js] ESLint와 Prettier를 이용한 React 환경 설정 (VSCode)development/React 2021. 6. 19. 23:13
들어가며 프로젝트를 진행할 때 꼭 필요한 Lint 설정을 진행합니다. Lint란 무엇이고, 왜 필요한 지에 대해서 학습합니다. 최종적으로Prettier, ESLint를 사용하여 VSCode에서 저장 할 때마다 자동으로 원하는 스타일로 Auto formating 해주는 설정 방법에 대해서 알아봅니다. 본 글에서는 React + Typescript 설정을 기준으로 하며, JS 설정을 하고 계신다면 typescript 관련된 내용을 제외하고 적용하시면 됩니다. Lint가 필요한 이유 설명에 들어가기 앞서, Lint/Linter의 개념부터 알아봅니다. Lint, Linter란 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위이고, Linter란 Lint의 동작을..
-
[React.js] Shallow compare와 Class component에서의 최적화 (22.04.13. 내용 수정 및 추가)development/React 2021. 6. 17. 22:44
들어가며 안녕하세요. 이번 포스팅에서는 Shallow compare 와 Class component 에서의 최적화에 대해 말씀드리려고 합니다. 메모리에 대한 이해가 있으시면 좀 더 쉽게 이해하실 수 있습니다. 물론 없어도 무관 합니다. 최적화란 무엇일까요? 최적화란 말 그대로 성능을 개선하여 가장 적은 비용으로 가장 좋은 퍼포먼스를 낼 수 있도록 하는 것입니다. 들어는 봤는데, 너무 어렵지 않나요? 'Webpack을 이용하여 build한 파일을 경량화하고, 의존성을 파악하여 코드 스플리팅을 진행하고.. ' 맞습니다. 최적화는 깊이 파고들면 어려운 방식들이 가득합니다. 하지만 위와 같이 어려운 작업은 하나씩 천천히 진행하면 됩니다. 너무 어려운 작업 말고, 작업 중에서도 가장 쉽게 접근할 수 있는 방법에 ..
-
[공지] 글 일부 삭제 및 재업로드공지 2021. 6. 15. 12:43
2019년부터 운영했던 개발 블로그 포스팅의 일부를 삭제하고 있습니다. 기존 미흡한 실력으로 작성됐던 글들이 다시 돌아보니 부정확한 정보들인 경우가 많은 것 같다는 생각이 들엇습니다. 그래서 남겨두어도 괜찮을 것 같은 글들을 제외하고는 삭제하거나 비공개 처리 하였습니다. 새로이 작성하는 글들로 정확한 정보로 많은 도움이 되는 개발 블로그가 되겠습니다. 블로그 방향성은 변하지 않고 이전과 동일하게 JS 위주의 개발 정보 글이 올라갈 것 같습니다. 블로그에 남겨주신 댓글은 비공개지만 감사히 잘 보관하고 있습니다.