꿈많은 DEVELOPER

🤷‍♂️ 본론에 앞서풀스택 개발을 진행하면서 사용자의 입장을 우선으로 하여 사용자 경험을 최우선으로 개발하려 노력합니다. 얼마 전에 읽은 책에서"개발하는 사람이 수고롭다면 사용하는 사람이 편리하고, 개발하는 사람이 편리하다면 사용하는 사람이 수고롭다" 라는 말을 되새겨 봅니다! Prefetching이란 무엇인가?프리페칭은 데이터가 실제로 필요하기 전에 미리 데이터를 가져와 캐시에 저장하는 과정을 말합니다. 이러한 프리페칭 기술을 통해 데이터를 미리 캐싱하면 사용자 경험을 향상할 수 있습니다. 간단히 설명하면💡 미리 필요할 수 있는 데이터를 가져오는 것을 의미합니다. 대표적으로 페이지네이션과 특정 탭을 누를 확률이 높은 곳에서 프리페칭을 많이 사용합니다.화면이 부드럽게 이동하고 캐싱데이터에 액세스 해서..

🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하지 않고 className 속성을 활용해서 CSS 스타일링 해야 했습니다.   기존에 방식으로 한줄 효과 스타일링을 하려고 했으나 tailwind CSS 방식이 달라서 다른 좋은 방법을 찾았습니다. 한줄 효과 기존 CSS 방식p { width: 6rem; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clam..

🤷‍♂️ 본론에 앞서프로젝트를 시작하기에 앞서 폴더 구조, 설계에 대한 아키텍처를 만드는 것은 상당히 어렵다. 이번 프로젝트에 React FSD 폴더구조 아키텍처를 설계할 예정이라서 FSD 아키텍처에 대해서 알아보겠습니다.  🤷‍♂️ FSD 아키텍처란?FSD는 Feature Sliced Desing 의미이며 작은 규모의 프로젝트나 점진적으로 규모가 확장될 필요가 없는 프로젝트라면 모놀리스 형식으로 프로젝트를 설계하면 되지만 점진적으로 소프트웨어의 규모가 커지고 확장해 나갈 예정이라면 FSD를 적용할 필요가 있다.  프론트 프로젝트 보일러플레이트 개념 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유https://cometrued..

반응형 웹, 혹은 웹앱을 만드는 요소에서 가장 중요한 CSS 미디어 쿼리가 있고 속성중에 min-width, max-width를 이용해서 모바일 부터 pc에 조건에 맞춰 UI를 처리할수 있습니다. min-width - 즉 1000px 이상인 경우에 적용되는 코드 @media (min-width: 1000px) { body { background: gold; } } max-width - 즉 1000px 이하인 경우에 적용되는 코드 @media (max-width: 1000px) { body { background: gold; } } min-width를 사용하는 경우 스마트폰등 모바일 사이즈에서의 레이아웃을 기본으로 점차 pc사이즈로 확장되어가는 형태에 적합 max-width를 사용하는경우 pc에서 모바일로..

오늘은 URL에 대해서 알아보겠습니다.도메인(Domain) ?도메인은 IP 주소를 갖는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어준 서비스 입니다. 실제 컴퓨터와의 통신에서는 숫자로 표현된 주소를 사용하기 때문에 이를 변환시켜 줄 네임 서버가 필요합니다.  즉 우리가 기억하기 쉽게 만들어주는 것이라고 생각하면 됩니다. 대표적으로 naver , daum 우리가 모두 기억하는 도메인 이지만 실제 고유 IP번호를 가지고도 있습니다. URL(Uniform Resource Locator) ?URL은 도메인을 포함한 경로 입니다 사용자가 도메인 서버로 접속 할 떄 , 프로토콜과 서비스 타입을 통합적으로 적어준 것이라고 볼수있다.  예를 들어 이렇게 분류 될수 있습니다.https://www.naver.co..

javascript 배열 객체에서 제공되는 함수인 splice() 함수를 이용하면 위치에 요소 추가 or 삭제를 유용하게 할수있습니다. 즉 Array.splice() 함수는 원하는 위치의 요소를 추가 or 삭제를 합니다! 문법또한 이해하기 쉽습니다! Array.splice(시작점 , 길이 , 배열추가 , 배열추가) 이런식인데 아마도 코드를 보시면 훨씬 이해하기가 쉬울꺼 같습니다! vs 코드를 켜주시고 배열 안에 값을들 넣어주시고 배열을 담고있는 m 안에 배열함수 splice()에 5번째에 길이는 0이고 추가1 추가2 를 추가해줘 이런 문법입니다! 역시 결과물은 잘나왔네요!!! 5번째 index가 5번 이니까요ㅎㅎ 다른 방식으로 해보죠 index 1번 뒤에 1뒤에추가 2뒤에추가 추가해줘 이런 문법입니다 결..

join() 메소드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다! 바로 예제로 확인해봐요! arr = [] 배열을 만들어주고 arr.join() 메서드로 배열에 index 합쳐춥니다! 추가적으로 배열.push() 맨뒤에 배열 추가입니다 배열.unshift() 앞에 맨앞에 배열추가합니다 join() 메소드를 알아봤습니다!

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..

part1에서 기본적인 Ajax 원리를 알아보았다면 오늘은 실제 Api를 활용해봐요! 외부데이터를 받아노는 fetch API를 활용해서 받오겠습니다! PART1 참고해주세요 ㅎ API를 깊에 정의하면 어렵지만 저는 API를 정의한다면 잘만들어진 API에 사용방법을 알려줄께 그방법대로 우리의 API를 잘활용해봐 이렇게 이해해를 합니다 그럼 실제 API를 활용해보겠습니다 사이트는 https://yts.mx/api API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx Eedpoint는 Api 접속하기위한 url ..

addEventListener는 event 방식으로 가장 권장되는 이벤트 핸들러 입니다 사용방식문법또한 어렵지 않습니다! 객체.addEventListener('이벤트 종류' , 함수) or 객체.addEventListener('이벤트 종류' , function(){ }) 이런한 형태로 사용을 합니다 바로 예제 들어가보죠 브라우저를 열고 확인을 하시면 잘나옵니다! 이번엔 조금더 다양하게 해보겠습니다 문법을 이해해보면 onclick 이벤트 실행 if(document.getElementById('prevent').checked) checked property가 체크가 되어있다면 return false 실행시키지 마 이런뜻입니다! 참고로 target="_blank" 새창을 열겠다라는 속성 입니다. 이거는 pro..

NODE 객체는 DOM(Document Object Model) 에서 가장 최상위에 있는 객체입니다. Node 객체는 모든 하위객체에 뿌리와 같은 존재입니다 Node객체에는 다양한 종류 들이 있는데 오늘은 Node를 추가 , 제거 , 변경하는 방법을 알아보겠습니다. 프론트 작업중 유용하게 활용할수 있는 기술 입니다 저또한 작업중 활용한 NODE API를 활용해서 작업을 했던 기억이 있습니다 먼저 Node 객체를 추가해보겠습니다. = createElement() 엘리먼트 노드를 추가하고 = createTextNode() 로 Text추가하고 appendChild & insertBefore 를 활용해서 생성하고 추가할수있습니다 = 추가를할때는 대표적으로 appendChild 활용해서 마지막자식으로 추가하는것이..

요즘 웹사이트보시면 go-top이라고 window 스크롤 내리면 나오고 클릭을 하면 최상단으로 올라가는 화살표를 보실수 있었죠? 이것또한 쉬운 jquery 코드로 만들수 있습니다. 다같이 해보죠! 시작하기전에 Jquery cdn 코드에디터에 삽입하겠습니다! https://developers.google.com/speed/libraries#jquery Hosted Libraries | Google Developers A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries. developers.google.com Code &n..

태그에 속성을 다룰수 있는 Element 속성에 대해서 알아봐요! Element 속성 값을 제어 하는 기능들은 다음과 같습니다! - getAttribute(' 속성 ') - setAttribute (' 속성 ' , ' value ') - hasAttribute (' 속성 ') - removeAttribute(' 속성 ') 이렇게 4가지 있습니다! 한번 코딩으로 더 알아가봐요ㅎㅎ vs 코드를 켜고 아 참고로 t.id , t.getAttribute 같은 의미 입니다 방식이 다를뿐ㅎㅎ a에 href 속성 값을 바꾸고 싶다면 setAttribute로 속성 , 값으로 주시면 속성값은 바뀝니다! a에 title 추가 하고싶을때도 똑같은 방식입니다. 지우고 싶다면 removeAttribute 속성으로 지울수 있고 h..

JavaScript & TypeScript Study 시작 최근에 IT기술이 빠르게 변하고 새로운 기술들도 많이 나오는거 같습니다. 그래서 기술에 변화의 3가지 유형에 대해서 공부를 해봤습니다 1. 변하지않는 기술 : 네트워크 , 운영체제 , 컴퓨터 시스템 2. 느리게 변하는 기술 : 프로그래밍 언어, 알고리즘, 보안, 프로그래밍 패러다임 3. 빠르게 변하는 기술 : 프레임워크, 라이브러리, 디자인패턴, UI UX 1번 기술과 2번기술은 3번기술에 비해 더많은 지식과 스터디 양이 필요하고 노력이 필요합니다. 3번기술에 노력과 지식이 필요없다는 말은 아니에^^ 3번기술은 우리가 많이 사용하는 프레임워크, 라이브러리이며 트렌드를 많이 타고 빠르게 변하는 기술이며 공부를 할때도 가장 접근해서 기술을 습득하기 ..

현재 시점에서 가장 많은 사람들이 사용하는 javascript 라이브러리 Jquery 입니다. javascript비해서 jqeury 쉬운코드로 강력한 기능을 만들수 있기 때문입니다. 그래서 유지보수나 가독성이 뛰어난 효과를 볼수있습니다. 기본적인 문법을 알아봐요! 저는 기본적으로 Jquery CDN 사용합니다! " target="_blank" rel="noopener">https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> 실무에서는 주로 Jquery 파일을 다운로드 받아서 프로젝트에 삽입해서 사용하는 경우가 많습니다. 이것을 다운받아서 사용하면 됩니다 Download the compressed, production jQuery 버전 이것을..