본문 바로가기

전체 글165

한글 입력 시 Enter 이벤트 중복 호출 문제 해결 문제 상황 태그를 입력하는 Input 컴포넌트를 만들던 중, 영어를 입력할 때는 정상적으로 작동하지만 한글을 입력하면 태그가 2개로 나뉘어 생성되는 문제가 발생했다. 태그를 생성하는 방식은 아래처럼 구현했다. 사용자가 태그 이름을 입력한다. 사용자가 태그 이름 입력을 마치면 엔터 키를 누른다. 엔터키를 누르는 이벤트가 발생하면, 입력 값을 태그로 생성한다. 디버깅 태그를 생성하는 함수 내에서 콘솔을 출력해보니, 한글의 경우에는 한 번만 엔터 키를 클릭해도 이벤트가 중복 호출되었다. 문제 원인 한글은 자음과 모음이 합쳐져 만들어지는 조합 문자이기 때문에, 글자가 조합 중인지 조합이 완료된 상태인지 파악하기 어려워 이벤트가 중복 호출된다. 현재 코드에서 사용중인 onKeyDown 메서드의 경우, 문자의 입력.. 2024. 4. 21.

코드잇 스프린트 기초 프로젝트 협업 후기 현재 수강 중인 부트 캠프에서 기초 프로젝트를 진행했다. 너글닿기 누구나 손쉽게, 온라인 롤링 페이지를 만들 수 있어요 itsbasic-c93d6.web.app GitHub - innerstella/itsBasic: 코드잇 스프린트 4기 PART2 기초 프로젝트 코드잇 스프린트 4기 PART2 기초 프로젝트. Contribute to innerstella/itsBasic development by creating an account on GitHub. github.com 🗓️ 프로젝트 일정 🚀 사전 회의 - 기술 스택 정하기 - 컨벤션 정하기 (코드, 폴더 구조) - 문서화 방법 - 일정 및 마일스톤 관리 방법 - 의사소통 방법 - R&R 분배 - 깃 협업 - 회고 팀 내에 개발 협업을 처음해보는 팀원들.. 2024. 3. 20.

React 컴포넌트를 어떻게 만들어야 할까? React는 컴포넌트 기반 라이브러리입니다. 웹을 개발할 때 헤더, 메인 콘텐츠가 들어가는 부분, 버튼 등을 만든다면 하나의 컴포넌트로 묶어서 관리할 수 있습니다. 그렇기 때문에 개발하다가 특정 부분에서 오류가 생겼다고 한다면, 그 컴포넌트만 수정하면되기 때문에 코드를 간결하게 만들 수 있습니다. 지금까지 React로 여러 가지 프로젝트를 해보면서 많은 컴포넌트들을 만들어보았고, 그 과정에서 비슷한 기능인데도 모두 따로 만든다던가 하는 방식으로 비효율적인 방법으로 만들었다가 또 다시 그 코드를 고쳐서 하나의 컴포넌트를 깔끔하게 만들었을 때 재미를 느꼈습니다. 그래서 컴포넌트를 어떻게 해야 잘 만들 수 있을 지에 대한 점이 궁금해 몇 가지 글과 웨비나를 참고해서 정리해봤습니다. 1. React 컴포넌트와 .. 2024. 1. 20.

산책 개발일지 1 : NoSQL 데이터베이스 설계 (Cloud Firestore) 개발 계획을 세운 후, 팀원과 함께 기획서를 보며 필요한 데이터에 대한 논의를 진행했습니다. 우선 저희 팀에는 백엔드 개발자가 없었기 때문에 (이번에도) Cloud Firestore를 사용하게 되었습니다 지금까지 진행했던 대부분의 프로젝트에서 Cloud Firestore를 사용했지만, 제대로 알고 써본 적은 없었던 것 같아서 이번 기회를 통해 NoSQL 데이터베이스 설계에 대해서 알아보고 연습해보는 시간을 가졌습니다. ☁️ Cloud Firestore Google Cloud 인프라를 기반으로 하는 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스를 사용해 클라이언트 측 개발 및 서버 측 개발에 사용되는 데이터를 저장하고 동기화하세요. 구글에서 지원하는 NoSQL 데이터베이스 장기 데이터 저장 및 검색.. 2024. 1. 11.

