개발 공부일기

비전공자일경우 다들 처음엔 웹디자이너 취업률 및 비전만 보고 웹디자인 과정을 선택하게 되고 요즘 웹디자이너가 퍼블리싱도 같이 하기때문에 코딩을 학원에서 필수로 가르치면서 코딩을 포기하거나 코딩에 빠져들거나 그냥 디자인이 좋은데 코딩도 어쩔수없이 하는 부류로 나뉘게 됩니다. 그림그리는걸 좋아하고 웹디자인 자체가 재밌으면 이 글 볼 필요 없구요 웹디자인보다 코딩이 더 재밌는 분들이 읽으면 좋은 글 입니다. 웹퍼블리셔에 대해 조금만 알아보면 나오는 대표적인 정보 1. 한국에서나 웹퍼블리셔라는 타이틀이 존재함 2. 가성비 좋아하는 한국은 웹퍼블리셔 뽑기보단 웹디자이너 뽑아서 퍼블리싱 시키기때문에 웹퍼블리셔라는 직업 입지가 위태롭고 비전도 없음 3. 프론트엔드 개발로 넘어가려면 공부 훨씬 많이 해야함 - 국비과정..

포트폴리오, 웹매거진, 리마인더 이렇게 3가지 사이트를 리액트로 만들고 배포한 과정 소개 ★ 리마인더 컨텐츠는 간단한 TODOLIST와 STOPWATCH, DATE 기능 등 PWA를 배우고 간단하게 접목시킬만한걸로 구성, 휴대폰에 다운받아서 사용할때 이런 자잘한게 있으면 좋을것 같다고 생각함 pwa는 터미널에서 간단하게 다운로드해서 unregister -> register로 바꿔주는 정도만 하면 기본셋팅이 끝남 거기에 https://www.geeksforgeeks.org/create-a-stop-watch-using-reactjs/ 여기서 스톱워치 어떻게 사용하는지 배워서 접목시켰음 좀 더 꾸며보고 싶어서 마우스 커서를 이모지로 바꾸는거 검색해보고 접목 시켜봤으나 behavior 건드리는건 호불호가 굉장..

장바구니 추가해도 새로고침이나 재접속하면 초기화됨 - 자바스크립트 특성 데이터 기억하려면 1. 서버로 보내서 데이터베이스에 저장 2. 브라우저 저장공간에 저장 콘솔창 application에 localStorage에 저장 key 자료이름 value 자료값 session storage는 브라우저끄면 날라감 텍스트만 저장가능 다루는 문법은 localStorage.setItem('name', 'kim') // 자료저장 key : name, value: kim localStorage.getItem('name') // 자료 꺼내기 (kim꺼냄) localStorage.removeItem('name') // 자료 삭제 object 자료 저장하려면 localStorage.setItem('obj', {name : 'ki..

▷ 메모리할당 줄이는 방법 1. 함수나 오브젝트를 콜백함수나 jsx안에 넣지말고 따로 선언해서 쓰기 (ex1) function 함수클릭시어쩌고 (){} onClick={ 함수클릭시어쩌고 } (ex2) || var style = { color : 'white' ] 2. 애니메이션 줄때 width, margin, padding이런걸로 주면 렌더링 힘들어서 transform, opacity로 주는게 좋음 3. 컴포넌트 import할때 내가 app.js에 import파일이 엄청 많은데 app.js 열었을때 온갖 파일을 다 미리 로드해놓는다 -> lazy loading 으로 해결 내가 detail컴포넌트는 이 페이지로 이동했을때 import해달라고 할려면 import { lazy, Suspense } from '..

▷ &&연산자로 코드 줄이기 1 === 1 ? 참 : null || 1 === 1 && 참 왼쪽 조건식이 true면 오른쪽 jsx가 그 자리에 남는다 ▷ switch문으로 if문 대신하기 function reducer(state, 액션){ if (액션.type === '수량증가'){ return 수량증가된state } else if (액션.type === '수량감소'){ return 수량감소된state } else { return state )} function reducer(state, 액션){ switch (액션.type) { case '수량증가' : return 수량증가된state; case '수량감소' : return 수량감소된state; default : return state }} ▷ 오브젝트..

