항해 중267 [미니프로젝트] 1일차 오늘 한 일 1. 프로젝트 틀 잡고, elements 폴더에 Button, Input, Grid, Text 구현 2. 모달창을 사용해서 로그인 페이지 구현 3. disabled를 사용해서 아이디, 비밀번호 중 하나라도 입력 하지 않았을 시 버튼 비활성화 4. 로그인 기능 구현 + 로그인에서 회원가입 클릭 시 화면 전환 5. 회원가입 버튼 클릭 시 modal을 유지하면서 이동 6. 헤더 구현 (로그인, 회원가입 버튼 추가 및 연결) 7. 헤더 구현 (로그인 전, 로그인 후 보여지는 버튼 다르게 구현) 8. 로그아웃 구현 9. 모달창 바깥 화면 눌렀을 때 안나가지는 문제 해결 10. Header에서 로그인/회원가입 처음만 모달창 띄워주고 그 이후로는 안띄워 지는 문제 해결 고민 했던 부분 1) 헤더 -> 로.. 2021. 12. 6. [미니프로젝트] 1일차 1. 노션 생성 / 카톡방 개설 https://www.notion.so/c96fcf057d404cb98d18c01cb404aaa7 미니프로젝트 공지사항 www.notion.so 2. 주제 선정 : 익명 고민 상담 플랫폼 3. 와이어프레임 설계 + 기능 구상 + DB 설계 4. API 설계 : 노션에 API 부분 참고 하면 된다. 5. 프론트 회의 1) git 어떻게 사용 할 지 : repository 생성 -> branch 각각 생성해서 나눌 예정 + branch 어떻게 생성하고 push 하는 지 참고 2021.11.04 - [더 알아보기/팁] - Git, Github로 회사에서 협업 하는 방법 Git, Github로 회사에서 협업 하는 방법 1. github에 프로젝트를 다운 받는다 2. 폴더를 하나 .. 2021. 12. 6. [WIL] 5주차 → 좋은 개발자란?, 전역 상태 관리, CSS 같이 일하기 좋은 개발자란?? 신입으로써 무조건 잘해야지 보다는 안좋은 습관을 하지 않는 게 좋은 개발자라고 생각 했기 때문에 관련된 내용을 정리 해봤습니다. 1) 질문을 너무 많이 한다. (노력 없이 구글에 검색 하듯이 질문을 한다.) 2) 침묵한다. (물어보기 미안해서, 물어보기 싫어서 안물어 보고 일정은 다 썼는 데 최악의 결과물을 낸다면 최악이다.) -> 빠른 판단을 내린다. (반나절이나 하루동안 열심히 찾아보고 노력 했는 데도 답을 찾지 못했다면 능력 밖이기 때문에 상사나 멘토에게 질문을 내리는 것이 좋다. 핵심은 최대한의 노력을 하라는 것이다.) 3) 이해하기 전에 대답한다. -> 겸손한 마음을 가지는 것이 좋다. 4) 이해하는 척 한다. 5) 해보지도 않고(프로타이핑 : 임시로 검증하기 위한.. 2021. 12. 5. [TIL] 29일차 1,2주 전부터 발 뒤꿈치에 염증이 생긴 것 같이 볼록하고 바닥에 닿을 때마다 너무 아파서 병원에 가봤더니.. 족저근막염 판정을 받았다. 원인은 정확히 못들었는 데 약 먹는 수밖에 없다고 계속 무리하면 안낫는 다는 얘기를 들어 버렸다. 고로 오늘은 5주차 강의 듣고, 배포하고, javascript.info 문서 읽으면서 쉬엄쉬엄 하는 게 좋을 것 같다! 코딩 애플 리액트 강의는 내일 알바 갔다와서 듣는 걸로! 한 주 동안 심화 강의 듣고 과제 하느라 고생했다 2021. 12. 4. 5주차 - 렌더링 횟수 줄이기 👉 부모가 바뀔 때 자식은 왜 꼭 렌더링 되어야만 할까? 🤔 부모 컴포넌트가 바뀔 때마다 바뀔 게 없는 컴포넌트까지 다시 렌더링하는 걸 막아주는 방법이 있으면 참 좋을 것 같죠? → 사실 있습니다! 컴포넌트를 렌더링하고, 결과를 메모리제이션해두는 거예요! React.memo를 사용해서 할 수 있어요! - React.memo() : useMemo가 렌더링 때마다 연산하지 않도록, 연산된 값을 재 사용하는 훅이라면 memo는 컴포넌트의 리렌더링을 방지하는 함수예요! // components/Post.js import React from "react"; import { Grid, Image, Text, Button } from "../elements"; import {history} from "../redux.. 2021. 12. 4. 5주차 - 성능 지표 보기 👉 CRA를 통해 프로젝트를 만들면 기본적으로 설치되는 것들이 있죠! 그 중 하나가 webVitals입니다! CRA 4 버전부터 새로 추가되었어요. 추가된 김에 이 webVitals를 써봅시다.😉 - webVitals 써보기 1) report를 콘솔에 찍어서 확인 해보기! //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './shared/App'; import reportWebVitals from './reportWebVitals'; import store from "./redux/configureStore"; import { Provider } from ".. 2021. 12. 4. 5주차 - Meta tag 메타태그는 웹페이즈의 제목이나, 이미지, 간단한 설명을 검색 엔진에 알려주는 역할을 합니다! - react-helmet 설치하기 yarn add react-helmet - helmat으로 메타 태크 바꾸기 //One.js import React from "react"; import {Helmet} from "react-helmet"; const One = (props) => { return ( page one Hi, there :) ! page one { props.history.push("/"); }} > page one { props.history.push("/two"); }} > page two ); } export default One; - 확인하기 : 빌드 먼저 하고, post man에서 확인 .. 2021. 12. 4. 5주차 - Pre-rendering - Pre-rendering이란? : 빌드 할 때 미리 특정 페이지를 렌더링 해서 html 파일을 만들어 둡니다. 검색 엔진이 크롤링 하러 사이트에 들어왔을 때, 빈 껍데기 html 파일 대신 내용물을 가져 갈 수 있도록! 이번에는 react-snap을 사용 해보겠습니다. https://github.com/stereobooster/react-snap GitHub - stereobooster/react-snap: 👻 Zero-configuration framework-agnostic static prerendering for SPAs 👻 Zero-configuration framework-agnostic static prerendering for SPAs - GitHub - stereobooster/rea.. 2021. 12. 4. 5주차 - SEO란(검색 엔진 최적화)? - SEO(Search Engin Optimization : 검색 엔진 최적화)란? : 네이버나 구글 같은 검색 엔진에 뭔가를 검색 했을 때, 내가 만든 사이트가 검색 결과에 더 잘보이게 해주는 과정입니다. - 검색 엔진 최적화를 한다는 건, 검색을 하면 검색 엔진이 내 사이트 내용물(메타 태그, html 내용 ...)을 한 번 훑어가고(크롤링 한다고 합니다.) 내용물에 특정한 인덱스 같은 걸 만듭니다. 그리고 이 인덱스 같은 걸 검색 결과에 보여줍니다. 검색 엔진 최적화는 검색 엔진이 내 사이트를 크롤링 할 때 정보를 더 잘 가져 갈 수 있도록 도와주는 과정입니다. - React에서 SEO가 될까?? : React는 HTML 파일이 딱 1개 뿐이고, 렌더링이 되기 전까지(자바스크립트를 실행하기 전까지).. 2021. 12. 4. 이전 1 ··· 10 11 12 13 14 15 16 ··· 30 다음 728x90
