본문 바로가기

전체 글

#2 기록을 남기다 : 이타적인 삶 보호되어 있는 글입니다. 더보기
[VS Code] 비주얼스튜디오코드에서 REST API 쉽게 확인하는 부가기능(REST Client Extension) 비주얼스튜디오코드는 퍼블리셔와 프론트엔트개발자 외에도 많은 개발자가 선호하는 툴이 되었죠! 개발의 필수요소 중 하나라고 볼 수 있는 RESTAPI의 값을 보기위해서 여러가지 REST API 관련 툴을 사용하곤 했습니다. 언제까지 다른툴(Postmap, google 개발자도구 네트워크)을 사용하실 건가요? 물론 툴마다 제공하는 기능이 다르기 때문에 지금 소개하는 부가기능이 정답이라고 말할 수는 없지만 확실히 API 정보를 보기에 부족함이 없어 보입니다. 이젠 쉽고 편하게 API정보를 확인해보세요! REST Client - Visual Studio Marketplace Extension for Visual Studio Code - REST Client for Visual Studio Code marketpl.. 더보기
본주짓수 문래 베이직반 간략한 브이로그 vLog ! 안녕하세요~ 오늘은 본주짓수 문래 베이직반을 맡고 있는 사범님의 브이로그(vLog)를 담아봅니다~ 작년 12월에 사범을 하시면서 올해부터 베이직반이 개설되었는데 일반부와 분리해서 입문한지 얼마 안된 수련생을 위한 기초 기술과 개념에 대해서 설명을 많이 주십니다! ​ 처음 주짓수 체육관에 가면 대부분 '일단 따라하세요'라는 이야기를 많이 하곤 합니다. (전부 그렇지는 않으니 오해 XX) ​ 베이직반에서 기본 기술들과 기초적인 움직임을 배우고 일정 기간이 되면 일반부(Fundalmentals)로 옮겨서 수업을 들으실 수 있어요! 베이직반이 아쉽지만.. 성장한 것이기에 뿌듯한 마음으로!! 어떤 기술을 먼저 배워야한다는 '기준'이 있다면 평생 제자리에서 같은 기술만 배우게 될 거입니다. ​ 어떤 기술을 먼저 배.. 더보기
[Javascript] replace와 array(배열) 활용해서 템플릿 만들기. replace를 얼마나 활용하시나요? replace 함수는 string요소의 원하는 패턴을 일부 또는 모든 부분을 교체할 수 있는 함수입니다! 그저 replace는 글자 바꾸기로만 사용했다면 오늘은 해당 함수를 이용해서 템플릿을 만들 때 활용할 수 있다는 점을 알고 가는게 어떨까요? MDN에서 설명하는 replace String.prototype.replace() - JavaScript | MDN replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치 developer.mozilla.org 템플릿으로 활용하기 template 변수에 코드를 담아줍니다. tem.. 더보기
[JS] 대체 리펙토링이 뭔가? ajax로 리펙토링 쉽게 이해하기. 리펙토링이 뭘까요? 리팩터링(refactoring)은 소프트웨어 공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다. 1. 주로 가독성을 높이고 유지보수를 편하게 한다. 2. 버그를 없애거나 새로운 기능을 추가하는 행위는 아니다. 3. 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 개선하는 유지보수 행위이다. 리팩터링의 잠재적인 목표는 소프트웨어의 설계, 구조 및 구현을 개선하는 동시에 소프트웨어의 기능을 보존하는 것이다. 리펙터링은 코드의 가독성을 향상시키고 복잡성을 감소시키는 효과를 가지며, 이러한 이점은 소스 코드의 유지 보수성을 개선하고 확장성을 개선하기 위해 더 단순하고, 깔끔하거나, 표현력이 뛰어난 내부 아키텍처 또는 객체 모델을 만들 수 있게 한다. 그리고 소프트웨어.. 더보기
프론트엔드 개발환경 왜 이렇게 복잡할까? javscript 환경 이해하기 최근 프론트엔드 개발 공부를 시작한 사람들이 많습니다. 구하는 곳은 많은 것에 비해 인력난이기 때문일 수도 있지만 코로나19로 인해 많은 곳이 인력난이라 변명이 되기에는 부족함이 있죠. 더울 때 시원한 곳에서 일하고, 추울 때 따뜻한 곳에서 일할 수 있는 '개발'이라는 것에 매력을 느끼는 것 같아요. 또한, 디지털노마드를 꿈꾸며 워라밸과 자신의 라이프를 유연하게 사려는 시대이기 때문이라고도 할 수 있습니다. 오늘은 프론트엔드 개발을 할 때 가장 기초가 되는 부분을 포스팅해봅니다. javascript 코드에 대한 부분은 구글링르 조금만 해도 나오는 반면 '왜' 이렇게 복잡한 세팅을 해야 하는지 모르는 사람들이 많을 거라 예상합니다. html에 간단하게 javascript 파일을 불러와서 적용하는 간단한 방.. 더보기
[VS Code] yarn 실행했더니 '보안 오류'가..?! 문제 VS Code에서 yarn serve를 실행하는데 생긴 문제 오류코드 : 보안 오류: (:) [], PSSecurityException 이유 해당 문제는 윈도우(Window) 환경에서 일어나는 문제입니다. VS코드 Termianl에서 사용하는 기본 툴은 다릅니다. 윈도우 : PowerShell 맥 : Bash 위와 같은 터미널은 사용하는데 기본적으로 PowerShell에서 실행 정책으로 막아놔서 그렇기 때문에 아래와 같이 적용해주면 문제 해결이 됩니다! Easy! 문제 해결 1. 기본정책 확인 코드 : ExecutionPolicy => 결과값 Restricted 2. Set-ExecutionPolicy Unrestricted 입력 3. 1번처럼 다시 확인 => 결과값 Unrestricted 더보기
[CSS] 인터넷익스플로러(IE)에서 셀렉트(Select) 화살표 제거하기 인터넷익스플로러에서 Select를 사용하고 있다면 스타일을 바꾸기 위한 코드를 작성해봤을거다. 기본 화살표는 투박하고 아름답지 못하기 때문에 디자이너의 입맛을 맞춰주기 위해서 셀렉트 우측 화살표 정도는 디자인에 맞춰서 아름답게 꾸며주자! IE에서 Select 화살표가 사라지지 않는다?! 문제 아래와같이 코드를 준다면 뭔가 하나 부족한게 있다. 바로 IE에서 select를 제거하는 방법이다. select{ appearance:none; //기본 -webkit-appearance:none; //크롬 -o-appearance:none; //오페라 -moz-appearance:none; //파이어폭스 } 문제해결 "appearance면 끝나는거 아냐?!" 라고 생각할 수 있지만 IE를 위해서 한가지 코드를 더 .. 더보기