꺾이지 않는 마음

코딩테스트 문제에 자주 나오는 최대공약수, 최소공배수 구현 방법을 정리해보았다. 최대공약수 최대공약수는 분모와 분자의 공통약수 중 가장 큰 정수를 일컫는다. 최대공약수를 구하기 위해서는 분모와 분자를 2부터 Math.min(num1, num2)까지 반복문을 통해 ++하면서 나누다가, 분모와 분자가 동시에 0으로 나누어 떨어지게하는 값 중 가장 큰 값을 찾는다. 코드 let getGCD = (num1, num2) => { let gcd = 1; for (let i=2; i{ let lcm = 1; while(true){ if((lcm % num1 == 0) && (lcm % num2 == 0)){ break; } lcm++; } return lcm; }

상위 컴포넌트에서 하위 컴포넌트에게 데이터를 전달할 때 props를 사용한다. 근데 만약 상위 컴포넌트가 별 내용 없이 하위 컴포넌트를 감싸는 태그이면 어떻게 해야할까? 예를 들어 위 예시에서 컴포넌트 같은 경우가 그러하다. 위 컴포넌트는 태그와 css 만을 갖고 내용물은 없는 컴포넌트이다. 다른 컴포넌트들을 감싸주면서 레이아웃을 잡아주는 역할을 하는 컴포넌트인데, 이런 경우 자식 컴포넌트의 content를 어떻게 전달받을 수 있을까? 그냥 저렇게 하위 컴포넌트들을 컴포넌트로 감싸주기만 하면 될까? 당연히 안된다. 개발자 도구를 열어 확인해보니 컴포넌트만 존재할 뿐 하위 컴포넌트들은 하나도 그 안에 랜더링되지 않는다. ❓ 을 통해 props로 전달해주면 되지 않나요? 맞다. 우리가 평소에 사용하는 pro..

what?? 개발을 하다 보면 저런 SyntaxError: Unexpected end of input 라는 에러 메시지를 볼 수 있다. 도대체 뭐가 문제인지 모르겠어서 한참을 해맸는데 결론은 function 에서 ()나 {} 같은 괄호를 안닫아줘서 생기는 에러 였다. Ctrl + F 눌러서 function 키워드 찾은 후, 각 함수들의 괄호를 잘 열고닫았는지 확인해보자. 괄호 전부 잘 닫았다구요? ㄴㄴ 2번 3번 아니 10번 확인해보셈. 나 역시 '아무리 찾아봐도 없는데? 다른 문제가 있는거 아니야?' 라고 생각했지만, 함수 괄호 제대로 안닫아줘서 생긴 문제 맞음. 특히 function 내부에 중첩해서 코드 많이 사용하다 보면 헷갈려서 이런 문제가 심심찮게 발생한다. 이런 문제를 사전에 방지하려면 자동정..

작업할 때마다 자꾸 까먹어서 또 검색할까 봐 그냥 이참에 한번에 정리했다. array.sort(compareFunction) sort 메서드는 배열 안의 원소를 정렬해주는 내장 함수임. 파라미터로 비교함수를 받아서 원소 정렬 방식을 지정해줄 수 있음. ❗️sort 메서드는 원본 배열을 변경하고 변경된 배열을 반환함. 원본 유지하고 싶으면 임시배열 만들어서 원본 복사한 후 임시배열에다가 sort 함수 적용 ㄱㄱ. ✔ 비교함수 sort 메서드는 비교함수를 파라미터로 받는다고 했음. 근데 작동 원리가 뭐냐? 비교함수는 파라미터로 a와 b라는 두 요소를 받음. 그리고 이 두 요소는 배열 안에 있는 임의의 두 원소를 지칭함. 이 a와 b를 비교했을 때 리턴 값에 따라 인덱스 정렬이 이루어지는 것임. functio..

리액트로 원티드 웹 사이트를 클론코딩 하다가 궁금증이 생겼다. 전역적으로 사용되는 공통 스타일을 지정할 순 없을까? 예를 들어 section 태그를 사용하면 자동으로 padding: 60px 0; 를 가진다던가, h2 태그를 사용하면 font-size: 24px; 를 자동으로 가진다던가... 위 사진은 원티드 메인페이지 중 일부인데, 잘 보면 위아래 영역들 간의 간격이 동일한 것을 알 수 있다. 실제로 개발자 도구를 열어보면 section 마다 위아래로 60px의 padding 값을 갖고 있다. 전체 영역을 담는 section 태그를 쓸 때마다 컴포넌트 안에 padding: 60px; 을 일일이 주고 있다. 이러니까 불필요한 반복 작업이 많이 이루어진다고 느꼈다. 물론 css 파일을 만들어서 셀렉터를 사..

혼자 원티드 웹 사이트 클론코딩을 진행하다 문제가 발생했다. 문제상황: 나는 아래와 같은 라인 배너를 따라 만들고 있었다. 배너 안에 있는 ">" 모양의 svg 파일을 가져오기 위해 개발자 도구를 켜서 해당 태그를 복사해왔다. 그리고 내 파일에 붙여넣은 후, css에 color: #fff; 를 주었다. 근데.. 적용이 안된다. 옆에 있는 글자는 흰색으로 잘 바뀌었는데 svg 파일의 이미지는 색상 변경이 안된다 ㅠㅠ svg 아이콘은 color 속성이 적용되지 않나보다. 그래서 원티드 사이트에서는 어떻게 흰색으로 바꾸었나 개발자 도구를 열어서 봤더니, fill: currentColor; 라는 css가 쓰여있었다. 본능적으로 감이 왔다. 이거다! 이렇게 svg를 감싸고 있는 부모 요소에 color: #fff;..

지난 포스팅에 이어서 이번에는 사각형 만드는 함수를 알아보려한다. 우선 지난번처럼 아래와 같이 초기 설정 미리 해주고, const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 800; 변수 ctx를 호출해서 사용하겠다. 1️⃣ rect() rect(x좌표, y좌표, x길이, y길이) rect 함수는 사각형을 만들 때 사용한다. 파라미터로는 위와 같이 4개를 받는다. x좌표와 y좌표는 사각형을 그릴 첫 꼭짓점의 좌표를 지정한다. 그리고 x길이와 y길이는 위에서 지정한 좌표에서부터 가로 너비와 세로 너비를 얼마만큼 가질지를 지정한다. 예시) ctx..

노마드코더 강의를 수강하다가 Canvas API를 알게되었다. 이 API를 사용하면 마치 한붓그리기 놀이(?) 같은 것을 할 수 있게 해준다. 태그를 만들고(이 태그가 도화지 역할을 한다), 여러 함수를 사용하여 그 안에 그림을 그릴 수 있다. 아래는 canvas api를 이용하여 내가 그린 그림이다. 이렇게 원, 직사각형 등 도형을 그릴 수 있고, 그냥 선을 그을 수도 있다. 색깔도 변경 가능하다. 신기해서 블로그에 복습 겸 정리해놓으려고 한다. ⚙️ 기본 세팅법 1. HTML 파일의 태그 안에 태그를 삽입해준다.(이 태그가 그림을 그릴 도화지이다) 2. js 파일을 하나 만들고 3. js 파일에서 태그를 셀렉터를 통해 선택한 후, getContext("2d") 메소드를 사용하여 그림을 그린다. con..