소스 코드 JavaScript30/05 - Flex Panel Gallery/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I Learnedtransition 활용패널을 클릭 시 위 아래에서 글자가 나타나게 하는 트랜지션이다. 패널 요소 클릭 시 open-active 클래스가 토글되도록 했고, 디폴트 상태에서는 transform 속성의 값으로 translateY(+/-100%)를 주어 해당하는 요소를 숨겨두었다가 open-activ..

소스 코드 JavaScript30/04 - Array Cardio Day 1/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedArray.prototype.reduce()reduce 메서드는 사용할 때마다 사용법이 헷갈리는데 이번 기회에 확실히 알아두게 되었다. reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 콜백 함수의 첫 번째 인수로 accumu..

소스 코드 JavaScript30/03 - CSS Variables/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedDocument.documentElementDocument.documentElement 읽기 전용 속성은 문서의 루트 요소를 나타내는 Element를 반환한다. HTML 문서를 예로 들면  요소를 반환한다.function handleUpdate() { const suffix = this.dataset...

소스 코드 JavaScript30/02 - JS and CSS Clock/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedDate객체와 setInterval 함께 사용하기Date 객체와 setInterval 메서드 각각에 대해서는 이해하고 있었지만, setInterval의 첫 번째 인수로 전달하는 콜백 함수 내에서 Date객체를 적절히 활용하면 이렇게 시계 인터페이스도 구현해볼 수 있다니 흥미롭다. const seco..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다. http 통신은 json-sever를 사용하는 선에서 마무리하려고 했지만 욕심이 생겨서 검색해보며 express를 사용해 Node.js 백엔드 서버를 만들어보았다.   [Express.js] Express를 사용해 간단한 백엔드 서버 API 구축하기바닐라 자바스크립트로 투두리스트를 만들어보고 있다. 투두리스트에 대한 데이터는 로컬 스토리지에 저장해 관리하는 방식으로 만들다가, fetch API를 사용해 http 통신을 구현하고 싶어 직접 서parkjisun.tistory.com 코드는 완성이 되었으니 백엔드 서버를 배포를 해야 할텐데, 간단하게 배포할 수 있는 호스팅 서비스를 검색해보다가 Heroku를 알게 되었는데 유료로 전환되었다고 해서 heroku..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다. 투두리스트에 대한 데이터는 로컬 스토리지에 저장해 관리하는 방식으로 만들다가, fetch API를 사용해 http 통신을 구현하고 싶어 직접 서버를 구축하지 않아도 사용할 수 있는 json-server 라이브러리를 사용해 CRUD를 구현했다.  원래는 여기까지만 해볼 생각이었지만, 괜히 욕심이 든다. 어차피 투두리스트 별 것 없는데 간단한 CRUD 백엔드 코드는 나도 만들어볼 수 있지 않을까 싶어 Express를 사용해 간단한 백엔드 서버를 만들어보게 되었다. 데이터베이스는 우선 뒤로 하고 우선은 코드 내에서 배열로 목데이터를 관리하기로.const todos = [ { id: 1, checked: false, todo: '자바스크립트 ..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다. 하나씩 구현을 하다 보니 index.js에 너무 여러 가지의 함수가 혼재하게 되었고, 정리를 해야겠다 싶어 코드를 기능 단위로 파일을 만들어 분리를 해야겠다 싶었다. 그렇게 기존 index.js에 작성되어 있던 이벤트 핸들러 함수들을 handle.js 파일에 하나씩 이동시키기 시작했는데, 그러던 중 마주한 에러 메시지. Uncaught TypeError: Assignment to constant variable 오류가 난 곳을 찾아가보니 함수 기능 분리를 위해 만든 handle.js 파일 내에 필터링한 todos 배열을 기존 todos 배열에 재할당하며 업데이트를 하는 코드에 문제가 있었다. // handle.jstodos = todos.filter((..

3주 간의 프로젝트가 마무리되었다. The-Julge(더줄게)라는 프로젝트이고, 급하게 일손이 필요한 자리에 더 많은 시급을 제공하여 아르바이트생을 빠르게 구할 수 있는 서비스이다. 네 명의 프론트엔드 팀원들과 함께 열심히 3주를 불태워보았다.  GitHub - jisunipark/the-julge: 급하게 일손이 필요한 자리에 더 많은 시급을 제공하여 아르바이트생을급하게 일손이 필요한 자리에 더 많은 시급을 제공하여 아르바이트생을 빠르게 구할 수 있는 서비스 - jisunipark/the-julgegithub.com 프로젝트를 통해 배운 점몰입이번 프로젝트을 한 단어로 정리해야 한다면 "몰입"이라 하겠다. 프로젝트에 완전히 스스로가 파묻힌 것처럼 3주 간 내 세상은 온통 주황색 "더줄게"로 가득한 느낌..