프론트엔드
-
03. 링크 달기프론트엔드/HTML 2020. 9. 1. 17:31
# What? 이게 뭔데? a 태그 : 지정한 url로 이동시키고 싶을 때 사용 # How? 어떻게 쓰는데? 네이버로 이동 네이버로 이동 * a 태그 옵션 1) href : 링크주소 2) target : _blank(새창을 열고 싶을 때) * 예시 https://www.seoul.go.kr/main/index.jsp 서울특별시 서울특별시 메인, 핫이슈, 분야별정보, 서울은 지금, 소셜시장실, 주요서비스, 새소식, 이벤트 신청, 이달의 행사 및 축제, 생활정보 서비스를 제공 www.seoul.go.kr # Practice 연습 실제 네이버, 다음으로 이동할 수 있는 링크 만들어보기(새창으로) * 코드참고 : https://github.com/ShinHyungJune/publishing-course/tree..
-
02. Text프론트엔드/HTML 2020. 9. 1. 16:48
# What? 이게 뭔데? html에서 문자를 표현하고 싶을 때 사용 p 태그 : 단락을 만들고 싶을 때 span 태그 : 문자열 내 특정 영역을 감싸고 싶을 때 br 태그 : 줄바꿈을 하고싶을 때 # How? 어떻게 쓰는데? @ index.html 여기다 쓰고싶은 말들을 쓰면 됩니다~ 전달하고자 하는 내용 중 강조하고싶은 핵심문구가 있다면 이런식으로 강조하면 됩니다. 전달하고자 하는 내용이 길 경우 적절히 줄바꿈을 넣어주면 가독성이 높아집니다. * 태그 안에 직접 style을 넣어서 꾸며줄 수 있음. # Practice 연습 - 화면에 아래 내용 뿌려보기 안녕하세요, 저는 OOO입니다. 앞으로 잘 부탁드립니다. * 코드참고 : https://github.com/ShinHyungJune/publishin..
-
01. 기본세팅프론트엔드/HTML 2020. 9. 1. 16:31
# What? 하이퍼텍스트 마크업 언어(Hyper Text Markup Language) * 하이퍼텍스트 = 하이퍼링크를 담는 문서 # How? 1. 기본툴 설치 프론트엔드 개발자까지 생각하고 있다면 visual studio code를 사용하길 권장 (typescript 등 프론트엔드 개발에 최적화된 기능이 잘 되어있음) 1) visual stuido 설치 https://code.visualstudio.com/ 2) live server 플러그인 설치 -> 코드 수정사항이 새로고침 없이 화면에 실시간으로 나타남 3) HTML Snippets -> html 태그 자동완성 지원 2. 뼈대 만들기 여기다 html 태그 작성 * 코드참고 : https://github.com/ShinHyungJune/publis..
-
PWA프론트엔드/React 2020. 8. 25. 01:41
# What? 이게 뭔데 - Progressive Web Application -> 웹에서도 앱처럼 static한 부분들을 설치 가능하게 해줌 -> 푸시알림 등 네이티브에서만 가능했던 부분들을 일부 웹에서도 가능하게 해줌 # Why? 이거 왜 써야 하는데? - 사용자에게 더 나은 사용환경을 제공해주기 위해서 # How? 어떻게 쓰는데? 1. manifest.json 생성 @ public/manifest.json { "name" : "매일점심", "short_name": "매일점심", "display": "standalone", "background_color": "#fff", "theme_color": "#ff9711", "orientation": "portrait-primary", "icons" : [..
-
SWR프론트엔드/React 2020. 8. 17. 00:00
# What? spa인거 좋으나 매번 페이지 접속때마다 api 요청을 새로 해주니, 오히려 mpa보다 사용감이 떨어져보일 때가 있음. mpa처럼 캐싱처리 알아서 잘 해주게 도와주는 라이브러리가 swr임. # How? 1) SWRConfig로 swr를 사용할 페이지 컴포넌트들을 감싸주기 axios(url).then(response => response.data) // 이렇게 해두면 useSWR에 url만 써줘도 response.data값이 return됨.(전역 fetcher 설정) }}> 2) useSWR로 초기 데이터 가져오기(useEffect안에 넣으면 안됨) let {data: items, mutate: mutateItems} = useSWR(`/api/stores?page=${params.page}..
-
기본 세팅프론트엔드/Chart.js 2020. 6. 23. 16:28
1. 기본 세팅 https://www.chartjs.org/docs/latest/getting-started/
-
9. Auth프론트엔드/React 2020. 2. 5. 23:29
# What? 이게 뭔데? - 인증 # Why? 이걸 왜 배우는데? - 화원가입, 로그인 등 회원인증 관련 작업에 필요함. - SPA(Single Page Application)에서는 주로 JWT(Json Web Token) 방식으로 구현. * 주로 쓰이는 로그인 정보 인증 방식 -> 클라이언트에서 사용자 로그인 -> 서버에서 사용자 정보를 토대로 확인 -> 서버에서 access_token(인증토큰)을 발급 -> 클라이언트에서 access_token을 local storage, store에 저장 -> API 요청을 보낼 때 header에 access_token을 담아 로그인 된 유저임을 증명 # How? 어떻게 쓰는데? 1. 가상서버 세팅 - json-server-auth라는 패키지를 사용하면 API로 ..