전체 글
-
[React] 원티드 프리온보딩 프론트엔드 Day4WEB Dev/StudyNote 2023. 3. 16. 21:31
😃 원티드 프리온보딩 프론트엔드 Day4 3월 프론트엔드 챌린지 로그인 기능 구현, 하나부터 열까지! 실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다. 배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다. 보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다. 📍 개요 지난 시간 리뷰 로그인이란? 사용자 식별, 인증, 권한 부여. 클라이언트에서 전달한 사용자 정보를 식별하고 서버에서는 인증한 정보를 세션이나 토큰에 담아 돌려 준다. 더보기 저작권으로 인하여 추후 손그림으로 변경할 예정입니다. 세션이란? 사용자가 로그인하고 로그아웃 할 때까지의 시간. 이것을 세션 id를 이용해 쿠키로 저장을 한다...
-
[Javascript] <script>의 실행 순서를 결정하는 속성 aysnc와 deferWEB Dev/Javascript | REACT | Node.js 2023. 3. 15. 11:42
카페24로 일하다 보면 다양하게 스크립트 태그를 적용해야 하는 경우가 있다. 나의 경우는 전역으로 뿌려줘야 하는 함수 등은 common.js로 layout 모듈에 적용을 해두었고 개별 페이지에 적용해야 하는 스크립트는 별도로 로 import를 해주는데 카페24는 나름대로 노코딩 툴이기 때문에 라는 카페24만의 문법이 존재한다. 카페24가 기본적으로 저 문법으로 스크립트를 넣고 있는데, 이 스크립트들의 순서가 꼬이게 되면 원하는 기능이 제대로 작동이 안 되는 경우가 있다. 특히 swiperJS와 같이 외부 스크립트 라이브러리를 불러오는 경우...! DOM은 DOM대로 불러오고 내가 만든 함수는 함수대로 적용되는데 갑자기 스와이퍼 적용이 안되는 경우가 있다. 그래서 가끔은 html 내에 를 직접 넣어서 스크..
-
[CSS] 폰트 안티앨리어싱 Anti-AliasingWEB Dev/HTML | CSS 2023. 3. 14. 12:22
윈도우와 맥에서 브라우저 폰트 렌더링이 조금 다른 경우가 있다. 같은 폰트라도 맥과 윈도우에서 차이가 좀 있는데 윈도우가 조금 더 계단식으로 번지는 느낌인데 사실 폰트차도 좀 심하다. 맥에서는 이 같은 현상을 해결하는 안티 앨리어싱 Anti-Aliasing이 적용되고 있지만 윈도우에서는 가끔 느껴진다 😭 이 부분을 수정하기 위해서는 폰트 안티앨리어싱을 적용해주어야 한다. 안티앨리어싱을 원하는 span, p, heading 태그 등에 아래와 같이 아주 약간의 회전을 주면 윈도우에서 안티앨리어싱을 적용해준다. span{ transform: rotate(0.04deg); } 적용 전 적용 후 사실 무슨 차이인지 모르겠는 . 사실 이 글을 쓴 이유는 저 페이지들을 처음 마크업 할 때는 반드시 넣어서 맥과 윈도우..
-
[React] 원티드 프리온보딩 프론트엔드 Day3WEB Dev/StudyNote 2023. 3. 13. 21:37
😃 원티드 프리온보딩 프론트엔드 Day3 3월 프론트엔드 챌린지 로그인 기능 구현, 하나부터 열까지! 실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다. 배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다. 보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다. 📍 개요 지난 시간 리뷰 JWT는 Json Web Token 토큰에 대한 명칭, 토큰을 만드는 기술 Json으로 받아서 로컬스토리지에 저장해놨다가 헤더에 담아 요청을 보낸다. cURL은 터미널에서 커맨드라인으로 url을 호출하는 기능으로 Command line url이라는 뜻 3강. 세션기반 로그인 구현과 JWT와의 비교 및 인프라스트럭쳐 ..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 07WEB Dev/StudyNote 2023. 3. 12. 21:52
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-03-12 21:00 7일차 안내 -금일 진도 150p 책 요약 정리 4장 프로젝트 개발 명장면 스키마 설계 CutResolver는 cuts 쿼리 필드를 가지고 해당 필드는 filmId를 인자로 받아 해당 영화의 filmId를 지닌 Cut 배열을 반환한다. resolver 에 CutResolver 추가 명장면 목록 정보 UI 구성 타입 만들고 리졸버 만들고... 요청 훅과 타입 정의를 생성하고 명장면 목록 컴포넌트를 구성 yarn codegen 을 통해 생성한 useCutsQuery에 쿼리 변수로 부모 컴포넌트로 부터 받아온 filmId를 넘겨준다. 그리고 응답된 데이터와 ..
-
[Javascript] bind 알아보기WEB Dev/Javascript | REACT | Node.js 2023. 3. 8. 00:44
bind 알아보기 해당 예시는 코어 자바스크립트의 '함수 바인딩'을 참조하였습니다. 📌 들어가며 유데미 강의 중 bind에 대해 설명하며 'bind는 향후 실행을 위해 함수를 사전에 구성한다. 기본적으로 함수가 실행될 때 받을 인수를 미리 구성할 수 있다.'라고 설명하는데, bind에 사용법에 대해 추가로 더 알아본다. 📌 bind란 bind는 자바스크립트 메소드로 호출되면 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환한다. 이 객체를 호출하면 this가 참조하는 변수(context)로 고정된 함수가 반환된다. let exFunc = func.bind(context); 📌 사용하기 1. 먼저 객체에 변수와 함수가 존재할 때 객체 내의 함수를 다른 변수에 할당해 실행하면 예상한 대로..
-
[React] 원티드 프리온보딩 프론트엔드 Day1WEB Dev/StudyNote 2023. 3. 6. 21:43
😃 원티드 프리온보딩 프론트엔드 Day1 3월 프론트엔드 챌린지 로그인 기능 구현, 하나부터 열까지! 실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다. 배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다. 보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다. 📍 개요 1강. 로그인의 개념과 어플리케이션 구조 알아보기 - 로그인의 기술적 정의와 실제 서비스에서의 사용도 - 직접 로그인 화면과 Mock API를 세팅 - 구성해본 로그인 로직이 실제 서비스에 적용되기 위해서 필요한 부분 확인 ➕ 로그인이란? 📌 로그인의 정의 알아보기 1) 시스템에 엑세스 하기 위해 2) 제한된 파일과 시스템에 엑세스..
-
[React] 리액트 포탈 React Portal을 통해 모달 만들기WEB Dev/Javascript | REACT | Node.js 2023. 3. 5. 00:30
해당 내용은 Udemy | React 완벽 가이드 with Redux, Next.js, TypeScript 강의에서 일부 발췌하였습니다. 가독성을 위해 일부 코드삭제가 있어 그대로 따라하면 문제가 생길 수 있습니다. 📌 들어가며 유데미 리액트 강의를 들으면서 Portal 사용법을 익혀두면 좋을 것 같다고 생각해서 별도로 작성한다. 유데미 강의는 별도로 필기를 하면서 듣고 있는데, 포탈 강의때는 쉽네 하고 넘겼다가 혼자서 못하겠어서 다시 한 번 복습 겸 정리! 📌 리액트 포탈이란 Portal은 JSX를 새 창이 아니라 화면 최상단으로 띄워야 할 때, 리액트가 렌더링되는 div#root 내부가 아닌 그 위로 렌더링 할 수 있게 해주는 방법이다. 보통 우리가 흔하게 아는 모달, 그러니까 정보를 가진 JSX를 ..
-
[에러대백과] yarn 으로 create-react-app 설치 중 에러 (n 명령어로 node 버전 수정)WEB Dev/에러대백과 2023. 2. 26. 21:01
yarn 으로 설치를 하다 아래와 같은 에러가 발생했다. 번역하면 노드가 모듈과 호환되지 않는 버전으로 버전을 변경하라는 이야기.. 그 정도로 오래전 노드를 쓰고 있었나....!! 요즘 계속 노드 호환성이 불량하다는 에러 메시지가 나오고 있다 흑흑.. 1. 버전 변경을 위해 npm 으로 n 을 설치해준다. 2. node 최신 버전을 설치한다. lts로 설치하기 위해 n lts을 입력한다. 바로 lts 최신 버전의 node 가 설치된다. 버전이 필요한 경우 n 16.15.1 처럼 입력한다. 만약 node: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28' not found (required by node) 과 같은 오류가 발생한다면 버전을 낮추는 방법도 있다...
-
[React] npm 대신 yarn으로 create-react-app 시작하기WEB Dev/Javascript | REACT | Node.js 2023. 2. 26. 20:51
yarn 으로 create-react-app이 익숙하지 않아서 터미널 명령어 복습 겸 기록! ♪(´▽｀) yarn으로 create-react-app 설치하기 1. yarn 이 설치되지 않은 경우 yarn 을 npm을 통해 설치한다. (-g는 글로벌 global이란 뜻으로 붙이면 로컬 전역에 설치한다) npm install -g yarn * 만약 npm도 설치되어 있지 않다면 별도로 설치해야함! node 설치 바로가기 2. 터미널을 열어 아래 명령어를 입력하여 create-react-app을 yarn으로 설치한다. yarn create react-app 새폴더명 * npm은 npx install create-react-app을 입력하면 되지만 yarn은 create를 명령어로 사용해서 설치한다는 점을 기억..