나무 숲

https://easings.net/ko Easing Functions Cheat Sheet Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function. easings.net Easing functions specify the rate of change of a parameter over time. 각 함수에 마우스 hover하면 움직임이 어떻게 되는지 간단하게 ..

목표 Http 통신, Socket 통신 방식에 대한 이해 관련 예제 네트워크를 통한 서버와의 통신 방식은 크게 http통신과 socket통신으로 나뉜다. 1. http 통신 Client의 요청(Request)이 있을 때만 Server가 응답(Response)하는 단방향 통신으로, 응답을 받고나면 연결이 종료된다. ex. 버튼 클릭 시 선택된 컨텐츠 보여주기 REST? REpresentational State Transfer Request에 따른 API를 구조화하는 가장 표준화된 방법으로, Http 방식에 기반을 둔다 Statetlessness: Client와 Server가 서로의 State를 알 필요가 없다 (Client와 Server가 분리되어 있어 각 부분에서 코드가 변경되어도 서로에게 영향이 없다)..

JS TDD 개론 TDD? Test-Driven-Development 테스트 주도 개발 테스트 케이스 생성→테스트→개발의 짧은 개발 사이클을 반복적으로 수행하며 소프트웨어를 개발하는 프로세스. Red-Green Refactor 라고도 한다. 테스트 케이스 작성 테스트 케이스를 통과하기 위한 최소한의 코드 작성 표준에 맞도록 리팩토링 Uncle Bob describes TDD with three rules: You are not allowed to write any production code unless it is to make a failing unit test pass. You are not allowed to write any more of a unit test than is sufficient t..

공부 소스는 이렇게 많은데 ^^ 언제하지? 1. 모던 자바스크립트 튜토리얼 ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 2. Javascript30 javascript30.com/ JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 3. 웹 프로그래밍 튜토리얼 PoiemaWeb poiemaweb.com/ 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com +) 그리고 거의 수학의 정석같은 생활코딩 opentutorials.org/course/1 생활코딩 hello..

호이스팅Hoisting? ES6 이후에서 함수나 변수 선언이 해당 유효 범위(스코프)의 최상단으로 끌어올려지는 것처럼 보이는 현상. 실제로는, 컴파일 타임에 변수/함수 선언이 메모리에 들어가되 할당은 코드를 작성한 위치에서 진행된다. 특징 함수/변수 선언에만 적용된다. 초기화만 해주는 경우 Hoisting이 일어나지 않는다. console.log(num); // Throws ReferenceError exception num = 6; // Initialization 함수 표현식은 정의된 함수를 변수에 할당하는 것이므로 Hoisting이 일어나지 않는다. var square = function (x) { return x * x; }; let, const 선언은 발생하지 않는다. var로 변수를 선언한 경우..

