본문 바로가기

분류 전체보기143

2023-10-31 본 캠프 19일차 / 38일차 TIL 2023-10-31 본 캠프 19일차 / 38일차 TIL 주요진행사항 - 리액트 입문반 강의 (내일배움캠프) - 알고리즘 문제풀이 리액트 입문반 강의 (내일배움캠프) React란? UI를 구축하기 위한 JavaScript 라이브러리 - SPA(Single Page Application) 기반의 프론트엔드 개발 프레임워크 중 하나 - 컴포넌트 단위의 독립적인 블록을 이용한 개발방법 이용 - 다른 SPA 프레임워크인 AngularJS, VueJS 보다 월등한 인기 SPA란? Single Page Application 한개의 페이지로 이루어진 애플리케이션 1. 왜 사용하는가? 기존에 MPA(Multi Page Application)는 누를 때만다 페이지가 리렌더링되는 문제가 발생 SPA를 사용하면 데이터만 변.. 2023. 11. 1.
2023-10-30 본 캠프 18일차 / 37일차 TIL 2023-10-30 본 캠프 18일차 / 37일차 TIL 주요진행사항 - 유데미 강의 시청 (리액트) - 알고리즘 문제풀이 유데미 강의 시청 (리액트) 학습 진도 섹션1 ~ 섹션 3 / 42강 학습내용 리액트란? 자바스크립트 라이브러리로 사용자 인터페이스를 만들기 위해 사용된다. JavaScript와 Html 나아가 CSS 까지 하나로 묶어 사용자 인터페이스를 만든다. 리액트는 특히 싱글페이지 어플리케이션을 만들 때 사용하며, 하나의 페이지로 여러개의 페이지 처럼 구현할 수 있는 특징이 있다. 리액트는 컴포넌트 단위로 이루어져있다. 여기서 컴포넌트란 여러개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행하도록 구성한 작은 단위이다. 컴포넌트 단위로 개발을 하면, 첫째로 기능단위 개발이 가능하며, 둘째.. 2023. 10. 30.
2023-10-29 주말 TIL 2023-10-29 주말 TIL 주요진행사항 - 크롬 익스텐션 개발 (velog 테마 변경) 크롬 익스텐션 개발 (velog 테마 변경) 개요 비록 tistory블로그를 작성하고 있지만, 좋은 계기로 내배캠 분들과 velog 관련 익스텐션을 개발하게 되었다. 이미 두분이서 개발하고 계신 익스텐션에 기능 하나만 추가하였다. velog 글작성 페이지에서 테마(dark/light)모드 를 변경할 수 있는 버튼이 없다. 이전 페이지에서 적용한 테마가 적용되기 때문이다. 이러한 사소한 점을 개선하기 위해 글 작성 페이지에 테마 변경 버튼을 추가하였다. 기능 글 작성 페이지의 toolbar 부분에 테마 변경 버튼을 생성 및 테마 변경 이벤트 추가 세부내용 글 작성 페이지에 동적으로 DOM 요소를 생성하였다. 이때 .. 2023. 10. 30.
2023-10-28 주말 TIL 2023-10-28 주말 TIL 주요진행사항 - 개인과제 리펙토링 개인과제 리펙토링 리펙토링 내용 이전에 제출했던 개인과제에 대한 피드백 내용 중 태그 내부 style 선언을 class 토글로 변경하는 것과 동적 할당 시 forEach 내부에서 innerHtml이 누적 반복되는 코드를 리펙토링하였다. 변경 사항 1. 클래스 토글 개선 main.js 코드 내에서 특히 DOM의 style에서 display='none'을 지정하는 경우가 많았다. 이를 hide라는 class로 지정하여 css 속성을 주었다. 이런식으로 코드를 작성 하는 것이 유지 보수 면에서도 효율적인 코드라고 할 수 있다. 2. forEach 내부 innerHtml 개선 마지막 줄에 있던 $movieRenderContainer.innerHT.. 2023. 10. 30.
2023-10-27 본 캠프 17일차 / 36일차 TIL 2023-10-27 본 캠프 17일차 / 36일차 TIL 주요진행사항 - 팀과제 완성 팀과제 완성 기능추가 메인페이지 영화 검색 시 validation check 추가내용 이번 프로젝트는 기존 팀원 분의 개인프로젝트를 개선시키는 것이였기에 메인페이지의 코드에 대한 이해가 필요했다. 팀원분은 검색기능을 filter가 아닌 card 요소의 display를 변경시키는 형태로 코드를 작성하셨다. 따라서 diplay가 block이 적용된 카드의 갯수를 구하여 0개일 때는 "일치하는 영화가 없습니다."라는 alert를 띄었으며, input value가 없을 때 "입력된 값이 없습니다" 라는 alert를 띄었다. 느낀점 사실 개인프로젝트를 했을 때 따로 filter로 검색기능을 구현하지 않고 api를 사용했었다. 검.. 2023. 10. 27.
2023-10-26 본 캠프 16일차 / 35일차 TIL 2023-10-26 본 캠프 16일차 / 35일차 TIL 주요진행사항 - 팀과제 진행 팀과제 진행 기능 추가 동적생성된 각 카드의 수정버튼과 삭제 버튼을 클릭시, 비밀번호 비교를 진행 후 각 이벤트 실행 발생 문제 비밀번호 비교를 위한 모달창이 한개이기 때문에 이 모달창에 각 카드의 비밀번호를 전달해야하며, 비밀번호 비교가 이루어진 후 삭제버튼이였다면, 해당카드를 삭제해야하고, 수정버튼이라면 해당카드의 textArea와 이외 버튼들을 활성화 시켜야한다. 따라서 모달창에 카드에 대한 정보를 보내는 부분에서 문제가 발생하였다. 문제 해결 동적생성이 이루어 질 때 수정, 삭제 버튼에 data-key 라는 속성을 부여하여 각 리뷰카드의 key를 추가하였다. 이 버튼들이 클릭 되었을 시 모달창에도 동일하게 dat.. 2023. 10. 27.

티스토리툴바