Svelte에 대해서는 이런 프레임워크도 있구나 정도로 이름만 들어본 프레임워크인데 이번에 일하게 된 회사에서 Svelte를 사용한다고 해서 인프런 무료 강의를 통해 한번 입문해보기로 했다. Svelte 란? Rich Harris가 제작한 새로운 접근 방식의 프론트엔드 프레임워크이다. 첫번째 버전은 2016년에 릴리즈되었고, 2.0 버전은 2018년에 릴리즈되었는데 이 때까지는 React, Vue 등과 별로 다를게 없어서 큰 관심을 못 받았다고 한다. 2019년 릴리즈된 3.0 버전부터 많은 부분에 변화가 있었고 사람들의 관심을 끌게 되었다고 한다. 아래 URL을 들어가보면 설문조사를 통해 자바스크립트 기술들의 사용동향에 대한 설문조사 결과를 보면 현재도 꽤 인기있는 프레임워크라는 것을 알 수 있다. h..
동생이 유튜브에서 귀여운 영상을 공유해줬다. 너무 귀여워서 몇번 돌려보고나니 나도 이런 귀여운 걸 만들어보고 싶었다. 요즘 chat gpt API도 한번 써보고 싶었는데 마침 이 영상을 보고 나니 영상 맨 처음에 나오는 로봇 3개가 자기들끼리 최신 뉴스나 옛날 이야기를 주고 받는 컨셉을 가져와보면 어떨까 싶은 생각이 들었다. 대략적인 컨셉은 정했고, 그래도 이왕 토이 프로젝트로 만드는데 단순히 영상에 나온 로봇의 행동을 그대로 따라하기보단 조금 더 웹 서비스로서 의미를 추가해보자. 처음에는 일정 시간 간격으로 세 개의 로봇 중 랜덤한 하나의 로봇이 서로 최신 뉴스, 그 중에서도 좋은 뉴스를 한줄로 요약해서 이야기를 하면 나머지 두 로봇이 맞장구치는 동작을 생각했다. 귀여운 모션이랑 사운드도 추가해서 그냥..
웹 페이지를 개발할 때, 또한, defer 속성은 스크립트를 비동기적으로 로드하지만, DOMContentLoaded 이벤트가 발생할 때까지 스크립트의 실행을 지연시킨다. async 속성은 스크립트가 다운로드되는 즉시 실행되며, HTML 파싱을 차단하지 않는다.그러나 여러 스크립트가 있을 경우, 실행 순서는 보장되지 않는다는 것을 유의해야 한다. 2️⃣ 태그 내부 가장 하단에 작성하기 일반적으로 태그 의 끝부분에 스크립트를 끝 부분에 위치시키는 것과 끝 부분의 인라인 스크립트는 외부 스크립트를 끝에 배치하는 것과 비슷하게 페이지 내용이 로드된 후 스크립트가 실행되도록 보장한다. 정리하자면, 페이지의 성능 향상을 위해 큰 스크립트의 경우, 의 끝부분에 배치하거..
DFS를 공부하면서 관련 문제를 풀어보는데 분명 vscode에서 실행해보면 답은 제대로 나오는데 백준에서 제출하면 런타임 에러가 발생했다. 👿 하루코딩에서 풀이해주는 영상도 보았는데 코드에는 틀린 부분은 없는 것 같았다. 그래서 구글링해보니 파이썬에서는 재귀의 최대 깊이의 기본 설정이 1,000회로 설정되어있어서 재귀를 사용하는 경우에 런타임 에러가 발생하는 경우가 있다고 한다. 그래서 아래 코드와 같이 작성하면 재귀의 깊이를 변경해주면 에러를 해결할 수 있다. 괄호 안의 숫자를 필요에 따라 다르게 설정하면 된다. import sys sys.setrecursionlimit(10 ** 6) 그런데 나는 위 코드를 추가해주었는데도 런타임에러가 발생하였다. setrecursionlimit의 숫자를 높여도 런타..
프로그래머스 레벨1 문제인 달리기 경주 문제에서 테스트 9 ~ 13번까지 시간 초과 에러가 발생했다. 아직 문제를 풀기 전 시간복잡도를 고려하는 것이 익숙하지 않아서 생긴 에러 였다. 내가 처음 작성한 답안은 아래와 같다. def solution(players, callings): for name in callings: n = players.index(name) players[n], players[n-1] = players[n-1], players[n] return players 결과값은 정답과 맞게 나오지만 시간초과 에러가 나오는 걸로 봐서는 index() 함수나 swap해주는 부분에서 문제가 있을 것 으로 예상된다. 하지만 swap해주는 부분보다는 index() 함수가 시간복잡도에 더욱 연관이 있을 ..
📖 목차 - 문제점 - 관련 코드 살펴보기 - 의심되는 부분 - 하나씩 해결해나가보자 (오류는 해결, 원인은..?) - Next.js에서 getServerSideProps 란? - 우리는 SSR을 사용하고 있던게 아니었나? - 마무리 문제점 소셜 회원가입 시 바디토리 자체 아이디/비밀번호 입력 단계는 생략되고 바로 이름, 생년월일 등의 정보를 입력하는 단계로 넘어가야 정삭적인 동작이다. 그런데 이게 배포환경에서는 정상적으로 동작하는데 개발환경에서는 아이디/비밀번호 단계가 생략되지않고 진행되고 그대로 가입을 완료하고 DB를 확인해보면 User의 type이 naver나 kakao가 아니라 origin(일반회원가입 유형)으로 저장된다. 소셜로그인 정보 제공 동의 후 콜백URL인 /auth/login/loadi..
자바스크립트에서는 값이 항상 특정 자료형, 예를 들어 문자열이나 숫자와 같은 형태로 존재한다.그리고 자바스크립트 언어 레벨에서 값으로 취급하는 것은 무엇이든 변수에 넣을 수 있다는 원칙이 있다. 자바스크립트에서는 값으로 취급하는 범위가 매우 넓은데 숫자나 문자열뿐만 아니라 함수, 배열 등도 모두 값으로 취급한다.또한, 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며 모든 타입의 값으로 할당 및 재할당이 가능하다.let foo = 42; // foo는 Number 타입이었다가foo = "bar"; // 이제 foo는 String 타입이 되었고foo = true; // 지금은 Boolean 타입이 되었다. 이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 변할 수 있는 언어를 "동적 타입 언..
📖 목차 - 오류 - 개선사항 로컬 개발환경 및 배포환경에서 서비스를 사용할 때 발생하는 오류나 개선사항을 찾아보자. 찾는대로 계속 추가할 예정이다. 😮 오류 □ Flask 서버 연결 문제 - 로컬에서 도커로 flask 서버 돌릴 때는 정상 작동하는 걸로 보아 flask 배포에서 문제가 발생한 듯함. - 배포한 사이트에서 기록하기는 전혀 안되고, 키워드 추출은 될 때 있고 안될 때 있음. - 이거 해결 안되면 배포한 서비스에서 기록하기, 키워드 추출, 진료과목 추천 기능 안됨. □ DB 변경 및 세팅 - 현재 DB연결이 백엔드 담당했던 팀원의 계정으로 되어있는데 앞으로 계속 리팩토링하며 사용할 거니까 내 계정으로 변경하고 병원, 진료과목 데이터 등 초기 데이터들 세팅하기 □ 카카오톡 회원가입 / 네이버 ..
📖 목차 - Next.js 프로젝트 Vercel로 배포하기 - Flask 서버는 pythonanywhere로 배포하기 - 아직 완벽하지 않은 배포 상태 본격적인 리팩토링을 시작하기 전에, 지금까지 완성된 서비스를 배포시켜보기로 결정했다. 엘리스 AI트랙에서는 프로젝트 기간 동안 각 팀마다 VM을 하나씩 제공해주기 때문에 개발 완료 후 VM 환경에서 배포하여 서비스를 테스트해보긴 했지만 그 후로 VM은 종료되었다. 그래서 지금은 로컬 환경에서만 테스트가 가능한데 포트폴리오로 첨부하려면 아무래도 배포한 서비스가 있는게 좋을 것 같고, 로컬 개발환경과 배포 환경에서 나는 오류는 또 다르다는걸 프로젝트를 하면서 느꼈었기 때문에 본격적인 리팩토링에 앞서 먼저 배포에 도전해보았다. 그래도 아직 취업 전인데 유료로 ..
📖 목차 - 프로젝트 소개 - 꽤나 늦은 프로젝트 후기 & 리팩토링 결심 - 리팩토링해야 할 사항들 정리 💜 프로젝트 소개 바디토리는 음성인식을 통해 매일 나의 몸 상태를 간편하게 기록하고, 기록된 증상을 기반으로 병원을 추천해주는 건강관리 웹 서비스이다. 또한, (전국 병원들과 제휴했다는 가정 하에) 병원과의 연계를 통해 손쉬운 기록 공유 및 진료내역 관리도 가능한 서비스이다. 👇 서비스 기획 의도나 자세한 기능 소개, 작업 내역 등은 아래 노션에서 확인할 수 있다. 바디토리: 건강기록 및 병원추천 웹 서비스 A new tool for teams & individuals that blends everyday work apps into one. hihisohi.notion.site 🤔 꽤나 늦은 프로젝트..