FeBase에서 출제한 FE 기초지식 테스트를 쳐봤다. 20점인가 그랬떤듯^^; docs.google.com/forms/d/e/1FAIpQLSer5oRzyfqxpX8gg4_cQuPUpoMIyMJob369WCLYFtgisnh4Gg/viewform 2020 FeBase Season 1 Exam Febase(https://github.com/Febase/FeBase) 에서 2020년 상반기에 기고된 내용을 바탕으로 문제가 출제되었습니다. 2020 Season 1에서는 Javascript 기초에 대한 내용을 전반적으로 학습했습니다. 구글링을 하지 마� docs.google.com FE 기술면접 질문으로도 많이 나오는듯 하여 위 설문에서 나온 것 뿐만 아니라 주워들은것 하나씩 작성하려 한다! Q. 브라우저가 웹서..

https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif ✨♻️ JavaScript Visualized: Event Loop Oh boi the event loop. It’s one of those things that every JavaScript developer has to deal with in o... dev.to

https://dev.to/desoga/the-a-z-of-web-development-5ge6 The A-Z of Web Development The A-Z of Web Development dev.to

Click this to Copy! https://alligator.io/js/copying-to-clipboard/ Copying to Clipboard Using Vanilla JavaScript You're a dozen lines of code away from implementing a copy to clipboard functionality using 0 libraries and just some simple JavaScript. alligator.io 를 참고. https://github.com/wooooooood/Today-I-Learned/blob/master/Javascript/%EA%B8%B0%EB%8A%A5/Copy%20into%20Clipboard.html wooooooood/To..

도구 파워셸 administrator, VSCode 준비 ESLint에 대해 오픈챗방을 통해 올해 처음 알게 되었다. JS상의 불필요한 오류같은것 잡아주고 코드 스타일을 정리해주는 도구로 이해했다. JS스터디에서 다른 분들 사용하시는걸 보고 써보고 싶다고 생각은 했다. VSCode에서 JS 도구 추천을 해줘서 깔았더니 ESLint였다. 곧 시작할 JS스터디를 생각하며 이번엔 써보기로 결심했다. 인터넷 보면서 따라하는데 묘하게 다들 달라서 스탠다드가 뭔지는 모르겠지만 일단 걍 함. 시작! VSCode에서 npm install -g eslint 함. eslint --init이 안먹혀서 파워셸admin으로 넘어가서 시도함. eslint 명령어에 대해 cannot be loaded.. .. is not digi..

https://webdesign.tutsplus.com/articles/pure-css-animation-inspiration-on-codepen--cms-30875 Inspiration: 10 Examples of Pure CSS Animation on CodePen Our mobile browsers continue to get more powerful and better at showing us amazing, beautiful animations. When combined with the layout power of CSS, it’s possible to create some gorgeous work... webdesign.tutsplus.com https://codepen.io/YusukeNak..

오랜만에 페어 프로그래밍을 했고 짝님께서 TDD하기 좋은 프레임웤 Jest를 가르쳐주셨다. 코딩도장에서도 나름 TDD를 하긴 했으나 그땐 정말 베이직한 개념만 알고 한거라서 아 이게 TDD구나 하는 느낌은 별로 못받았었다. 이걸 사용해보면서 TDD의 참맛을 느낀 것 같다. https://jestjs.io/ Jest · 🃏 Delightful JavaScript Testing 🃏 Delightful JavaScript Testing jestjs.io 로고랑 컨셉이 예쁘군. 아무튼 이 글의 목적은 설치와 사용법 단순 기록이므로 스샷 나열 간다. VSCode에서 했다. 1. npm init -y package.json이 만들어진다. 2. npm i -D jest development 모드로 jest를 실행하겠..

Javascript 첫걸음 https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps JavaScript 첫걸음 첫 과정에서는 "JavaScript가 뭔가요?", "어떻게 생겼나요?", "뭘 할 수 있나요?"와 같은 근본적인 질문을 먼저 해결한 뒤에 JavaScript를 직접 사용해봅니다. 그 다음으로는 변수, 문자열, 숫자, 배열 등 중요한 구성 성분을 하나씩 자세히 알아봅니다. developer.mozilla.org Javascript 재입문 https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript JavaScript 재입문하기 (JS ​튜토리얼) 어째서 재입문일까요? 왜냐..

https://codesandbox.io/ CodeSandbox: Online IDE for Rapid Web Development CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster codesandbox.io 무료로 웹 개발 환경을 만들고 Color Theme도 다양하게 설정할 수 있다. 패캠 프론트엔드 강의에서 배웠다 ㅎㅎㅎㅎㅎ Create Sandbox를 누르면 아래 이미지 외에도 다양한 템플릿 선택 가능!!! Vanilla가 일반적인 JS라고 생각하면 됨. 구글에 검색하면 아래와 같은 내용 확인 가능하다 What is "Vanilla JavaScript"? ....

Arguments 가변인자 : 함수 Arguments의 타입, 개수가 상관없다! 1. Arguments 개수 구하기 function GetArgsLength() { console.log(arguments.length); } GetArgsLength(); //0 GetArgsLength(1); //1 GetArgsLength(1, "2"); //2 2. Arguments 타입 구하기 function GetArgsType() { for (index in arguments) { console.log(typeof arguments[index]); } } GetArgsType(); // GetArgsType(1, "2"); // number, string GetArgsType(undefined); // undef..