wellkiim

Visual Stuido Code(VSCode)를 사용하면서 알아두면 유용한, 일부는 매우 필수적인 단축키에 대하여 정리한 내용입니다. 단축키 사용은 생산성을 정말정말정말 높여주기 때문에, 파일 찾기 등의 일부 단축키는 매우 활용성이 높습니다. 그럼 아래 리스트들을 봐주세요! # VSCode 단축키 알아보기 꼭 알아야 하는 단축키 위주로 정리해보았습니다. 아래를 봐주세요. 자주 사용하는 중요한 단축키 리스트 - 검색 및 찾기 - 일치하는 텍스트 찾기 Ctrl + F - 일치하는 텍스트 바꾸기 Ctrl + R - 파일 찾기 Ctrl + P - 줄 또는 블럭 이동하기 - 라인 또는 멀티라인 삭제하기 Ctrl + Shift + K - 라인 위 또는 아래로 이동하기 Alt + 방향키 - 주석 관련 - 한 줄(L..

맥 환경에서 VSCode를 터미널상에서 간편하게 명령어로 열 수 있습니다. (단, 이 포스트는 Mac 환경 기준입니다.) 아래와 같이 code . 명령어를 입력하면 현재 경로에서 VSCode가 실행됩니다. 하루에도 몇 번씩 사용하는 편리한 명령어 입니다. 사용 방법은 정말 간단합니다. 1. 일반 터미널의 경우 cmd + shift + p 먼저, VSC에 들어가서 해당 단축키를 이용하여 명령 팔레트를 연 후에 shell 또는 code를 입력합니다. 그럼 여러 연관명령어가 등장하는데, 그 중에서 Shell Commnad: Install 'code' command in PATH Shell Commnad: Install 'code' command in PATH 를 동작시켜 줍니다. 2. zsh을 사용하는 경우 ..

안녕하세요. 프렛입니다. 오늘은 Redux에 대해 알아보겠습니다. 자, Redux는 기본적으로 JavaScript application들의 state(상태)를 관리하는 방법입니다. Redux => Javascript application들의 state(상태)를 관리하는 방법 * Javascript이지, React에만 종속되어있는 것이 아닙니다. * Redux는 React와 별개입니다. Redux는 Angular에서도 쓸 수 있고, Vue.js에서도 쓸 수 있고, Vanilla Javascript(framework가 없는 pure한 JS)에서도 쓸 수 있고, 원하는 한 모든 Javascript application에서 모두 쓸 수 있다는 말이죠! 하지만, Redux는 사람들이 React와 많이 사용을 하므..

