개발 (9) 썸네일형 리스트형 [Tailwind] Flex Tailwind css를 공부하다 justify, place 배치 요소를 사용하면서 flex에 대한 공부가 필요한 것 같아서 작성. flex란? 레이아웃을 설정할 때 보통 display, position과 같은 css 속성들을 이용한다. 그런데 이러한 속성들로 일일이 레이아웃의 속성을 정의하는 게 몹시 복잡한 단점때문에 css3에 flex라는 방식이 새롭게 추가되었다. flexbox는 부모 요소인 flex container와 자식 요소인 flex item으로 구성된다. flex container가 flex 태그의 영향을 받는 공간이고, 그 안에서 flex item들의 배치, 정렬이 설정된 속성에 따라 변경되는 것이다. flex container와 flex item에는 적용할 수 있는 속성이 각각 다르다... [Tailwind] image 배치 로 묶은 블록 다음에 다른 블록을 그리려고 하는데, 어떻게 해야할까? block 옵션을 주어도 div간 구분이 안되고 겹쳐서 rendering이 되었다. import type { GetServerSideProps, NextPage } from "next"; import Image from "next/image"; import background from "../images/background.jpg"; const Body = ({}) => { return ( Another Body! ); }; export default Body; 크롬 개발자 도구로 그림을 찍어보니 다음과 같이 나타났다 background라는 이미지 파일이 창 전체를 덮고 있었는데, 아무래도 저 부분이 문제인 것 같다. layout옵션을.. React - 7) DOM, Rendering DOM DOM은 Document Object Model의 약자로 구조화된 문자들의 표현이다. 웹 개발자들에게는 이 문자가 HTML 코드를 의미할 것 이며, 이때 DOM은 단순하게 HTML DOM이라고 불린다. HTML의 요소들은 DOM의 노드가 된다. 따라서 HTML이 문자이고, DOM은 이 문자들의 메모리 내 표현인 것이다. 브라우저는 HTML 문자를 이해할 수 없기 때문에, 브라우저가 이해하고 활용할 수 있도록 변환이 필요하다. DOM은 브라우저 렌더링 엔진의 HTML parser에 의해 생성된 트리 구조의 Node 객체 모델이다. DOM은 자바스크립트를 사용하여 문서에 대한 추가, 삭제, 이벤트 처리 등을 처리하는 인터페이스를 제공한다. 웹 페이지의 내용을 동적으로 변경하고자 할 때마다 DOM을 수.. React - 6) To-Do List ~ Local Storage 과제를 수행하면서 category 추가나 component분리 등은 구현 문제였기 때문에 크게 어렵지 않았다. 하지만 가장 큰 문제는 local storage 구현이었는데, 근무 시간 이틀을 통째로 잡아먹고도 다른 인턴분과 사수님께 여러 질문을 해가면서 겨우겨우 구현에 성공했다. Local Storage란? 데이터는 새로고침/재접속 시에 초기화가 된다. 이러한 데이터를 기억하기 위해서는 따로 저장공간에 데이터를 저장해야 하는데, 크게 1. 서버로 보내서 데이터베이스에 저장하거나 2.브라우저가 가지고 있는 임시 저장공간(localStorage)에 저장하는 방법이 있다. local storage는 session storage와 함께 web storage중 하나인데, 이는 데이터를 서버가 아닌 클라이언트에 저.. React - 5) To-Do List 0) 설계 인턴 첫 주차 과제로 지금까지 공부한 react를 활용하여 간단한 todo list를 만드는 과제를 수행했다. 마침 react docs를 공부하면서 표를 표현하는 방법을 배웠으니, 이를 활용해서 과제를 수행하기로 했다. 조건은 크게 ①입력을 통해 todolist에 값을 추가할 수 있을 것 ② 내용을 클릭하면 취소선이 그어질 것 ③ Delete 버튼 구현이 있었다. 첫 설계는 다음과 같았다. ① todolist를 모든 함수에서 사용할 수 있도록 TODO = []를 전역변수로 선언. ② 에 insert box와 를 선언하고, 에는 TODO의 내용을 을 반복문처럼 반환. ③ 은 index, ToDo의 내용 및 취소선 여부를 저장하는 object로 구현. 하지만, 첫 react 설계이고 명령형 언어가.. React - 4) State 1) 명령형 vs 선언형 - 명령형은 상태와 제어흐름이 존재하며 상태를 필요에 따라 생성하고 정의하고 변경하는 언어를 의미하며, 대표적으로 C/C++/Python/JAVA 등이 있다. - 하지만 선언형 언어는 상태와 제어 흐름이 존재하지 않으며 약속된 정의만 사용해서 작성하는 언어를 의미한다고 한다. 대표적으로는 HTML/CSS/XML 등이 있다. - 명령형은 어떻게 할 것인지 설명하고(how), 선언형은 무엇을 할 것인지 정의한다(what). 명령형 언어를 통해서도 비선언형 부분을 캡슐화 하여 선언형이 가능하다고 한다.(...) 2) Updates - mutation : object 자체 값을 변경하는 것. - 기본적으로 object들은 mutable이지만 immutable인 것 처럼 취급하여, 변경하.. React - 3) Interactivity 이전 포스트와 마찬가지로 React Docs를 읽고 이해한 내용을 정리한 글이다. # https://beta.reactjs.org/learn/adding-interactivity 1) Arrow Function ES6문법으로, function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있게 해주는 기능이다. 화살표 함수의 특징은 다음과 같다. - 화살표 함수는 항상 익명이다. - this나 super에 대한 바인딩이 없고, method로 사용될 수 없다. : 바인딩 = this등을 내가 지정한 object로 고정하는 것. - new.target키워드가 없다. - 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다. - 생성자(Const.. React - 2) React Design 이하는 React Docs Beta (https://beta.reactjs.org/learn)를 읽고 이해한 내용을 정리한 포스트이다. 1) React 용어 정리 JSX : React에서 사용하는 markup으로 html, css와 유사하게 동작한다. HTML보다 조건이 많은데, 대표적으로 조건과 사용방법은 다음과 같다. 1) 모든 tag는 close되어 있어야 함 2) 큰 tag 하나로 묶여있어야 함 3) 대부분에 camelCase를 사용 4) {JS} : JSX태그 안에 or attribute처럼 사용 5) {{JS}} : Object 전달 component : JavaScript 함수 or class를 의미. 이때 class는 대문자로 시작해야하는데, 소문자인 경우 태그로 취급하여 실행이 안된다. .. 이전 1 2 다음
