Web-Server

제목 : CSS grid 란 무엇이고, 어떻게 사용할까?이 글을 작성하는 이유 :아주 최근에 작성한 CSS 에 대한 글 몇 개와 연동하여알아야 할 지식으로 생각하여 CSS grid 에 대해서 다루게 되었다.이전 글은,미리 알아두면 좋았을 CSS 기초 및 응용 예제CSS 레이아웃, display 에 대해서 알아놓자예제와 함께 알아보는 CSS flex 와 Flexbox위의 3 글이며,레이아웃의 핵심인 Flexbox 와 더불어, Grid 에 대해서도 알아보려고 한다.혹시라도 CSS 에 대해서 잘 모르시는 분이 있다면,위의 3 개의 글을 순차적으로 읽고 오시면 도움이 됩니다.그리고, 질문은 환영이기 때문에,rhdwhdals8765@gmail.com으로 메일을 보내주시면 감사하겠습니다.내가 예제를 블로그에 만드는..

제목 : 예제와 함께 알아보는 flex 와 Flexbox이 글을 작성하는 이유 :다양한 크기의 디바이스가 웹에 접속하는 시대이기 때문에,디바이스 크기에 따른 유연한 확장과 축소가 필수인 시대가 되었다.핸드폰부터 노트북, 커다란 모니터까지 호환이 가능한 스타일링을 추구하는 시대,즉, "반응형 웹 디자인" 이 필수적인 시대가 되었다.2000년대 초중반, HTML 태그를 통해 일방적인 정보의 소통 (Server --> Visitor)이 이루어지며, 우리가 하얀 바탕에 기본적인 태그를 작성했을 때의 스타일이 주를 이루었다.table, ul, ol, li, iframe 과 같은 간단한 태그를 이용하여정보의 가독성을 확보하고자 하였다.그리고 시간이 흘러 2020년 중반이 되었다.제각각의 규칙을 가지고 있었던 사이트..

제목 : CSS 정렬의 핵심, display 속성에 대해서 알아보자부제 : flex, grid, block 등등에 대해서 알아보자.이 글을 작성하는 이유리액트를 배운 적은 정말 많았다.2년전 책으로 리액트를 배울 때도,리액트를 공식문서로 찾아가 배울 때도, 심지어 프로그래머스 부트캠프에서도 리액트를 배웠다.그러나, 페이지 Layout 및 Common Component Design 및 Item Listing 과정에서,"왜 이 컴포넌트의 css 에 display : flex 를 넣는가?" 를 알려주지 않았다.동영상이나 책, 혹은 공식문서에서 알려주는 대로 css 파일을 따라 치는 것은 당연히 문제가 되질 않았다.background, width, height, color, border, .... 등등CSS P..

제목 : 미리 알아두면 좋았을 CSS 기초 및 응용예제부제 : 다시 처음부터 배우기 시작하는 CSS이 글을 작성하는 이유나는 React 를 통해서 웹 제작을 배우기 시작했다.HTML, CSS, JS 의 기초적인 지식보다 먼저 배우게 된 React 강의는뒤이어 알려주게 된 SCSS or SASS 라고 불리는 스타일링 파일을 가르쳐 주었다.당연히 강사에게 잘못은 없지만, 이 파일이 진정한 CSS 형태가 아니며,편의를 위해 개발되었으며, TypeScript 처럼 "트랜스파일링" 이 필요한 파일 이라는 것은생각보다 오랜 시간이 지난 이후에 알게 되었다.나는 CSS 에 대해서는 잘 알지 못한다. DOM 이라는 것을 문서로 배우며, CSSOM 이라는스타일링 객체 모델이 존재한다는 것을 알게 되었지만, 이는 결국 지..

제목 : create-react-app 은 레거시화 되었다. - 빠르게 변화하는 웹 진영 템플릿에 대한 생각이 글을 작성하는 이유 :create-react-app 이라는 명령어는 주로$ npx create-react-app 혹은$ npm init create-react-app 이러한 명령어로 기본 템플릿이 생성되었다.처음부터 제작할 필요가 없이, 개발 환경을 곧바로 세팅해 주는 마법의 명령어는얼마나 파급력이 있었는지 "CRA" 라는 명칭으로 불릴 정도였다.그러나, 현재 이 명령어는 Deprecated 되었다. 공식적으로 더 이상의 지원은 없다.이 말은, 앞으로 나올 지속적인 신 기능이 CRA 명령어를 통해서는 곧바로 적용이 되지 않는다는 것이다.이에 대한 자세한 내용은create-react-app 레포지..

