[Project] tAIro 프로젝트 회고
·
Project
서론멋사 프론트엔드 스쿨의 마지막, 파이널 프로젝트를 마쳤다. 기획부터 유지보수까지 모두 진행되는 프로젝트였기 때문에 설렘 반 긴장 반으로 시작했던 것 같다. 프로젝트의 주제는 "타로를 보는 AI" 로 정했다. 프로젝트를 진행하며기획의 중요성을 깨닫는 순간 🥲자유 주제로 프로젝트를 진행하다보니 어떤 주제로 프로젝트를 진행할지 생각해야했다. 특히 기획 단계가 가장 중요하다는 말을 많이 들어왔기에, 최대한 꼼꼼하게 준비하려고 노력했다. 기획과 디자인만 꼬박 일주일 가까이 걸렸고, 개발을 할 시간이 충분할까 하는 걱정도 있었다. 나름 기획을 철저하게 잘 했다고 생각했는데 막상 개발에 들어가고 보니 기획때 예상 못했던 문제들이 하나 둘 씩 나오기 시작했다.  "이 버튼 누르면 어떻게 되어야 하나요?" "운세 ..
[PWA] React + Vite 프로젝트 PWA 적용
·
etc/이것저것
PWA란 ?PWA는(progressive web app)의 줄임말로서 웹과 네이티브 앱의 기능 모두 사용할 수 있도록 만든 기능이다.  웹사이트의 장점은 빠른 접근성이다. 어플리케이션을 설치하는 것보다 더 빠르게 접근이 가능하고 링크를 통한 공유가 가능하다는 점이 웹 의 특징이다. 반면에 앱은 웹보다 더 부드러운 사용자 경험을 제공한다. 또한, 오프라인에서도 동작이 가능하며 설치가 된 이후에는 웹사이트보다 쉽게 접근이 가능하다. PWA는 이 두가지 기능을 모두 통합한 웹앱이다. 즉 웹을 앱처럼 사용할 수 있다. PWA 시작하기PWA는 manifest.json 파일과 serviceworker.js 파일만 있으면 만들 수 있다. 그러나 Vite 에서는 PWA를 쉽게 적용할 수 있는 플러그인이 있으므로 해당 ..
[상태관리] Zustand란?
·
Front end/React
리액트는 컴포넌트 기반 아키텍처를 따르기 때문에 각각의 컴포넌트는 다른 컴포넌트의 상태에 접근할 수 없다. 하지만 부모 - 자식 관계는 props를 통해 상태를 전달할 수 있다. 리액트는 "단방향 데이터 흐름" 을 따르기 때문에 부모에서 자식으로 데이터 전달이 가능하지만, 자식에서 부모로 데이터 전달은 불가능하다. 사실 부모에서 콜백함수를 전달한다던지, 상태를 끌어올리는 방법을 통해 어느 정도 구현이 가능하지만 이 또한 컴포넌트가 많아진다면 드릴링의 문제가 생길 수 있다. 그래서 상태관리 라이브러리가 탄생했다. 상태관리 라이브러리는 전역의 저장소에서 상태를 관리할 수 있도록 돕는다. 이 저장소는 어느 컴포넌트에서도 접근 및 제어가 가능하다. 그 중 대표적인 라이브러리가 바로 zustand와 redux이..
React Hook 정리 (useState, useEffect)
·
Front end/React
훅(hook) 이란?리액트 16.8버전부터 새로 도입된 개념이다. hook은 class 를 사용하지 않고도 리액트의 기능을 사용할 수 있게 도와준다.기존 리액트의 컴포넌트는 클래스를 이용해 상태 관리를 했었지만 훅이 도입된 이후 보다 간편하게 상태 관리를 할 수 있게 되었다. 기존 리액트의 상태관리class Counter extends Component { // 상태 초기화 state = { count: 0, }; // 버튼 클릭 시 호출되는 핸들러 메서드 handleClick= () => { this.setState({ count: this.state.count + 1 }); // 상태 업데이트 }; render() { return ( 현재 카운트:..
명령형 vs 선언형 프로그래밍의 패러다임
·
etc
서론최근 리액트를 다시 공부하며 명령형과 선언형 프로그래밍에 대해서 공부했다. 이 두 가지 프로그래밍 패러다임은 코드를 작성하는 방식뿐만 아니라 문제를 해결하는 사고방식에서도 큰 차이를 보인다. 특히 리액트와 같은 라이브러리는 선언형 프로그래밍의 장점을 극대화하여 개발자의 생산성을 높이고, 코드의 가독성을 개선하는 데 초점을 맞춘다.명령형과 선언형 프로그래밍이 구체적으로 무엇을 의미하는지, 그리고 실제로 코드에 어떻게 적용되는지 궁금해졌다. 이번 글에서는 이 두 가지 프로그래밍 패러다임의 개념과 차이점, 그리고 각각의 장단점에 대해 알아보고자 한다.명령형 프로그래밍 vs 선언형 프로그래밍명령형 프로그래밍은 어떤 일을 하는 방법이고 선언형은 무엇을 하는가에 더 가깝다. Tyler McGinnis  위 문장..
[Project] EUID 어플리케이션 프로젝트
·
Project
서론바닐라 JS 를 다시 한 번 공부하며 프로젝트 기간을 가졌다. 처음 프로젝트를 시작하며 충분히 모든 기능을 완성할 수 있을거라 생각했지만 막상 끝내고 보니 아쉬운 점이 너무 많았다. 다음에는 이 경험을 바탕으로 조금 더 진지하게 프로젝트를 진행할 생각이다.  깃허브 바로가기링크 바로가기 좋았던 점물론 좋았던 점도 정말 많았다. 우선 문서화를 하는 방법에 대해 배웠고, 협업에 대한 어느 정도의 틀을 배운 것 같다. 그 동안은 지인들과 프로젝트를 하거나 개인 프로젝트를 하다보니 코딩 컨벤션이라던지, 진행상황을 굳이 알릴 필요 없이 작업을 했었다. 그런데 이번 프젝을 통해 협업에 대한 생각을 다시 한 번 해 볼 수 있는 기회가 되었던 것  같다.  또 팀원간의 호흡도 좋았다. 처음 조장이라는 역할을 가지고..
2024 3회차 정보처리기사 실기 합격 후기
·
etc/이것저것
정보처리 기사 실기 합격 후기 입니다. 필기는 1회에 봤는데 실기는 미루고 미루다가 3회에 보게 되었네요. 🥲 아무튼 제가 했었던 공부법과 합격 후기에 대해 작성하려 합니다.   공부 방법 및 기간사실 필기때 공부한건 다 잊어버렸고 다시 처음부터 공부하자는 생각으로 시작했습니다. 총 공부했던 기간은 약 3주정도 잡았고 평일은 저녁 8시부터 10시까지 2시간씩, 주말에는 아침부터 저녁까지 8시간 정도 했습니다. 처음에는 필기랑 비슷하게 문제랑 답만 외우자는 마음으로 시작했다가 기출을 보고 바로 흥달쌤 인강 결제 했습니다. (흥달쌤 인강 진~~~짜 추천합니다 ㅎㅎ)  일단 이전 회차에서 나오긴 하지만 생각보다 비율이 크지 않고 애초에 코드 문제 같은 경우는 같은 문제가 나올 수가 없기 때문에 기초를 알고 ..
ES6 함수의 추가 기능
·
Front end/JavaScript
자바스크립트는 ES6 이전과 이후로 나뉜다. ES6이후 JS의 많은 부분이 바뀌었는데 함수 부분도 마찬가지이다. 먼저 이전의 함수는 생성자함수와 일반 함수의 구분이 없었다. 따라서 모든 함수는 일반함수로서 호출할 수 있으며 생성자 함수로서 new 키워드를 사용해 호출할 수 있었다. 이러한 유동성은 성능면에서도 큰 문제를 갖는다. 바로 콜백함수 또는 객체에 바인딩 된 함수 모두 cunstructor를 갖는다는 점이다. 이는 불필요한 프로토타입 객체를 생성하게 되며, 함수의 명확한 구분없이 사용되는 점은 코드의 가독성에도 큰 영향을 미친다.  따라서 ES6 이후 함수의 사용 목적에 따라 세가지 종류로 나누었다. 구분constructorprototypesuperarguments일반함수OOXO메서드XXOO화살표..
[JavaScript] 음악 플레이리스트 프로그래스바 제작 (3)
·
Front end/JavaScript
버그를 해결했다. 원인을 찾아보니 크롬을 실행할 때 음원이 나오지 않아도 AudioContext 객체를 생성할 수 없다. 그래서 즉시 실행되던 함수를 묶어 playMusic 에서 실행하도록 바꾸었더니 해결됐다.  다음으로 프로그래스 바를 만들었다. 내용을 요약하자면 오디오 timeupdate 이벤트 리스너를 이용해 내부 함수가 계속해서 실행될 수 있게 했다. 그 뒤로는 현재길이 / 전체길이 를 백분위로 환산한 뒤 프로그래스 바의 width 길이에 대입했다. 재생 시간에 따른 프로그래스 바 크기 조절실행코드 audio.addEventListener("timeupdate", (e) => { // console.log(e); // 프로그래스 바 진행 리스너 const currentTime =..