초보 개발자의 성장 일기

아이콘을 사용할 때 React-icons를 주로 사용했다. 웬만한 아이콘들이 전부 다 있고 라이브러리를 다운받아서 import하기만 하면 쉽게 사용할 수 있기 때문이다. 이번에 사이드 프로젝트를 진행하면서 난관을 겪었다. 투두리스트 인풋 안에 버튼을 만들어 아이콘을 넣었고 relative, absolute하고 right를 0으로 했지만 오른쪽에 미세한 공간이 남았다. 끝 라인을 맞추고 싶었는데 margin-right, padding-right등으로 하드코딩이 가능하겠지만, 이유를 찾고 효율적인 방법을 찾고 싶었다. 개발자 도구로 확인해보니 이유를 어렵지 않게 찾을 수 있었다. svg크기와 path크기가 있는데 svg크기가 path크기 보다 더 크기 때문에 공간이 남았던 것이다. 라이브러리에서 svg, p..

위치 허용을 하게 되면 내 위치의 위도와 경도를 불러오는 자바스크립트 내장 함수가 존재한다. navigator.geolocation.getCurrentPosition() 2개의 콜백함수를 인자를 받는데 첫번째는 위치를 성공적으로 불러왔을 때, 두번째는 실패했을 때 실행시킬 각각의 함수를 불러온다. function onGeoOk(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; console.log('You live in', lat, lng); } function onGeoError() { alert("can't find you"); } 위치를 불러왔을 때 위도, 경도를 상수로 저장하고, 실패했을 ..

시계를 만드는 도중 10초 미만의 한자리 숫자일때는 1, 2, 3 ... 이렇게 나오는데, 모두 두자리로 01, 02, 03으로 맞추고 싶었다. 처음 생각해낸 방법은 if문을 이용해서 길이가 2미만일 경우 앞에 0을 붙이도록 하려고 했으나, 원하는 길이를 지정하고 그 길이에 부족한만큼 채울수 있는 메소드가 있지 않을까 해서 찾아봤다. padStart를 사용하면 긴 if문을 사용하지 않아도 된다. '2'.padStart(2, '0'); // '02' 2라는 문자에 padStart를 사용해서 길이를 2로 만들고 길이가 부족한 만큼 앞에서부터 0문자를 채우는 것이다. 반대로 padEnd를 사용하면 뒤에서부터 부족한 만큼 채워준다. 주의할 점은 문자만 가능하다는 점이다. 숫자를 사용할 경우 문자로 변환해서 사용..

input 태그를 만들 때 입력이 안되어있을 때, 즉 빈칸일 때는 if문을 사용해서 체크했다. if (username === '') 하지만 이렇게 하지 않아도 한 단어를 html에 적용하면 간단하게 유효성 체크가 가능하다. 바로 input 태그 안의 속성으로 required를 넣는 것이다. 또한 글자수 길이에 제한을 둘 때 length를 이용해서 유효성 검사를 했지만, if (username.length > 15) 이것 또한 html에서 maxlength를 사용하여 확인이 가능하다. 대신 input의 유효성 검사를 작동시키기 위해서는 input이 form안에 있어야 한다. input안 button을 누르거나 type이 submit인 input을 클릭하면 form이 자동적으로 submit이 되고, 새로고침..

리액트만 사용하다가 순수 자바스크립트가 기억이 잘 안나 공부하는 도중, class를 이용하여 추가하고 교체하는 방법이 헷갈려서 다시 공부를 시작했다. 기초를 중요하게 생각해서 deep dive책을 다시 읽고 있고, 노마드 코더의 바닐라 자바스크립트 강의를 참고했다. // HTML Click Button // JS h1.className = "clicked"; 자바스크립트를 사용하여 직접적으로 CSS를 바꾸지 않고, 클래스명만 변경하여 클래스명에 따른 CSS를 적용하려고 하는데 className을 사용하면 기존에 존재하던 클래스명이 사라지고 새로운 클래스명으로 교체 된다. 기존에 있던 클래스명을 살리고, 자바스크립트로 이벤트 활성시 새로운 클래스명을 추가하는 방법은 무엇일까? classList를 사용하는 ..