시맨틱 태그를 쓰면 좋은 점 sematic은 의미의, 의미론적인 이라는 의미를 가지고 있는 단어입니다. 시맨틱 태그(semantic tag)란 단어에서 그 의미를 유추할 수 있듯이, 의미가 담겨있는 태그입니다. 기능은 태그와 동일하며, 정확한 사용법이 있다기보다는, 작성하는 사람의 의도가 중요합니다. 그렇다면 이런 시맨틱 태그를 왜 써야 할까요? 시맨틱 태그의 종류 : 하나의 완성된, 독립적인 내용을 나타내는 영역 : 문서의 주요 내용과 간접적으로만 연관된 부분 (사이드바, 콜아웃 박스) : 토글과 같은 기능으로 정보를 제공하는 disclosure 위젯을 만들 때 사용 : 이미지에 대한 캡션 : 이미지 및 이미지 설명을 담고 있는 영역 : 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 : 영역 위쪽에서 로고나 제목, 메.. 2024. 1. 5.

position의 속성 및 특징 (실제 사이트 예시) CSS 코드를 작성할 때 자주 사용하는 속성들 중 `position`이라는 속성이 있습니다. position은 문서 상에 요소를 배치하는 방법을 설정할 때 사용하며, 매우 다양한 속성값을 가지고 있습니다. static static은 position 속성의 기본 값으로, 요소를 일반적인 문서의 흐름에 따라 배치합니다. 이 때 일반적인 문서의 흐름이란, 우리가 문서를 읽고 작성할 때의 순서인 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이는 것을 의미합니다. position이 static인 상태에서는 아무리 offset 값을 줘도 변화가 일어나지 않고, z-index 값 또한 적용되지 않습니다. relative position이 relative인 상태에서는 static과 자기 자신을 기준으로 top, right, .. 2024. 1. 5.

React 프로젝트 웹뷰 android 빌드하기 현재 진행 중인 프로젝트를 모바일 뷰로 개발 중인데, 어느 정도 주요 기능이 모두 완성된 상태에서 이 서비스를 어플로 사용한다면 편리할 것 같다는 생각이 들었습니다. 작년 상반기에 근무했던 팀에서 모바일 앱 내에 웹뷰 형태로 서비스를 제공했었기 때문에, 이번 프로젝트를 Flutter를 사용해서 앱으로 만들어보기로 했습니다. (↓ 아래 사이트는 현재 진행 중인 프로젝트의 웹 사이트입니다) 산-책, 등산/트레킹 정보 큐레이션 플랫폼 지구환경 분야 공간데이터 기반 등산/트레킹 정보를 확인하고 공유해보세요! kground.web.app 1. mac OS Flutter 개발 환경 설정하기 chrome, vscode, xcode 등은 이미 설치되어 있는 경우, 아래 4개를 설치해주면 됩니다. // Flutter b.. 2024. 1. 4.

웹 접근성 높이기 w/ 기존 프로젝트 리팩터링 (Lighthouse) 웹 접근성을 고려하며 개발해 본 경험 채용 공고들을 보면 필수 자격 또는 우대 사항에 위와 같은 내용이 적혀있는 것을 종종 발견할 수 있었습니다. 도대체 웹 접근성이 뭐고, 이를 고려해서 개발하려면 어떻게 코드를 작성해야 할까요? 웹 접근성 한국웹접근성인증평가원에서는 웹 접근성(정보통신접근성)을 아래와 같이 설명하고 있습니다. ⌜지능정보화기본법⌟에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항입니다. 웹 브라우징에 쓰이는 보조과학기술 • 스크린 리더 소프트웨어 • 화면 확대 도구 • 음성 인식 • 키보드 오버레이 이 중 스크린 리더 기능을 문제 없이 사용할 수 있게 돕는 부분을 프론트엔드 개발자들이 .. 2024. 1. 2.

CSS는 왜 이름이 CSS일까? 기술 면접 공부를 하던 중, 어떤 개발자 분이 남기신 글이 인상 깊었습니다. CSS를 활용하는 법에 대해 알고 있는 것도 중요하지만, CSS가 왜 CSS인지도 알고 있는 개발자였으면 좋겠다는 글이었습니다. 프론트엔드 개발을 하면서 필수적으로 사용하는 기술이 CSS이고, CSS를 정말 많이 다루고 있지만 정작 CSS의 이름이 왜 CSS인지에 대해서는 한 번도 생각해 본 적이 없었기에 찾아서 공부해보았습니다. CSS는 뭘까? CSS는 웹 페이지를 꾸미려고 작성하는 코드이며, 프로그래밍 언어나 마크업 언어가 아닌 Style sheet 언어입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 것인데, 예를 들면 HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍.. 2024. 1. 2.

이전 1 2 3 4 ··· 19 다음

티스토리툴바