one Book a Day

컨테이너에 flex속성 부여했을 시 item에 부여하는 flex속성 flex : [flex-grow] [flex-shrink] [flex-basis] -flex-grow : 여백이 있는경우 item이 다른 item들과 비교해 상대적인 크기를 얼마나 가질것인지. = 신장률 보통 1,2,3 등 정수비로 지정함. 생략할 경우 1 -flex-shrink: flex container에 flex item이 전부 들어가지 못하는 경우, 다른 item에 비해 비교해 얼마나 줄일지 설정. = 압축률 보통 1,2,3 정수비, 생략한 경우 1 수치가 클수록 폭이 좁아짐. -flex-basis: Flex항목의 주축방향 크기(item의 고정 값 width, height 값 주듯 주면 크기고정) 결론: flex속성이용 flex ..

img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 gray); filter: opacity(.5) drop-shadow(0 0 0 gray); } 그림에 필터씌우는 코드. gray는 색상코드로 변경가능. opacity는 필터 두께 filter는 흐림이나 색상변형 등 이미지, 배경, 테두리 렌더링. drop-shadow(offset-x offset-y blur-radius color) filter 속성 /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop..

npm install -g yarn - yarn 설치 init yarn - init yarn 하면 package.json생김 ( 이미 github레포지토리와 로컬 레포지토리 연결시켜놓은 상태) sudo yarn global add typescript -yarn or npm으로 TS설치 (관리자권한으로 설치안하면 컴파일 안될수도 있음) -tsconfig.json생성 -package.json과 tsconfig.json에 컴파일 scripts와 경로, 포함, 미포함 파일 설정. js파일은 따로 생성 되도록 폴더를 만들어준다, 컴파일시 생성되는js파일도 읽어줄 수 있도록 경로를 설정해준다. (ts파일을 컴파일하면 js와 js.map파일이 자동으로 생겨난다.)(ts와 js의 구조차이를 realtime으로 볼 수 ..

sudo npm install -g typescript sudo안하면 tsc명령어 못찾음.

1. 크롬 웹스토어에서 REDUX DEVTOOLS 다운로드하고 2. createStore마지막 인자로 ,(콤마) 하고 +부분 넣어주면 됨. const store = createStore( reducer, /* preloadedState, */ + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); https://github.com/zalmoxisus/redux-devtools-extension#installation zalmoxisus/redux-devtools-extension Redux DevTools extension. Contribute to zalmoxisus/redux-devtools-extension ..

React component의 render 함수 return값은 jsx 문법을 쓰게 되는데 여기서 컴포넌트들은 반드시 하나의 DOM 트리구조를 가져야한다. virtual DOM 에서 컴포넌트 변화를 감지 하기 위해서이고 이를위해 최상위 태그를 꼭 하나 써줘야 한다. 예전에는 태그 혹은 섹션태그(header,nav,footer 등)를 이용해서 감쌌었으나 react는 Fragment를 지원하는데 이는 의미없는 div의 남발을 막기위해서이다. (그치만 styling할때 다시 div태그로 바꾸는 일도 허다..) 혹은 로 사용하며 (이상하게 내 vs-code에서는 가 적용이 안됨..) 최종적으로 렌더링되어 웹 브라우저에 나타나는 코드에서는 보이지 않는다.

jsconfig.json만들고 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 붙혀넣고 저장. 출처:https://create-react-app.dev/docs/importing-a-component/ Importing a Component | Create React App This project setup supports ES6 modules thanks to webpack. create-react-app.dev 공식문서

https://dongmin-jang.medium.com/vuejs-%EB%8F%99%EC%A0%81-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-4cf1a4f7e561

위 그림은 React 컴포넌트의 생성부터 삭제까지의 동작 과정이며 방법론이다. render()를 제외하고 크게 세가지로 나뉜다. 1.Mounting(생성) 2.Updating(수정) 3.Unmounting(죽음) Mounting는 DOM이 생성되고 웹에 component가 나타나는 로직인데 컴포넌트가 생성되면 constructor가 호출되어 클래스 기본값을 설정하고 -componentWillmount(): 컴포넌트 UI 렌더링 전 호출 -render(): 컴포넌트 UI 렌더링 -componentDidMount(): 컴포넌트가 브라우저 위에 나타난 후 호출 순서로 진행된다. Updating은 -props변경 -state변경 -부모 컴포넌트 리렌더링 -this.forceUpdate()실행 시 이루어지며(re..

Redux란 JS app들을 위한 예측가능한 상태의 저장소이다. (SW의 가장 큰 위협은 complexity 즉 눈에 보이지 않는 복잡성이라 할 수 있고 개발자는 코드의 복잡성을 낮춰 app들이 예측 가능하게 할 필요가 있다.) 핵심은 store로 state라는 상태정보의 저장소역할을 한다. 상태관리 툴을 쓰지 않는 app들은 state에 직접 접근해 관리하나 Redux상에서 state는 오직 dispatcher과 reducer에 의해서만 작성, 수정(Write(Create), Update)이 가능하고 getState를 통해 Read를 수행한다. 이는 direct한 접근을 막으므로써 의도치않은 변화를 방지하고 예측가능하게 통제하는데 의미가 있다. (이러한 특징으로 인해 UNDO,REDO를 쉽게 할수있다...