안녕하세요. 프렛입니다. 오늘은 제가 사용하는, 모든 개발자들이 가장 사랑하는 에디터인 VSC를 다운받는 방법을 알아보겠습니다. Visual Studio Code는 가벼우면서 강력한 소스코드 편집기로 데스크톱에서 실행되며, Windows, macOS 및 Linux에서 사용하실 수 있습니다. JavaScript, TypeScript 및 Node.js를 기본적으로 지원하고, 다른 언어인 (예로: C++, C#, Java, Python, PHP, Go) 및 런타임 (예: .NET 및 Unity)에 대한 풍부한 확장 기능 에코시스템이 있답니다!! 특히나, VSC만의 Extensions를 install하여 추가 언어, 테마, 디버거, 명령등을 입맛대로 활성화 할 수 있는데요! Extensions의 추천은 다음시간..

안녕하세요. 프렛입니다. 어느 덧, 시간이 흘러 프론트엔드 개발자로 생활한지, 1년이 넘었습니다. 블로그를 하겠다는 다짐만으로는 하기 힘들었던 블로그인데, 오랜만에 시작을 하려합니다. 일을 시작하면서부터 JavaScript부터, React, React-Native까지 쉼없이 달려왔으며, 복습을 하는 의미에서, 그리고 더 공부를 해보자는 의미에서 시작하고자 합니다. 더보기 React Naitive는 네이티브 개발의 최고 부분을 사용자 인터페이스 구축을 위한, 동급 최고의 JavaScript 라이브러리인 React와 결합합니다. 또 하나의 장점은, 당연히 JavaScript로 작성됩니다. React Native를 사용하면 한 팀이 두 개의 플랫폼(IOS, AOS)을 유지 관리하고 일반적인 기술인 React를..

안녕하세요! 웰킴입니다.어제는 많은 태그들을 활용한 기초웹페이지 영역을 나누는 방법에 대해 알아보았죠!그것과 마찬가지, 연장선으로 잠깐의 테스트형식의 문제를 풀어볼까합니다.!웹페이지의 영역wrap , header , 그리고 container , footer등 각각의 영역에 대한 이해는 충분히 하셨다고 보고,잠시 복습해본 다음 !다음 단계로 넘어가보도록 할게요!해상도 PC에서 가장 기본적인 해상도 ( 반응형 고려 ) : 1025px , 1280px 이 있습니다. PC에서만 사용하는 해상도 ( 관공서 , 예전 PC ) : 940px ( 리뉴얼 하기 전의 네이버와 다음의 너비사이즈 ), 960px, 980px 이 있습니다. 글자정렬 text-align : left , right , center + left :..

안녕하세요. 웰킴입니다. 어제는 인라인요소와 블럭요소에 대한 이해에 목적을 둔 시간을 가졌는데요.오늘은,많은 태그들을 활용한 기초 웹페이지 영역을 나누는 방법에 대해 알아보도록 하겠습니다.! HTML에 대한 글을 작성했을 때에 wrap 영역과 header , 그리고 container , footer 등 각각 영역에 대한 설명을 드렸던 것들을 기억하시나요? 클릭 ▶ HTML 설명 바로가기 그 각각의 영역이 어떠한 것들을 담고있는지에 대한 설명과, pc버전들이 가지는 각각의 픽셀 크기 등을 알아보도록 하겠습니다. 에디터 편집기를 사용하여 코드를 작성해보도록 하겠습니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434..

안녕하세요. 웰킴입니다. 어제부터 CSS에 대하여 알아보는 시간을 가졌는데요.css에 대한 높이와 너비설정을 이용하여 박스형태의 모양을 만들어보도록 하겠습니다. 먼저,weight : 너비값을 말합니다. px단위로 설정할 수 있습니다.height : 높이 값을 말합니다. 마찬가지로 px단위로 설정할 수 있습니다.전 시간에 inline 요소와 block요소에 대해 알아보았는데요.대표적으로 span 태그가 인라인요소였죠.인라인요소는 기본적으로 너비와 높이값을 가지지 않습니다. 그렇기 때문에 너비와 높이값을 줘도 적용되지 않습니다.그렇다면, 인라인요소에 너비와 높이값을 주기위해서는 어떻게 해야할까요.? 인라인요소를 블럭요소로 바꾸어주어야합니다. 에디터에 코드를 작성하여 알아보도록 하겠습니다. 1234567891..

안녕하세요.! 오늘은 추천 에디터인 브라켓 ( brackets )의 유용한 플러그인을 추천해드리려고 합니다.! 물론, 각자의 성향에 따라 유용할 수도, 불편할 수도 있으니 이 점 잘 참고하시고 각자 편하신 것을 사용하시면 될 것 같습니다.! HTML 편집기 무료 소프트웨어 Adobe Brackets ▼ 아래 텍스트를 클릭하시면 다운로드 및 설치 방법에 대한 페이지로 이동하게 됩니다. " Adobe Brackets 설치방법 " 일단, 다운로드 받은 Brackets을 실행하게 되면 , 아래 이미지와 같은 페이지가 나타나게 됩니다. 그 후, 해당 이미지 버튼을 클릭해주시면 플러그인 다운로드 창이 나타나게 됩니다. ▼ 플러그인 다운로드 창 제가 사용하는 플러그인을 소개해드리도록 하겠습니다. ! 1. Popup-..

오늘은 추천 에디터인 브라켓 ( brackets )을 소개해드리려고 합니다.! Html 편집기 무료 소프트웨어 Adobe Brackets HTML / CSS / jQuery / javascript / php / JAVA 등을 알아가기 위해 필요한 작성 에디터가 필요하겠죠? 저도 맨 처음에는 Editplus 라는 에디터를 사용하였습니다. 하지만, 조금 더 편하고 예쁜 템플릿을 가진 에디터를 찾다가 Brackets을 처음 접하게 되었는데요. 다양한 편집기가 있지만, 오늘은 Brakcets을 소개해드리려고 합니다. 그건 바로 " Adobe Brackets " ▼ 다운로드 링크 http://brackets.io/index.html Adobe Brackets 다운로드 사이트 링크된 사이트로 이동하면 위같은 화면이..

안녕하세요. 웰킴입니다. 어제부터 CSS에 대하여 알아보는 시간을 가졌는데요. 오늘은 한층 난이도를 높여서 css의 기능 중에 많이 쓰는 명령어들을 알아볼까 합니다.헷갈릴 수 있으니 잘 따라와주시길 바래요 ~ 오늘 배울 명령어들을 먼저 알아보도록 하겠습니다. 먼저, font-weight : 폰트의 굵기를 말합니다. 기본적인 크기는 400 이라고 생각하면 됩니다. 100 단위로 크기를 높이는 것이 일반적입니다. color : 폰트의 색상을 말합니다. 16진법이 일반적입니다. 경우에 따라 #red , #yellow 등 고정적인 값을 영어로 입력해도 무방합니다. text-align : 폰트의 정렬 형태를 말합니다. left , center , right 가 있습니다. text-transform : 영어로 된 ..

이번 시간에는 앞서 배운 태그들을 가지고 그 해당 태그에 id값을 입력.각 태그들이 어떤 영역을 가지는지 앞선 web_basic파트에 이어 조금은 더 심화된 구성을 해보려고 합니다. 준비되셨나요! 어렵지는 않으나, 이번 시간에 배우는 각각의 markup을 가지고 따라해보시되,여러분들이 각 태그안의 텍스트를 바꾼다던지. 각각 태그에 원하는 이미지를 넣어보는 방식으로 간단한 페이지를 꾸며도 재밌을 것 같다는 생각을 감히 해봅니다.! 자 그럼 에디터를 켜고 코드를 작성해보도록 하겠습니다. 해당하는 영역으로 이동( 구간 건너뛰기 ): wrap영역에 속하지 않고 독립적인 영역으로 사용가능wrap, wrapper, 기업명wrap,기업명_wrap : 전체를 담아주는 영역!로고, 상징적인 요소들: 상황에 따라서는 he..