내일배움캠프_React_5기

말 그대로 해석하자면 "오늘 내가 배운 것"이라는 뜻으로, 매일매일 공부한 내용을 기록하는 활동을 말한다.TIL을 통해 취업 시 본인의 성장과정을 증명하는 데 활용할 수 있다.TIL 작성법 같은 경우는 완벽한 정답이 정해져 있지 않으며, 일단 하루에 한 번 작성하는 습

서버(Server): 네트워크를 통해 클라이언트에게 서비스를 제공하는 시스템클라이언트(Client): 서버의 서비스를 받아 사용하는 사용자, 장치, 프로그램프론트엔드(Front-end): 사용자가 볼 수 있는 화면, UI백엔드(Back-end): 사용자가 보지 못하는

GIT: 코드 변경점을 기록 ( 버전 관리 도구 )GITHUB: 온라인 백업, 공유, 협업 도구 ( 온라인 코드 저장소 )git init: 코드 관리를 시작하는 명령어, 프로젝트 시작 시 딱 한 번만 입력하면 됨git add: 코드 저장 시 사용하는 명령어, 저장할 코

HTML: 웹페이지 뼈대CSS: 웹페이지 꾸미기JavaScript: 웹페이지에 동적인 효과 제공데이터베이스(Database): 데이터를 저장하고 관리하는 데이터의 모음관계형 데이터베이스(Relational Database): 정확한 정보를 다룰 때 사용하는 데이터베이스

pwd(print working directory): 현재 내가 작업하는 폴더 표시ls(list): 현재 위치한 폴더 안에 있는 파일들을 표시 ex) .gitls -a(list all): 숨겨진 파일도 모두 볼 수 있음cd(change directory): 폴더 위치

스레드(Thread, 쓰레드): 하나의 프로세스 안에서 다양한 작업을 담당 하는 최소 실행단위멀티스레드(Multi Thread, 멀티쓰레드): CPU의 최대 활용을 위해 프로그램을 둘 이상을 동시에 실행하는 기술도메인(Domain): 인터넷 상에서 고유한 식별자로 사용

  오늘은 TMDB API를 통해 영화 데이터를 받아오고, 그 데이터들을 카드 리스트로 보여주는 기능을 구현해 보았다.  위 코드는 카드들을 나열할 section에 카드 정보를 추가하기 위한 코드였는데 자꾸 저기서 Cannot read properties of unde

https://park-yuyeong.github.io/movie_search_site/main.html   어제는 appendChild()통해 card_section에 카드를 추가해서 추가를 위한 코드가 좀 조잡한 느낌으로 짜였었는데, 문자열 덧셈을 통해 카

웹페이지 크기에 따라 카드 리스트가 적절한 column으로 나올 수 있도록 수정했다. 테마 색상을 변수로 관리하도록 바꿔줬다. onclick과 같은 요소 프로퍼티로 이벤트 핸들러를 등록하는 것이 아닌, addEventListener 메서드를 사용하는 방법으로 수정했다.

     240429에 진행된 내일배움캠프 알고리즘 세션 특강을 정리한 내용입니다.

자식 요소의 이벤트를 부모 요소에서 처리할 수 있도록 위임하는 것이벤트 위임을 잘 다루기 위해선 event.target과 event.currentTarget의 차이를 알아야 함 event.target : 이벤트가 발생한 요소 event.currentTarget

✔️ branch 활용하기 > * Git으로 협업을 할 때 branch를 사용해보자!!* → branch === 복사본 &nbsp branch 사용법 git branch 브랜치이름 : 브랜치 생성 git switch 브랜치 이름 or git checkout 브랜치

바닐라 JS로 영화 검색 사이트 제작하기JavaScript 과정을 마무리하며, 팀원들과 함께 JS 문법 활용 능력 기르기기존 개인 과제에서 팀원 한 명의 결과물을 골라 발전시키기 (영화 상세 페이지 구현, 리뷰 관련 기능 등)   우리 팀에 UI/UX 디자이너 분이 계

  index.html을 실행할 시 항상 API를 새로 받아와서 데이터가 저장되지 않고 계속 초기화되는 현상이 발생했다.  조건문을 활용하여 로컬 스토리지에 영화 데이터가 있는 경우 API를 받아오지 않도록 수정하여 문제를 해결하였다.   메인페이지, 상세페이지에서 동

   위의 디자인 시안을 참고해서 메인 페이지에 위치할 검색창을 새로 추가했다. 기존 header 검색 입력창에 있던 autofocus 속성은 제거하고 메인페이지 검색 입력창에 autofocus 속성을 추가해줬다.  🔗 https://github.com/Eu

