Go민보다 Go

프론트엔드 개발자

Read 12

[CSS] 웹 스타일링

🐾들어가며CSS 관련해서 여러 가지를 사용해보는데, 어떤 차이가 있는지 간단하게 구분해보려고 글을 씁니다.✨본격적으로✅CSS, module, SCSS, CSS in JS...CSS: 웹 문서의 디자인을 씌울 수 있게 만드는 스타일 시트.-> 대규모 프로젝트에서 전역적으로 적용되는 CSS는 관리의 어려움이 있다.selecorA { /*...css...*/} selectorB.class { /*...css...*/}CSS-module: style.module.css 처럼 CSS를 module화하여 사용-> 중복되는 클래스명이어도 고유한 hash 값이 클래스명에 붙기 때문에 다른 스타일로 작성할 수 있다.selecor { /*...css...*/} selector.class { /*....

Read 2024.05.03

[MDN] HTML 문서에서 뭐 봐?

🐾들어가며HTML을 공부하기 시작하면서 시맨틱 태그를 사용하는 것에 욕심이 있습니다. 그래서 어떤 태그를 쓸 지 고민하면서 MDN을 보면서 확인하는데, 요즘 다른 내용들이 더 눈에 보이기 시작했습니다. 초반에 MDN을 보면서 이 부분을 봤으면 더 좋았을 텐데 하면서도 지금이니까 보이는 부분이라고 생각이 듭니다.필수적으로 보는 MDN HTML 태그 정보들HTML 태그의 종류 // Content CategoriesTechnical summary브라우저 호환성 // Browser compatibility✨본격적으로✅HTML 태그의 종류시맨틱하게 사용한다는 것은 해당 태그의 특성을 알고, 어떤 정보를 표현하는 지 알고 사용한다는 것입니다. 이를 좀 더 쉽게 알 수 있는 방법이 있습니다.가장 먼저 태그를 사용하..

Read 2024.04.28

기술 문서 배포를 위한 프로세스

🐾들어가며 Docs for Developers 의 chapter 7 문서 배포하기를 읽고 예시를 찾아보면서 같이 정리했습니다. 이번 챕터에서는 문서를 배포하기 위한 프로세스를 만드는 것을 목표로 합니다. ✨본격적으로 ✅문서 배포 문서 배포: 사용자가 콘텐츠를 읽고 따라할 수 있도록 하는 것을 의미하며, 소프트웨어가 릴리스되었음을 알리는 것과 유사하다. 완벽한 문서는 거의 없다. 문서 배포에 대한 두려움을 다루는 가장 좋은 방법은 배포 후에 피드백을 기반으로 그동안 했던 과정을 반복하는 것이다. 해당 챕터는 다음과 같은 내용으로 구성되어 있으나, 프로세스 구축과 타임라인 만들기를 위주로 내용을 정리하였습니다. 콘텐츠 릴리스 프로세스 구축하기 배포 타임라인 만들기 배포 확정 및 승인하기 독자에게 콘텐츠 알리..

Read 2024.03.03

기술 문서 작성을 위한 시각적 콘텐츠

🐾들어가며 Docs for Developers 의 chapter 6 시각적 콘텐츠 추가하기를 읽고 정리했습니다. 이번 챕터에서는 시각적 콘텐츠에 대한 장, 단점 그리고 접근성이 높은 시각적 자료를 만드는 것을 목표로 합니다. ✨본격적으로 ✅시각적 콘텐츠를 만들기 어려운 이유 그래픽 콘텐츠의 우월함은 아주 작은 공간에 최소한의 잉크를 사용하여 최단 시간에 갖아 많은 아이디어를 보는 사람에게 제공한다는 점입니다. - 에드워드 터프티(Edward Tufte) 정보 전달을 방해하는 시각적 콘텐츠의 특징 이해 용이성 접근성 성능 위와 같은 점이 부족하기 때문입니다. 이해 용이성을 높이자. Q. 이 콘텐츠가 독자에게 도움이 되는가? 독자는 자신의 관심사와 관련된 정보가 포함된 이미지에 더 주의를 기울이며, 다른 이..

Read 2024.02.25

기술 문서 작성을 위한 샘플 코드

🐾들어가며Docs for Developers 의 chapter5 샘플 코드 통합하기를 읽고 정리했습니다. 이번 챕터에서는 샘플 코드의 유형 별로 작성하는 원칙에 대해 다루며, 유용한 샘플 코드를 설계하는 것을 목표로 하고 있습니다. ✨본격적으로✅샘플 코드 유형- 실행 가능형: 필요에 따라 일부 수정하여 사용할 수 있는 바로 실행이 가능한 형태 - 설명형: 뭔가 배우거나 자신의 코드와 비교하고자 사용하는 출력 결과나 코드 블록 ex) API 문서 이번에는 vue js 공식문서를 예시로 들었습니다! 아래는 순서대로 실행 가능형 코드와 설명형 코드입니다. ✅좋은 샘플 코드의 원칙독자는 샘플 코드가 그냥 잘 작동하기를 기대하비다. 독자는 문서를 훑어보고, 샘플 코드를 찾고, 샘플 코드에서 나타나는 개념을 파악하..

Read 2024.02.09

기술 문서 작성을 위한 편집 프로세스

🐾들어가며 Docs for Developers 의 chapter4 문서 편집하기를 읽고 정리했습니다. 이번 챕터에서는 문서 작성과 문서 검토를 분리하여 창작과 평가 과정을 분리하는 편집 프로세스를 만드는 것을 목표로 합니다. ✨본격적으로 ✅편집에 대한 접근법 편집 단계에서 중점을 두어야 할 것은 다음의 4가지로, 각 단계마다 하나씩 점검해야 합니다. 한 번에 많이 하는 경우, 속도가 현저히 느려질 수 있기 때문입니다. 기술적 정확성 완전성 구조 명확성과 간결성 기술적 정확성을 위한 편집 누군가가 이 지시 사항을 따라가면 약속한 결과를 얻을 수 있는가? 혼동을 일으킬 수 있는 기술적인 은어나 용어가 있는가? 코드의 함수, 파라미터, 엔드포인트가 올바르게 명명되고 설명되었는가? 완전성을 위한 편집 [TODO..

Read 2024.01.27

기술 문서 작성을 위한 초안 만들기

이전글 보러가기 >> 2024.01.14 - [Read] - 기술 문서 작성을 위한 문서 유형 🐾들어가며 Docs for Developers 의 chapter 3 문서 초안 만들기를 읽고 정리하였습니다. 다루는 주제는 아래와 같습니다. 도구 선택 개요 작성 초안 작성 초안을 작성할 때 작성이 막혔을 때 템플릿으로 작성하기 책에서는 순서를 부여하지 않았지만, 저는 단계별로 있는 게 이해하기 쉬워서 순서 목록으로 작성했습니다! 그러다보니 리스트 형태로 정리했는데, 각 단계별로 생각할 점을 체크 리스트로 만들어 보는 것도 좋을 듯 합니다. 읽은 내용을 정리하는 것이기에 최대한 사견을 빼고, 제 것으로 만들기 위해 이해한 대로 순서를 재배치하면서 정리했습니다. 평소 생각하지 못했던 것들은 인용구로 강조하여 적었..

Read 2024.01.19

GPT, JS 타입 변환에 대한 성능 차이가 발생하는 이유

✨ 궁금해서 JS에서 타입 변환을 할 때 별도의 타입 캐스팅을 하느 것보다 연산자를 이용하여 강제 변환을 하는 편이 더 빠르다. 결과만 알고 있던 것인데, 스터디를 하는 분께서 자바에서의 출력 방법 두 개를 비교할 때, 컴퓨터 구조와 관련하여 설명하는 것을 보았습니다. 그래서 JS에서는 왜 그런지, 컴퓨터 구조적으로 볼 수 있을 지에 대해 생각해보았습니다. 자바스크립트에서 타입은 동적으로 정해지고, 타입 캐스팅을 위해 String, Boolean, Number 등의 메서드를 쓰면 어셈블리어로 해석하는 과정에서 참조를 따라 스코프를 올라가고 새로운 결과값을 반환하는 과정이 추가됩니다. 그러니 둘이 같은 타입의 경우 바로 연산에 들어갈 수 있는 것과 차이가 크지 않을까, CPU 자체에서도 데이터의 타입에 의..

Read 2024.01.16

기술 문서 작성을 위한 문서 유형

🐾들어가며 Docs for Developers 의 chapter 2 문서화 계획하기를 읽고 예시를 찾아보면서 같이 정리했습니다. 이번 챕터에서는 각 문서의 종류와 문서를 작성하기 위한 포괄적인 계획을 세워보는 것을 목표로 합니다. ✨본격적으로 ✅문서의 유형 코드 주석, 리드미, 시작하기, 개념, 절차, 참조 문서 문서의 종류는 위와 같이 6가지로 소개하고 있습니다. 그 중 개발 문서라고 하면 흔히 생각나는 API와 RELEASE NOTE 등은 REFERENCE 유형입니다. ✅각 문서의 특징과 예시 이제 유형을 하나씩 보면서 어떤 특징이 있는지 등에 대해 정리해보겠습니다. 또한, 그동안 공식 문서들을 읽을 때 대부분 비슷한 형태로 쓰여져 있는지 알 듯 합니다. 그래서 예시를 좀 찾아보면서 비교해보려고 합니..

Read 2024.01.14

2장 그림으로 공부하는 IT 인프라 구조

POTINT: HDD 데이터가 CPU에 이르기까지 일련의 데이터 흐름으로 생각해보자. 목차: 물리서버 - CPU - 메모리 - I/O 장치 - 버스 각 목차별 주제 물리서버 - 서버의 내부 구성과 각 구성에 대한 개념 설명 CPU - 코어와 명령 체계 개요 메모리 메모리 종류와 각 종류의 장,단점 데이터 처리 속도, 엑세스 속도 등 I/O 장치 HDD, SSD... 라이트 스루, 라이트 백 이더넷, CPU와 다른 I/O제어 버스 - 데이터 전송 능력, 대역, 병목 현상 단어 정리 - 랙(Rack): 서버를 장착하는 공간. 한 칸을 1U. - IA 서버: 인텔의 CPU를 사용한 서버 - 메모리 인터리빙(Memory Interleaving): 미리 데이터를 CPU에 전달해서 처리 지연을 줄이는 기능 - 채널..

Read 2023.12.13