반응형 개발20 객체를 배열로 바꾸는 방법 feat.JavaScript 개발을 하다보면 진짜 자주 사용하는 것중 하나가 객체를 배열로 바꾸는거다.보통 데이터를 가공할때 정말 많이 사용한다.매일 나도 구글링하면서 사용하다보니 어느순간 나도 블로그에 정리하면서 외워보자 생각이들어 드디어 정리를 한다. 1. Object.keys()를 사용하여 객체의 키 배열 생성Object.keys() 메서드는 객체의 키를 배열 형태로 반환합니다.const obj = { a: 1, b: 2, c: 3 };const keysArray = Object.keys(obj);console.log(keysArray); // ["a", "b", "c"] 2. Object.values()를 사용하여 객체의 값 배열 생성Object.values() 메서드는 객체의 값을 배열 형태로 반환합니다.const obj.. 2024. 6. 30. 리액트로 BottomSheet 개발하기: 가이드와 팁 프로젝트를 하던 중에 디자이너분께서 바텀시트 기능이 추가되어 개발을 하게되었다.사실 처음에는 라이브러리가 있을 줄 알고 큰 걱정안하고 기간안에 가능하다고 답변을 드렸다.하지만 찾아보니 라이브러리가 없는 상황이어서 내가 직접 개발해야 되는 상황이 됐다.일단 나의 영원한 친구 GPT의 도움을 받아 어찌저찌 구현은 성공했는데 뭔가 부족해서 없애고 구글링으로 서칭 후 재 개발 하게됐다. 이글은 나 같은 분들이 조금이나마 개발의 편의를 제공하기 위해 쓴다.먼저 구현하는데 큰 도움을 주신 개발자 Boris님, Wayne Kim 그리고 최종 문제에 인사이트를 주신 스터디를 같이 하고 있는 B님께 먼저 감사말씀을 올립니다. 나는 두분이 올려주신글을 참고하여 구현에 성공할 수 있었다.두분이 올려주신 코드를 고대로 활용.. 2024. 6. 30. CSS와 JavaScript에서 텍스트 줄 바꿈 구현하는 방법 줄 바꿈은 텍스트를 읽기 쉽게 만들고, 데이터를 구분하며, 출력 형식을 제어하는 데 중요한 역할을 합니다. 이 글에서는 CSS와 JavaScript에서 줄 바꿈을 구현하는 다양한 방법을 자세히 설명하겠습니다. CSS에서 줄 바꿈CSS는 웹 페이지의 스타일을 정의하는 데 사용되며, 줄 바꿈을 제어하는 여러 속성을 제공합니다.1. white-space 속성white-space 속성은 요소 내에서 공백과 줄 바꿈을 어떻게 처리할지를 결정합니다.normal: 연속된 공백은 하나의 공백으로 간주되고, 줄 바꿈은 무시됩니다.nowrap: 텍스트는 줄 바꿈 없이 한 줄로 표시됩니다.pre: HTML에서 작성된 공백과 줄 바꿈이 그대로 유지됩니다.pre-wrap: 공백과 줄 바꿈이 유지되지만, 긴 줄은 필요한 경우 줄.. 2024. 6. 21. Git 명령어 총정리: 알아두면 유용한 Git 명령어 가이드 Git은 소스 코드 관리를 위한 분산 버전 관리 시스템으로, 많은 개발자들이 협업 프로젝트에서 사용하고 있습니다.저도 맨날 필요할때 마다 구글링이나 gpt 한테 물어보는 기억할겸 정리하려고 글을 씁니다 ㅋㅋㅋ이 글에서는 자주 사용하는 Git 명령어를 보다 자세히 정리하여 소개하겠습니다. 이 명령어들을 익히면 Git을 보다 효율적으로 사용할 수 있습니다. 1. Git 초기화 및 클론git init현재 디렉토리를 새로운 Git 저장소로 초기화합니다.git init git clone원격 저장소를 로컬 디렉토리에 복제합니다.git clone 2. 상태 확인 및 변경 사항 관리git status작업 디렉토리의 상태를 확인합니다. 변경된 파일, 스테이징된 파일, 추적되지 않은 파일 등을 보여줍니다.git stat.. 2024. 6. 21. 사내 칸반보드 개발 프로젝트 - 5 사내 칸반보드 개발 프로젝트 - 4사내 칸반보드 개발 프로젝트 -3스타트업 프론트개발자의 칸반보드 풀스택개발기 사내 칸반보드 개발 프로젝트 -22024.05.15 - [개발] - 사내 칸반보드 개발 프로젝트 -1포부를 밝혔던 1편에이어sancho216.tistory.com 오늘 글은 드디어 백엔드로 넘어왔다.사실 지금 회사를 입사하고 초기에 강의를 들었을 때 node js가 포함되어 있어 들은 이후로 한적이 없으니 거의 3년만에 다시 해본것이다.이번에 신기한데 3년 전에 했을 때는 코드가 아예 눈에 안들어왔는데 이번에는 신기하게 쓱 보는데 코드를 조금 이해 할 수 있었다.확실히 포기 안하고 꾸준히 하면 성장이란 것을 할 수 있는 것 같긴하다. 기술 스택1. Node.js2. mongoDB (회사에서 사.. 2024. 5. 26. 사내 칸반보드 개발 프로젝트 - 4 사내 칸반보드 개발 프로젝트 -3스타트업 프론트개발자의 칸반보드 풀스택개발기 사내 칸반보드 개발 프로젝트 -22024.05.15 - [개발] - 사내 칸반보드 개발 프로젝트 -1포부를 밝혔던 1편에이어 이제 진짜 코드가 들어가는 2편이sancho216.tistory.com스타트업 프론트개발자의 칸반보드 풀스택개발기드디어 첫 백엔드 개발이 시작되서 걱정반 설렘반입니다.역시 node js api 서버 개발 검색하니 무수히 많은 예제가 나와서 어렵지 않았습니다. 나는 프레임 워크 express를 선택했다.먼저 간단하게 express에 대해서 설명을하자면Express.js는 Node.js를 위한 간결하고 유연한 웹 애플리케이션 프레임워크입니다. Express는 Node.js 애플리케이션의 서버 측 로직을 구.. 2024. 5. 22. 이전 1 2 3 4 다음 반응형
