전체 글

서론멋사 프론트엔드 스쿨의 마지막, 파이널 프로젝트를 마쳤다. 기획부터 유지보수까지 모두 진행되는 프로젝트였기 때문에 설렘 반 긴장 반으로 시작했던 것 같다. 프로젝트의 주제는 "타로를 보는 AI" 로 정했다. 프로젝트를 진행하며기획의 중요성을 깨닫는 순간 🥲자유 주제로 프로젝트를 진행하다보니 어떤 주제로 프로젝트를 진행할지 생각해야했다. 특히 기획 단계가 가장 중요하다는 말을 많이 들어왔기에, 최대한 꼼꼼하게 준비하려고 노력했다. 기획과 디자인만 꼬박 일주일 가까이 걸렸고, 개발을 할 시간이 충분할까 하는 걱정도 있었다. 나름 기획을 철저하게 잘 했다고 생각했는데 막상 개발에 들어가고 보니 기획때 예상 못했던 문제들이 하나 둘 씩 나오기 시작했다.  "이 버튼 누르면 어떻게 되어야 하나요?" "운세 ..

PWA란 ?PWA는(progressive web app)의 줄임말로서 웹과 네이티브 앱의 기능 모두 사용할 수 있도록 만든 기능이다.  웹사이트의 장점은 빠른 접근성이다. 어플리케이션을 설치하는 것보다 더 빠르게 접근이 가능하고 링크를 통한 공유가 가능하다는 점이 웹 의 특징이다. 반면에 앱은 웹보다 더 부드러운 사용자 경험을 제공한다. 또한, 오프라인에서도 동작이 가능하며 설치가 된 이후에는 웹사이트보다 쉽게 접근이 가능하다. PWA는 이 두가지 기능을 모두 통합한 웹앱이다. 즉 웹을 앱처럼 사용할 수 있다. PWA 시작하기PWA는 manifest.json 파일과 serviceworker.js 파일만 있으면 만들 수 있다. 그러나 Vite 에서는 PWA를 쉽게 적용할 수 있는 플러그인이 있으므로 해당 ..

리액트는 컴포넌트 기반 아키텍처를 따르기 때문에 각각의 컴포넌트는 다른 컴포넌트의 상태에 접근할 수 없다. 하지만 부모 - 자식 관계는 props를 통해 상태를 전달할 수 있다. 리액트는 "단방향 데이터 흐름" 을 따르기 때문에 부모에서 자식으로 데이터 전달이 가능하지만, 자식에서 부모로 데이터 전달은 불가능하다. 사실 부모에서 콜백함수를 전달한다던지, 상태를 끌어올리는 방법을 통해 어느 정도 구현이 가능하지만 이 또한 컴포넌트가 많아진다면 드릴링의 문제가 생길 수 있다. 그래서 상태관리 라이브러리가 탄생했다. 상태관리 라이브러리는 전역의 저장소에서 상태를 관리할 수 있도록 돕는다. 이 저장소는 어느 컴포넌트에서도 접근 및 제어가 가능하다. 그 중 대표적인 라이브러리가 바로 zustand와 redux이..

