꿈많은 DEVELOPER

🤷‍♂️ 본론에 앞서Tailwind란?Tailwind CSS는 React와 Next 프레임워크에서 많이 사용되는 CSS 프레임 워크입니다. Tailwind CSS는 ‘utility-first’ 목적을 기반으로 다른 CSS 라이브러리와 달리 CSS 파일 & style 태그를 사용하지 않고 class 속성으로 CSS 스타일링 할 수 있습니다.  Tailwind CSS 사용하는 이유?Tailwind CSS 프레임워크를 통해서 UI를 빠르고 유연하게 디자인하고 스타일링할 수 있습니다. class(className) 기반의 화면을 스타일링 하기 때문에 개발자의 생산성과 빠르게 화면을 만들 수 있는 장점이 있습니다.   🤷‍♂️ Tailwind 사용법Next.js or React에서 Tailwind CSS 적용..

class 정의? 객체를 생성하기 위한 템플렛입니다. ES2015에서 도입된 클래스는 생성자의 기능을 대체하기 위해 사용됩니다. 생성자와 같은 기능을 하는 함수를 훨씬더 깔끔한 문법으로 정의 할 수 있습니다. class 안에 생성자(constructor)는 property라 불리고 함수(function)는 method라 불릴수 있습니다 super 키워드는 부로 오브젝트의 함수를 호출 할때 사용됩니다 extends 키워드는 클래스 상속을해서 클래스를 다른클래스로 사용이 가능합니다. 예제 constructor 생성자를 선언하고 name , age 인자값을 주었습니다 new 새로운 객체를 만들고 값을 출력하면 이렇게 잘나옵니다. 이번에는 extends , super 활용해보겠습니다 class 선언하고 prop..

javascript에서 함수는 정말 중요한 부분인데요. javascript는 함수가 값으로 될수있습니다 그래서 함수를 활용하는방법은 아는것은 정말 중요합니다. function 이라는 함수 키워드로 ()중괄호 {}호로 함수 키워드를 선언할수있습니다 그리고 함수는 함수 선언식, 함수 표현식으로 나눠질수 있습니다. 함수 선언식은 function printFunc(){ console.log('hello') } 함수 표현식은 const func = function printFunc(){ console.log('hello') } 이렇게 사용할수 있습니다 그럼 vs코드를 켜서 볼께요 이렇게 함수에 중괄호는 매개변수가 들어가는자리이고요 대괄호 안에는 함수에 작동하는 값들이 들어가는곳입니다! 저렇게 함수안에 값을 con..

javascript를 공부하다보면은 자료형에 대해서 알게되는데요 그래서 오늘은 javascript 자료형에 대해서 공부를해봐요! 데이터는 값과 값의 유형으로 구분되어져있습니다. 자료형이란 즉 값의 유형입니다 값이 가질수있는 여러가지 유형의 개념을 말합니다 javascript 2가지로 나눠질수있는데요 원시 타입(primitive type) 참조 타입(reference type) 이렇게 2가지로 나눠질수있습니다. 원시타입은 기본 자료형입니다 이렇게 준비를 해보시면 typeof() 함수는 javascript에 타입을 알수있는 함수입니다. 이렇게 각각에 타입을 말해주고 있습니다! 이번엔 참조 타입 참조 자료형입니다. 참조타입은 배열 , 객체 , 함수를 말하는데요 이것또한 typeof를 활용해서 타입을 알아낼수있..

OOP라 불리며 object oriented programing 객체지향 이라고 부릅니다! 객체 프로그래밍 방식 OOP는 객체들의 유기적인 관계를 통해서 프로세스가 진행이 됩니다. 즉, 어플리케이션을 구성하는 요소들을 객체로 바라보고, 객체들을 유기적으로 연결하여 프로그래밍 하는 것을 말합니다. OOP 장점은 코드 재사용이 높아지고 유지보수가 쉽고 크도가 간결해집니다! 단점은 처리 시간이 비교적 오래 걸리고 프로그램을 설계할때 많은 고민과 시간을 투자해야합니다 OOP의 특징 4가지 추상화 : 추상화는 목적과 관련이 없는 부분을 제거하여 필요한 부분만을 표현하기 위한 개념입니다 즉 인터페이스로 클래스들의 공통적인 특성들을 묶어 표현한것 캡슐화 : 실제로 구현 부분을 외부에 드러나지 않도록 하는것 , 변수와..

함수안에 this라는 것을 정의할수 있고 this를 활용해서 bind를 써보겠습니다 먼저 함수안에 this를 담을 객체가 필요해서 먼저 객체를 생성하고 객체 안에 name에 값을 넣습니다 그리고 showIntorduce 함수를 만들어서 파라미터값에 here , home , phone 넣고 console.log() 안에 값들을 넣어보겠습니다! 그리고 함수.bind(생성한 객체를 넣습니다); bind 함수를 변수 값에 넣고 boundsay라는 그리고 거기에 인자값을 넘겨 주면 됩니다! call , apply 방식은 조금 다릅니다! 결과값이 잘나오네요!

오랜만에 jquery 이용한 기능 구현을 해보네요!! 오늘은 일정 스크롤이 되면 gnb가 나타나는 코드를 짜보아요 여기서 써야되는 메소드는 offset 입니다 그리도 addClass and removeClass 기능 입니다! 그리고 scroll 이벤트 또한 ui구현할때 많이 쓰는 이벤트 입니다 click , mouseover , mouseout 등등처럼요 CodePen See the Pen gnbFloating by 유국현 (@yoogukhyeon) on CodePen. 한번씩 따라해주시면 더 도움이 되겠죠?ㅎㅎ 감사합니다!

Haker News Api를 Ajax 활용해서 어플리케이션을 개발해 보겠습니다! Haker News Project 기본적인 어플리케이션 개발을 위한 기본 연습입니다! part1 부터 단계별로 나아가며 마지막에 기본적인 typescript 활용해보겠습니다! 다같이 공부해봐요!! Part1 = 12줄 Ajax 코드 짜기 코드참고는 저의 git에 올려두었습니다 https://github.com/yoogukhyeon/FrontendProject1/tree/code1 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 developm..