바닐라 자바스크립트를 복습하면서 투두리스트를 구현중이다. 할일을 input value로 불러와서 추가를 해야하는데, 새로운 tag요소를 만들어 부모의 태그에 자식태그로 넣으려고 하는 중 append, appendChild 두개의 차이가 궁금해졌다. append, appendChild의 공통점 두 메소드는 부모 노드에서 자식 노드를 추가하는 것이다. append 노드 객체를 사용할 수 있다. text를 사용할 수 있다. 한번에 여러 자식들을 추가할 수 있다. return 값을 반환하지 않는다. const parent = document.getElementsByTagName("body")[0]; const child1 = document.createElement("p"); const child2 = docu..

타입을 작성할 때 한가지만 작성하는 경우도 있지만, 보통은 |을 사용해서 다양한 타입을 지정할 수도 있다. type A = string | number; // 넓은 타입 type B = string; // 좁은 타입 type C = string & number; // 제일 좁은 타입 |을 사용하면 또는 이라는 의미로 사용한 모든 타입이 가능하고 넓은 타입이다. 타입을 하나만 작성한 경우는 |을 사용한 경우보다는 좁은 타입이고, &를 사용하면 둘다 가능해야 하므로 제일 좁은 타입이 된다. 타입의 너비는 A > B > C 순이고 좁은 타입에서 넓은 타입으로 대입이 가능하다. 타입을 보고 좁은 타입인지 넓은 타입인지 구분할 수 있어야 한다. type A = { name: string }; type B = { ..

매개변수에 number 타입과 string타입이 들어오게 되는데, number가 들어올 경우 소수점 한자리까지만 남기려고 한다. function numOrStr(a: number | string) { a.toFixed(1); } 하지만 타입스크립트는 모든 경우를 고려하기 때문에 string이 매개변수로 들어올 경우 toFixed를 사용할 수 없어 오류가 난다. as를 사용해서 매개변수 a를 강제로 타입을 지정해주는 방법이 있다. function numOrStr(a: number | string) { (a as number).toFixed(1); } 하지만 이렇게 하면 a가 숫자라고 단정을 짓는것이기 때문에 위험한 코드이다. 다른 개발자가 틀린 코드를 작성했을 때만 사용하는것이 좋다. 이 경우는 타입 가드..

1. 문제 해석 https://www.acmicpc.net/problem/1920 1920번: 수 찾기 첫째 줄에 자연수 N(1 ≤ N ≤ 100,000)이 주어진다. 다음 줄에는 N개의 정수 A[1], A[2], …, A[N]이 주어진다. 다음 줄에는 M(1 ≤ M ≤ 100,000)이 주어진다. 다음 줄에는 M개의 수들이 주어지는데, 이 수들 www.acmicpc.net 사실 이 문제를 바로 이해하는데 시간이 조금 걸렸지만 알고나면 쉬운 문제이다. 첫번째, 세번째 줄은 배열의 개수이고, 4번째 있는 줄이 2번째 있는 줄의 배열에 존재하면 1, 존재하지 않으면 0으로 나타내면 된다. 2. 문제 풀이 처음에는 for문으로 m의 배열의 값이 n의 배열에서 일치하는 값이 있는지 includes로 확인했다. ..

1. 문제 https://www.acmicpc.net/problem/9012 9012번: 괄호 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 www.acmicpc.net 2. 풀이 방법 첫번째 원소는 input의 행의 길이이다. shift로 이 원소를 배열에서 빼고, len변수에 담는다. 그리고 결과를 넣어줄 새 배열을 선언한다. for 반복문을 통해서 각 행을 지정해줄 i를 선언하고 for ...of를 사용하여 각각의 행안에 있는 원소가 '('일 경우 1을 더하고 아닌경우 즉, ')'일 경우에는 -1을한다. cnt의 결과..