공부 썸네일형 리스트형 React Project ) Slack Clone, 회원가입 페이지, 로그인 페이지 만들기, redux 안녕하세요. 프론트 공부중인 비전공자 에디터 M입니다. 회사 업무와 여려가지 이유로 잠시 블로그에 글을 작성하지 못했는데 포기하지 않고 다시 블로그 글을 작성하러왔습니다. 그럼 제가 블로그를 잠시 하지 않는동안 만들었던 Slack Clone의 코드 리뷰를 해보려고 합니다. 리뷰에 앞서 git주소를 알려드릴께요. 자세한 코드와 package들은 git을 보시면 됩니다. https://github.com/piwe2004/slack-clone GitHub - piwe2004/slack-clone Contribute to piwe2004/slack-clone development by creating an account on GitHub. github.com 그럼 시작해 볼께요. GOGO~~ React Proj.. 더보기 비전공자의 CS공부 - Web, 패스트캠퍼스 CS공부 - Web 오늘은 웹브라우저의 동작방식에 대해 공부를 해보려고 한다. 우리가 웹사이트 접속할 때는 웹 브라우저 프로그램을 사용하고 웹브라우저는 다음과 같은 기능을 수행한다. 웹 페이지를 서버에 요청(request) 하여 서버의 응답(response)을 웹 문서 형태로 받는다. 받은 웹문서(HTML, CSS, JS 등)를 렌더링 하여 모니터 화면에 웹페이지를 표시한다. 대표적인 브라우저 프로그램은 Chrome, Firefox, Safari 가 있습니다. 브라우저가 서버(Server)에서 서비스를 요청하고 사용자(Client)에게 출력을 해준다. 내가 생각하는 Server와 Client는 식당과 같다고 생각이 된다. 손님이 음식을 주문하고 요리사가 음식을 만들고 손님에게 전달을 해주는 그 과정에서 .. 더보기 비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - 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의 모바일 플.. 더보기 비전공자의 공부일지 - TypeScript TypeScript???? 1. Type의 종류 Primitive tpyes String : 문자열을 나타낸다 Number : 숫자를 나타낸다. Boolean : true(참)와 false(거짓)을 나타낸다. null : 하나의 값을 가진다. null undefined : 하나의 값을 가진다. 초기화되지 않은 변수의 기본값 symbol : 고유한 상수의 값을 나타낸다. Object tpyes function : 함수를 나타낸다. array : 배열을 나타낸다. classes : 클래스를 나타낸다. object : 객체를 나타낸다. 1. TypeScript 추가 제공 type Any 프로젝트를 만들 때 잘 알지 못하는 타입을 표현해야 될 수도 있는데 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러.. 더보기 비전공자의 공부일지 - NextJS NextJS란 React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. 리액트로 개발할 때 SPA(single page application)을 이용하며 CSR(client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)인데 CSR을 하면 첫 페이지에서 빈 html을 가져와 JS해석하여 화면을 구상하기 때문에 포털사이트에서 거의 노출되지 않는다. 하지만 NextJS에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다. 리액트에서도 SSR을 지원하지만 구현하기에 괸.. 더보기 비전공자의 공부일지 - Zustand 맛보기 Zustand란?? Zustand는 간단한 상태관리 솔루션이라고 한다. Zustand는 독일어로 State(상태)를 뜻하고 Jotai 및 React 스프링 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션이다. 보일러 플레이트를 많이 최소화시켰다고 한다. 상용구 코드 감소 Zustand는 상태 값이 변경될 때만 구성 요소를 렌더링 하고 구성 요소를 다시 렌더링 하지 않고도 상태 변경을 처리할 수 있는 경우가 많다. 상태 관리는 중앙 집중식이며 단순하게 정의된 작업을 통해 업데이트된다. 이 부분에서 Redux와 유사하지만 개발자가 상태를 처리하기 위해 Reducer, Action 및 Dispatch를 만들어야 하는 Redux와 달리 Zustand는 훨씬 쉽다. Hooks를 상용하여 상태를 상용한다. 컨.. 더보기 이전 1 2 다음
