아싸지만 1일1글 하고싶어

목차 오랜만에 포트폴리오를 만지니깐 포스팅할 아이템도 더 눈에 띈다. 잠시 거리를 두고 보는 것은 이러한 장점이 있다. createElement 태그 스타일 변경 일단 createElement 함수에 대해 모르는 사람은 알아보고 오자! JS로 태그 추가하기 목차 저번 포스트에서 태그 추가하는 법을 지나치듯 짚고 넘어갔었다. SVG Z-index 목차 SVG SVG는 백터 로 이미지 를 표현하는 태그 이다. 이런 식으로 html 그리기 Svg / Canvas SVG 데이터 전달용을 목표 sirong.tistory.com 글이 80개 정도 쌓이니깐 슬슬 기초적인 건 다 적어놨다고 생각하는 게 편하다. 인용할 때도 그렇고, 포스팅 주제 찾을 때도 그렇고. 함수로 element를 만들었을때 해당 태그 스타일을 ..

목차 styled components 심화편 React의 styled components 심화 편이다. 설치와 기본적 사용은 이 글을 참고하자. styled component 목차 ... styled-component에 대해 쓸려고 기본적 구글링을 하는데 혼란스러웠다... 뭔가.. 앞뒤가 맞지 않는 정보가 많았다... 그만큼 내 글이 더 도움이 된다는 뜻이지!! (무~~ 야~~~ 호~~~) 내일 포스트 sirong.tistory.com //App.js import React from "react"; import styled from 'styled-components'; function App() { return ( ); } const D_styled = styled.div` display: inline-..

목차 음.. 짧긴한데 모르면 쭉 안쓰는 함수라서 정리해둬야겠다고 생각했다. Array.filter const words = ['apple', 'banana', 'cocoa', 'dewberry', 'eggplant', 'fig']; const result = words.filter(word => word.length > 6); console.log(result); array의 filter함수는 해당 배열에서 조건에 맞는 요소만으로 재구성해주는 함수이다. 해당조건은 6글자 보다 큰 요소를 조건으로 걸었고, 결과로서 두개의 요소를 배열로 다시 저장하였다. 끝

목차 드디어 마지막 Redux Toolkit이다아아 Redux Toolkit Redux Toolkit은 Redux를 좀 더 간편하게 만들 수 있는 도구이다. 으음.. react로 비유하자면 hook 같은 느낌! life Cycle을 이해하고 쓴다면 코드를 엄청 줄일 수 있는 강력한 도구! 설치 일단 터미널을 통하여 npx create-react-app my-app --template redux 터미널에 해당 명령어를 입력하여 redux를 포함한 react 프로젝트를 생성한다. npm install @reduxjs/toolkit 이번에는 toolkit두 설치해주자! 코드 이번 코드는 바로 전 Redux-react에서의 코드를 toolkit으로 얼마나 효율적으로 바꿀 수 있는지가 핵심임으로 저번 코드에서 가..

목차 당신에게 Redux는 필요 없을지도 모릅니다. 이 글은 Dan Abramov의 You Might Not Need Redux를 번역한 글입니다. medium.com Redux 공식 홈페이지에 올라와 있는 글 중 하나이다. 구글링을 하면서 리덕스에 관한 로드맵을 봐서 어렵게 생각하고 있었는데, 그냥 공식 홈페이지 글과 같이 가볍게 접근하는 게 좋을 것 같다. Redux by react 오늘은 react로 redux를 사용해보자, redux toolkit를 쓰면 간편한 코드로 사용할 수 있지만, 구성 이해를 위해서 toolkit을 안 쓴 쌩코드로 redux를 공부 한 다음 toolkit을 포스팅할 거다. 설치 npm install --save react-redux 터미널에 해당 명령어를 입력하여 reac..

목차 아.. 오늘 Redux react 쓸려했는데... 일이 생겨 피곤해서 쉬는 포스팅! Switch case 변수 지정 이게 무슨 말이냐면 정석적으로, switch를 쓸 때 이렇게 쓰는데 let text = "apple"; switch(text){ case "apple": console.log("apple"); break; case "banana": console.log("banana"); break; case "cocoa": console.log("cocoa"); break; default: break; } 이렇게 하면 text에 값을 입력할 때, case에 값을 입력할 때 오타가 나서 디버깅에 오랜 시간을 허비할 수 있다. const apple = "apple"; const banana = "ban..

목차 구성이 react의 reducer랑 비슷하다 어차피 react에서 redux 쓸려면 hook도 다루고 있을 테니 reducer를 배우고 redux를 배우면 좀 익숙할 거다 useReducer 목차 어우.. 긴장이 풀려서 그런가 오늘은 진짜 몸도 사고도 안 따라줘서 잠시 useReducer 이해를 미래의 나에게 맡겼었다. 그리고 그 미래의 나가 지금의 나다 후.. 그래도 컨디션 좀 회복하니깐 이 sirong.tistory.com Redux란 쉽게 말해서 파일을 구분 짓지 않는 데이터 저장소를 만들고, 관리하는 기술이다. 기존의 프로그램 구성이 MVC 방식인데, 자료화면은 코드의 덩치가 커질수록, 데이터를 주고받는 구조가 복잡해진다는 것이다. 예로 들어, 다음 메인 페이지를 활용할 때, 메일이 왔는지,..

목차 영상 캡처 프로그램 설치 없이 영상 캡처하는 법을 포스팅하려 한다! 키보드 좌측 하단의 윈도키와 G를 눌러주자 이렇게 창이 뜬다. 좌측 상단의 캡처 부분에서 동그라미 버튼(녹화버튼)을 눌러 녹화를 시작하자. 바로 밑에 어떤 프로그램이 캡처되는지 적혀있다. 여기서는 지금 브라우저 Brave의 글쓰기 탭을 촬영한다는 뜻이다. 버튼을 누르면 오른쪽 위에 캡처 도구가 뜬다. 파란색 버튼을 누르면 정지가 되면서 해당 캡처가 저장된다. 저장된 캡처를 보는 방법은 다시 Window + G를 눌러 창을 띄운 뒤, 좌측 상단의 캡 처창에서 모든 캡처 표시 버튼을 누르면 이렇게 창이 뜨는데 좌측 상단에 폴더 버튼을 누르면 저장 폴더가 띄어진다. 영상 자르기 영상을 캡처하면 앞뒤로 1~2초 자르고 싶어 질 때가 생기는..