헬리_storage

프론트엔드 개발에서 중요한것은 무엇이 있을까? 다양한 기술들이 필요하겠지만, 그중에서도 사용자 경험을 증가시키기 위해서 로딩속도를 개선하고, 성능 최적화를 위한 기술적 노력이 정말 중요할 것이다. 안그래도 면접에서도 자주 나오곤 했는데, 이번 기회에 다시한번 정리해 보았다. 코드 최적화: 불필요한 코드를 줄이고, 코드를 압축하거나 최소화하여 파일 크기를 줄이는 등 코드 최적화를 수행한다. 이미지 최적화: 이미지 파일을 적절하게 압축하고, 필요 이상으로 큰 이미지를 사용하지 않도록 최적화한다. 레이지 로딩: 페이지가 로딩될 때 먼저 필요한 부분만 로딩하여 초기 로딩 속도를 개선하는 기술을 적용한다. 파일 번들링과 분할 로딩: 코드를 더 작은 블록으로 분할하여 필요한 부분만 불러오거나, 자주 변경되지 않는 ..

인증 & 인가를 다시 복습하면서, 헷갈리는것들을 정리하고 있다. 막연하게 JWT를 위코드에서 배워서 그냥 썼었는데, 요즘에 다시 복습을 하면서 왜 쓰게 된것인지, 다른 토큰보다 좋은점이 뭔지 다시한번 정리해 보려고 한다. JWT (JSON Web Token) : 클라이언트(사용자)와 서버 간에 정보를 JSON 개체로 안전하게 전송하기 위한 개방형 표준이으로, JSON 개체에 기본정보, 전달할 정보, 검증 정보를 모두 담고 있있다. 또한, JWT는 전자 서명이 되어있기 때문에 검증 과정을 거쳐 확인하고 신뢰할 수 있으며 Secret Key 또는 Public/Private Key Pair를 사용하여 서명할 수 있다. JWT는 일반적으로 Base64로 인코딩된 데이터와 전자 서명으로 구성되어 있는데, 전자 서..

요즘 면접을 보고 있는데, 개념을 익히고 있다고 생각했지만 막상 물어보면 대답을 제대로 못하는 것 같아 아쉬운 마음에.. 끝나고라도 정리해 보자 하고 마음먹었는데 지금 해야겠다.. 히히 이렇게 하나하나 배워가는거지뭐.. ㅠ_ㅠ 여튼..정리시작!! 1. 여태 한 프로젝트 중에서 프로토콜을 이용한 사례 및 방법에 대해서 말해주세요. 여기서...HTTP말씀하시는거 맞냐고 물어보고 조금 헛소리한것같아서.. 모르는것은 바로바로 알아야하기때문에 !! 정리해본다 !! 먼저, 프로토콜 ? : 프로토콜은 통신하기 위한 약속들을 기술적으로 잘 정의해 준 것으로, 데이터를 송수신하는 순서와 내용을 결정한다. ex) HTTP , TCP/IP, UDP HTTP(Hypertext Transfer Protocol): 웹 브라우저와..

웹사이트 레이아웃을 만드려면 html, css를 작성해야 한다. next 에서는 ? 리엑트버전 (jsx) html, css를 사용하면 된다 1. return () 안에 HTML넣을 때 : 평행해서 태그들을 2개이상 넣을 수 없다. (전체를 감싸는 하나의 태그가 있어야 한다) 2. 스타일 적용하고 싶을 때 : className 이라고 써야한다. ex) 3. HTML안에 변수 넣을 때 : { } 중괄호 안에 넣어준다. (jsx의 데이터바인딩 문법 이라고도 불린다) 중괄호 안에 넣어주었고, 결과는 위의 화면과 똑같은것을 확인 할 수 있다. 4. style 속성을 넣으려면 style={ { 어쩌고 : 저쩌고 } } : 중괄호 두개를 이용한다 : 이 때, -기호가 들어가야 하는 font-size 같은 속성은 fo..

Next.js 써보려 이제 개발환경 세팅을 하려 한다!!! 1. 바탕화면에 폴더 하나 만들어주고 vscode에서 열어준다 2. 프로젝트 생성을 위해 터미널을 열고 npx create-next-app@latest --experimental -app 를 쳐서 엔터를 누르니 이런게 떠서 (y) 누르고 진행 프로젝트 이름 설정해주기 타입스크립트를 쓸 것인지도 물어보는데, 방향키로 선택이 가능하다 ESLint도 사용할 것인지 물어보고 Tailwind CSS도 쓸 것인지 src/directory 도 쓸 것인지 App Router도 쓸 것인지 (이건 그래도 Recommended라고 되어있다!) 그러면 이제 생성이 된다! 3. 에디터로 생성된 프로젝트 열고 코드 짜면 된다! 내 프로젝트 이름은 fresh 이라, cd ..

