쿼카의 프론트엔드 쿼카의 프론트엔드

다들 어디선가 한번 쯤은 본적이 있을 표지… 회사에서 스쿼드 멤버들끼리 돌아가면서 회고 시간에 아무 주제(업무, 취미 등등 다양하게)나 간단하게 발표하는 시간을 갖기로 했다. 무엇을 발표할까 하다가… 개발에 관한 내용도 좋겠지만 여러 직군이 모인 자리니개발 내용이 아닌 타 직군의 입장에서 쓴개발자와 협업과 관련이 있을 것 같은 나름 유명한 책을 읽어보았다. 이 글을 보는 사람들의 시간을 아껴드리기 위해 그저 이 책의 일부 내용을 요약하고 정리했다고 봐주면 될 것 같습니다.(디자이너 내용은 모두 제외하였습니다… 😭)   기획자와 개발자의 특징기획자는 서비스를 개발하기 위해서 경영진부터 디자이너, 개발자까지 가장 폭넓게 소통을 한다. 여러 사람의 이야기를 듣고 정리하는 것이 일상화되어 있고 비교적 유연한 ..

애자일 방법론에 대한 구체적인 개념과 방법보다는 애자일 도입 시 ‘어떻게 하면 안되는지’, ‘어떤 마음 가짐을 가져야 하는지’에 대해서 주로 다룹니다.  애자일이란?   - 위키백과애자일 소프트웨어 개발(Agile software development) 혹은 애자일 개발 프로세스는  소프트웨어 엔지니어링에 대한 개념적인 얼개로, 프로젝트의 생명주기동안 반복적인 개발을 촉진한다. 최근에는 애자일 게임 보급 등의 여파로 소프트웨어 엔지니어링 뿐 아니라 다양한 전문 분야에서 실용주의적 사고를 가진 사람들이 애자일 방법론을 적용하려는 시도를 하고 있다.  애자일은 어떤 단일 개념이 아니다.애자일은 서로 다른 여러 맥락에 따른 방법론과 테크닉의 조합이다.  애자일을 도입해보자 애자일 행오버많은 기업들과 개발팀들이..

추가될 사항이 있다면 지속적으로 추가해 두겠습니다. 1. JavaScript에서 변수를 선언하는 데 사용되는 var, let, const의 차이에 대해 설명해 주세요. var은 호이스팅이 기본적으로 발생하며 함수 레벨 스코프를 가지며 중복 선언&할당이 가능한 것이 특징이다. let과 const의 경우 ES6부터 추가되었으며 블록 레벨 스코프를 가지며 var의 단점들을 보완하기 위해 도입되었다. let은 값을 재 할당 할 수 있지만 재 선언은 할 수 없다. const는 재 할당과 재 선언 모두 할 수 없다. 💡 let과 const가 호이스팅이 발생하지 않는 건 아닙니다. 하지만 아래와 같은 동작 때문에 호이스팅이 발생하지 않는 것처럼 보입니다. var는 선언과 초기화가 동시에 일어나지만 let과 const..

목차 기존 웹 개발 방식 jQuery의 장점 jQuery의 단점 Browser 동작 과정 Virtual DOM의 등장 Virtual DOM 동작 과정 SPA의 등장 MPA vs SPA CSR vs SSR 현재 유행 중인 패턴 TypeScript 1. 기존 웹 개발 방식 들어가기에 앞서 기존에 많이 사용되었던 jQuery를 이용한 개발 방식이 왜 현재에는 잘 사용되지 않는지 간단히 알아보겠습니다. 기존 FrontEnd Web 개발 방식은 DOM(Document Object Model) 요소를 직접 조작하는 Vanilla JS 방식과 jQuery 라이브러리를 이용해 주로 개발되어 왔습니다. 특히 jQuery를 이용한 개발 방식이 유행이였는데 Vanilla JS에 비해 코드 짜기가 쉽고 그에 따라 개발 생산성..

Google Analytics 적용을 Web사이트에 적용하려 할 때 제공된 gtag script를 head 태그에 넣는 방법으로 안내된다. 혹시나 해서 찾아보니 역시나 ga4 가 지원되는 Library를 누군가 만들어뒀지만 막상 적용해 보면 생각보다 쉽다고 느끼게 된다. 일반적인 html 코드에 넣는 방법으로도 정상적으로 적용이 가능하지만 local, dev, real 환경 배포 시 일일이 gtag를 주석처리 해줘야 하는 번거로움이 있다. React 스럽게 배포 환경에 따라서 gtag를 적용하는 방법을 간단하게 공유한다. const App = () => { return ( ); } export default App; const GoogleAnalytics = () => { const location = ..

자사 서비스 Front-End에서 JWT(Json Web Token)의 저장 위치 및 방법에 대해서 개선방법에 대해 써보았다. 문제점 Back-End에서 API 요청에 대해 body에 AccessToken과 RefreshToken을 발급해 전달한다. FrontEnd에서는 발급받은 AccessToken과 RefreshToken을 자동 로그인 여부에 따라 SessionStorage와 LocalStorage에 구분하여 저장한다. 위험 해당 방식으로 web storage에 저장하거나 cookie에 저장하더라도 문제점은 계속 존재하게 된다. XSS (Cross Site Scripting) - 사이트 간 스크립팅 Reflected XSS - 공격 스크립트가 담긴 URL을 전송 및 노출하여 클릭 유도 후 cookie..

서론조건에 따라 특정 문자열을 반환해주는 조건문이 필요했는데기존 코드는 3항 연산자의 중첩으로 가독성이 좋지 않았다. ex)return fruit === "apple" ? "사과" : type === "banana" ? "바나나" : "귤"조건에 따라 과일의 이름을 반환하는 간단한 코드로 예시를 들어봤다. 그리고 자주 쓰는 값은 "귤"이었는데 내 생각에 필요 없는 조건문을 먼저 비교하기 때문에적은 조건문이라도 횟수가 많아지면 불필요한 반복으로 효율성이 떨어질 거라 생각했다.그래서 코드 개선 방법으로 if문이나 switch문 중 어떤 걸 써야 하나 고민 중이었다. Test그래서 2가지 case로 반복문 속도 테스트를 해보게 되었다. ifswitchTest:Result결과부터 얘기하면switch가 미세하게 ..

안녕하세요리틀캥거루 쿼카입니다. 현재 프론트엔드 개발자로 살고 있으며프론트엔드 개발자로서 지식을 나누고자 블로그를 시작하게 되었습니다. 이 곳에 방문하시는 분들이제 블로그를 보며 많은 영감을 얻어 가시길 바랍니다.