웹 그리드란웹 그리드는 데이터를 받아 화면에 그리드 형태로 화면에 표시해주는 것입니다. 화면에 표시된 리스트를 엑셀처럼 데이터를 머지, 합계, 정렬 등의 작업을 할 수 있도록 해주는 UI 컴포넌트입니다. 또한, 각 OS, 브라우저(크로스 브라우징 지원)에 대응하고 라이브러리나 프레임워크와도 같이 호환하여 사용할 수 있습니다.웹 그리드 지원보통 웹 그리드는 복잡하고 다양한 기능을 가지고 있기 때문에 이에 대해 전문적으로 하는 개발자들이 모여 많은 회의와 설계, 리뷰, QA 작업을 통해 고객의 만족도를 높이고 사이드 이펙트가 발생하지 않도록 지원합니다. 이러한 웹 그리드는 이제 엑셀처럼 전범위 프로젝트 에서 사용하고 있으며, 지원팀들이 대기하여 그리드에 대한 지원을 꾸준하게 합니다.다양한 기능그리드를 사용하..

JDK, JRE JDK 는 Java Development Kit 의 약자로 자바 개발을 하기 위한 툴이고, JRE 는 Java Runtime Environment 로써 자바 실행을 하기 위한 환경을 가지고 있습니다. 설치 오라클 사이트로 접속합니다. (https://www.oracle.com/index.html) 다운로드하기 위해서는 오라클 아이디가 필요하기 때문에 미리 회원가입을 하자. Java SE, Java EE 이런 게 있을 것인데, 우리는 가장 표준형태인 SE 를 다운로드하면 된다. 최신 자바버전이 아닌, 자바 8을 다운로드해보자. => (https://www.oracle.com/java/technologies/downloads/#java8-windows) 보면 아래의 사진에 windows 버전..
크로스 브라우징이란 웹 페이지를 제작할 때, 다른 OS, 브라우저, 기기 등에 관계없이 정상적으로 동작하게끔 페이지를 제작하는 기법을 말합니다. W3C 의 규정에 맞게끔 코딩을 해야 하는데, 이는 MDN(https://developer.mozilla.org/ko/), canisue(https://caniuse.com/) 에서 쉽게 확인할 수 있습니다. 크로스 브라우징을 하는 이유 솔루션 제품을 개발하면서 느꼈던 경험으로, 사용자가 어떤 브라우저를 사용하는지 알 수 없기 때문에, 기본적으로 점유율이 높은 브라우저들은 대부분 지원을 해야 했다. (아마 대부분의 솔루션 제품은 이러한 특성을 지니고 있을 것이다.) 크롬과 엣지에서 다른 화면이 나오거나, 특히 IE 에서 다른 화면이 나오거나 지원하지 않아 오류가..

사이트의 레이아웃을 구성할 때, 사용하는 css 레이아웃 기법으로, 쉽게 수직, 수평 레이아웃 구조를 만들 수 있다. 또한 웹브라우저의 크기에 따라 반응형 레이아웃을 만드는데 효과적으로 사용할 수 있습니다. 최근에는 흔히 사용하는 기법으로, 예를 들어 material-ul의 react의 템플릿을 보면은 이제 flex 기법을 이용한 구조를 쉽게 볼 수 있을 것이다. 구조 flex 의 구조는 flex-container (display: flex 가 설정된 div) 안에 flex-item 들이 들어가는 구조 입니다. 해당 구조가 갖춰져야 안에 items 를 정렬시킬 수 있습니다. flex, inline-flex display: flex, display: inline-flex 를 사용하면, flex contai..
CSR 컴퓨터의 성능이 좋아지면서 SPA 에서 쓰이는 기법으로, 클라이언트 측에서 모든 것을 하는 거를 의미합니다. 필요한 부분만 렌더링하여 사용자가 원하는 UX 를 반영할 수 있습니다. 서버로부터 어떠한 리소스를 받아 해석하고 화면에 렌더링하는 방식입니다. (서버가 하는 일은 json 만 보내는 것입니다.) 예를 들면, 서버에서 가 들어 있는 index.html 을 보내면, 처음에 접속하면 빈 화면만 보입니다. 이제 그 후, 리액트 라던지, js 라던지 이런 어플리케이션을 구동하는 모든 소스를 가져옵니다. 용량이 크면 클수록 처음에 화면에 로딩되는데 시간이 길어지는 단점이 있고, SEO 에서 사용하기 좋지 않습니다. (SEO 가 좋지 않는 이유는 처음에 body 가 비어 있기 때문에 검색 엔진으로 가져..
테스트 자동화 유저 테스트 만으로는 모든 테스트의 광범위한 부분을 체크해 볼 수가 없습니다. 미리 여러 케이스들을 설정하여, 광범위하게 효율적으로 체크하여 더 많은 버그를 찾을 수 있습니다. (흔히들 말하는 애자일을 도입하는 것이다..) 테스트 자동화 프로세스가 만들어지면, 유저 테스트와 자동화를 병행하여 테스트의 효율을 높일 수 있게 됩니다. 이러한 장점들이 있지만, 무조건 장점만이 있다고는 볼 수 없다.... 당연히 위의 프로세스가 잘 이루어져 모두가 만족한다면 좋지만, 현실은 그렇지 않은 경우가 있다.. 프로그래밍 기반의 테스트 자동화가 도입된다면, 프로그래밍이라는 진입장벽이 생기는 단점이 있다. (해야지...ㅠㅠ) 테스트 자동화를 위한 테스트 케이스를 준비해야 한다. (테스트 샘플을 AI가 뿅뿅뿅..
- Total
- Today
- Yesterday
- dockerfile
- vscode
- Git
- seo
- Storybook
- vue router
- nodejs
- Vite
- nextjs14
- 깃허브
- Github Actions
- 서버 to 서버
- docker
- svelte
- vue composition api
- NUXT
- webpack
- nuxt2
- github
- 네이버 서치 어드바이저
- nextjs15
- cors
- 타입스크립트
- NextJS
- React
- nextjs13
- 스벨트
- openAI
- 오블완
- 티스토리챌린지
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |