캐나다 개발자

1. ThemeProvider 사용할려면 import 먼저해야하고 import { ThemeProvider } from 'styled-components' 아래처럼 적용하고싶은 범위에 theme을 적용가능하다. const theme = { dark: { primary: '#000', text: '#fff', }, light: { primary: '#fff', text: '#000', } function App() { return ( HELLO HELLO HELLO GO TO GOOGLE SUBMIT LIGHT ); } 다크모드를 만드는걸 예로들면 코드는 아래와 같이 props에 접근해서 theme객체안의 light객체안의 값에 접근가능 (위에서 2중객체로 만들었다.) export const LightBu..

https://github.com/younbokim/TIL/blob/main/Hanghae99/CS_Study/hardware.md CS 스터디 조장님이 정리를 굉장히 잘 하셨다. 하이라이트를 하기위해 긁어왔다. 1. 컴퓨터의 논리와 구조 컴퓨터는 크게 논리적, 물리적 측면에서 접근할 수 있음 논리적 측면(무얼 하는가?): 컴퓨터는 어떠한 일을 하는가?, 그 일을 하기 위해 각 부분이 어떻게 구성되고 역할을 수행하는가? 물리적 측면(어떻게 만들어지는가?): 컴퓨터 내 각 부분이 어떻게 물리적으로 만들어지고 구성되어 있는가 예시: 노트북 컴퓨터 논리적 측면: 각종 프로그램을 실행, 이를 위해 CPU, RAM, HDD 등이 각각의 역할을 수행하기 위해 구성됨 물리적 측면: CPU는 인텔 10세대, RAM은 ..

- 05/17 (화) 16:00~18:00: 알고리즘 모의고사 오늘의 목표 스파르타 x 팀공부 this part.2 화살표함수 reduce() styled-component 팀작업 x 개인공부 1. 반응형 웹 기초 2. flex & grid 기초 3. styled-component part.2 4. styled-component part.3 (polished) 전산학공부 cs스터디 001-002 책 003 - 004 알고리즘, 자료구조공부 모의고사대비 1-15번 보기 개인작업 x 오늘 알고리즘은 따로 없다. 모의고사를 대비해서 원래 공부했던거를 집중해서 보기로했다. 오늘까지 개인공부를 마치면 내일부터는 아래 목록중에 하나씩 뽑아서 해봐야겠다. 지금 알고리즘 조원분들과 리액트+JS+etc 스터디가 결성되었..

장점 페이지에서 렌더링되는 요소에 맞춰 자동으로 해당 스타일만 삽입합니다. 그때그때 필요한 스타일만 로드한다는 거죠! 스타일에 대한 고유 클래스명을 생성합니다. 중복이나 오타 걱정 노놉 더이상 사용되지 않는 CSS를 쉽게 삭제할 수 있습니다. 모든 스타일은 특정 요소와 연결되어 있기 때문에 해당 요소가 삭제되면 스타일도 삭제돼요. 동적 스타일링이 편해집니다. 이 props가 있다면 A, 없다면 B와 같이 직관적으로 개별 스타일링이 가능해요. 출처: https://nykim.work/107 npm install styled-components TIP. styled-components 내에서 emmet을 쓰고 싶다면 vscode-styled-components 을 설치 1. Styled Components ..

HTML에서 변화는 감지하지만, 그 변화가 렌더링을 발생시키지 않을때 사용 1. 변수저장으로 사용된다 const ref = useRef(value) 이런식으로 선언하면 인자로 넣어준 value는 {current: value}로 저장이 된다. 그래서 이 객체의 값은 ref.current= value로 언제든 수정가능 state는 html에서 자꾸 변경되는 값에 쓰기 좋은데 ref는 렌더링이 안되기 때문에 변수들의 값을 유지할때 많이 쓴다. **state에서 렌더링을 다시해도 ref의 값은 유지가 된다. 만약 내가 보여주지는않지만 상태가 바뀔때마다 상태를 저장하고싶은게 있는데, 그걸 일반변수로 해버리면, 일반변수는 처음 초기값으로 돌아간다. 하지만 ref의 값은 안돌아간다. import { useRef, u..

https://programmers.co.kr/learn/courses/30/lessons/12906 function solution(arr) { var answer = []; // map을돌면서 value와 index에 접근을 해줄 예정이다 arr.map((value,index)=>( // value값이 다음 index의 값과 다르면 && 그 값을 push 해준다 value !== arr[index+1] && answer.push(value) )) // 즉, 1, 1은 같으니까 패스하고, 1,3 일경우 1을 push 하는 방법이다. return answer; } 이번에는 지금까지 알고리즘을 하면서 배운 지식인 map을 이용해 각 배열의 값과 인덱스에 접근하고 && 를 이용해서 true값을 push해 주..

https://programmers.co.kr/learn/courses/30/lessons/68644 function solution(numbers) { // 정답을 받을 코드 var answer = []; let newArry = numbers.sort((a, b)=> a - b); // 받아온 배열을 돌면서 더해준다 for(let i=0; i a - b) }

- 05/16 (월) 10:00: CS 스터디 발제 오늘의 목표 스파르타 리액트 과제 팀공부 this 팀작업 알고리즘 마라톤 개인공부 1. useRef() 2. styled-components 3. @media 4. input type 2종류 - checkbox - - radio - name="" 이 같으면 중복선택x 전산학공부 책 001 - 002 알고리즘, 자료구조공부 x 개인작업 x 알고리즘주에 해야할 알고리즘은 끝났기 때문에 이제 알고리즘 : 주특기 공부의 비중을 2 : 8 로 나눌려 한다. 30. 최소직사각형 x 31. 같은 숫자는 싫어 https://devkevin0408.tistory.com/154 32. 두 개 뽑아서 더하기 https://devkevin0408.tistory.com/153..

https://programmers.co.kr/learn/courses/30/lessons/68935 function solution(n) { var answer = 0; // 임시값 보존할 변수 let temp = 0; // .toString(3) - 3진법으로 만들고, 배열로 만들고, 뒤집고, 문자열로 만든다 temp = n.toString(3).split('').reverse().join(''); // 정수로 바꿔준다(3진법문자열이라고 알려줌) answer = parseInt(temp, 3) return answer; } 정답은 대부분 비슷해서 3진법을 toString말고 나눈값의 나머지로 계산한걸 가져왔다. function solution(n) { const answer = []; while(n ..

아직 경험이 적어서 쓰는곳에 대해 잘은 모르지만, open source API 가져올떄 (fetch()나 등등으로) 딱 한번만 가져오면 되니까 그럴때 사용. 1. componentDidMount mount될때만 실행되는 코드, 두번째 인자에 빈 배열을 넣는다. useEffect(() => {}, []) import { useEffect, useState } from 'react'; const App = () => { const [count, setCount] = useState(0); const increment = () => setCount(count+1); const decrement = () => setCount(count-1); const notRun = ''; // count가 호출될때마다 실행..