훅(hook) 이란?리액트 16.8버전부터 새로 도입된 개념이다. hook은 class 를 사용하지 않고도 리액트의 기능을 사용할 수 있게 도와준다.기존 리액트의 컴포넌트는 클래스를 이용해 상태 관리를 했었지만 훅이 도입된 이후 보다 간편하게 상태 관리를 할 수 있게 되었다. 기존 리액트의 상태관리class Counter extends Component { // 상태 초기화 state = { count: 0, }; // 버튼 클릭 시 호출되는 핸들러 메서드 handleClick= () => { this.setState({ count: this.state.count + 1 }); // 상태 업데이트 }; render() { return ( 현재 카운트:..

서론최근 리액트를 다시 공부하며 명령형과 선언형 프로그래밍에 대해서 공부했다. 이 두 가지 프로그래밍 패러다임은 코드를 작성하는 방식뿐만 아니라 문제를 해결하는 사고방식에서도 큰 차이를 보인다. 특히 리액트와 같은 라이브러리는 선언형 프로그래밍의 장점을 극대화하여 개발자의 생산성을 높이고, 코드의 가독성을 개선하는 데 초점을 맞춘다.명령형과 선언형 프로그래밍이 구체적으로 무엇을 의미하는지, 그리고 실제로 코드에 어떻게 적용되는지 궁금해졌다. 이번 글에서는 이 두 가지 프로그래밍 패러다임의 개념과 차이점, 그리고 각각의 장단점에 대해 알아보고자 한다.명령형 프로그래밍 vs 선언형 프로그래밍명령형 프로그래밍은 어떤 일을 하는 방법이고 선언형은 무엇을 하는가에 더 가깝다. Tyler McGinnis  위 문장..

서론바닐라 JS 를 다시 한 번 공부하며 프로젝트 기간을 가졌다. 처음 프로젝트를 시작하며 충분히 모든 기능을 완성할 수 있을거라 생각했지만 막상 끝내고 보니 아쉬운 점이 너무 많았다. 다음에는 이 경험을 바탕으로 조금 더 진지하게 프로젝트를 진행할 생각이다.  깃허브 바로가기링크 바로가기 좋았던 점물론 좋았던 점도 정말 많았다. 우선 문서화를 하는 방법에 대해 배웠고, 협업에 대한 어느 정도의 틀을 배운 것 같다. 그 동안은 지인들과 프로젝트를 하거나 개인 프로젝트를 하다보니 코딩 컨벤션이라던지, 진행상황을 굳이 알릴 필요 없이 작업을 했었다. 그런데 이번 프젝을 통해 협업에 대한 생각을 다시 한 번 해 볼 수 있는 기회가 되었던 것  같다.  또 팀원간의 호흡도 좋았다. 처음 조장이라는 역할을 가지고..

정보처리 기사 실기 합격 후기 입니다. 필기는 1회에 봤는데 실기는 미루고 미루다가 3회에 보게 되었네요. 🥲 아무튼 제가 했었던 공부법과 합격 후기에 대해 작성하려 합니다.   공부 방법 및 기간사실 필기때 공부한건 다 잊어버렸고 다시 처음부터 공부하자는 생각으로 시작했습니다. 총 공부했던 기간은 약 3주정도 잡았고 평일은 저녁 8시부터 10시까지 2시간씩, 주말에는 아침부터 저녁까지 8시간 정도 했습니다. 처음에는 필기랑 비슷하게 문제랑 답만 외우자는 마음으로 시작했다가 기출을 보고 바로 흥달쌤 인강 결제 했습니다. (흥달쌤 인강 진~~~짜 추천합니다 ㅎㅎ)  일단 이전 회차에서 나오긴 하지만 생각보다 비율이 크지 않고 애초에 코드 문제 같은 경우는 같은 문제가 나올 수가 없기 때문에 기초를 알고 ..

자바스크립트는 ES6 이전과 이후로 나뉜다. ES6이후 JS의 많은 부분이 바뀌었는데 함수 부분도 마찬가지이다. 먼저 이전의 함수는 생성자함수와 일반 함수의 구분이 없었다. 따라서 모든 함수는 일반함수로서 호출할 수 있으며 생성자 함수로서 new 키워드를 사용해 호출할 수 있었다. 이러한 유동성은 성능면에서도 큰 문제를 갖는다. 바로 콜백함수 또는 객체에 바인딩 된 함수 모두 cunstructor를 갖는다는 점이다. 이는 불필요한 프로토타입 객체를 생성하게 되며, 함수의 명확한 구분없이 사용되는 점은 코드의 가독성에도 큰 영향을 미친다.  따라서 ES6 이후 함수의 사용 목적에 따라 세가지 종류로 나누었다. 구분constructorprototypesuperarguments일반함수OOXO메서드XXOO화살표..

버그를 해결했다. 원인을 찾아보니 크롬을 실행할 때 음원이 나오지 않아도 AudioContext 객체를 생성할 수 없다. 그래서 즉시 실행되던 함수를 묶어 playMusic 에서 실행하도록 바꾸었더니 해결됐다.  다음으로 프로그래스 바를 만들었다. 내용을 요약하자면 오디오 timeupdate 이벤트 리스너를 이용해 내부 함수가 계속해서 실행될 수 있게 했다. 그 뒤로는 현재길이 / 전체길이 를 백분위로 환산한 뒤 프로그래스 바의 width 길이에 대입했다. 재생 시간에 따른 프로그래스 바 크기 조절실행코드 audio.addEventListener("timeupdate", (e) => { // console.log(e); // 프로그래스 바 진행 리스너 const currentTime =..