240215 TIL React 뉴스피드 팀프로젝트 (프론트엔드) 를 하면서 백엔드 서비스는 Firebase를 활용해서 했었다-! firebase의 firestore에 게시글 posts 컬렉션을 만들고, 그 안에 게시글 하나하나 아이템을 문서로서, 데이터를 넣어야 했는데.. 그 중 한 필드로 date가 있었다. 글 쓴 시각을 date 필드값에 넣어주고, 그 시간을 read 조회하면서 꺼내와야 했다. 이 과정에서 약간 문제가 있었는데 ... ㅠㅠ 일단, 직접 date에 대한 value값을 파이어스토어에서 timestamp 를 활용해서 찍어봤더니.. 파이어스토어 통해 데이터를 가져올 때, 이 date 필드에 대한 value값이 timestamp 형태로 들어오기 때문에.. 이걸 조회하면서 페이지에 뜨게 하려면 ..

240207 TIL ✏️ React의 hook useContext 를 활용해 Context api 로 전역 상태 관리를 해보기 ! 컴포넌트간에 데이터를 전달할 때 props를 쓰는 방법을 배웠었는데, 이 경우 props-drilling이 발생할 수 있다는 게 문제점이었다. 즉 불필요하게 여러 컴포넌트를 거치며 데이터를 전달하게 될 수도 있다는 것. 상위 컴포넌트 -> (중간) 컴포넌트 -> 컴포넌트 -> 하위 컴포넌트 .. 이렇게! => Context api를 통해 이러한 문제를 해결할 수 있음 원하는 컴포넌트에서 바로 데이터를 전달받아 쓸 수가 있다 context 폴더 안에 ~ Context.jsx 파일 생성 그 안에 아래와 같이 {createContext } import 등 설정을 해주고 이걸 담은 ..

240206 화 TIL ✏️ 리액트 프로젝트를 CRA 로 만들다가, Vite 를 알게된 이후로는 훨씬 빠르다는 장점 때문에 이를 통해 프로젝트를 만들고 있는데 .. 아마도 vite 로 만들어서 생긴 문제인 듯 한 문제현상이 있었다 ㅠㅠ 로컬에서는 이미지가 잘 뜨다가, vercel을 통해 리액트 프로젝트를 배포 시에만 이미지가 뜨지 않았다. 그래서 구글링 검색을 통해 여러 시도를 해봤지만 다 실패했다. VELOG hskwon517 - 사이트 배포 후에 이미지 엑박뜨는 오류 이 velog 도 참고해서 해보고 구글링 결과대로 깃헙에 올라온 웹주소를 복사해서 해본다든지, public 폴더 안에 img 폴더를 만들어서 한다든지, (근데 public폴더안에 이미지가 있어서 경로 설정 문제가 생기기도) vite프젝은..

240201 목 TIL ✍ 수준별분반 수업 과제로 to do list 프로젝트를 보완하고 css 및 인라인 스타일링 방식 => styled components 방식으로 변경했다 전역 스타일링도 적용! (GlobalStyle.jsx) 폴더 파일 구조도 변경했다. 컴포넌트 분리 구조 약간 변경 기존의 CustomBtn 이라는 버튼 태그 컴포넌트는 불필요한거같아서 (그리고 styled component적용하려니까 약간 골치아파져서 버렸다고 한다. 하핫) 삭제하고 그냥 컴포넌트들 내에서 button태그를 각각 달아주었다. 다시 컴포넌트 분리하고 옮기는 과정에서 에러도 났다 . { } 불필요하게 중괄호가 더 들어가있어서 에러가 났다든지 (js문법사용이라 { } 를 이미 썼는데 그 안에 또 { } 사용함) - 이런..

240131 수 TIL ✍ 이전에 리액트에서 배웠던 스타일링 방식은.. 1) (일반) CSS : 원래 html에서 css파일을 import해서 꾸몄던 방식과 거의 똑같다. jsx 문법에서는 태그에 className (그냥 class아님!) 을 부여해서, css파일에서 각각의 className마다 스타일 속성을 주었다. (여기 css에서 쓰는 방식은 '객체' 형태가 아니다. 속성마다 콤마(,)로 연결하지도 않음) // *App.jsx에서 ...(생략) const App = () => { return ( ... ); }; // *위 jsx에 import된 css에서 .content { background-color: black; } 2) 인라인 스타일링 : (따로 css파일 import해서 쓰는 게 아닌,)..