요새 주니어 개발자..취직 너무 힘들다.. 😂 뭐가 부족한지, 그리고 면접 갔었을 때 물어보던 것 들중 하나였던 ' Next.js 쓸줄 알아요? '... 그래서.. 준비하고 공부하려한다.. 일단.. 인강질렀다.. ㅎ 코딩애플 강의자분이 되게 말도 재밌게 해주시고, 이해도 잘 되게 말씀해주셔서 질렀고 ㅎ 프론트엔드 시대가 가고,, 이제 점점 풀스텍을 지향하는 시대가 오고 있다는데.. 미리 대비해야지.. ㅎ 취직 넘어렵짜냐... ㅠ_ㅠ..!! 나이제 Next.js 배워서 써먹을 예정이니 제발 나 뽑아줘라...ㅠ_ㅠ힝...!!!! 여튼!!! 여기서 부터 시작해보쟈 ~~ 웹 개발시 Client-side Rendering 시대가 가고 Server-side Rendering 시대가 오고 있기 때문! Client-s..

드디어 Redux를 공부해본다... 그토록 어렵다고 들었던... 그래서 일단은 시작은 조심스럽게..해보쟈 ... 😣 Redux란? - 공식문서에서는 자바스크립트 앱을 위한 예측가능한 컨테이너 라고 소개한다. : 단방향 데이터 흐름을 이용해 예측 가능하고, 일관적인 상태 컨테이너의 역할을 제공하는 라이브러리 : Flux 패턴에 영감을 받은 Dan Abramov 가 개발함 : React 또는 다른 View 라이브러리들과 함께 사용할 수 있다. : Flux패턴과 혼동이될 수 있는데, Flux는 디자인패턴으로 일종의 실체가 없는 개념이다. 이러한 패턴을 쉽게 적용할 수 있도록 자바스크립트로 구현한 구현체가 Redux 이다. Redux의 3가지 원칙 1. 진실은 하나의 소스로부터 2. 상태는 읽기 전용이다 3. ..

디자인패턴 : 어플리케이션 설계 중 자주 발생하는(되풀이되는) 문제에 대한 모범답안 즉, 프로그램을 개발하면서 생기는 문제를 해결하는 모법답안을 말한다. 디자인 패턴을 사용하는 이유? - 검증된 해결책 : 이미 검증된 방식 및 방법으로 해결방안을 찾을 수 있음 -> 효과적으로 코드 개선 - 효율적인 소통방식 : 거대하고 복잡한 코드는 규모가 작을때부터 체계적인 규칙이 필요하다. -> 매번 디테일한 설명을 거치지 않고, 사전에 약속해둔 용어들로 표현할 수 있도록 해준다. -> 의미를 명확하고 효율을 높이고, 체계적인 코드를 만들 수 있음 - 유지보수 용이 : 각각 기능을 담당하는 영역을 분리(관심사별로) 헤서 관리할 수 있도록 설계됨 -> 필요한 부분만 수정 가능 - 상대적으로 코드 레벨에 가까운 디자인 ..

기업협업중 import React from 'react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import * as S from './CallModal.style'; const CallModal = ({ detailMartList, handleModal }) => { const handleCopy = () => { alert('복사되었습니다.'); }; return ( {detailMartList[0].martPhoneNumber.replace( /(\d{2})(\d{3,4})(\d{4})/, '$1-$2-$3' )} 전화 걸기 연락처 저장하기 클립보드 복사하기 ); }; export default CallModal; 부모 컴포넌트로 ..

매일매일이 새롭당 : ) 하핳 이 전 포스팅에서는 인터넷 연결 확인 및 경고 모달을 띄웠다면, https://hayley-0616.tistory.com/47 [React] 인터넷 연결확인 및 경고모달 기업협업 중이당...ㅎ 이 전 포스트 글과 마찬가지로, login ->home 으로 이어지는데 이 때, login 컴포넌트가 제일 처음 랜더링 될 때, 인터넷 연결을 확인하고, 만약 안되어 있는경우에는 경고모달을 hayley-0616.tistory.com 이 번 포스팅에서는 모달의 '확인'을 누른 경우 컴포넌트가 종료(?) 혹은 나가지는 로직을 구현해 보았다. 점점 새로운것을 알게되면서 적용하니 아주 신기하다눙.. 👀 Login.jsx (부모컴포넌트) 에서 선언 => props 로 NetworkCheckMo..