# 프런트엔드

hichulog

🚀 SVG >What is SVGs? SVGs are a very common image format on the web. SVGs are a scalable image format, which means they will easily scale to any size and retain their quality without increasing their filesize. They’re also very useful if you need to create or modify your images programmatically, because you can change their properties through CSS and JavaScript. [Example] SVG는 사람이 읽을 수 있고 HTML 요소와 마찬가지로 DOM의 요소가 될 수 있다. 💡 Use Icons Graphs/Charts Large, simple

superlipbalm

원문: https://www.voorhoede.nl/en/blog/building-design-system-react-web-components/ > 리액트로 범용 디자인 시스템을 구축하여 모든 웹 애플리케이션이나 프레임워크에서 사용할 수 있다면 어떨까요? 우리는 리액트를 웹 컴포넌트로 컴파일하여 이를 달성했습니다. 저희의 방법을 함께 살펴보시죠. 고객에게 디자인 시스템을 제공하기 위해 컴포넌트를 한 번 작성하고 다른 웹 프레임워크로 구축된 여러 웹 애플리케이션에서 사용할 수 있는 범용 솔루션이 필요했습니다. 하나의 프레임워크(리액트)에서 컴포넌트를 작성하고 래퍼, 폴리필, 툴링을 조합하여 모든 컨텍스트에서 작동하도록 하는 간단한 아이디

hichulog

