본문 바로가기
환영합니다. 이 블로그 번째 방문자입니다.

Front-end

  (13)
[Vuesax 길들이기] input 사이즈 조절, 내가 해냄 하 진짜 하 진짜 고구마 머문 입 방금 사이다 마시고 왔읍니다 vuesax를 이용해 프로젝트 웹 사이트를 제작하다 불편한 상황에 마주해버림 바로바로...(생각 하기도 싫다) ? 저 옹졸한 input 태그에 무엇을 쓰나요 제목, 본문 둘 다 불가능 저 것을 키워보기로 합니다 ? 변하지 않습니다. 그래서 개발자모드로 vuesax input에 대한 컴포넌트 분석을 시작합니다... 그래서 결국 해내버린 나 자신 자그마치 40분이다 갈았다구요 바빠 죽겠는데! 어떻게 했냐면요 여러분... ⬆️ 요 한 줄짜리 코드를... 다 뜯어 고쳐서 분해했습니다...^^ 제목을 작성하세요제목 ⬆️ 하하... textarea 속성이 필요한 부분은 태그를 textarea로 변경함 요소 태그 분해 후 스타일 적용까지... 나 좀 ....
DOM에서 노드 추가, 삭제하기 노드리스트(node list): querySelectorAll()메서드를 사용해 가져온 여러개의 노드 정보를 저장한 것 1. 텍스트 노드를 사용하는 새로운 요소 추가하기 (1) 요소 노드 만들기 - createElement() 메서드 document.createElement(노드명); ex) var newP = document.createElement("p"); (2) 텍스트 노드 만들기 - createTextNode() 메서드 document.createTextNode(텍스트); ex) var txtNode = document.createTextNode("텍스트 노드를 만들었다!"); (3) 자식 노드 연결하기 - appendChild() → newP와 txtNode 연결하기 → 텍스트 노드나 속성 노..
DOM에서 이벤트 처리하기 1. DOM 요소에 함수 직접 연결 var btn = document.querySelector("#btn"); btn.onclick = function(){ alert('버튼을 클릭했습니다.'); } 2. 함수 이름을 사용해 연결 var btn = document.querySelector("#btn"); btn.onclick = btnHandler; function btnHandler(){ btn.style.color = "red"; } ✅ event 객체에는 이벤트 정보만 들어있음, 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야 함 var card = document.querySelector("#card"); card.onclick = function(event){..
DOM 요소 접근 및 속성 가져오기 '접근한다' : 웹 문서에서 원하는 요소를 찾아가는 것 선택자(selector) : class, id, tag 등을 이르는 말 εїз DOM 요소 접근 1. id 선택자로 접근하는 getElementById() → id 속성 : HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자 요소명.getElementById("id명"); 2. class 값으로 접근하는 getElementsByClassName() → class 선택자는 웹 문서 안에서 여러 요소들이 사용할 수 있으므로 반환하는 요소가 2개 이상일 수 있음 → 반환 요소가 2개 이상 있을 수 있으므로 HTMLCollection 형태로 저장 요소명.getElementsByClassName("class명"); 3. tag 이름으로 접근..
[React 달력] 일요일이 아닌 월요일부터 시작하는 달력으로 수정하기 드디어...내 블로그에도 질문이..!!! (감 격) 👇🏻 질문 달린 포스트 https://sennieworld.tistory.com/61 [🐾 일지] 리액트 달력 만들기 프로젝트에서 그림 일기를 달력으로 보여주는 기능이 필요해서 달력을 제작하게 되었다. 라이브러리를 사용해도 되지만 달력의 셀 안에 이미지를 넣어야 하기 때문에 직접 그리기로 했다. 그럼 sennieworld.tistory.com 저번 달력 -> 이번 달력으로 바꾸려면 다음의 부분을 수정해주면 된다. 끝!
[JS -> TS] 프로젝트 변환하기(1) useState 변수 props 호기롭게 시작했지만 오류가 폭발했다. 친구들이 맨 처음에는 다들 그런 거라며 위로했지만 위로 안됨...ㅎ About 컴포넌트의 setIsBlur(useState 변수)를 Header에 넘겨야 한다. JS에서는 props로 넘기기만 하면 되지만, TS 세상에서는 그게 먹히지 않나 보다. 그래서 인터넷에 찾아보니...이게 안 된다고...ㅎ About에서는 그대로 넘긴다. 다만, Header에서 받는 방식이 다르다. 이것이 정확히 맞는 방식인지는 잘 모르겠다. 확실한 건, 뭐 하나 안 맞으면 오류가 나는 TS에서 오류가 나지 않고 잘 작동한다. interface에 useState변수를 Dispatch하고 SetStateAction에 변수 타입을 지정해준 다음, 컴포넌트에 해당 타입을 props로 넘겨주고 사용..
프론트엔드 개발 프로젝트 폴더 구조 지금까지 2개의 프로젝트를 해 보았다. 첫 번째 프로젝트의 구조는 지금 보면 한숨만 나올 정도로 darty하고 confusing하다. 구조를 바꿀 생각도 못한다. 프로젝트 중간에 몇번 바꿀까 같이 개발하는 친구에게 물어봤지만 우리의 목표는 clean code가 아니었고 function implement였기에 넘어갔다. 두 번째 프로젝트는 지금하고 있는 프로젝트인데 한 번 저 난리를 당해봐서 folder structure에 많은 노력을 쏟을 생각이었다. 좋은 폴더 구조를 향해 떠났지만, 워낙에 주관적인 것이라 정답이 없다. 프로젝트 페이지가 많아서 페이지별로 폴더를 만들고 하위에 style, api, util, component로 나누어 폴더를 관리했다. 이전보다 수월한 느낌은 있지만, 지금 프로젝트를 전..
Typescript types 지금까지 짠 프로젝트를 타입스크립트로 변환해보잣. 근데 나는 ts의 아무것도 모른다. 그래서! 공부 시작! 기존의 대충 흘려보던 타입스크립트의 가장 큰 차이점 : 타입을 지정해주는 것이다. 이게 뭔가? 했는데 이게 뭔지 알아보겠다. 가장 기초 타입 string, number, boolean 배열 숫자 배열 : number[], Array 문자열 배열 : string[], Array 단, [number]은 다른 얘기이다. 이것은 튜플이다. any 아직 특정한 값을 갖지 않았을 때 타입 체크 오류를 방지하는 타입스크립트의 특별한 타입이다. 값의 타입이 any이면, 어떠한 타입이라도 접근이 가능하다. let obj: any={x:0}; // 아래의 코드들은 오류가 나지 않는다. obj.foo(); obj();..
[리액트 클린코드 #1] 컴포넌트 관리 Extension 리액트 클린코드에 관한 고민은 항상 가지고 있었다. 중구난방으로 코드를 짜다보면 코드가 So dirty... 해지기 때문에 기분이 안 좋아진다. 그러던 와중 너무 늦게 알아서 쫌 쫘증나는 extension...모두들 미리 알아서 언렁 써먹길... 아직 서버 연결을 하지 않은 컴포넌트라 코드가 더 더러운게 사실이지만 어쨌든! 내가 소개하고 싶은건 glean extension이다 누가 개발했는지는 몰라도 천재가 확실함 이것을 어떻게 쓰는지 살펴보자. 아래의 코드는 웬만한 프로젝트에서 가지고 있는 Header의 navBar 코드이다. import React, { useState } from 'react'; export const Header = () => { const [count, setCount] = us..
[Javascript] 객체와 프로퍼티 (1) 출처 : "Javascript: The Definitive Guide, by David Flanagan(O'Reilly). Copyright 2011 David Flanagan, 978-0-596-80552-4" ♦️ 객체란 객체 : 자바스크립트의 기본 데이터 타입으로 이름과 값으로 구성된 프로퍼티들의 정렬되지 않은 집합 자바스크립트에서는 문자열(string), 숫자(number), true/false, null/undefined를 제외한 나머지는 객체이다. 자바스크립트의 객체는 객체가 가진 고유 프로퍼티를 유지하는 것 외에 '프로토타입'이라고 하는 다른 객체의 프로퍼티를 상속받는다. 객체로 가장 많이 하는 작업은 객체 생성, 프로퍼티 추가, 질의, 삭제, 테스트, 열거이다. 자바스크립트에서 맨날 하는 ..
[리액트 공식문서 파헤치기] JSX JSX : JavaScript Xml JSX는 HTML과 유사하지만 HTML은 아닌 언어(자바스크립트에 더 가깝다)로 XML 형식의 코드를 이용해 코드를 작성할 수 있게 하는 자바스크립트 확장 언어이다. JSX의 문법을 알아보겠다. 1. JSX의 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다. 즉, 컴포넌트에 여러 요소가 있을 때, 이를 감싸주는 부모 요소가 있어야 한다. function App(){ return( 1번째 요소 2번째 요소 ) } 만약 이렇게 작성했다면, 다음과 같은 오류가 발생한다. SyntaxError: /Users/sennie/wpet-client/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag...
[리액트 공식문서 파헤치기] 리액트 시작하기 새로운 프로젝트를 시작하게 되었다. 리액트 공식문서도 자세히 다시 볼 겸 포스트를 작성해 본다. 더보기 https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트 앱을 만드는 방법은 super simple이다. 맥북을 열고 F4를 누른 후 Terminal을 열어보자. 터미널 프로젝트를 만들고 싶은 파일 경로에 아래와 같이 입력해주면 된다. npx create-react-app project-name cd project-name npm start 만약, node가 설치되어 있지 않다면 설치를 한 후 실행해야 한다. 나는 no..
Javascript 공식문서 정리 [개요] 👇🏻 참조문서 https://developer.mozilla.org/ko/docs/web/javascript/a_re-introduction_to_javascript JavaScript 재입문하기 (JS ​튜토리얼) - JavaScript | MDN 어째서 재입문일까요? 왜냐하면, JavaScript는 세계에서 가장 오해받고 있는 프로그래밍 언어로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에 developer.mozilla.org εїз 이 문서에 어떤 방식으로 도달했던 간에, 나는 자바스크립트를 1년 동안 필요에 의해 구글링하며 사용한 사람이다. 애초에 제대로 기초부터 공부하지 않는다면 이 꼴이 날테니 제대로 공부하는게 중요하다는 오지랖을 부리며 기본부터 ..

티스토리툴바