Redux를 쓰는 이유 - 1. 복잡한 props 전송이 필요없음 2. state 데이터 관리 용이 3. reducer쓰다가 에러나면 90%이상 확률로 reducer내에서 해결가능 / 온갖 컴포넌트 안돌아다녀도 됨 ▷ props 전송 1. npm install redux@4.1.2 react-redux index.js에 redux 셋팅시작 2. import {Provider} 3. 를 로 감싸고 위에 변수 하나 만드는데 createStore라는 함수 사용 -> import { createStore } from 'redux'; 4. createStore()안에 state 저장할건데 let store = createStore(()=>{ return [{ id : 0, name : '멋진신발', quan : ..

▷ ajax 옵션 1.fetch사용 -> json 변환 따로 해야함 2.axios -> 변환해줌 1. npm install axios 2. import axios from 'axios' 3. axios.get('url) 4. .then((result)=>{ console.log(result.data)) 5. .catch(()=>{에러시 실행할 코드}) 이걸 응용해서 더보기 버튼 클릭시 get으로 상품을 받아와서 아이템들 밑에 보여주려면 .then에 카피본 변수를 만들고 스프레드 오퍼레이터로 [...기존state, ...result.data]; 이렇게 하고 setState변경해주면 됨 ▷ tab UI 1. html css 디자인 2. 탭 state - > 뭘 누르면 뭐가 나올지 3. 삼항연산자가 길어지면 ..

Lifecycle : mount -> update -> unmount 이걸 알아야 하는 이유는 내가 이걸 알면 간섭이 가능 업데이트가 될때 마운트가 될때 코드실행을 할 줄 알게 되는거 클래스 컴포넌트에 갈고리 달려면 componentDidMount(){} 이런식으로 함수형 컴포넌트에 갈고리 달려면 useEffect(()=>{}) -> 배포전에는 두번씩 실행되니까 거슬리면 index.js에서 strcitmode구문빼면됨 이걸 언제쓰냐면 useEffect 안에 코드는 실행시점이 다르다 렌더링이 다 되고나면 실행된다 return안에 있는 코드 다 실행하고 나서 실행한다 =서버에서 데이터 가져오는작업, 타이머, 그리고 시간이 오래걸리는 코드라던지 늦게실행되어야하는걸 useEffect사용하면 좋다 dependen..

▶ react-router 1. npm install react-router-dom@6 2. index.js에 로 app 감싸주기 3. import {BrowerRouter} from 'react-router-dom'; 되어있는지 확인 4. app.js에 import {Routes, Route, Link} from 'react-router-dom' 5. 홈 상세페이지 or 컴포넌트안에 변수 let navigate = useNavigate(); ->import 확인 { navigate("/"); }} > 메인페이지로 이동한다는 구문 6. routes 안에 route 쓰는데 이 route안에도 네스팅이 가능 네스팅하고 심어줄때는 Outlet 사용 7. 내가 데이터값으로 넣어놓은 객체에 id 키값을 찾고싶고 ..

▷ 동적인 UI 만들기 1. HTML CSS로 미리 디자인 구현 2. 현재상태를 State로 저장 3. State에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 ▷ 조건문 대신 삼항연산자 {} 코드블록안에 삼항연산자 가능 if문이 안된다는거는 return이 있는 컴포넌트 내뱉는 function일때를 말함 클릭하면 보여주게 할려면 처음 state가 false이고 onClick했을때 true로 바뀐다고 해놓으면? 그리고 삼항연산자로 true면 모달컴포넌트 그리고 아니면 null 이걸 다시 재클릭해서 false로 만들려면 onClick했을때 !modal하면 이 modal state의 반대가 되는거니까 잘 작동함 ▷ map 으로 반복생성한거는 key 속성 추가 ▷ state가 array일 경우 setstat..