프론트엔드 썸네일형 리스트형 React Project ) Slack Clone, 이모지, 첨부파일, 채팅입력 안니영~~~ 드디어 Slack Clone 마지막 시간으로 돌아온 에디터 M입니다. 다들 취미가 어떻게 되시나요?? 저는 시간날때 메이플을 하는거 같아요. 그냥 메일 코드만 보다가 아무 생각없이 뇌빼기 사냥을 하면서 머리를 비우는거 같아요. 다들 너무 공부만 하지말고 쉬엄 쉬엄 쉬면서 공부해보세요. 그럼 시작할게요~~ Slack Clone - 이모지, 첨부파일, 채팅입력 저번시간에 보셨는지 모르겠지만 Chat 컴포넌트에 메세지 출력 컴포넌트가 있었는데 const relativeTime = require('dayjs/plugin/relativeTime'); dayjs.extend(relativeTime); function ChatMessage({message, user}) { const IsImages = .. 더보기 비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part2 오류 수정 후 오류 수정.... 스케줄 프로젝트 만들기 - part2 저번일지에서 리덕스 설치 후 오류 수정하러 간다고 했던 MIN입니다. 오류를 수정하고 다시 돌아왔습니다. 하지만 아시죠... 오류를 수정하면 또 다른 오류가 나온다는 거를............ 나름 인강을 듣고 리덕스 쪽에 이해를 했다고 생각했던 제가 너무 안일했던 거 같네요... 상태관리... 아직은 저 같은 주니어한테는 어렵네요. 그럼 저번시간에 생겼던 오류가 무엇이냐면... 바로 리액트 18버전에서는 랜더링 하는 방식이 다른데 제가 무지성으로 블로그에 있는 글을 막 들고 와서 작성을 하는 바람에 생겼던 오류였더라고요..... 당연히 그 문제는 아닐 거라 생각해서 진짜 한시간 넘게 오류 찾았어요.... 이번시간에도 리덕스 때문에 데이터가 안 받아지고 데이터 저장이.. 더보기 비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part1 오류의 위기 ...... 스케줄 프로젝트 만들기 - part1 그동안 인강을 보여 공부하면서 배웠던 내용이 얼마나 내 것이 되었는지 확인하기 위해 혼자서 스케줄 프로젝트를 진행하였다. 일단 기획단에서 작업을 했는데 나는 기획을 배워본 적이 없어서 완벽한 기획은 아닐 것이다. vscode에서 drawio를 설치해 간단한 프로젝트 구상도를 기획했다. 이런 느낌의 구성으로 해야지 생각을 하고 이번엔 디자인 관련해서 서칭을 해보았다. 다양한 디자인을 서칭 하다 내가 원하는 느낌의 디자인을 찾게 되었다. https://dribbble.com/shots/15755836-Construction-Calendar Construction Calendar Happy Monday 😃 We continue to show you a part of our.. 더보기 비전공자의 프로젝트 만들기) Disneyplus App 만들기 part4 Disneyplus App 만들기 part4 firebase로 서비스 배포해보려고 한다. 프로젝트 제작할 때 프론트개발하면서 백엔드 서버까지 개발하기 위해서는 시간이 오래 걸리는데 그 부분을 해결해 주는 게 firebase이다 firebase가 전부 완벽하게 해결해 줄 순 없지만 인증, 데이터베이스, 스토리지, 푸시, 등등 꽤 많은걸 지원해준다. firebase의 연동과 관련한 자세한 내용은 구글에 검색하면 자세히 나온다. UI/UX가 잘되어 있어서 회원가입하고 버튼 몇 번 누르고 설명대로 작업하면 프로젝트와 연결된다. https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플.. 더보기 비전공자의 프로젝트 만들기) disneyplus App 만들기 part2 Disneyplus App 만들기 part2 오늘은 지난 시간에 만들던 디즈니플러스 클론코딩 배너 부분부터 작업을 진행했다. const [movie, setMovie] = useState([]); const truncate = (str, n) => { return str?.length > n ? str.substring(0, n-1) + "..." : str } {movie.title||movie.name||movie.original_nam} {movie?.videos?.results[0]?.key && play } {truncate(movie?.overview, 100)} 지난 시간에 setMovie에 영화의 정보를 저장까지 진행했는데 배너를 불러오기 위해선 setMovie에 저장되어 있는 영화정보의 .. 더보기 비전공자의 공부일지 - Mobx Mobx란?? Mobx는 Redux이후 React 개발자들이 많이 사용하는 상태관리 라이브러리라고 한다. Mobx는 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어 주는 검증된 라이브러리라고 소개되어있다. https://ko.mobx.js.org/README.html MobX에 대하여 · MobX ko.mobx.js.org Mobx 5 버전에서는 데코레이터가 권장되었다고 한다. class TodoList{ @observable todos = [] @computed get unfinishedTodoCount () { return this.todos.filter((todo) => !todo.finished).length } } 나는 지금 6 버전으로 공부하고 있지만 5 버전도 한번 알아두면 좋을 .. 더보기 비전공자의 공부일지 - Redux, Reducer, Provider, reduxToolkit Redux Props properties의 줄임말이다. Props는 구성 요소가 서로 통신하는 방법이다. Props는 상위 구성 요소에서 아래쪽으로 흐른다. 해당 값을 변경하려면 자식 관점에서 Props를 변경할 수 있으며, 부모는 내부 상태를 변경해야 한다. State 부모 컴포넌트에서 자식 컴포넌트로 data를 보내는 게 아닌 해당 컴포넌트 안에서 data를 전달할 때 사용 예를 들어서 검색 창에 글을 입력할 때 글이 변하는 것은 state로 변경 State is mutable = 조작 가능하다는 뜻이다. State가 변하면 re-render 된다. ※ 출처 : 패스트캠퍼스 (프론트엔드 웹 개발의 모든 것 초격차 패키지 Online) 리덕스 공식 홈페이지 https://ko.redux.js.org/ .. 더보기 비전공자의 공부일지 - reactContext 1. reactContext 지금까지 데이터를 보관하거나 자식요소에게 보내는 방식으로 state, props를 사용했는데 이번에는 reactContext를 사용해서 해보려고 한다. reactContext는 props, state와 다르게 reactContext의 태그에 value값을 준 상태에서 자식요소들에서 따로 선언을 해주지 않아도 바로 사용할 수 있다. import { createContext, useContext } from 'react'; const ThemeContext = createContext(null); export default function MyApp() { return ( ) } const theme = useContext(ThemeContext); ThemeContext라는 이.. 더보기 이전 1 2 다음
