제인의 블로그

피그마 어렵당... 일단 대략적으로 `SUPABASE` 설정과 `FIGMA`완료사실 나혼자 하는 프로젝트라영웅 제인 빌런 제인 ㅋㅋㅋㅋㅋ머릿속에 있으니까가보자고! 하는 생각만 드는데내가 가장 좋아하고 애착을 가진 게임 중 하나인 RIOT사의 LEAGUE OF LEGEND이게임하면서 결혼도 하고 애기도 가지고 울기도 하고 웃기도 하고 여튼 10년째 이게임을 하는중인데저번 프로젝트는 병원에서 하던 프로젝트이다 보니 아무래도 메모리 부족으로 TAILWIND나 이모저도 여러부분에서 부족함을 느끼고 보완해보고싶다. 라는 목표로 시작하게 되었다. 나는 롤토체스도 좋아하고 롤도 좋아하는 입장으로 써한 페이지에서 왜 전적검색이 동시에 왜 안될까 라고 생각하고 검색을 해봤더니 API가 달라서 그렇다는것.그렇다면 간편하게..

나 메인페이지 담당 :) 메인 페이지  + AI API 불러오는게 목표!목표 완성!부족한점 : 답이 보인다(머지하면서 뭔가 충돌생긴듯) / 자세히 보기를 누르면 디테일 페이지로 향해야 하지만 답이나옴../개그 작성하기 밑에 여백이 없...눼? 여백 주기 ^_^...내일 반드시 완성해야해 나.... PPT 만들고, 노션정리, 대본만들기 등등이 날 기다리구 있다굿..? 로그인 브랜치랑....... 머지하다가 말아먹었다.....ㅎ....ㅎ.......ㅎ아 관두고싶당...1. 프로젝트 소개React와 Supabase를 활용한 유머 공유 웹 애플리케이션 개발을 진행했습니다. 주요 기능으로는 유머 추천, 사용자 리뷰 카드, 그리고 Supabase와 연동된 데이터 관리 기능이 포함되었습니다. --- 2. 주요 개발 ..

# Styled-Components를 활용한 반응형 React 홈페이지이 프로젝트는 `styled-components`를 사용하여 디자인한 반응형 React 홈페이지입니다. 주제는 "아재슐랭"이라는 리뷰 플랫폼이며, 글로벌 스타일, Hero 섹션, 리뷰 카드 레이아웃, 그리고 푸터까지 모두 `styled-components`로 구현했습니다. 아래에서 주요 구성 요소와 코드를 살펴보겠습니다. 1. 글로벌 스타일 정의`createGlobalStyle`을 활용하여 프로젝트 전반에 적용될 글로벌 스타일을 정의했습니다. 기본 스타일 초기화와 폰트, 색상 등을 설정합니다. ```javascriptimport styled, { createGlobalStyle } from 'styled-components';const..

Q. ## **Day 3: 메달 집계 수정 및 삭제 기능 구현** ### 1. **메달 집계 업데이트 기능** - 이미 추가된 국가의 메달 수를 수정할 수 있는 기능을 추가합니다. - **구체적인 구현**: - 수정하려는 국가의 데이터를 입력한 후 [업데이트] 버튼을 클릭하면 해당 국가의 메달 수가 변경됩니다. - 입력한 나라 이름을 기반으로 리스트에서 해당 국가를 찾아 수정합니다. ### 2. **메달 집계 삭제 기능** - 각 나라 옆에 삭제 버튼을 추가하여, 클릭 시 해당 국가의 메달 집계가 리스트에서 제거되도록 합니다. - **구체적인 구현**: - filter 메서드를 활용하여 선택된 국가를 제외하고 나머지 국가들로 리스트를 재구성합니다. ### 3. **최종 확인 및 코드 정리** - 작성한 ..

