코드로그 코드로그

전체 글

• Asynchronous JavaScript (1) - 싱글 스레드, blocking(블로킹) 현상

  JavaScript 2021. 8. 16. 23:30

  🌱 공부 주제: 싱글 스레드, 동기적 프로그래밍, 동기적 프로그래밍에서 발생하는 문제 📝 공부를 하게 된 동기: 자바스크립트랑 관련있고 async await 검색하다가 단번에 이해가 안되서 ✅ 공부 자료: MDN - General asynchronous programming concepts, MDN - Asynchronous JavaScript, JAVASCRIPT.INFO - Introduction: callbacks Introduction: callbacks javascript.info 1. 스레드(Thread)란? 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스 하나의 스레드는 '순차적으로' '한 번에 하나의 작업만' 수행한다.작업 A -> 작업 B -> 작업 C 위와 같이 한 번에 하나..

  Read More
• 로그인 구현

  JavaScript 2021. 8. 15. 01:00

  프롬프트(prompt) 대화상자를 이용해 간이 로그인 창을 구현해보세요. 사용자가 "Admin"를 입력하면 비밀번호를 물어보는 프롬프트 대화상자를 띄워주세요. 이때 아무런 입력도 하지 않거나 Esc를 누르면 "취소되었습니다."라는 메시지를 보여주세요. 틀린 비밀번호를 입력했다면 "인증에 실패하였습니다."라는 메시지를 보여주세요. 비밀번호 확인 절차는 다음과 같습니다. 맞는 비밀번호 "TheMaster"를 입력했다면 "환영합니다!"라는 메시지를 보여주세요. 틀린 비밀번호를 입력했다면 "인증에 실패하였습니다."라는 메시지를 보여주세요. 빈 문자열을 입력하거나 입력을 취소했다면 "취소되었습니다."라는 메시지를 보여주세요. 순서도는 다음과 같습니다. 중첩 if 블록을 사용하고, 코드 전체의 가독성을 고려해 답안..

  Read More
• OR 연산자의 피연산자가 alert 라면?

  JavaScript 2021. 8. 15. 00:17

  alert( alert(1) || 2 || alert(3) ); 얼럿 창엔 1, 2가 차례대로 출력됩니다. alert( alert(1) || 2 || alert(3) ); alert 메서드는 값을 반환하지 않습니다. 즉, undefined를 반환하죠. 첫 번째 OR || 은 왼쪽 피연산자인 alert(1)를 평가합니다. 이때 첫 번째 얼럿 창에 1이 출력되죠. alert메서드는 undefined를 반환하기 때문에, OR 연산자는 다음 피연산자를 평가하게 됩니다. truthy를 찾기 위해 말이죠. 두 번째 피연산자(오른쪽 피연산자)인 2는 truthy이기 때문에 실행이 멈추고 2가 반환됩니다. 반환된 값 2는 제일 바깥 alert의 피연산자가 되어 두 번째 얼럿창에 출력됩니다. 평가가 alert(3)까지 ..

  Read More
• 비교 연산자

  JavaScript 2021. 8. 12. 11:52

  https://ko.javascript.info/comparison 비교 연산자 ko.javascript.info

  Read More
• 기본 연산자와 형 변환

  JavaScript 2021. 8. 12. 00:15

  "" + 1 + 0 "" - 1 + 0 true + false 6 / "3" "2" * "3" 4 + 5 + "px" "$" + 4 + 5 "4" - 2 "4px" - 2 7 / 0 " -9 " + 5 " -9 " - 5 null + 1 undefined + 1 " \t \n" - 2 위 질문들에 답을 잘찾는다면 연산자에 의한 형변환을 이해한것이다. "" + 1 + 0 // ""는 문자열. 문자열과 숫자의 덧셈은 문자형으로 형 변환이 되어 문자열이 합쳐진다. "1" + 0. "10". "" - 1 + 0 // ""는 문자열. 문자열과 숫자의 뺄셈은 숫자형으로 형 변환이 되기 때문에 ""은 0이다. 0 -1 +0. -1. true + false // 1 + 0 = 1. 6 / "3" // 2 "2" * "..

  Read More
• Mixin. 작성해 두면 두고두고 편하게.

  CSS 2021. 7. 22. 21:31

  flexbox $flex-map: ( // 배열이라고 하나 이렇게 값을 펼쳐논다. key : 값 형태. start: flex-start, end: flex-end, between: space-between, around: space-around, stretch: stretch, center: center, ); @function _get-flex-value($key) { //입력한 키값($key)를 받아서 @return map-get($flex-map, $key); // @return 리턴한다. 배열에서 입력한 키값에 맞는 값을. } @mixin flexbox($js: center, $ai: center) { // : 를 붙히고 값을 써준 것은 default값을 설정함 display: flex; alig..

  Read More
• Sass. SCSS. grid system.

  CSS 2021. 7. 22. 18:26

  Sass. Syntactically Awesome Style Sheet. 문법적으로 어썸한 스타일시트. Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다. Sass는 중괄호 세미콜론이 없고 +, = 기호로 @mixin, @include를 대신합니다.SCSS가 Sass보다 CSS와 중괄호, 세미콜론을 쓴다는 점에서 유사합니다. 참고: https://heropy.blog/2018/01/31/sass/ Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법..

  Read More
• linter, prettier 설치하기

  Git 2021. 7. 21. 15:29

  혼자 개발할땐 상관없지만 협업할 때는 각자의 스타일대로 코드를 짜기 때문에 가독성이나 일관성 문제가 있어 린터와 프리티어를 설정한다. VScode 에디터 기준 Extension에서 scss-linter, sass-linter, stylelinter 등 여러가지가 있고 뭘 선택하냐에 따라 설치방법이 다르고 코드규칙을 어겼을 경우 경고해주는건 동일하다. scss-linter는 node를 설치하듯 ruby를 설치해줘야 하기 때문에 sass-linter가 쉬운 방법인거 같다. Linter 1.vscode에디터 Extension에서 scss-linter 다운로드 -ruby설치하기 window : https://phoenixnap.com/kb/install-ruby-on-windows-10 How to Instal..

  Read More