240129 월 TIL ✍ 저번주에도 my todo list 과제를 하고나서 따로 개선해보고. 과제 답안과도 비교해보며 또 새로 배우고 - 베이직반 2차 과제로도 기존 내 my todo list 페이지를 보완해야 했었다. component를 분리했던 방식도, 좀 더 세분화해서 컴포넌트화해줬다. 그 과정에서 props 등 새로 다시 내려줌 또 이번에는 움짤로 만들어 보았따 !! 생각보다 만들기 어려웠다.. obs스튜디오로 직접 화면녹화하고 또 잘라서 gif로 변환하고, gif변환 사이트 프로그램도 어떤 건 안되고 어떤 건 화질이 너무 안좋게 나오고 (내가 하는 법을 잘 몰라서인걸지도).. 여튼 그래도 GifCam 프로그램 (가볍고 간편한 무료 gif짤 생성 프로그램인데, 기존의 동영상을 변환하지는 못하고,..

240126 TIL ✍ 주말에 금욜거 TIL을 적다니 좀.. 잘못됐지만 ㅎㅎ 공부 좀 하다가 TIL 적는다는게 미뤄져서ㅠㅠ 지금이라도 금욜에 배웠던 점을 정리해보기로 했다 -! 사실 요새는 아직도 저번 과제 To Do List 프로젝트를 보완하거나 했던 걸 복습하는 데에 매달리고 있다. .ㅠㅠ 다시 코드를 보니 이해가 안가는 점도 있고 다시 활용하기 어려울 것 같기도해서 확실히 해두려고 하고 있다. 또 베이직반 과제로 css- flex 를 사용해 카드 디자인을 추가하거나 기능을 추가해야해서 그것두 오늘 마무리지어야 할 듯 하당 🐋 이번에도 프로그래머스 알고리즘 문제를 정리!! 프로그래머스 - 정수 내림차순으로 배치하기 문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 ..

240125 목 TIL ✍ ... 👩‍💻 프로그래머스 문제 : 정수 제곱근 판별 (아래 링크) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr n의 제곱근이 x일 때(x의 제곱이 n) 함수에서 (x+1)의 제곱을 반환, 아니면 -1을 반환한다. 아래는 내가 문제를 푼 코드! (JS) - 기본적인 for반복문과 if문을 활용해 풀었다 function solution(n) { let answer = 0; for(let x = 1; x

240124 수 TIL ✍ 저번 강의에서 CRA 를 배웠었다. CRA 란, Create React App의 줄임말로 - 한 줄의 명령어 입력으로 React 프로젝트 개발의 필수요소를 자동으로 구성하는 방법이다. (리액트 프로젝트를 구성하는 데에 필요한 WebPack, babel, esline 등을 이 한 줄 명령어로 다 셋팅할 수 있다) 원래 이 방법,명령어로 리액트 프로젝트 생성하도록 배웠었는데 Vite('빗')로 생성하는게 더 빠르고 좋다고 한닷 !! 🐱‍🏍 CRA는 발전이 없고 정체되어서 그렇다나. .. Vite는 프론트엔드 툴로, CRA 보다 Vite를 사용하면 개발 시 속도도 빠르고 메모리도 덜 잡아먹어 좋다고 한다. (React 뿐만 아니라 다른 자바스크립트 프레임워크 -Vue, Vanilla..

240123 TIL ✍ React 기초과정 강좌를 듣고나서, my to-do list 페이지를 만들어보는 개인 프로젝트를 진행했다. 하지만 시간도 부족했고 내 이해 부족으로..?! 완료/완료취소 버튼의 기능 (완료 진행중 상태 변경) 은 시도해보다가, 결국 완전히 구현하지는 못한 채 과제를 제출했다. (+ id도 중복 가능성있게 설정했다거나 등의 문제도 많았다) 답안 설명을 보니, 원래의 추가하기 버튼에서 좀 더 생각해보면 답이 나왔을 것도 같다는 아쉬움이 있었다. 하지만 아직까진 props 활용과 component 분리, state 활용 등 실제로 프로젝트를 만들어보면서 헷갈리는 점과 의문점이 정말 많았기에.. 내게는 절대 수월하지 않았다. 😵 이번 프로젝트를 통해 한 것은, 크게 다음과 같다. 컴포넌..