✍ 공부하기 | switch 조건문 안녕하세요! 이번 내용은 조건문 switch에대해 다뤄볼겁니다 아주 기본적인 내용을 다루고 있으며 내용 원본은 모던 자바스크립트 입니다 👉 주소 switch문 ko.javascript.info 저는 다시 한번 제대로 기억 하기위해 위 원본 내용을 그래도 쓰는겁니다 자세한 내용은 원본 사이트에서 확인해주세요! switch문 복수의 if 조건문은 switch문으로 바꿀 수 있습니다 (여기서 모든 의미를 다 함😆 switch를 쓰는 이유는 이 때문이다!!!!) switch문은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다 문법은 아래와 같습니다 switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x ===.. ✍ 공부하기 | 반복문 (loop) 안녕하세요! 오늘은 코딩하면서 정말정말 많이 쓰는 반복문에대해 내용을 정리 해볼까해요 참고한 원본은 모던 자바스크립트입니다 👉 주소 while과 for 반복문 ko.javascript.info 거의 내용 그대로 복붙한거나 다름 없어요 😊 다시한번 머리속에 상기시키기 위해서, 그리고 무엇보다 제가 몰랐던 사용법이 굉장히 많았어서 정리합니다! while 반복문 while 반복문의 문법은 다음과 같습니다 while (condition) { // body } 저~기 body가 반복문 본문이라고 불리는 곳이며, 반복 하고싶은 코드를 작성해 넣으면 됩니다 condition(조건)이 truthy(참과 비슷한)이면 반복문 본문(body)의 코드가 실행됩니다 아래 예제를 봅시다! let i = 0; while (i < .. 📝 2020년 회고 너무나도 늦게 쓰게 된 2020년 회고록. 취준생 때 개발자 회고록을 종종 읽었었다. 원체 남의 인생사에 관심이 많은 편이라서ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 굉장히 재밌게 읽었었고, 나도 개발자로 취업을 하게 되면 꼭 써야지라고 생각했다. 드디어! 나는 취업을 했으니 회고록을 쓸 수 있게 되었다(?) 1. 드디어 취업 개발자로서 첫 취업에 성공한건 10월 23일이다. 해외 물류 IT 스타트업 회사였다. 물류 쪽 자체가 워낙 용어도 어렵고 해서... 그때 회사 서비스를 이해하는데 어려움을 크게 느꼈다. 이 회사에서는 면접때부터 남달랐다(?) 코로나로 인해 화상면접을 진행했는데, 마이크, 조명까지 간지 나게 세팅해놓고서는 정작 면접 때 카메라를 안 킨 거다... 웃긴 건 대표님도 그 당시에 얼굴 안 나온다는 말을 안.. HTML 기초 | html anti-pattern 안티 패턴, 나쁜 습관 이번 내용은 CSS 안티패턴에 이어서 HTML 안티패턴에대한 내용입니다 (CSS 안티패턴 내용과 함께 보면 굉장히 좋습니다 👉 이동) 제가 실무에서 지적 받았던 내용도 함께 작성했고 HTML이다보니 CSS와 연관된 내용이 많습니다! 1. 는 문서 하단에 작성한다 스크립트 태그는 태그 끝나는 부분 바로 위에 작성합니다 정말정말정말x1000000 기본적인 내용인데 제가 국비학원 다닐때 강사님이 에 작성하라고 알려줬습니다....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그래서 스크립트 태그가 에 들어가 있는걸 보고선 매우 혼란스러워 했죠.... 2. 외부 리소스 사용 시 URL을 직접 사용하지 않는다 이건 CSS에서 웹폰트를 쓰지 말라는 내용과 동일합니다 외부 URL을 직접 사용하지 않고 무조건 다운로드해서 불러오는걸로!!! 3. .. 🏃♀️React 컴포넌트 | LifeCycle (라이프 사이클, 생명주기 메서드) 안녕하세요 오늘은 리액트의 클래스형 컴포넌트에서만 사용할 수 있는 LifeCycle에대해 내용을 정리하려고 합니다 벨로퍼트님 강의를 토대로 제가 여기저기 살을 덧붙혀서 작성을 하려고 합니다! 1. React LifeCycle란? React에서 컴포넌트는 여러 종류의 "생명주기 메서드"를 가지며 이 메서드를 오버라이딩(상속하여 재정의)하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다 출처:https://ko.reactjs.org/docs/react-component.html 💥 여러분! 이 LifeCycle은 클래스형 컴포넌트에만 해당되는 내용입니다! (사실 저는 헷갈리는게 어디서는 LifeCycle API라고 하고 어디서는 LifeCycle Method라고 하고.. 어디는 LifeCycle Even.. CSS 기초 | CSS guidelines, 나쁜 CSS 습관 안녕하세요! 요번 포스팅은 CSS 기초를 다뤄볼까합니다 SI 회사에 다니면서 CSS가 얼마나 말썽을 피우는지 절실하게 느꼈습니다 그리고 꼼꼼한 사수 밑에 작업하다보니 제가 웹표준과 웹접근성의 어긋나 트릭을 사용한 몇몇개도 알게되었고.. ie 호환성 이슈... (진짜 빡친다) 이미 구축 된 서비스에 일부분을 만들어 붙칠 때의 CSS 문제... 등등 원래 가장 쉬우면서도 가장 말썽이라는게 CSS라고는 하지만.... 제가 잘 몰랐던게 꽤나 많구나를 느꼈습니다 그래서 MDN에서 제시하는 CSS 가이드라인과 제가 실무에서 느낀 가이드라인을 정리해서 써볼까합니다 MDN 내용은 아래 링크에서 확인 가능합니다 👉 MDN이 제시하는 CSS 지침 👈 CSS guidelines - The MDN project | MDN T.. javascript | 여러 개의 버튼 클릭 시 style, img src 경로 변경 안녕하세요 경아입니다 🖐 이번 포스팅은 매우매우매우매우매우x100000 부끄러운 포스팅입니다.... 저는 현재 회사에서 마크업을 위주로 하고있습니다 현재 개발 중인 사이트에 들어갈 탭메뉴 느낌의 여러 개 버튼을 만들고, 클릭될 때 img 태그의 src 경로가 바뀌어야 하는 동작을 JS로 작성해야 했습니다 바껴야하는 이미지가 다 동일하지 않고 각각 선택된 버튼마다 이미지가 다르게 있기 때문에 어떻게 작성해야 할지 감을 못 잡았습니다 그래도 대충 배열이.. 늘어난다...? 뭐... 이 정도 생각은 했습니다.. (이 말도 웃김...) 쨌뜬 버튼이 클릭될 때 img src 경로를 바꾸는 기능 구현하면서 매우 많은 시행착오와 바보 같은 짓을 많이 했습니다 결론은 자바스크립트 기초가 매우 부족하니 삽질을 한 것이고.. 일반 HTML 파일에 HTML include/imports 하는 방법 프론트엔드 개발자가 아닌 마크업을 위주로 하는 웹퍼블리셔들은 대부분 일반 html, css 파일로 작업을하게 됩니다 페이지가 많아지다보면 중복되는 내용이 많아지죠? 특히 header와 footer는 거의 고정입니다 근데 중간에 수정을 해줘야하는 일이 발생한다면? 같은 header가 들어간 n개 이상의 페이지를 일일히 수정해줘야합니다 express 템플린 엔진, jsp, php 등 서버사이드나 동적 언어를 사용하면 include가 가능해서 이런 걱정을 안해도 되지만, html에는 include 기능이 없습니다 검색을 하면 다양한 방법들이 나오는데, 제가 시도해봤던 방법들의 과정과 최종 결과를 공유하려고 합니다 1. HTML imports 구글에 html import를 치면 맨 위에 뜨는 내용입니다 www... ❌ Assertion failed: new_time >= loop->time, file c:\ws\deps\uv\src\win\core.c, line 309 | Node.js 에러 회사에 다니면서 빅커머스 기반의 쇼핑몰 템플릿을 수정하게 되었습니다 당시 회사 노트북 받기 전이라 제 개인 노트북으로 작업을 했었는데요 그 당시 인텔리제이를 통해 로컬 서버 접속이 원활하게 진행 되었습니다 그러나 회사 노트북으로 옮긴 후 로컬 접속을 하려고 stencil start (=npm run start)를 했더니 Assertion failed: new_time >= loop->time, file c:\ws\deps\uv\src\win\core.c, line 309 라는 오류가 뜨면서 접속이 안되는 겁니다... 제 사수님과 node_modules 삭제도 해보고... npm install도 다시 해봤다가.. Node.js를 삭제했다가... 버전 관리 했던 nvm을 삭제했다가..... 웬 갑자기 파이썬.. Node.js 시작, 세팅하기 | Express, ES6 문법 사용, nodemon 설치 저는 항상 Node.js 환경에서 개발을 시작하고 있습니다 항상 제 노트북에서 개발하다가 취업 후 회사 데스크톱으로 시작하려고하니... 제가 어떻게 node.js를 세팅 했는지 다 까먹은거죠...? 멍청이인가... 진짜로 저는 강의에서 시킨대로만 했던걸까.... 너무 바보스럽더라고요 그래서 이제 제가 아무 생각없이 따라하기만 했던 설정들을 하나하나 짚어가며 왜? 사용하는지? 에대해 알아보려고 합니다 Node.js 설치하기 nodejs.org/ko/download/ 사이트 접속 후, 본인 환경에 맞게 다운로드 하시면 됩니다 되도록이면 LTS 버전으로 다운받는걸 추천드립니다 제대로 설치가 되었다면 cmd 또는 터미널을 열어서 node -v 라고 치시면 버전이 뜰 겁니다 (node.js를 다운받으면 npm도 .. 🎤 내가 음악을 관두고 개발을 시작한 이유👩💻 (이미 한번 날아가고 다시 쓰는 내용...🤦♀️) 블로그를 개설하면 가장 먼저 쓰고 싶었던 내용이었다 그러나 갑작스럽게 잡힌 2차 면접과 기술면접으로 진행하겠다는 이야기를 듣고선 급하게 벼락치기로 이론 공부를 하느랴... 좀 늦게 쓰게 되었다 쨌뜬 매우 긴~ 이야기가 될 나의 실용음악과 보컬 시절부터 시작해 프론트엔드 개발 입문까지의 이야기를 써보려고 한다 나의 꿈은 원래 아이돌이었다 초등학생 때부터 학창 시절 내내 내 진짜 꿈은 아이돌 가수였다. 어렸을 적 봤던 만화 달빛천사가 매우 한 몫했다ㅋㅋㅋㅋㅋㅋ 초등학교 고학년 때는 친구와 함께 1시간 넘는 거리에 있는 SM 오디션도 보러 갔었다. 많이는 아니지만 소속사 오디션을 몇십 번 봐왔었고, 결과는 광탈 그 자체였다😅 솔직히 다 성장한 내 모습을 봐도.. ✍ 공부하기 | 자바스크립트 동작 원리와 이벤트 루프 (Event Loop) 이번 포스팅은 자바스크립트 공부입니다! 사실 이벤트 루프라는 말을 아예 처음 들어봤습니다 이벤트 루프는 비동기 처리와 연관이 깊은 것 같습니다 제가 쓴 자바스크립트 👉비동기 프로그래밍 포스팅👈 과 함께 보시면 좋을 것 같습니다! 1. 자바스크립트 동작 원리 (자바스크립트 이벤트 루프라고 검색하면 가장 많이 뜨는 이미지입니다😀) 자바스크립트 엔진은 Memory Heap(메모리 할당이 일어나는 곳. 선언한 변수, 함수 등이 담김) 과 Call Stack(함수가 실행되는 순서를 기억, 선입후출)으로 구성되어 있습니다 자바스크립트는 단일 스레드 프로그래밍 언어인데, 그 의미는 Call Stack이 하나라는 이야기입니다 (한 번에 하나의 작업만 할 수 있다는 뜻입니다. 멀티 X) 우리가 만약 시간이 매우 오래 걸.. 이전 1 2 3 4 5 다음
