일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 프로그래밍
- 2020년
- side-project
- typescript
- 개발자
- 다짐
- webpack to vite
- 2023 회고
- style-dictionary
- 2021년
- css framework
- front
- design system
- javascript
- frontend
- c#
- design-system
- 회고
- component
- 23년 회고
- design
- nextjs
- design token
- 24년 계획
- react
- compound component
- 뇌를자극하는C#
- 2024 계획
- 디자인 토큰
- vite
- Today
- Total
목록분류 전체보기 (38)
개탕 IT FACTORY
서론 작년 State of CSS 2021 에서 tailwind 라는 프레임워크를 알게되었다. 그때는 사실 bootstrap같은 프레임워크에 불과하겠지라는 생각했지만 막상 들여다보니 많이 달랐다 특히 내가 공부할려던 vite, nextjs에서는 공식적으로 지원하기 시작하였고, 막상 본인도 궁금해져서 맛볼겸 프로젝트에 적용할겸 공부차원에서 넣을려고 한다. Tailwind CSS가 무엇인가? Utility-First를 지향하는 CSS 프레임워크이다. Utility-First 란? 미리 세팅된 Utility 클래스를 사용해서 만드는 것을 말한다. 기존에 클래스명을 고민하느라 고생했지만 tailwind에서는 관련된 클래스만 쓰면 바로 사용이 가능하다 Click me 설치과정 https://tailwindcss...
1. 개요 개인 공부를 하던 와중에 친구와 공부내기에서 떠올린 프로젝트이다. 친구와 몇시간 혹은 특정 장소에서 공부한걸 인증한걸 공유하자 (도서관, 카페) 대신 집과 거리가 멀고, 공부를 하지 않고 인증만해도 그정도의 정성은 인정하자는 분위기였다. 근데 매번 타이머키고 인증하고, 또 공부 타이머앱 깔고 분석하기엔 뭔가 별루였다… (뭔가 보상이 없달까?) 그래서 뭔가 보상도 있고, 인터페이스도 쉬우면서, 동기부여가 되는 타이머앱을 만들기로 했다. 2. 기능 기본기능 타이머 : 당연하다, 타이머 앱이니까 타이머는 기본 탑재이다 분석기능 : 기본적인 목표치를 설정 주단위 분석 또는 달단위 분석 기능을 탑재할까 싶다 공유기능 : 자신의 공부시간 혹은 공부량등을 자랑할수있게 공유기능을 넣을예정 커뮤니티 기능 : ..
개요 프로젝트를 진행할때마다 CRA를 활용한 어플개발을 많이 하였다. 일단 환경 구축등의 시간 단축이 좋다는 이유로 많이 사용하였지만, CRA의 단점은 커스텀이 어렵다는 부분이 있다. 물론 npm run eject을 통해서 webpack설정을 바꿀순 있지만, 기존에 지원하던 좋은 장점을 버리는 거라 추천은 하지 않는다 (사실 직접 webpack으로 골라 만드는게 좋을듯…) 그래서 SSR, SSG의 장점이 가진 Nextjs를 나만의 boilerplate로 제작해볼까 한다. 준비사항 일단 어떤 요소를 넣어야 하는지에 대한 부분이 필요했다. 필수요소 typescript ESLint Prettier React-testing-library, jest styled-components tailwindCSS 데이터페칭..
2. 스택(stack) Stack O(n) O(1) O(1) 순서가 보존되는 선형 데이터 구조 유형 가장 마지막 요소부터 처리하는 LIFO(Last In First Out) 구조 장단점 장점 동적 메모리크기 데이터를 순서대로 정렬 단점 최신데이터만 가져온다 한번에 하나의 데이터만 처리가능 코드 // 클래스 구현 class Stack { constructor(){ this.arr = []; this.index = 0; } push() { this.arr[this.index++] = item; } pop() { if(this.index
1. 배열 자료구조 가져오기 추가 삭제 Array O(n) O(n) O(n) 배열은 가장 기본적인 데이터 구조다. 동일한 타입의 데이터들을 저장(Javascript는 예외), 고정된 크기를 가진다. 인덱싱이 되어 있어 인덱싱 번호로 데이터 접근 가능 장단점 장점 원하는 데이터를효율적으로 탐색이 가능하다. 정렬에 용이해 다양한 정렬 알고리즘에서 사용 (삽입,빠른, 버블, 병합) 복잡한 자료구조의 기초 단점 데이터를 저장 할 수 있는 메모리 크기가 고정 데이터 추가/삭제가 비효율적 코드 let Array = [2,4,10,5,15,3]
서론 회사에서 채팅 서비스 구현당시 스크롤 이동을 위해서 돔 조작이 필요했는데 이미지의 경우 로드되는 속도가 느려 스크롤 이동이 중간에 멈추는 현상이 발생하여 onLoad함수라는 것을 사용하여 해결한 것을 작성할려구 한다. onLoad란? https://developer.mozilla.org/ko/docs/Web/API/Window/load_event MDN 문서에 따르면 💡 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행 쉽게 말해서 모든 요소가 로딩이 완료된 다음에 실행되는 이벤트이다. DOM의 standard 이벤트이다 사용법 window.onload window.onload = function() { // 실행될 코드 } html 태그 속성으로 지정 주의사항 로드된 이후에 실행되기 때문에..
힘들지만 행복했던 2022년 21년 회고가 벌써 어제같은데 벌써 2022년회고라니 정말 시간 빠르다고 생각된다. 22년에는 더욱 성장된 나의 모습을 보여주기 위해서 노력하였는데 아직 많이 부족한것같다. 더욱더 노력하기위하여 진행하여야겠다. 회사 첫 프로젝트 상용화 배포 회사에서 진행하였던 채팅 시스템을 배포하였다. 사실 회사내에선 큰 프로젝트에 해당되었고 프론트 전반적인 업무를 담당하였다. (풀스택 엔지니어가 작업한 곳에 리팩토링과 추가적인 작업을 진행하였다) 프로젝트를 위하여 야근도 마다하지 않으면서 최대한 열심히 할려고 하였고 특히나 요구사항에 대한 부분도 많이 수정을 하였다. 결과적으론 내 자신에 대한 성장을 많이 하였다 웹 소켓에 대한 이해도를 많이 향상시켰다. redux에 대한 개념적 이해와 리..
서론 회사에서 온보딩을 만들기위해 기존 템플릿에 iframe을 끼우는 작업을 하면서 정리해본 iframe에 대한 정리본 iFrame이란? inline Frame의 약자로 HTML 문서내에 다른 HTML 문서를 보여 줄때 사용된다. iFrame전에는 Frame이란 태그가 존재하였으나 deprecated 되었고 iframe으로 대체되었다. 장점 웹내에 또다른 웹을 삽입이 가능하므로 쉽게 추가가 가능 페이지 이동없이 위젯형태로 띄우기가 가능하여 여러가지 형태로 제작가능 단점 유지보수가 어렵다. 아이프레임용 웹을 따로 만드는 느낌? 보안위험이 많습니다. iframe으로 사이트를 구성시 사이트간 공격 (XSS)에 취약해집니다. https://ostraining.com/blog/webdesign/against-us..