본문 바로가기

전체 글260

[React] Basic Hooks / Additional Hooks / React Router Hooks Basic Hooks useState: state를 대체 할 수 있다. useEffect: 라이프 사이클 훅을 대체 할 수 있다 Additional Hooks useReducer : state를 변경하는 로직이 담겨있는 함수 다수의 하윗값을 포함하는 복잡한 정적 로직을 만들때 다음 state가 이전state에 의존적일때 Redux를 안다면 쉽게 이용 가능 useMemo useCallback createRef: (Uncontrolled-createRef) : 항상 레퍼런스를 생성해서 렌더될때 넣어준다 useRef: (Uncontrolled-useRef) : 렌더사이에도 유지해준다. 최초 렌더시 undefiend -> 이후 태그 출력 React-Router-Hooks useHistory 이전: props를 .. 2021. 11. 16.
[React] Component Styling / Style loader / React Shadow / Ant Design // 프로젝트 생성 $ npx create-react-app style-loaders-example // install $ npm i sass $ npm i classnames $ npm i styled-components 스타일로더 CSS 모듈, SASS 모듈 Styled Component 1,2 react shadow ant design 2021. 11. 16.
[React] router / react-router-dom / query-string / redirect 먼저 프로젝트 내에 Pages라는 폴더를 생성하고, Home , About , Profile, NotFound 등 jsx파일을 추가한다. // Home.jsx export default function Home() { return Home 페이지입니다.; } App.js 파일에서 react-router-dom 에서 browserRouter, Redirect, Route, Switch, Link 를 import 한다. 또한 이동시킬 페이지들을 모두 import한다. import { BrowserRouter, Redirect, Route, Switch, Link } from "react-router-dom"; // App.js 의 App return 내부 (isLogin ? : )} /> 코드를 확인해보면 .. 2021. 11. 16.
SQLD 42회 합격 수기 지난 9월 5일 일요일 42회 SQLD 시험을 치렀고, 10월 1일 합격 발표가 났다. 여타 시험들에 비해 합격 발표가 늦게 나오는 이유는 주관식 문제 때문일까.. ㅎ 책 소개 SQLD 공부 방법으로는 다들 노랭이 책을 언급하곤 한다. 2~3 회독하고 가면 합격은 거뜬하다고들..... SQL 자격검정 실전문제 https://book.naver.com/bookdb/book_detail.naver?bid=11346202 SQL 자격검정 실전문제 SQL 자격검정 실전문제는 국가공인 SQL 전문가 및 국가공인 SQL 개발자 자격시험 대비 수험서로 SQL 전문가 가이드에서 다루고 있는 데이터 모델링의 이해, SQL기본 및 활용, SQL 고급 활용 및 튜닝 등 book.naver.com 하지만 나는 노랭이만 봤을 .. 2021. 11. 15.
[React] 기본 플러그인 개념 및 설정 방법 ESlint : 내부적으로 스타일을 규정하는 것 $ npm i eslint -D // 다운로드 $ npx eslint --init //설정파일 생성 $ npx eslint index.js // index.js파일의 코딩 스타일 검사 Prettier : 예쁜 코드 만들어주는 코드 포매터 $ npm i perttier -D//설치 $ npx prettier index.js//index.js 코드 예쁘게 /// -> console.log('hello')-> console.log("hello"); // 따옴표는 ' ' 만 사용하고 세미콜론은 false로 설정했다. $ npx prettier index.js --write // js파일이 바뀜 /// default format => prettier// settin.. 2021. 11. 3.
[React] React 프로젝트 생성 Create-React-App, CRA $ npm init -y CRA 사용해서 $ npx create-react-app [프로젝트이름] 개발모드 실행 $ npm start 프로덕션 모드 실행 $ npm run build $ npx sesrve -s build 테스트 모드 $ npm test eject : CRA 를 제거하는것, 되돌릴수 없음. CRA만으로 해결이 안될 때 제거 $ npm eject 2021. 11. 3.
패스트캠퍼스 프론트엔드 수강 중간 후기 (진도율38%) 후기에 작성하기 전에.. 광고나 홍보가 아닌 개인적인 후기임을 알린다. 수강 계기 vue나 react를 공부하고 싶어서 웹서핑을 하다 보면 꼭 만나는 광고가 있다. 패스트 캠퍼스, ㅈㄹㅂㅇㅅ, 국비 학원 등등... 패스트캠퍼스 사이트에 들어가면 마지막 할인은 ㅇ일 ㅇ시간 남았다며 구매를 독촉하는 느낌이 들어 이미지가 좋지 않았지만 상세 페이지의 내용들은 그야말로 사람을 현혹시키는 내용이었다. 이럴 때야말로 실제 후기를 열심히 찾아보고 수강 신청해야겠다는 생각이 들었는데 패스트캠퍼스의 전반적인 후기는 썩............. ...호평은 아니었다. 혹평 혹은 비난에 가까운 게시물도 여럿 있었고, 신고를 받은 건지 알 수는 없지만 삭제된 게시물도 여럿 있었다. 하지만, 가난한 직장인으로서 다른 온라인 강의.. 2021. 11. 3.
[Javascript] axios의 개념, 기본 예제 aixos란 Nodejs 혹은 브라우저를 위한 프로미스 기반의 HTTP 비동기 통신 라이브러리이다. 즉 HTTP 요청을 처리할 수 있는 기능이다. jQuery의 ajax랑 유사한 개념인듯하다. axios 설치 npm -> npm install axios aixos의 간단 예제를 테스트하려면 영화 검색 사이트를 만들기에 좋은 데이터베이스를 제공해주는 OMDb API에서 API KEY 인증이 필요하다. >> http://www.omdbapi.com/ // aixos 를 사용하기 위해 import import axios from 'axios' // 영화정보를 가져오는 함수 작성 function getMovieInfo(){ const APi_KEY = '비공개' axios .get(`https://www.omd.. 2021. 10. 29.
[Javascript] 인터넷 브라우저의 LocalStorage, SessionStorage 인터넷 브라우저를 사용하면서 우클릭 - 검사를 누르거나 키보드의 F12를 누르면 개발 툴을 확인할 수 있다. 위의 여러 가지 탭 중에서 애플리케이션을 선택하면 위 사진과 같이 로컬 스토리지, 세션 스토리지가 있는 걸 알 수 있다. 로컬 스토리지(Local Storage)란 ?? 데이터가 만료되지 않음 (크롬의 시크릿 창인 경우 지워짐) 세션 스토리지(Session Storage)란 ?? 페이지를 닫으면 사라짐 스토리지에 저장하는 값들은 key value 형태로 구성되어 있다. 아직 로컬 스토리지와 세션 스토리지의 사용처(?)는 학습하지 않았지만 로컬 스토리지와 세션 스토리지에 값을 추가하고, 읽고, 수정하고, 삭제하는 방법에 대해 배웠다. 어려운 내용이 아니므로 코드 블럭으로 작성하기로 한다. // .s.. 2021. 10. 29.
[Javascript] JSON 객체화 방법, 문자열화 방법 JSON은 이미 다양한 곳에서 사용되고 있기 때문에 사용방법은 생략한다. 자세한 내용은 Wiki(한글) 참조 : https://ko.wikipedia.org/wiki/JSON JSON - 위키백과, 우리 모두의 백과사전 JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있 ko.wikipedia.org JSON은 "문자열"로 이루어져있지만 브라우저에서 읽을 때는 객체로 사용이 된다. 그래서 JSON 형식의 데이터는 코드를 짤때 문자열로 변환하는 방법.. 2021. 10. 29.
[Javascript] lodash의 설명과 예제, 자주 쓰는 함수 이전 포스팅에서도 lodash 코드를 간략하게 올린 적이 있다. - 공식 문서 : https://lodash.com/docs/4.17.15 - 참조 URL : https://solyi.kr/215 [Javascript] 구조 분해 할당(배열,객체) / 전개 연산자 / 데이터 불변성 / 얕은복사와 깊은 복사 (lodas 구조 분해 할당 - 객체 / 배열의 구조 분해 할당 console.group('@ 객체의 구조 분해 할당') // 구조분해해서 원하는 데이터만 사용할 수 있음 const { name: me, age, email, address = 'Korea' } = user console.. solyi.kr lodash는 기능적 프로그래밍 패러다임을 사용하여 일반적인 프로그래밍 작업을 위한 유틸리티 기능.. 2021. 10. 29.
[Javascript] Named Export / export default js파일에서 데이터나 함수를 외부파일에서 사용할때 export 로 내보내줘야한다. export 와 export default 로 작성 되어있는 샘플을 흔히 볼 수 있는데 그 차이를 알아보려고 한다. export default : 기본 export 내보내는 JS파일에서 function 이름은 생략이 가능하다. 한가지 함수만 작성할 수 있다. 가져오는 JS파일에서 import 함수명 부분은 다른 이름으로 변경해도 상관없다. // getRandom.js export default function () { return Math.floor(Math.random() * 10) } // main.js import getRandom from './getRandom' export : named export 내보내는 JS.. 2021. 10. 29.
2021년 10월 28일 목요일 기록 목표 ⭕Part4 Ch2 74 ⭕컷편집 ⭕네관 2급 필기 2과목 정리 ⭕학은제 3과목 수강 +여유있으면 ⬜Part4 Ch3 77 리뷰 열품타 기록은 비록 2시간도 안되지만..! 오늘은 무리하게 계획짜지 않고 전부 달성해냈다 오늘의 잔디심기 https://github.com/choi-solyi/startJsTs js파일에서 쓰이는 export 와 export default의 차이 lodash 자주쓰는 함수 JSON 의 개념, JSON화 및 문자열화 LocalStorage의 개념과 SessionStorage 의 차이 axios의 개념과 사용방법 2021. 10. 28.
반응형

티스토리툴바