Front-End
-
Nextjs13을 활용한 간단한 심리테스트 만들기Front-End 2023. 3. 23. 23:06
2022년 10월 26일 수요일 Vercel에서 Nextjs의 새로운 버전인 Nextjs13을 발표하였습니다. ChatGPT와 GPT4에 물어봐도 명확하게 답변해주지 못하는 따끈따끈하고도 최신 기술인데요. 평소에 SSR프레임워크도 써보고 싶었고 Nextjs13 공부도 할 겸 간단한 심리테스트를 구현해 보았습니다. 사실 Nextjs 써보진 않았지만 평소에 해보고 싶은 게 있으면 앞뒤 안재고 무작정 도전하는 스타일이라서 이번에도 사이드 프로젝트에 그대로 투입하였습니다. 그래서 굉장히 우당탕탕 이슈도 많았고 별것 아닌 거에도 많이 헤매었었는데요. 프로젝트 초기 세팅부터 써본 것들 위주로 간단히 후기 남기고 기록으로 남기려고 합니다.🙂 혹시나 Nextjs13 찍먹 해보고 싶은 분들께 이 글이 조금이나마 도움이 ..
-
Storybook 도입할 수 있을까?Front-End 2023. 1. 31. 19:11
스토리북 사용 관련해서 많은 글을 찾아볼 수 있었지만 "내 환경과 회사에 Storybook을 도입하면 어떤 장단점이 있을까?" 에 대한 고민을 해결해주지는 못하였습니다. 그래서 고민하고 찾아봤던 내용들 위주로 공유하고 기록하고자 합니다. 🤔 왜 Storybook을 사용하려고 하는가? 저 같은 경우에는 회사에서 UI 기능 구현 요청이 들어오면 제일 먼저 하는 일이 비슷한 UI 찾기입니다. 그리고 실제로 어디에 있는지 알 방법이 없어서 일일이 페이지마다 직접 들어가서 찾아가는 수고스러움을 동반합니다. 제 방법이 맞는지 이런 경우 어떤 식으로 문제 해결하는지 다른분들에게 한번 여쭤보았습니다. 지인 프론트 개발자인 두 분에게 물어봤는데 두 분 다 같은 대답을 하였습니다. "아에 새로 만들어 버리면 되지 않을까?..
-
NVM Window 설치 및 사용방법Front-End/Javascript 2022. 11. 27. 17:00
nodejs나 react 사용 시 팀 프로젝트를 진행하다 보면 github에서 프로젝트를 내려받고 npm install & npm start를 한 순간 오류가 와장창...? 나오는 경험을 해보셨을 수도 있습니다. 이 순간 제일 짜증 나는 건 왜 나만 안돼?? 그러게요... 분명 깃헙 소스 제대로 받고 모듈 설치하고 실행만 했을 뿐인데 다른 팀원들은 똑같이 해서 잘만 나오는데 왜 나만 안되는걸까요?😂 그 해답은 nodejs 또는 npm 버전 충돌 문제에 있습니다. (저는 npm install시 package-lock.json 파일이 완전히 바뀌어서 알게 되었습니다.) 아마, 이런 경험을 해보신 분들은 기존에 또 다른 프로젝트에서 다른 버전의 nodejs와 npm을 사용하셨을 겁니다. 이럴 때는 기존의 no..
-
React CDN과 create react app (CRA)중 어떤 방법이 더 좋은걸까?Front-End/react 2022. 8. 4. 00:45
React 사용방법에는 다음과 같이 크게 2가지 방식이 있습니다. node 와 빌드 도구를 설치한 개발환경을 세팅 하는 방법 (예 : CRA 사용) cdn을 사용해서 온라인에서 바로 라이브러리를 끌어오는 방법 방식이 2가지나 있으니 의문이 들것입니다. 과연 어떤 방식을 선택해야 되는걸까요?? 결론부터 말씀드리자면, 개발 및 시도에는 CDN이 좋고 실제 응용 프로그램의 경우 CRA 방식이 좋습니다. CDN방식의 경우 결국 URL을 사용하여 서버에 대한 요청을 보내기 때문에 여러 리소스를 로드하는 경우 전체 페이지가 로드될 때까지 약간 더 기다려야 될 수 있습니다.(렌더링 속도 이슈) 간단하게 보여주기식 또는 테스트용도로 사용하는 경우에는 빠르게 개발할 수 있다는 장점이 있지만 그래도 실제 응용 프로그램에 ..
-
jquery ajax 호출시 Request Url 파라미터 뒤에 언더바(_) 붙는 이유Front-End/Javascript 2022. 2. 21. 17:43
서버의 API 호출시 개발자도구( F12 )에서 네트워크탭 XHR 부분을 확인해보면 Request URL parameter부분에 언더바("_")가 붙는 경우가 있습니다. 실제 개발코드를 보면 서버에서도 클라이언트에서도 "_"를 넣어준적이 없는데 이 녀석은 어디서 나타난 것일까요?? 언더바("_")는 제이쿼리 API인 $.ajax 또는 $.getJSON 함수를 사용중이고 {cache:false} 옵션을 사용한 경우에 자동으로 생성됩니다. 그 이유는 브라우저의 caching 기능을 방지하기 위해서 입니다. 브라우저 캐시란? 브라우저 캐시는 브라우저에서 로컬 웹 페이지 리소스를 저장하는 데 사용되는 메커니즘입니다. (캐시 : 빠른 억세스를 위해 값을 임시로 저장하는 데 사용; 작은 데이터베이스) 브라우저 캐시..
-
웹 접근성 지침 적용방법 (IR 기법)Front-End 2022. 2. 17. 00:01
웹 접근성이란?? 사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는 모든 정보에 동등하게 접근하고 이용할 수 있도록 보장해 주는 것 1. 이미지() alt 속성을 사용하여 이미지에 대한 설명을 적습니다. 태그 예시 설명 이미지가 의미가 있을 때 사용한다. 모두 alt 속성 값을 넣는다. 💡 장식이나 배경 등의 의미가 없는 이미지에는 alt="" 삽입 또는 css-background 속성으로 표현한다.(이미지 스프라이트 기법) "메뉴 더보기", "다음 메뉴", "항목 열기" 등등 버튼의 기능을 명확히 이해할 수 있는 대체 텍스트를 제공한다. 💡 alt alternative의 약자로 ‘이미지의 대안, 이미지에 대한 설명’ 입니다. ( 태그에서만 사용 가능 ) alt 속성 사..
-
React 개발에 왜 Node.js가 필요할까??Front-End/react 2021. 3. 6. 03:09
구글에 React를 검색하면 항상 Node.js가 붙어다니는 광경을 목격할 수 있습니다. React를 공부하면서 개발하기도 시간이 촉박한데 Node.js까지 공부를 해야하는지 의문이 많이 들 것입니다. 도대체 React랑 Node.js랑 무슨 관계가 있는 것일까요?? 결론부터 말하자면, React를 사용하기 위해 Node.js가 반드시 필요한 것은 아닙니다. 그럼에도 왜 항상 React 뒤에는 Node.js가 따라 붙는 것일까요? 그 이유는 Node.js가 React를 사용하기 더 쉽게 해주는 도구들을 내장하고 있는 오픈소스이자 JavaScript runtime environment이기 때문입니다. 더 자세하게 설명하자면 Node.js는 설치하는 경우 NPM(Node Package Manager)이 같이..
-
jsrender 사용시 화면이 나오다 만 경우Front-End 2021. 3. 2. 14:37
QA팀에서 어느 한 페이지에 화면이 나오다 말았다는 이슈가 들어왔다. 처음에는 육안으로 언뜻 보았을때 UI의 한쪽면이 안나오고 있길래 직감적으로 jsrender라는 플러그인을 사용해서 발생한 문제 인줄 알고 한동안 템플릿을 뜯었다 고쳤다 해봤다. 그러나 템플릿 자체에는 별다른 문제가 없었다. 콘솔과 크롬의 자바스크립트 디버깅을 이용해 jsrender의 render()함수를 통해 렌더링 해온 데이터를 출력해보면서 깨달았다. 그런데 이상한점은 랜더링 해온 데이터를 jquery의 html() 함수에 삽입한 경우에 데이터가 온전히 다 출력되지 않고 잘려서 DOM tree가 형성 되었다는 점이다. $("#content").html( $jstemplate.render(data)); 이때부터 나의 삽질이 시작되었다...