🍎 프로젝트 결과물 > 🔗링크: &nbsp 🍊 프로젝트 소개 팀원들과 함께 JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다. 기존의 개인 과제에서 수행한 내용의 심화 버전으로 진행합니다. 바닐라 자바스크립트를 이용하여 온전한 결과물을 제작

🔗 프로젝트 웹페이지 : https://park-yuyeong.github.io/my-todo-list/🔗 깃허브 : https://github.com/Park-Yuyeong/my-todo-list➡️ InputForm 컴포넌트의 버튼이 클릭되면

  기존 코드는 Todo List 입력폼에 빈 문자열이 입력되면, 아무런 동작이 일어나지 않도록 return;을 해주었는데, 피드백 때 사용자가 문제점을 알 수 있게 해주는 것이 좋다 해서 빈 문자열 입력을 할 경우 alert 메세지가 뜨도록 수정해주었다.   List

🍀Github 링크: https://github.com/Park-Yuyeong/challenge-class/tree/main/assignments/02assignment/pikachu 가로 10칸, 세로 10칸 규격의 공간에서 피카츄가 한 칸 씩 돌아다닐 수

     240520 알고리즘 코드 카타 과제를 정리한 내용입니다.

 props drilling : 원시적인 방법 (부모 → 자식)Context API : 리액트 내부 기능Redux : 라이브러리, 의도된 까다로움 🔗 깃허브 : https://github.com/Park-Yuyeong/account-book      ➡️

> 🍀Github 링크:

 🔗 깃허브 : https://github.com/Park-Yuyeong/account-book✈️ 웹사이트 : https://country-card-sooty.vercel.app  GET 메서드를 활용한 API 호출 상태 변화에 따라 selecte

 HomePage의 PokemonList 컴포넌트는 클라이언트 컴포넌트PokemonDetailPage의 PokemonDetail 컴포넌트는 서버 컴포넌트

"project-id" 부분에 Supabse Project Reference ID 작성🗒️docs >>> click  240703 수준별 분반 챌린지반 실습 중 TypeScript에서 Supbase 활용하기 부분을 정리한 내용입니다.

🔗 Github. 기존에는 메인 페이지가 로딩 될 때, 한 번에 151번까지의 포켓몬을 조회하도록 하였다. 이 경우, 데이터를 전부 불러오는 데 시간이 오래 걸려 페이지의 로딩 상태가 길어지고 151번 이후의 포켓몬을 조회할 수 없다는 단점이 존재했다. getNext

팬아트 부분 관련 UI팬아트 CRUD - supabase 활용Github 관리 로그인페이지회원가입페이지마이페이지메인페이지내가 구현할 부분❗ 입력 폼

팬아트 추가 시, 무슨 포켓몬의 팬아트인지 포켓몬 이름도 같이 table에 저장되면 좋을 것 같다.현재는 포켓몬 도감 번호만 저장하고 있는데, 이 경우 포켓몬 API 호출을 해야지만 포켓몬의 이름을 가져올 수 있어서 이름도 팬아트 table에 같이 저장되는 게 나중에

📁 Github Repository🔗 Link 회원가입, 로그인, 로그아웃 구현포켓몬 팬아트 CRUD 구현포켓몬 이름별, 도감번호별 검색기능커스텀 모달, toast 구현게시글 클릭 시 상세페이지 조회프로필사진, 닉네임 수정좋아요 구현좋아요한 게시물, 팬아트 쓴 게시

다이어리 데이터 CRUD 구현 - DB: Supabase 활용설문조사 페이지설문조사 UI 구현설문조사 결과 도출 로직 구현설문조사 공유 기능 구현   

path: /api/diariesHTTP method: POST path: /api/diariesHTTP method: GET path: /api/diaries/\[id]HTTP method: GET path: /api/diaries/\[id]HTTP method: P

프로젝트 명: Color Inside한 줄 설명: 감정을 색으로 표현하고 일상을 기록하는 다이어리 어플리케이션기획의도: 바쁜 일상 속에서 자신을 돌아볼 시간을 가지기 어려운 사용자들에게, 감정과 일상을 색으로 시각화하여 자아성찰을 돕고 자신을 객관적으로 이해할 수 있도

 로딩 이미지가 보일 때 로딩 메세지가 한 글자씩 나타나도록 하는 hook 구현