JavaScript를 사용해 백준, 프로그래머스와 같은 다양한 플랫폼에서 알고리즘 문제를 풀어왔다. 최근에는 인공지능의 한 분야인 컴퓨터 비전에 관심을 가지면서, 파이썬에 익숙해지기 위해 언어를 전환하기로 했다. 그 첫걸음으로, 파이썬에서 가장 기본이 되는 데이터 입출력 방법을 알아보고 정리하는 시간을 가지려고 한다. 한 줄의 문자열을 입력 받기input() 함수는 한 줄의 문자열을 입력받는 기능을 제공한다. 입력받은 데이터를 정수형으로 처리하려면, int() 함수를 사용해 문자열을 정수로 변환해야 한다.# 데이터의 개수 입력n = int(input()) 여러 개의 데이터를 입력 받기여러 개의 데이터를 입력받을 때는 보통 공백으로 구분된 데이터를 처리하게 된다. 이 경우 list(map(int, inpu..

발생한 에러(맥 사용자) 터미널에서 idle3 명령 입력** IDLE can't import Tkinter.Your Python may not be configured for Tk. **나는 맥 사용자이기 때문에 IDLE 셸 창을 띄우기 위해 터미널에서 idle3 명령을 입력했다.하지만 "IDLE can't import Tkinter. Your Python may not be configured for Tk."과 같은 에러가 발생했다. 원인 분석해당 에러는 Python의 Tkinter 모듈이 제대로 설치되지 않았거나, Python이 Tkinter 모듈을 찾지 못해서 발생하는 문제다. 에러 해결 방법1. 시스템 패키지 업데이트brew updatebrew upgrade 2. Homebrew를 이용해 Tkin..

🔥 발생한 에러Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).로컬에서는 잘 동작했지만 Netlify에 배포 후 확인해보니 다음과 같은 에러가 발생했다. 배포할 때 참고한 사이트(https://create-react-app.dev/docs/deployment#netlify) 원인 분석해당 에러에 대해 글을 쓴 여러 블로그를 찾아서 읽어보니 다음의 경우에 이러한 에러가 발생한다고 한다..env 파일이 루트에 없는 경우API 키가 잘못된 경우firebaseConfig를 export하고, 다른 JS 파일에서 import 할 경우 로컬에서는 잘 동작했기 때문에 Netlify에서 내가 설정한 환경 변수를 제대로 인식하지 못하고 있을 것 같다고 생각..

한 회사의 기술 인터뷰에서 리액트의 key에 대한 질문을 받았다. 해당 질문에 대한 대답을 하는 과정에서 그동안에 프로젝트를 진행하면서 리스트의 각 항목에 key를 할당하는 것을 너무 당연시한 것 같다는 생각이 들어 이에 대해 알아보려고 한다. 배열에서 데이터 렌더링 const people = [ { id: 0, name: 'Creola Katherine Johnson', profession: 'mathematician', }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', profession: 'chemist', }, ]; export default function List() { const listItems = people.map((person) =>..

🔥 발생한 문제 getBoards 함수는 카테고리에 해당하는 게시글 전체를 페이징 처리하기 위한 함수다. (가독성을 위해 관련 없는 코드 일부 생략) /* 페이징 처리를 위한 함수들(참고용) const getPagination = (page, size) => { const limit = size ? +size : 10; // 가져올 데이터 양 const offset = page ? page * limit : 0; // 가져올 데이터의 초기 위치값 return { limit, offset }; }; const getPagingData = (data, page, limit) => { // count: where 절, 연결 관계 등의 조건에 부합하는 레코드의 전체 개수 // rows: where 절, 연결 관..

🔥 발생한 문제 텍스트를 입력하고 엔터(Enter) 키를 누르면 목록에 새롭게 추가되고 input 창은 비워지도록 구현했는데 왠지 모르게 함수가 두 번 실행되면서 기존 텍스트의 마지막 글자가 목록에 추가되는 문제가 발생했다❗️ 원인 분석 검색해본 결과 이러한 문제는 크롬 브라우저에서 한글을 사용하는 경우에만 문제가 발생한다. (영어로 입력하면 키 이벤트가 중복으로 발생하지 ❌) 구체적으로 위 GIF를 보면 한글 입력 시 입력 중인 글자 아래 검은 밑줄이 생기는데 해당 밑줄이 있는 상황에서 키 이벤트가 발생하면 함수가 두 번 실행되는 문제가 발생한다. 한글의 경우 자음과 모음의 조합으로 만들어지는 조합 문자이기 때문에 글자가 조합 중인지 조합이 끝난 상태인지를 알 수 없어 생기는 문제이다. 🧯 해결 방법 ..

무한 스크롤(Infinite Scroll)이란? 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식이다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있다. 페이지네이션이 아닌 무한 스크롤로 구현하려는 이유❓ 상품 목록에서 상품을 보여주고자 할 때 페이지네이션, 무한 스크롤 중 무엇이 사용자 경험을 더욱 좋게 할 수 있을지 고민한 끝에 모바일 환경을 고려해서 무한 스크롤을 사용하기로 했다.(차후에 프로젝트를 반응형으로 리팩터링 할 계획🙇🏻) 또한, 다음 상품을 보기 위한 사용자의 클릭을 최소화하고 더 쉽게 다양한 상품을 볼 수 있을 것이라고 판단했다. 구현하는 과정 무한 스크롤을 구현하는 방법은 스크..

1차 프로젝트 발표를 마친 후 리팩터링 시간을 가지면서 회고를 작성해보고자 한다. 프로젝트 소개 프로젝트 주제 온라인 티켓 구매 서비스를 제공하는 쇼핑몰 프로젝트명 티켓원잇!(Ticket Want it!) 제작 기간 2023.04.17 ~ 2023.04.28(1차 제작기간, 최소 기능 구현) 2023.04.29 ~ 2023.05.20(2차 제작기간, 기능 추가 및 리팩터링) 팀 구성 담당 포지션 : 팀원, 프론트엔드 Frontend(3명) : 이성호, 윤우정, 김윤중 Backend(3명) : 유하영, 이민영, 정혜린 기술 스택 구현 기능 회원가입, 로그인, 회원정보 수정 및 탈퇴 등 사용자 관련 CRUD 상품(제품) 관련 CRUD, 카테고리 관련 CRUD, 주문 관련 CRUD 장바구니 관련 기능(장바구니..