본문 바로가기

전체 글404

[ JavaScript ] findIndex와 indexOf의 차이점 알아보기 JavaScript를 사용할 때, 배열에서 특정 값을 찾는 것은 자주 사용되는 작업입니다. 이를 위해 주로 `findIndex`와 `indexOf` 메서드를 활용할 수 있는데, 이 둘은 비슷해 보이지만 중요한 차이점이 있습니다. 이번 글에서는 `findIndex`와 `indexOf`의 차이점을 예제와 함께 알아보겠습니다. findIndex 메서드findIndex는 배열의 각 요소를 콜백 함수로 검사해, 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만약 조건을 만족하는 요소가 없으면 -1을 반환합니다. 사용 방식arr.findIndex(callback(element, index, array), thisArg);리턴 값콜백 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환하며, 없을 경우 -1을.. 2024. 10. 17.
[ 프로그래머스 / Javascript ] x만큼 간격이 있는 n개의 숫자 https://school.programmers.co.kr/learn/courses/30/lessons/12954 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr  문제 설명함수 solution은 정수 x와 자연수 n을 입력받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요.  제한 조건x는 -10000000 이상, 10000000 이하인 정수입니다.n은 1000 이하인 자연수입니다. 입출력 예xnanswer25[2,4,6,8,10]43[4,8,12]-.. 2024. 10. 16.
[ Lodash ] _.cloneDeep 사용법과 예시 _.cloneDeep이란?_.cloneDeep은 Lodash에서 제공하는 유틸리티 함수로, 객체(Object)나 배열(Array)을 깊은 복사(Deep Copy)하는 역할을 합니다.일반적으로 자바스크립트에서 객체를 복사할 때, 얕은 복사(Shallow Copy)만 이루어집니다. 얕은 복사는 최상위 속성만 복사하고, 중첩된 객체나 배열은 그대로 참조를 복사하기 때문에, 원본 데이터에 의도치 않은 영향을 미칠 수 있습니다.반면, _.cloneDeep을 사용하면 객체의 모든 속성과 중첩된 구조까지 독립적으로 복사하여, 복사본을 수정해도 원본 데이터에는 전혀 영향을 미치지 않게 됩니다.  얕은 복사와 깊은 복사의 차이먼저, 얕은 복사와 깊은 복사가 어떤 차이를 만드는지 알아보겠습니다. 얕은 복사 예시: cons.. 2024. 9. 25.
[ javascript ] HTML, CSS, JS로 음악 플레이어 만들기 HTML, CSS, JavaScript를 사용해 음악 플레이어를 만들어보았습니다.  이 플레이어는노래 정보 표시, 재생/일시정지, 이전/다음 곡으로 넘어가기, 진행 바 등기본적인 음악 플레이어 기능을 구현합니다.    30분 만에 영상 보며 따라만들기 1. HTML 구조우선, HTML 파일을 작성합니다. 음악 플레이어의 기본 구조는 다음과 같습니다. Song Artist 0:00 0:00   container: 전체 플레이어를 감싸는 컨테이너입니다.song-info: 노래 이름, .. 2024. 9. 9.
[ React ] 리액트 파일 확장자를 .js로 사용하는 것이 안 좋은가요? 리액트 프로젝트를 진행할 때, 파일 확장자를 `.js`로 할지, `.jsx`로 할지 고민한 적이 있으신가요? 사실, `.js` 확장자를 사용하는 것이 "안 좋은" 것은 아니지만, 상황에 따라 장단점이 존재합니다. 1.  ` .js ` 확장자를 사용할 때의 장점통일된 확장자 관리모든 자바스크립트 파일을 `.js`로 관리하면 프로젝트에서 일관된 확장자를 유지할 수 있어, 파일 구조가 간단해집니다. 기존 코드와의 호환성기존에 작성된 자바스크립트 코드와 리액트 코드의 확장자를 일관되게 사용할 수 있어 유지보수에 용이합니다. 도구의 기본 지원`.js` 확장자는 모든 코드 에디터에서 기본적으로 지원되며, 특별한 설정 없이도 JSX 구문을 잘 처리할 수 있습니다.  2. `.js` 확장자를 사용할 때의 단점가독성과 .. 2024. 8. 28.
[ Ant Design ] 엔트디자인 왜 배워야 하고, 그 미래는 어떻게 될까요? 오늘은 많은 개발자들이 주목하고 있는 UI 라이브러리, Ant Design에 대해 이야기해보려고 합니다!혹시 React로 프로젝트를 진행하고 계신가요? 그렇다면 Ant Design은 여러분의 개발 생산성을 크게 향상시킬 수 있는 도구가 될 것입니다. 이 글에서는 Ant Design의 주요 장점, 배워야 할 이유, 그리고 앞으로의 전망에 대해 다뤄보겠습니다.  Ant Design의 주요 장점1. 통합된 디자인 시스템Ant Design의 가장 큰 매력 중 하나는 일관된 디자인 시스템입니다. 많은 UI 라이브러리가 있지만, Ant Design은 특히 대규모 기업 애플리케이션을 염두에 두고 설계되었습니다. 다양한 UI 컴포넌트와 스타일 가이드를 제공하여, 사용자에게 일관된 경험을 제공할 수 있습니다. 디자인의 .. 2024. 8. 9.
[ Python ] input 함수 활용 예제 코드 input() 함수파이썬의 input() 함수는 사용자로부터 직접 값을 입력받기 위한 목적의 함수입니다.다른 함수들처럼 변수나 파생변수를 활용하지 않고 사용자의 입력 데이터를 받아 상호작용 하는 기능입니다.  input() 함수의 구조와  특징input() 함수 구조는 2단계로 구성되어 있습니다.1. 사용자에게 입력 데이터 요구2. 입력받은 데이터를 활용하여 문자열로 반환  input() 함수 코드 예제name = input("이름을 입력해주세요")print("안녕하세요, " + name + "님!") 코드를 실행하면 "이름을 입력하세요"라는 메시지가 표시됩니다.이름을 입력한 후 엔터 키를 누르면, 입력된 이름을 변수 name에 저장합니다.변수에 저장된 이름은 "안녕하세요, [name]님!"으로 출력됩니.. 2024. 7. 31.
[ 프로그래머스 / Python ] 문자열 붙여서 출력하기 문제 설명두 개의 문자열 str1, str2가 공백으로 구분되어 입력으로 주어집니다.입출력 예와 같이 str1과 str2을 이어서 출력하는 코드를 작성해 보세요. 제한사항1 ≤ str1, str2의 길이 ≤ 10나의 풀이 # 입력 받기str1, str2 = input().strip().split(' ')# str1과 str2를 이어서 출력print(str1+str2)추가 설명 2024. 7. 31.
[ React ] Lodash - sumBy, filter, includes 최종 목표users의 총목록에서 선택된 사용자들의 time의 총합을 구하기  selectedUserList은 선택된 사용자들의 목록const selectedUserList = ['홍길동', '고길동']  사용사들의 총 기록 목록const users = [ { name: "홍길동", time: 120, }, { name: "고길동", time: 60, }, { name: "김영희", time: 60, },]  Lodash 사용1. filter, includes 사용해 선택된 user 목록 출력하기 _.filter(배열, 배열의 각 값)// return 필터된 새로운 배열 반환 _.includes(검색할.. 2024. 7. 15.
728x90

티스토리툴바