본문 바로가기

분류 전체보기403

[ Lodash ] _.cloneDeep 사용법과 예시 _.cloneDeep이란?_.cloneDeep은 Lodash에서 제공하는 유틸리티 함수로, 객체(Object)나 배열(Array)을 깊은 복사(Deep Copy)하는 역할을 합니다.일반적으로 자바스크립트에서 객체를 복사할 때, 얕은 복사(Shallow Copy)만 이루어집니다. 얕은 복사는 최상위 속성만 복사하고, 중첩된 객체나 배열은 그대로 참조를 복사하기 때문에, 원본 데이터에 의도치 않은 영향을 미칠 수 있습니다.반면, _.cloneDeep을 사용하면 객체의 모든 속성과 중첩된 구조까지 독립적으로 복사하여, 복사본을 수정해도 원본 데이터에는 전혀 영향을 미치지 않게 됩니다.  얕은 복사와 깊은 복사의 차이먼저, 얕은 복사와 깊은 복사가 어떤 차이를 만드는지 알아보겠습니다. 얕은 복사 예시: cons.. 2024. 9. 25.
[ javascript ] HTML, CSS, JS로 음악 플레이어 만들기 HTML, CSS, JavaScript를 사용해 음악 플레이어를 만들어보았습니다.  이 플레이어는노래 정보 표시, 재생/일시정지, 이전/다음 곡으로 넘어가기, 진행 바 등기본적인 음악 플레이어 기능을 구현합니다.    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.
[ 언리얼엔진 ] ThirdpersonGameMode에 총을 들고있는 캐릭터 삽입하기 ThirdpersonGameMode에 총을 들고 있는 캐릭터를 사용하기 위해서는 언리얼엔진에서 무료로 제공하는 애니메이션 스타터 팩을 설치해 적용해 보았다. 언리얼엔진 마켓플레이스에서 애니메이션 스타터 팩이라고 검색하면 무료로 설치가 가능하다.  라이브러리로 이동해서 원하는 프로젝트에 추가해 준다.  애니메이션 스타터 팩을 추가한 프로젝트 실행한다.Content Browser에서 AnimStarterPack으로 이동한다. 여기서 Ue4ASP_Character을 사용할 예정이다. World Settings에서 GameMode Override에서 BP_ThirdPersonGameMode를 선택해 준다.화면에서 World Setting가 보이지 않는다면 Window > World Settings를 선택한다. .. 2024. 6. 23.
[ 언리얼엔진5 ] Event Hit을 사용해 material 색깔 바꾸기 언리얼엔진 버전 5.4.2  일인칭 템플릿을 선택하고 프로젝트 이름 입력 후 생성하기를 선택한다.  도형에 +가 있는 메뉴 선택 후 Shapes > Cube를 선택한다. (원하는 도형선택)  선택한 도형이 아래 이미지 처럼 화면에 생긴다.  Content Browser 선택 후 FirstPerson폴더 안에 Material폴더를 생성해 준다. Content Browser 빈 공간에 오른쪽 마우스 클릭 > New Folder 선택필수는 아니지만 프로젝트를 깔끔하게 정리하는 습관을 가지는게 좋다.  생성한 Materials폴더 더블 클릭후, 빈 공간에 오른쪽 마우스 클릭 후  Material 선택  M_TargetRed로 이름을 지어주자. M은 Material을 표기하는 약자이다.  생성한 M_TargetR.. 2024. 6. 16.
728x90

티스토리툴바