프로그래밍
-
[드림코딩 Css] Flex-box프로그래밍/CSS 2023. 6. 26. 13:26
Flex-box란? 박스와 아이템들을 행과 열로 자유자재로 배치할 수 있는유용한 것들이며 박스가 커지면 어떤식으로 아이템들이 공간에 배치되어야 하는지 알 수 있다. flexbox에는 중심축과 반대축이 있다는 것을 생각하고 구현을 해보자 중심축이 어디냐에 따라서 어떻게 정렬할 지가 바뀌기 때문이다. 100% 와 100vh 등등 쓰는 단위로 인해서 일어나는 차이를 알아보자 100% === container가 속해있는 부모의 크기에 100%로 맞추겠다는 것 100vh === 부모에 상관없이 보이는 viewPortGeight을 쓰겠다는 의미 container 와 item으로 나누고 두개의 속성을 각각 알아보자 container display; (속성을 지정한다 flex, block 등등) flex-directi..
-
[CSS] Display && Position프로그래밍/CSS 2023. 6. 24. 20:18
Dispaly display는 크게 block level 과 inline level로 나뉜다. ( 와 으로 예시를 들겠음) block level 한줄에 한개씩 나온다 컨텐츠의 크기와 상관없이 지정한 값에 맞춰 표현이 된다 inline level 한줄에 공간이 많으면여러개가 나온다 물건(contents) 자체만을 꾸며주기때문에 width height는 개무시하고 안에 들은 물건의 크기에 맞춰서 설정이된다. 안에 내용물(contents)이 있어야 표기된다 display 속성의 변경을 통해 block, inline을 바꿀 수 있다. inline-block Vs inline 내용물이 없으면 inline은 표시되지 않고 inline-block은 내용물이 없어도 표시되는 inline속성의 block이다. Posit..
-
[리액트 알쓸신잡] Hook - 1 - useMemo VS useCallback프로그래밍/React 2023. 6. 22. 14:50
useMemo(() => console.log(), [test]) const memoizedCallback = useCallback(() => console.log(), [test]) 두 로직은 각각 useMemo와 useCallback을 사용해서 같은 결과를 나타내는 로직이다. useMemo 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다 메모이제이션 된 값을 반환하는 함수이다. useMemo(() => fn, [deps]) 여기서 deps로 지정된 값이 변하게 된다면 첫번쨰 인자인 함수가 실행을 하고 그 함수의 반환 값을 반환 해준다. deps는 depencency(의존성)을 뜻하며 useMemo가 deps에 의존하고 있다는 것을 말한다. import React, { useState, useCa..
-
[리액트 다루는 기술] 리덕스 작동원리 && 기초프로그래밍/React 2023. 6. 21. 16:28
리덕스란?? 상태관리 라이브러리의 일종으로 상태업데이트 관련 로직을 다른 파일로 분리시켜서 효율적인 관리가 가능하며 contextAPI와 비슷하게 사용 될 수 있으나 실상 다른 여러기능도 많고 미들웨어 등등 보다 체계적인 관리가 가능해서 contextAPI보다 널리 쓰이고 있다. 허나 16v에서 contextAPI의 기능이 좋아지고 나서는 잘 모르겠음 바닐라 자바스크립트가 많이 쓰이는 이유가 이녀석떄문인것 같다. 불변성을 항상 유지해야한다. 용어정리 액션 상태에 변화가 필요하면 발생한다. 하나의 객체로 표현되며 type필드를 반드시 가지고 있어야하고(이게 이름임) 추가적인 업데이트 때 참고 할 사항을 넣을 수 있다. 그러니 이렇게 만들려면 함수가 있어야 하는데 이게 액션 생성함수이다 {type : "TO..