헬리_storage

코딩테스트를 푸는데... 역시 어렵다..! 쉽지않지아주..! 그치만 오늘 풀면서 알게된것을 정리해 보려고 한다. 문제는 프로그래머스의 문제를 가져왔다! 팩토리얼 문제) i팩토리얼 (i!)은 1부터 i까지 정수의 곱을 의미합니다. 예를들어 5! = 5 * 4 * 3 * 2 * 1 = 120 입니다. 정수 n이 주어질 때 다음 조건을 만족하는 가장 큰 정수 i를 return 하도록 solution 함수를 완성해주세요. 조건 : i!

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

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

프론트엔드 기초지식을 복습하는과정에서 현업에서 인턴 경험에서 로그인을 구현할 때 썼던 방법인 세션과 쿠키를 이용한 인증flow에 대해서 다시 복습할 기회가 되어 이렇게 정리를 해 보았다. 용어 정리 Session : 동일한 클라이언트(사용자)가 브라우저를 통해 웹 서버에 접속한 시점으로부터 브라우저를 종료하여 연결을 끝내는 시점 동안에 들어오는 일련의 Request를 하나의 상태로 보고, 그 상태를 일정하게 유지하여 클라이언트와 웹 서버가 연결된 상태를 말한다. Session ID : 서버는 Session에 대한 정보를 저장하고 클라이언트에게는 Sesssion을 구분할 수 있는 ID를 부여하는데 이것을 Session ID 라고 한다. Cookie : 클라이언트의 컴퓨터에 저장되는 데이터 파일로, Cook..

너무떨리는 마음에 ...! 웹개발의 기본적인 기본인 HTML과 CSS 문제에 명확하게 정리해서 답을 못한것 같아서 이렇게 정리하는 시간을 가져보습니다. Semantic Tag 란? 의미를 부여한 태그라는 뜻으로, 쉽게 말하면 태그에 의미를 부여한 혹은 같은 태그들을 말합니다. 이렇게 이름만 봐도 상단과 하단이라는 것을 알 수 있으며, 시맨틱 태그의 등장으로 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되었습니다. 태그를 활용하여 웹 문서를 만들 수 있지만, 시맨틱 태그를 사용해야 하는 이유 ? 1. HTML 문서의 가독성과 유지보수가 쉬워지기 때문입니다. 2. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있..

요즘 면접을 보고 있는데, 개념을 익히고 있다고 생각했지만 막상 물어보면 대답을 제대로 못하는 것 같아 아쉬운 마음에.. 끝나고라도 정리해 보자 하고 마음먹었는데 지금 해야겠다.. 히히 이렇게 하나하나 배워가는거지뭐.. ㅠ_ㅠ 여튼..정리시작!! 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. ..