" ## **Day 1: 기본 레이아웃 설정 및 입력 폼 구현** ### 1. **프로젝트 셋업** - Vite로 리액트 프로젝트를 셋업하고, 리액트 어플리케이션을 한번 켜보세요! - Vite 셋업에 어려움이 있다면 공식 문서를 참고하세요: [Vite 공식문서](https://ko.vitejs.dev/guide/). ### 2. **기본 레이아웃 구성** - App.jsx에 기본 레이아웃을 설정하여 UI의 뼈대를 만듭니다. - 정렬을 좀 연습해 볼게요. 어플리케이션이 항상 가로 기준으로 화면 중앙에 배치되게 합니다. - 이후, 백그라운드 컬러, 상단 여백 등등 기본적인 레이아웃을 더 넣어줍니다.. ### 3. **입력 폼 UI 구현** - 나라 이름, 금메달, 은메달, 동메달 입력 필드를 추가하고 제출 ..

1. 동기 / 비동기 비교동기와 비동기 코드 비교하기        1) 동기 코드console.log("손님1 커피 주문");console.log("손님1 커피 제조 완료");console.log("손님2 커피 주문");console.log("손님2 커피 제조 완료");        2) 비동기 코드console.log("손님1 커피 주문");setTimeout(() => { console.log("손님1 커피 제조 완료");}, 2000); // 2초 후에 실행console.log("손님2 커피 주문");setTimeout(() => { console.log("손님2 커피 제조 완료");}, 1000); // 1초 후에 실행 2. Promise 사용해보기  1. Promise로 비동기 작업 처리하기..

[ 용어설명 ]동기 : 작업이 순차적으로 처리되며, 이전 작업이 완료될 떼까지 다음 작업을 시작하지 않는 방식비동기 : 작업이 병렬적으로 처리되어, 결과를 기다리지 않고 다른 작업을 동시에 처리할 수 있는 방식논블로킹 : 작업이 실행되는 동안 다른 작업의 진행을 막지 않는 방식. 비동기 작업을 통해 구현됨이벤트 루프 : 자바스크립트의 비동기 작업을 관리하고, 콜백 큐에 있는 작업을 콩 스택에 추가해 실행하는 매커니즘프로미스 : 비동기 작업의 성공 또는 실패를 나타내는 자바스크립트 객체로, 비동기 작업의 결과를 처리하는 데 사용됨async / await : 프로미스를 보다 직관적으로 처리할 수 있게 해주는 자바스크립트 구문으로, 비동기코드를 동기 코드처럼 작성할 수 있게 함.[ 학습내용 ]   동기동기 방..

HEAD는 속성을 뜻하고BODY는 실제 보여질 내용을 말합니다. Body안에 들어가는 대표적인 요소 "구역태그"div 태그 : 구역을 나누는것P 태그 : paraghraph (절, 문단)ul 태그 : unordered list (순서없는 태그들)li 태그 : bullet point "콘텐츠태그"h1 태그 : 제목을 나타내는 태그h2 태그 : 소제목h3 ~ h6 태그 : 소제목 이하의 제목들span 태그 : 글자를 꾸밀때 쓰는 포장지 같은 태그a 태그 : 하이퍼링크를 나타내는 링크img 태그 : 이미지를 나타내는 링크input 태그 : 사용자로부터 입력받을 때 쓰는 input 태그button 태그 : 버튼을 만드는 태그textarea 태그 : 조금 더 긴 문장을 받을 수 있는 태그 나는 구역을..

[프로그래밍과 웹개발의 이해]프로그래밍의 개념개발자의 종류 코딩 → 프로그래밍 이해        → 컴퓨터에게 일을 시키려면 어떻게 해야 할까?             ex) 파이썬 검색 → 검색 결과를 보여줘라고 일을 시키는 것                                                                 ↓ (어떤 원리?)                                            기계가 정해진 순서대로 일을 하기 때문            user가 '검색창에 특정 단어를 입력하고 엔터를 치면 너는 검색결과를 찾아다가 그 사람에게 보여줘.'            라고 하는 정해진 규칙에 따른 일을 순서대로 진행              → 프로그램   ..