일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- nextjs
- side-project
- 2020년
- 뇌를자극하는C#
- css framework
- c#
- design system
- 23년 회고
- design
- 다짐
- 프로그래밍
- vite
- javascript
- react
- component
- design-system
- compound component
- 2024 계획
- 2021년
- style-dictionary
- typescript
- 24년 계획
- 2023 회고
- design token
- webpack to vite
- 디자인 토큰
- 회고
- frontend
- 개발자
- front
- Today
- Total
목록Front-end (18)
개탕 IT FACTORY
개요 프로젝트를 진행할때마다 CRA를 활용한 어플개발을 많이 하였다. 일단 환경 구축등의 시간 단축이 좋다는 이유로 많이 사용하였지만, CRA의 단점은 커스텀이 어렵다는 부분이 있다. 물론 npm run eject을 통해서 webpack설정을 바꿀순 있지만, 기존에 지원하던 좋은 장점을 버리는 거라 추천은 하지 않는다 (사실 직접 webpack으로 골라 만드는게 좋을듯…) 그래서 SSR, SSG의 장점이 가진 Nextjs를 나만의 boilerplate로 제작해볼까 한다. 준비사항 일단 어떤 요소를 넣어야 하는지에 대한 부분이 필요했다. 필수요소 typescript ESLint Prettier React-testing-library, jest styled-components tailwindCSS 데이터페칭..
서론 회사에서 채팅 서비스 구현당시 스크롤 이동을 위해서 돔 조작이 필요했는데 이미지의 경우 로드되는 속도가 느려 스크롤 이동이 중간에 멈추는 현상이 발생하여 onLoad함수라는 것을 사용하여 해결한 것을 작성할려구 한다. onLoad란? https://developer.mozilla.org/ko/docs/Web/API/Window/load_event MDN 문서에 따르면 💡 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행 쉽게 말해서 모든 요소가 로딩이 완료된 다음에 실행되는 이벤트이다. DOM의 standard 이벤트이다 사용법 window.onload window.onload = function() { // 실행될 코드 } html 태그 속성으로 지정 주의사항 로드된 이후에 실행되기 때문에..
JSX란?-Reac.js에서 사용하는 문법으로 UI를 템플릿화 해줍니다 (필수는 아니지만 장점이 있습니다) JSX는 컴파일링이 되고 빠르다 에러를 쉽게 감지 할 수 있다 HTML보다 더 빠르고 쉽게 템플릿작성 가능 기본적인 JSX 문법입니다 이 코드를 바벨(babel)로 변환되어 리액트에 알맞게 변환됩니다. var a = ( react )아래가 변환된 코드입니다. var a = React.createElement( "div", null, React.createElement( "h1", null, "react", ) ); 당연한 거지만 첫번째 코드가 간결하고 쓰기 편하기 때문에 JSX를 쓰는 이유입니다. 1.감싸는 요소 import React, { Component } from 'react'; class ..
React 프론트엔드 프레임워크(라이브러리)중에 가장 핫한 존재입니다. 페이스북에서 만들고 관리하고 있고 최근에는 리액트 훅을 자신들의 정식버젼으로 흡수시켰습니다 리액트 훅을 간단히 설명하자면 기존의 컴포넌트의 데이터 전송및 방식을 손쉽게 만드는 것입니다 리액트는 앞서 말씀드린 Vue.js에서도 쓰는 Virtual DOM의 시초입니다 (Vue.js는 React의 장점,Angular의 장점을 흡수한 언어입니다) 근데 왜 Vue는 쉽고 한데 왜 리액트를 쓰고 하는것인가? 란 의문이 가질겁니다 1. 페이스북에서 만들고 유지보수를 담당한다 현재 엄청난 기업이 된 페이스북에서 만들었고 그에 상응하는 유지보수를 하고있습니다. 최신 트렌드 반영과 개발자 친화적 으로 제작하고 있고 최근 리액트 훅(React Hooks..
Vue.js는 무엇인가라는것에 대해 전 포스팅에서 간략히 다루어보았습니다 오늘은 앞서 말씀드린 컴포넌트에 대해서 알아볼까합니다 컴포넌트 컴포넌트는 화면을 구성할 수 있는 블록을 의미합니다. 저는 이구조가 트리구조를 닮아서 트리구조로 생각하면서 외웠습니다 아래 두 사진을 보시면 이해하기가 쉬우실겁니다 일반 웹구조를 표현 컴포넌트로 웹구조 표현 모든것 내비게이션바,인풋박스,리스트 등의 화면 구성 요소를 잘게 쪼개어 컴포넌트로 관리하는 것입니다 이렇게 각각의 요소를 따로 쪼개면 좋은점이 있나요? 라고 생각하실텐데 네 있습니다. 실무에서 협업할시 일의 능률이나 효율면에서도 좋고 버그나 웹사이트 장애 등을 고칠때도 특정 컴포넌트에서 고치면 되기 때문에 효율적입니다.
Vue.js란 Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오.-Vuejs 공식문서(https://kr.vuejs.org/v2/guide/index.html)에 나와있는 내용입니다.특히나 Vue..
전 포스팅때 다루었던 내용입니다 오늘은 CSS 셀렉터에 대해서 알아볼까합니다. CSS의 기본구조의경우 Selector { 프로퍼티 : 값 ;, 포로퍼티 : 값 ;...} 형식으로 되어있습니다 설명을 쉽게하기위해서 직접 코드를 보여드리는게 좋겠죠 h1 { color : red ; , font-family : '나눔고딕' ;...} 이런식으로 되어있습니다 하나씩 설명드리자면 셀렉터의 경우 태그명 , 전체태그(*) , ID셀렉터, 클래스 셀렉터 등 존재합니다 저도 셀렉터가 몇가지만 존재할 줄 알았는데 찾아보니 여러가지가 존재하더군요 일단 하나씩 설명드리면 1.태그 셀렉터(선택자) 태그 셀렉터의 경우 HTML 태그의 명을 이용하여 셀렉터(선택자)로 이용합니다 태그는 너무 여러가지라 다 말씀못드리지만 h1태그 ,..
전 포스팅에서는 HTML에대한 정보와 기본문법에 대해서 간략히 다루었다면 이번엔 CSS에 대해서 다루어 볼까합니다 CSS Cascading Style Sheets 한국말로는 종속형 시트 라고 적혀있는데 쉽게 생각해보면 웹사이트를 보기 좋게 꾸며주는 도구입니다. HTML로 구성된 웹사이트의경우 그저 웹문서에 지나치지 않습니다 이런식으로 꾸며지지않은 그저 그런 웹문서에 지나치지 않습니다 하지만 CSS를 이용하여서 웹사이트를 제작한다면 이야기가 달라집니다. 많이 접속하는 네이버는 CSS로 각각의 위치 지정과 그리고 사진,텍스트 등을 배치시켜 사용자가 이용하기 편하게 제작되었습니다.구글같은경우 간단한 CSS로 각각을 배치시켜 간결한 이미지로 배치시켜놨습니다. CSS의 기본구조는 전에 HTML의 태그를 쓰시면 C..