🚀 Emmet >What is Emmet? Emmet is a plugin, built into VS Code, that helps you write HTML and CSS more efficiently by providing a bunch of clever shortcuts. [Example] 🔎 Emmet abbreviations > 1. Wrap with Abbreviation (⇧⌘A) [

hichulog

🚀 Introduction 시작하기 전에 TIL링크내용 외우기 아니고 눈에 익히기!! 💡 TIL HTML elements reference CSS Cheat Sheet

user_oy

NPM NPM은 Node Package Manager의 약자로, Node.js 프로젝트를 관리하는 필수적인 도구이다. 사용방법 프로젝트 생성 npm init package.json이라는 파일을 만들어 주고, 그 디렉토리를 Node.js 프로젝트로 만들어 준다. 명령어 명령어들은 다음과 같은 것들이 있다. | 명령어 | 설명 | |----|:----| |npm init| 새로운 프로젝트를 시작할 때, package.json 파일을 생성하는 명령어 | |npm install<package| package를 설치하는 명령어 | |npm install --save<package| package를 설치하며, dependencies 프로퍼티에 해당 패키지를 자동으로 추가합니다.| |npm install --save-dev<package| devDependencies 프로퍼티에 해당 패키지를 자동으로 추가합니다.| |npm update| 모든 패키지를

ceise0226

React Material-UI는 인기있는 UI 프레임워크로, 사용자 인터페이스를 구축하고 디자인하는 데 많은 도움을 주는 많은 장점이 있습니다. 하지만 몇 가지 단점도 고려해야 합니다. React Material-UI의 주요 장점과 단점 장점: 많은 미리 제작된 컴포넌트: Material-UI는 다양한 미리 제작된 UI 컴포넌트를 제공합니다. 버튼, 폼 요소, 다이얼로그, 메뉴, 테이블 등을 포함하여 다양한 디자인 요소를 쉽게 추가할 수 있습니다. Material Design: Material-UI는 Google의 Material Design 가이드라인을 따르므로 사용자들에게 익숙하고 현대적인 디자인을 제공합니다. 이는 사용자 경험을 향상시키고 일관된 디자인을 유지하는 데 도움이 됩니다. 커스터마이징 용이성: Material-UI는 컴포넌트들을 쉽게 커스터마이징할 수 있는 테마 시스템을 제공합니다. 따라서 프로젝트에 맞게 디자인을 변경하

ceise0226

React Material-UI는 인기있는 UI 프레임워크로, 사용자 인터페이스를 구축하고 디자인하는 데 많은 도움을 주는 많은 장점이 있습니다. 하지만 몇 가지 단점도 고려해야 합니다. 아래는 React Material-UI의 주요 장점과 단점을 설명합니다: 장점: 많은 미리 제작된 컴포넌트: Material-UI는 다양한 미리 제작된 UI 컴포넌트를 제공합니다. 버튼, 폼 요소, 다이얼로그, 메뉴, 테이블 등을 포함하여 다양한 디자인 요소를 쉽게 추가할 수 있습니다. Material Design: Material-UI는 Google의 Material Design 가이드라인을 따르므로 사용자들에게 익숙하고 현대적인 디자인을 제공합니다. 이는 사용자 경험을 향상시키고 일관된 디자인을 유지하는 데 도움이 됩니다. 커스터마이징 용이성: Material-UI는 컴포넌트들을 쉽게 커스터마이징할 수 있는 테마 시스템을 제공합니다. 따라서 프로젝트에 맞게 디자인을 변경하거나, 사용자 정

mochafreddo

서론 웹 개발의 세계는 복잡하며, 이 복잡성은 새로운 기술의 발전을 촉진합니다. 이러한 기술 중 JavaScript의 SharedArrayBuffer와 크로스 오리진 이슈는 웹의 동시성과 보안에 중요한 역할을 합니다. SharedArrayBuffer와 동시성 SharedArrayBuffer는 웹 워커나 서비스 워커와 같은 웹 기반의 병렬 컴퓨팅 환경에서 메모리를 공유할 수 있게 해주는 JavaScript의 객체입니다. 이는 웹 애플리케이션에서 동시성을 더 잘 다루게 해주며, 특히 웹 게임, 실시간 통신, 웹 기반 머신 러닝 등의 분야에서 중요합니다. 웹 기반의 병렬 컴퓨팅 환경에서 SharedArrayBuffer는 여러 실행 컨텍스트(예: 웹 워커)가 동일한 데이터를 동시에 읽고 쓸 수 있도록 합니다. 이는 웹 애플리케이션에서 병렬 프로그래밍을 가능하게 하여 성능을 향상시킬 수 있습니다. 그러나 이러한 메모리 공유는 데이터 일관성 문제를 야기할 수 있으므로, Jav

jin418code

1. CSS(Cascading Style Sheet) CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있다. 초기에는 HTML 하나로 다 했지만 수정의 불편함으로 내용과 스타일(표현)을 분리하기 위해 CSS가 만들어졌다. 인라인 스타일(Inline style) HTML 요소 내부에 style 속성을 사용해서 CSS 스타일을 적용하는 방법 인라인 스타일은 해당 요소에만 적용 인라인 스타일은 한번 설정된 스타일을 변경하기 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다. 고정 값으로 사용하는 경우에 사용하는 것이 좋다. 내부 스타일 시트(Internal style sheet) HTML문서 내의 태그(등)에 style 설정하는 방법 내부 스타일 시트는 해당 HTML 문서에서만 적용 외부 스타일 시트(External style sheet) 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다. .css

jin418code

1. HTML5의 문서 구조화 웹 문서 구조를 표현하는 태그가 없는 등의 기존 HTML의 한계가 있고 현대의 웹 문서는 검색 엔진 친화적(쉬운 탐색 등)인 웹 페이지의 필요성이 대두되었다. 웹 페이지를 시맨틱 태그로 분할하여 작성한다. 2_1. 시맨틱 태그 페이지나 섹션이 머리말, 페이지를 간단히 설명하는 섹션이다. 페이지 내 목차를 만들고 하이퍼링크들을 모아 놓은 섹션이다. 문서의 장(chapter, section) 혹은 절을 구성하며 웹 페이지에 여러 section을 생성 가능하다. 헤딩 태그(~)로 절 또는 섹션 주제를 나타낸다. 본문과 연관 있지만 독리적인 컨텐츠를 담는 영역으로 블로그 포스트, 댓글 등 기타 독립된 내용을 담고 있다. 여러

jin418code

HTML5 기초 HTML5의 출현 배경 Active-X나 플러그인, 플래시 등 비표준 기술의 난립과 브라우저 사이에서 HTML 문서와 웹 자원간의 호환성 문제와 PC, 스마트폰 등의 웹을 사용하는 기기의 다양화로 인한 호환성 문제로 새로운 범용 웹 표준의 필요성에 의해 만들어졌다. HTML5 페이지 구조 HTML5 페이지 필수 태그 HTML5 태그 태그와 속성은 대소문자 구분이 없다. 속성 값에 불필요한 공백은 오류를 야기한다. 블록 태그와 인라인 태그 블록 태그 수직적으로 상자처럼 쌓이는 요소 / 항상 새 라인에서 시작하여 출력한다. 양 옆에 다른 컨텐츠를 배치하지 않고 한 라인을 독점 사용한다. 가장 많이 사용되는 블록 태그 : , 등 인라인 태그 수평적으로 쌓이며 글자 단위로 취급하는 요소 / 블록 속에 삽입되어 블록의 일부로 출력 가장 많이 사용되는 인라인 태그 : ,

galaxy4276

Main Banner 두서 요 근래 지속적으로 Java 11 + Spring 프로젝트만 진행하면서 다음과 같은 생각이 내 고민순위 중 하나로 등재되었다. > "계속 죽어가는 프런트엔드 능력을 살려둘 기회가 없을까" 프런트엔드 능력을 지속적으로 개발하기 위해 프로젝트를 하나 더 진행하는 건 부담이 꽤 크다. 그러던 나날 중 백엔드 개발 이슈에 꽉 막힌 나는 잠시 쉬어가기 위해 개발 관련 컬럼을 읽기 시작했고 FrontendPro 를 발견했다. 대충 둘러보니 해당 사이트는 프런트엔드 개발자들에게 실용적인 컴포넌트 또는 자주 작성되는 페이지 컨셉 토대로 단일 페이지의 작은 토이 프로젝트를 챌린지로서 제안한다. 처음으로 가볍게 진행해볼 챌린지가 무엇

huisu0429

TIL 날짜 및 읽은 범위 2023.01.25 Ep.39 ~ Ep.45 에피소드 39 : 인공지능, 머신러닝, 딥러닝, 아직도 구분하기 힘들다고 ? 인공지능에도 급이 있다 ? |일반 인공지능|좁은 인공지능| |--|--| 사람처럼 행동하는 인공지능 | 한가지만 잘하는 인공지능, 한정된 영역에서만 동작 인간의 행동을 할 수 있거나, 인간보다 능력이 뛰어남 | 딥러닝이나 머신러닝으로 만듬 대화, 게임, 판단도 가능| 몇 가지 일만 가능, 단 탁월하게 잘함 현실에 없음 (현 기술로는 불가능) | 페이스북의 얼굴인식, 빅스비(Bixby), 시리(Siri) (현 인공지능 기술의 위치) 머신러닝은 인공지능을 학습시키는 방법 |구분|지도학습 (supervised learning) | 비지도학습 (unsupervised learning) | |--|--|--| 정의|라벨(label)을 토대로 학습시킴 |라벨이 없는 데이터를 줌| 예시|핫도그의 특징을 알려줌 > 학

huisu0429

TIL 날짜 및 읽은 범위 2023.01.24 Ep.35 ~ Ep.38 에피소드 35 : 비밀번호는 어떻게 저장할까 ? 비밀번호 시스템 구현, 어떻게 해야할까 ? >비밀번호 시스템의 잘못된 예 2가지 비밀번호를 데이터 베이스에 그대로 저장 데이터 베이스에 접근할 수 있는 운영자, 개발자 모두 볼 수 있고 시스템을 구축한 사람도 비밀 번호를 볼 수 있어 |number|ID|password| |--|--|--| |1|nico|nico1234| |2|lynn|lynn0920| |3|beadori|!doridori123| > 2. 키(key)를 이용한 비밀번호 관리 데이터베이스를 자체를 암호화해서 아무도 볼 수 없게 만든 후에 비밀번호로 저장 해 키(key)로 데이터 베이스를 해제한 후 로그인하지 키로 자신의 비밀번호가 저장된 부분을 해제하고 나서 입력한 비밀번호와 대조해서 맞으면 로그인이 되는거야 로그인을 마치면 다시 데이터 베이스의 비밀번호 부분을

huisu0429

TIL 날짜 및 읽은 범위 2023.01.22 Ep.30 ~ Ep.34 에피소드 30 : 코로나가 준 레거시 시스템의 교훈 >레거시 시스템(legacy system)은 낡은 기술이나 방법론, 컴퓨터 시스템, 소프트웨어 등을 말한다. 이는 현대까지도 남아 쓰이는 기술을 부르는 말일 수도 있지만, 더 이상 쓰이지 않더라도 현대의 기술에 영향을 주는 경우도 포함한다. 코볼, 넌 누구니 ? > 코볼은 1959년에 탄생한 정말 오래된 언어야 코볼(COBOL) 은 Common business oriented language의 줄임말 미국의 은행 시스템 가운데 43% 는 코볼로 개발, 미국 ATM 시스템은 95% 가 코볼로 구현 > 코볼의 문제점! 커뮤니티가 너무 적다! 코볼은 프로그램에서 기능을 매우 훌륭하게 수행하고 있어 그러나 커뮤니티 크기가 문제야 실제로 코볼을 사용한 개발자는 매우매우매우 적어 그리고 코볼 개발자의 평균 연령은 50세 이상이야 즉, 코볼로

huisu0429

TIL 날짜 및 읽은 범위 2023.01.21 Ep.26 ~ Ep.29 에피소드 26 : 정렬 알고리즘이 뭐죠? 버블 정렬 Bubble sort >왼쪽, 오른쪽만 보면서 정렬 2칸짜리 창문을 놓고 오른쪽으로 1칸씩 밀면서 왼쪽과 오른쪽을 비교하는 정렬 방식 오름차순 기준: 왼쪽이 크면 오른쪽과 자리를 바꿈 = 한 사이클 비교횟수, 교환 횟수 등을 고려하면 시간 복잡도는 "$${O(N^2)}$$" 이다 버블정렬 포크댄스 선택 정렬 Selection sort > 하나를 콕! 집어 가며 정렬 전체 데이터 중에서 가장 작은 데이터 또는 가장 큰 데이터의 위치를 따로 기억하는 방식 선택 정

huisu0429

TIL 날짜 및 읽은 범위 2023.01.18 Ep.22 ~ Ep.25 에피소드 22 : 자료구조와 알고리즘이 필수라고 ? 알고리즘이란 ? 컴퓨터에게 내리는 지시 사항을 나열한 것 > 알고리즘은 컴퓨터에게 내리는 지시 사항을 나열한 거야 >등교 준비하기 알고리즘 이부자리에서 일어나기 2.가방 챙기기 3.머리 정돈하기 교복으로 갈아입기 세수, 양치하기 집 나서기 등교 준비하기 알고리즘 중에서도 효율설이 더 좋은 것도 있어 다른 사람보다 빠르게 학교에 도착할 수 있을거야! 즉, 등교 속도가 빨라질 거야. 이건 컴퓨터도 마찬가지야! >다양한 컴퓨터 알고리즘 예로는 지도 앱을 생각해봐. 바로 목적지까지 최대한 빨리 가는 방법을 알려 주는 거겠지! 그 기능을 구현하기 위해 패스파인더 (pathfinder) 알고리즘을 사용해 다른 예는 압축 (compression) 알고리즘이야 이미지를 최대한 덜 손상하면서도 용량을 효율적으로 줄일 수 있는 알고리

leeheesung

_참고기사 : https://n.news.naver.com/mnews/article/138/0002139843?sid=105_ > 위 링크에 기사 내용은 정부가 공공데이터의 개방을 전면 개방으로 전환한다. 실시간 데이터 제공 확대, 데이터 표준화 등을 통해 디지털플랫폼정부 구현에 속도를 낸다는 계획을 세웠다는 내용이다. 나는 정부의 이러한 사업이 너무 좋다고 생각한다. 공공데이터를 모든 사람들이 볼 수 있도록 공개한다면 공무의 결과가 더 투명해지고 사람들의 관심도 얻을 수 있을 것 같아 좋다고 생각한다. 또한 나와 같은 개발공부를 하는 사람들에게 이러한 공공데이터를 다루어 개발 할 수 있는 기회가 생겨 나중에 나와 같은 초보 개발자들이 프런트엔드에 데이터베이스를 연동하기 전 공용 데이터를 이용하여 연습하면 좋을 것 같기 때문에 이러한 정부의 사업이 좋다고 생각한다. 나는 지금 프런트엔드 개발에 관심을 가지고 있어 React JS 를 공부 중이다. 아직은 많은 공부를 하지

gn0lee

어쩌다 시작하게 되었을까? 사내 Saas 프로젝트에서 MVP기능을 구현한지 얼마 안된 시점이었다. 새로운 팀장님께서 오신 후 가장 먼저 각 팀원들과 1대1 면담을 하며 현재 코드나 업무에서 개선이 필요한 사항을 파악해 나가셨다. 나는 평소에 말수가 많지 않지만 그날 만큼은 한풀이 하듯이 내가 생각하는 문제점들을 말씀드렸다. 팀장님께서 공감을 하셨고 나중에 꼭 리팩토링을 해야할 것 같다고 하셨다. 그 후 팀원들과 코딩 컨벤션에 대해 논의를 가지기 시작했다. 하지만 정해야할 내용이 생각보다 많고 다른 업무에 치어서 컨벤션에 대한 논의나 리팩토링은 저 먼 곳으로 잊혀저 가는 듯 했다. 하지만 팀내 업무를 새로 나누면서 내가 Saas 프로젝트의 주 담당자가 되었다. 그리고 Saas 프로젝트에서 MVP이외의 기능을 추가해야했다. 이에 나는 팀장님께 기술부채가 너무 쌓여 새로운 기능을 추가하기 어려워 우선 코드 리팩토링이 필요하다고 건의드렸고 팀장님께서 받아주셨다. 새로운 기능 개발 전

limjaae96

🍏 🖍 스파르타 코딩클럽 웹개발 종합반 1주차 강의를 다 들었다. 코딩이 뭔지 아무것도 모르는 도자기 디자인 하는 흙쟁이인 나에겐 너무나도 큰 도전이었다. 시작이 반이라고 개발자가 되어야겠다는 마음을 먹고, 여러 학원을 찾아 봤다. 생활코딩,제로초,드림코딩 등 유튜브로 기본적인 코딩의 지식들을 보고, 독학을 하며 학원을 찾아나섰다. 정말 아무 베이스가 없다보니 뭐부터 뭘 해야 할지 감 자체가 안잡혔다. 그러다 우연히 스파르타코딩클럽을 보게 되었고, 온라인 강의라 걱정되는 부분도 있었지만, 많은 수업량과 밀착 관리를 해준다는 말에 내일배움캠프에 지원하게 되었고, 본격적인 캠프 개강에 앞서 웹개발 종합반을 듣게되었다. 🔥 1주차 수업내용 1주차에는 간단하게 html,css,bootstrap,javascript에 관한 설명과 깊은 이론보단 빠른 실행으로 이렇게이렇게 돌아간다는 흐름을 느낄 수 있는 수업이었다. 1.HTML 뼈대 만들기 -