제목 : 점진적인 리액트 프로젝트 도입 과정과 문제 해결 과정이 글을 작성하는 이유는?빠른 프로젝트 생성과 웹 페이지 생성에 초점이 맞춰진 현대 프로그래밍 트렌드는 AI 로 인해더욱 중요해진 요소로 꼽히고 있다.현재 프로그래밍 세상에서, 오히려 해당 분야에 대한 깊은 공부는 공감받지 못하는 사회라는 것을 느낀다.오히려, 빠른 개발을 요하는 실제 프로덕션 세상에서, 깊은 이해를 위한 시간 소비는 사치라고 생각할 지 모른다.아니, 그것이 당연할 지도 모른다.그러나, 나는 역발상으로, 리액트라는 단어가 가지는 수많은 의미를 탐색해 왔다.리액트는 무엇인지, 어떤 것으로 이루어져 있는지, 어떤 방법론을 사용하는지 등등..심지어는 JavaScript 의 es6 이상 버전이 어떻게 es5 로 폴리필 되는지 확인할 정..

제목 : React 런타임 코드 해부 노트 : Fiber와 Scheduler를 따라간 21일부제 : setState 를 이해하기 위한 3500줄 추적기이 글을 작성하는 이유 :리액트의 상태 관리는 매우 복잡하게 연계되어 있다.옛날에 리액트를 배울 때, 함수 컴포넌트, 클래스 컴포넌트의 상태 변경 방법을 공부했다.아마 리액트를 써 보기만 해도 알 텐데, useState 와, setState 이다.useState 를 이용하여, 컴포넌트에서 사용한 내부 상태를 생성한다.setState 란, 클래스형 컴포넌트를 사용 할 시, 상태를 변경하기 위한 함수이다.useState Hook 의 상태 설정 메서드는setNum, setNumber, setString, setData 등등 원하는 대로 지정할 수 있다.브라우저에..

제목 : HTML 파일에서 React 사용하는 법이 글을 작성하는 이유npm, node 패키지로 npx 명령어를 실행하여 손쉽게 React 시작 템플릿을 가져올 수 있다.즉, 일종의 프로젝트 초기화 명령어인데, 리액트로 프로젝트를 시작한다면, 이를 통해 손쉽게 구축이 가능하다.그러나, React 는 컴퓨터 프로그램의 역사를 따져봤을 때, 긴 역사를 가지고 있지는 않다.즉, 아직 tomcat 서버를 이용하거나, httpd 와 같은 오래된 웹 서버로(물론, tomcat 은 웹과 WAS 의 역할을 동시에 수행한다.)바닐라 JavaScript 와 HTML, CSS 파일로 스타일링을 진행하며,동적 DOM 구축을 위해 JQuery 를 사용하고 있다.이미 내부적으로 데이터셋을 명시하고, 이를 어떻게 보여 줄 지복잡한..

제목 : React, 기반 뿌리부터 살펴보자 - (부제 : 다양한 방법론의 조합)이 글을 작성하는 이유드디어, JavaScript 의 Syntax Sugar 의 형태,JS 의 private 의 또 다른 의미, (실질적으로는 보안을 위해 # 으로 21 년 도입됨)Webpack 의 동작 원리, package.json, package-lock.json, tsconfig.json이 파일의 존재 이유에 대해서 파헤쳤다.또한, HTML5 정식 스펙상에 존재하는 "모든 카테고리의 태그" 를 다루었다. (실제 예제 및 렌더링 예시까지)특히, JS 로 제작된 대부분의 최신 프레임워크는 아직 정식 스펙에 도입되지 않은 문법을 채택하여이를 tsconfig.json 의 옵션에서 적용하고 있다는 것이 놀라웠다.async 와 P..

제목 : HTML 문서 태그 "전부" 공부하기 - 5편이전 편인 4 편의 주소https://codecreature.tistory.com/221이 글을 작성하는 이유HTML 태그를 "전부" 다루기 위해 1 편부터 4편 까지 달려왔다..태그 정의, 태그 예시, 태그 실제 표현 예시, 동적 스크립트이를 전부 구현 및 작성한다는 것은 정말 쉽지는 않은 일이었다. (태그가 많아서)일반적으로 상황에 맞게 자주 사용되는 태그들이 존재하는데,나는 JS 는 잘 사용하지만, 시멘틱 태그 자체에는 약해서 공부를 하게 되었었다.그렇다면, "나는 HTML 태그를 잘 알고 있느냐?" 라는 질문이 스스로에게 떠오른다..정말로 "모든" 태그를 다루고 있기에 힘들게 공부했지만, 자만하지 않고서로 정반대의 대답을 해 보도록 하자.- 나..