sally-dot

1. 함수 함수는 독립적으로 호출할 수 있는 코드 블록으로, 일련의 작업을 수행하고 값을 반환할 수 있습니다. 함수는 객체가 아니므로 this 키워드를 사용할 수 없습니다. function add(a, b) { return a + b; } let result = add(2, 3); console.log(result); // 5 2. 메서드 메서드는 객체의 프로퍼티로서, 해당 객체에 속한 함수를 의미합니다. 메서드는 객체의 상태를 변경하거나 객체에 대한 작업을 수행할 수 있으며, this 키워드를 사용하여 객체 내부의 값에 접근할 수 있습니다. const person = { firstName: "John", lastName: "Doe", fullName: function() { return this.fir..

브라우저 정의 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어입니다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 종류 중 하나이기도 합니다. 브라우저 역할 유저가 입력한 웹페이지, 이미지, 동영상 등의 자원을 서버에게 요청하는 역할 서버로부터 전달받은 자원을 화면에 출력하는 역할 주요 웹 브라우저 종류 모질라 파이어폭스 (Mozilla FireFox) 구글 크롬 (Goggle Chrome) 인터넷 익스플로러/마이크로소프트 엣지 (Internet Explorer/Microsoft Edge) 사파리 (Safari) 브라우저의 주요 구성 요소 1. 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 홈버튼 등 요청한 페이지 외에 사용자 컨트롤 부분 2. 브라우저 엔진 :..

1. Tailwind CSS Tailwind CSS는 오픈 소스 CSS 프레임워크입니다. 이 라이브러리의 주요 기능은 부트스트랩과 같은 다른 CSS 프레임워크와 달리 버튼이나 테이블과 같은 요소 에 대해 미리 정의된 일련의 클래스를 제공하지 않는다는 것입니다. 대신 여러 CSS 요소를 사용하여 스타일을 지정하는데 사용할 수 있는 "유틸리티" CSS 클래스 목록을 만듭니다. Tailwind는 CSS의 항목을 Tailwind 식으로 목록화한 '유틸리티 클라스'만 사용하여 CSS파일 없이 html 파일만으로 빠른 UI를 제작할 수 있다는 장점이 있습니다. 아래와 같이 Tailwind의 클래스 항목을 html의 태그에 적용하여 노란색 결과를 얻을 수 있습니다. 2. 장점과 단점 장점 클래스 이름을 고민하지 않아..

1. object-fit 속성 나 요소와 같은 콘텐츠 크기를 어떤 방식으로 조절하여 요소에 맞출 것인지 지정합니다. 2. object-fit 값 object-fit : cover 이미지의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다. object-fit : contain 이미지의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 레터박스처럼 됩니다. 이외의 다른 속성값들 출력 이미지 3. 사용 예시 아래와 같이 캐러셀 라이브러리에서 배경 이미지를 넣는 과정에서 사용했습니다. ..

작업환경 Date 2023-02-13 PC macOS Monterey 버전 12.6.1 zsh zsh 5.8.1 (x86_64-apple-darwin21.0) vscode version 1.74.2 (Universal) node.js version 18.12.1 사용된 기술스택 react, styled component styled component 로 라디오 버튼 커스텀하기 1. input 태그의 required 속성 에서 type을 input의 required 속성이라고 합니다. styled component로는 코드가 계속 적용이 되질 않아서 시간을 많이 할애했습니다. ㅜㅜ 블로그를 전전하다가 보니 attr 속성을 잘못사용하고 있었습니다. styled component에서는 css의 속성을 아래와 ..

작업환경 Date 2023-02-12 PC macOS Monterey 버전 12.6.1 zsh zsh 5.8.1 (x86_64-apple-darwin21.0) vscode version 1.74.2 (Universal) node.js version 18.12.1 사용된 기술스택 react, styled component 이미지 업로드 중 취소 관련 오류 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed. 1. 문제상황 : 이미지 업로드 중, 첫번째 이미지 업로드 후 두번째 이미지 추가하다가 취소버튼 클릭시 에러 출력 2. 코드 찍기 문제가 되는 부분의 코드를 찍어보았습니다. console...

작업환경 Date 2023-02-12 PC macOS Monterey 버전 12.6.1 zsh zsh 5.8.1 (x86_64-apple-darwin21.0) vscode version 1.74.2 (Universal) node.js version 18.12.1 사용된 기술스택 react, styled component 두 개의 다른 input 값을 하나의 코드로 관리하기 (button) 1. 문제상황 상태(condition) 과 교환(exchangeable) 에서 관리되는 value값이 다름 button태그는 value값에 따라 버튼이 체크되는 위치가 변경이 되는데 value값이 다르다 보니 코드를 하나로 모으기 어려움 반복적 & 비효율적 코드의 생성 2. 원래의 코드 const [sellList, s..

Array.reduce() reduce 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환 구문 arr.reduce(callback[, initialValue]) 인수로 함수를 받음 (누적 계산값, 현재값) => {return 계산값} 배열의 합 구하기 let arr = [1,2,3,4,5]; const result = arr.reduce((prev, cur)=>{ return prev + cur; }, 0) // 풀이 // prev 0, cur 1 => prev 1 (prev가 처음에 0 , 초기값이 0, cur 현재값 1 더함) // prev 1, cur 2 => prev 3 // prev 3, cur 3 => prev 6 // prev 6, cur 4 => ..

문제 설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 제한사항 0 ≤ numbers의 원소 ≤ 1,000 1 ≤ numbers의 길이 ≤ 100 정답의 소수 부분이 .0 또는 .5인 경우만 입력으로 주어집니다. 내 풀이 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] function solution(arr) { const result = arr.reduce((prev, cur)=>{ return (prev + cur); }, 0); const average = result / arr.length; return average; console.log(average); } console.l..

1. % 부모(.parent) element에 따른 %를 나타내는 단위입니다. 자식 요소에 적용한 높이가 100%일 때 부모의 높이와 크기가 동일합니다. 하지만 자식 요소에 적용한 높이가 50%일 땐 부모의 높이와 비교해 절반이 됩니다. 2. vh & vw vh는 Viewport height이고 vw는 Viewport width 축약어 이며, Viewport는 웹사이트에서 보여지는 영역을 뜻합니다. 만일 100vh로 속성값을 설정할 경우 뷰포트 너비의 100% 만큼 계산이 됩니다. 부모 태그와는 상관없이 보이는 Viewport Height의 100%를 다 쓰겠다는 의미입니다. 100vh, 100vw 가 전체 화면의 기준이 됩니다. 예를들어, 현재 스크린 크기가 height = 1000px, width =..