본문 바로가기
300x250

개발 공부/웹개발54

[CSS] Flex 아이템에 적용하는 속성들(1) Flex 아이템에 적용하는 속성들 flex - basis - 유연한 박스의 기본 영역 flex-basis는 Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이). .item { flex-basis: auto; /* 기본값 */ /* flex-basis: 0; */ /* flex-basis: 50%; */ /* flex-basis: 300px; */ /* flex-basis: 10rem; */ /* flex-basis: content; */ } flex-grow 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다. -여백의 비율이다... 2021. 8. 3.
[CSS] FLEX -컨테이너에 적용하는 속성 컨테이너에 적용하는 속성 1) flex vs inline-flex .container { display: flex; //한줄을 차지 /* display: inline-flex; */ //인라인 속성처럼 플렉스아이템의 너비의 합까지만 차지 } 2)) flex-direction - 배치방향설정 .container { flex-direction: row; 가로(행 방향) 왼->오 // flex-direction: column; 세로(열 방향) 위->아래 // flex-direction: row-reverse; 반대 가로 왼 위 } 3) flex-wrap -줄넘김 처리 .container { flex-wrap: nowrap; //기본값 줄넘김x // flex-wrap: wrap; // flex-wrap: wra.. 2021. 8. 2.
[CSS] grid 개념정리(1) grid란? css는 레이아웃과 스타일을 정의할 때 사용되는 언어입니다. 그 중 grid(그리드) 레이아웃의 끝판 왕이라고 할 수 있다. Flex는 한 방향 레이아웃 시스템이고 (1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) Grid 용어정리 그리드 컨테이너 (Grid Container) => display: grid를 적용하는, Grid의 전체 영역 그리드 아이템 (Grid Item) => Grid 컨테이너의 자식 요소 그리드 트랙 (Grid Track) => Grid의 행(Row) 또는 열(Column) 그리드 셀 (Grid Cell) => Grid의 한 칸을 가리키는 말 그리드 라인(Grid Line) => Grid 셀을 구분하는 선 그리드 번호(Grid Number) => G.. 2021. 7. 27.
오류 해결 - Warning: Can't perform a React state update on an unmounted component. 이번 ha2 시험에서 다음과 같은 오류들을 만났다. 섹션투를 두번을 들었지만 그때도 지금도 해결하지 못하다가 시험중에 계속된 구글링으로 결국 찾아냈다. Warning: An update to App inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { 블라블라블라~~~ Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.. 2021. 7. 19.
동기(Synchronous)vs비동기(Asynchronous), block과 non-block 개념정리 동기(Synchronous) 위의 그림처럼 하나의 task가 끝났을때 다음 task를 진행할 수 있다. 작업 요청을 했을 때 요청의 결과값(return)을 직접 받는 것이다. 요청의 결과값이 return값과 동일하다. 호출한 함수가 작업 완료를 신경 쓴다. 설계가 매우 간단하고 직관적이라는 장점이 있지만, 요청에 따른 결과가 반환되기 전까지 아무것도 못하고 대기해야하는 단점도 있다.. 비동기(Asynchronous) 여기도 역시 위의 그림을 보면 동기와는 반대로 여러개의 태스크를 동시에 처리할 수 있다. 작업 요청을 했을 때 요청의 결과값(return)을 간접적으로 받는 것이다. 요청의 결과값이 return값과 다를 수 있다. 해당 요청 작업은 별도의 스레드에서 실행하게 된다. 콜백을 통한 처리가 비동기.. 2021. 6. 24.
[JavaScript] 배열 원소를 검색하여 없애거나 바꾸기 어떤 배열에서 주어진 값을 찾아서 원소를 제거하거나 다른 값으로 치환하고 싶을 때 사용하는 방법 이럴 경우, indexOf와 splice 를 사용해야한다. let numbers = new Array(0,1,2,3,4,5,6,7); //배열에서 원소 제거 //4를 제거하고 싶을때 animals.splice(animals.indexOf("walrus"),1); // [0,1,2,3,5,6,7] //새로운 원소 삽입 // 2뒤에 100을 넣고 싶을때 numbers.splice(numbers.lastIndexOf(2),1,100); //[0,1,100,3,5,6,7] splice 설명 splice 메서드에는 세 개의 인수를 전달한다. (1)반드시 입력해야 하는 첫번째 인수는 잘라낼 시작 위치이다. 두번째 인수는.. 2021. 6. 21.
[자료구조 with javascript] Graph 그래프 탐색 개념 정리(인접행렬) Graph란? 그래프는 여러개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조이다 직접적인 관계가 있는 경우 두 점 사이를 이어주는 선이 있다. 간접적인 관계라면 몇 개의 점과 선에 걸쳐 있다. 하나의 점을 그래프에서는 정점(vertex)이라고 표현하고, 하나의 선은 간선(edge) 이라고 한다. 즉, 정점과 간선으로 이루어진 자료구조의 일종 무방향 그래프와 방향그래프 간선의 종류에 따라 무방향 그래프(undirected graph)와 방향 그래프(directed graph)로 구분된다. 무방향 그래프의 간선은 간선을 통해서 양방향으로 갈 수 있는 그래프를 말한다. 예를 들면 우리가 차를 타고 서울에서 부산으로 갈 수 있고, 부산에서 서울로 올수 있다. 정점 A와 B를 연결하는 간선은 (A,.. 2021. 6. 20.
[react, Css-in-JS]modal창 구현, styled 사용법, cursor, × 1. modal 창 구현하기 결과화면 (storybook 이용) 알게 된 것 1. styled-components 활용하기 -리액트의 한 컴포넌트 안에서 스타일을 적용시킬 수 있다. 깔끔하게 - styled-components을 사용하기 위해서는 맨 위에 import styled from 'styled-components'; 를 써준다. -기본적인 형태는 다음과 같다. 첫줄과 마지막 줄이 가장 기본의 형태이고, 적용할 속성은 다음과 같이 들어가면 된다. - 형태인 modalBtn의 변수에 스타일을 할당해준 것. export const ModalBtn = styled.button` background-color: #4000c7; text-decoration: none; border: none; paddin.. 2021. 6. 8.
[NodeJS] mini-node-server 구현 + express 변환하기 1 2 3 mini-node-server 구현하기 스프린트에서는 OPTIONS와 POST요청 두가지만 들어오고, /lower와 /upper 에 따라 다른 응답을 하는 문제였다. 1) preflight Request 예비 요청이 들어왔기에 options요청을 받고 응답해주어야한다. 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 const http = require('http'); const PORT = 5000; const ip = 'localhost'; const server = http.createServer(.. 2021. 6. 1.
반응형