개발 학습 기록

scrollBy 지정한 픽셀만큼 스크롤하는 메서드 용법 1. window.scrollBy( x값, y값 ); 실행 시 지정한 값만큼 스크롤하며 최극단에 닿아 더이상 스크롤 불가할 때까지 반복 가능. 값의 단위는 px(픽셀)이므로 단위없이 숫자만 입력. 용법 2. 객체 형식으로 옵션값을 전달 window.scrollBy({ left: x값, top: y값, behavior: "smooth" }); left 왼쪽에서부터 얼마나 이동할지 정하는 값 top 위에서부터 얼마나 이동할지 정하는 값 behavior 스크롤 시의 트랜지션을 정하는 옵션 "auto": 탁! 이동. 기본값 "smooth": 스르륵 이동 scroll, scrollTo 지정한 좌표로 스크롤하는 메서드 용법 1. window.scrollTo( ..

JavaScript 2021. 9. 1. 22:42

year={movie.release_date ? movie.release_date : ""} 영화의 개봉시기가 있으면 출력하고 없으면 빈문자열을 prop으로 넘겨주는 코드를 작성했는데, 결과값이 yyyy-mm-dd 라서 이중에 연도만 넘겨주고 싶었다. 1. substring string을 반환한다. movie.release_date.substring() // 2021-06-30 movie.release_date.substring(0, 4) // 2021 2. split 배열을 반환한다. movie.release_date.split("-") // ["2021", "06", "30"] movie.release_date.split("-", 1) // ["2021"] movie.release_date.split..

React 2021. 8. 24. 04:06

api에서 불러온 title의 길이가 18자를 초과하면 18자까지만 남기고, 아니면 전체를 출력하는 코드를 짰다. {title.length > 18 ? `${title.substring(0, 18)}...` : title} 그런데 이렇게 자르면 중국어나 일본어에는 적용이 안되는 문제가 발생해서 CSS로 해결했다. const Title = styled.span` display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `;

CSS 2021. 8. 24. 03:26

리액트 개발 중 콘솔에 아래와 같은 에러 메시지가 출력됐다. Unchecked runtime.lastError: The message port closed before a response was received. 크롬의 확장 프로그램과 충돌해서 생기는 문제라고 한다. 크롬의 확장 프로그램 탭에 들어가서 확장 프로그램을 하나하나 꺼보면서 해결했다.

React 2021. 8. 22. 18:00

코드를 짜다보면 어떤 방식이 더 빠를지 궁금해진다. Date를 활용해서 코드의 시작과 끝의 시간 차를 이용하는 방법도 있지만, console.time을 사용하는 게 상대적으로 간단하고 유용한 방법으로 보인다. 시작지점에 console.time(), 종료지점에 console.timeEnd()를 작성해서 테스트하려는 코드를 감싼다. 괄호 안에는 문자열을 작성해서 여러 코드를 테스트하려는 경우 구분해주는 라벨 역할을 하며, 아무 것도 작성하지 않으면 "default: 소요시간ms"의 형식으로 출력한다. const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.time("for 사용"); let result = 0; for (let i = 0; i < arr.length; ..

JavaScript 2021. 8. 18. 20:11

숫자를 문자열로 형변환 시 사용하는 String()과 toString()의 차이점 // 숫자를 형변환 const number = 10 String(number) // 10 number.toString() // 10 number.toString(2) // 1010, 괄호 안에 2~36사이의 정수가 들어가며 해당 진법으로 바꿔준다. 예시는 2진법. // 객체를 형변환 const obj = { name: "charlie" } String(obj) // [object Object] obj.toString() // [object Object] // 배열을 형변환 const arr = [1, 2, 3, 4] String(arr) // 1,2,3,4 arr.toString() // 1,2,3,4 // null을 형변..

JavaScript 2021. 8. 18. 19:23

매개변수: 함수의 정의 부분에 나열되어 있는 변수(variable) 전달인자: 함수를 호출할 때 전달되는 값(value) function sum(a, b) { ... } sum(1, 2); 위의 함수 sum에서 a와 b는 매개변수(parameter)이고, 함수 sum을 호출할 때 전달되는 1과 2가 전달인자(argument)이다.

JavaScript 2021. 8. 18. 03:12

person이라는 객체가 있다. const person = { firstName: "John", lastName: "Watson", }; 이 객체의 firstName과 lastName을 콘솔에 출력하려면 이렇게 하면 된다. const person = { firstName: "John", lastName: "Watson", }; const firstName = person.firstName; const lastName = person.lastName; console.log(firstName, lastName); // John Watson 하지만 이 방식은 person.을 반복하고 있기 때문에 비효율적이다. 비구조화 할당을 사용하면 반복을 피하고 코드의 양을 줄일 수 있다. const person = { f..

JavaScript 2021. 8. 16. 17:54