본문 바로가기

전체 글122

자바스크립트 파일에서 html 문법 쓰기 우리는 자바스크립트에서 동적으로 html 문법을 만들어줘야할 때 dom에 접근해서 createElement, classList, innerHTML, appendChild를 써서 직접 하나하나 설정을 해주었다. html을 직접 작성하면 코드가 이렇게 길지 않을텐데 dom에 직접적으로 조작을 하려하니 아래와 같이 코드도 길어지고 그에 따라 신경써야할 것도 늘어나면서 코린이인 나는 좀 헷갈리기도 했다. 그러다 구글링을 하면서 알게 된 훨씬 간단하면서도 친숙한 코드를 발견했다. const comment = document.createElement("div"); const userID = document.createElement("span"); const commentText = document.createEle.. 2023. 6. 23.
3항연산자로 if문 간단하게 만들기 첫 과제에서 3항연산자를 쓰라고 했는데 조건이 3개인 if문인줄 알고 썼던 초기 코드이다. 그리고 리뷰를 하면서 알게된 3항연산자를 쓰니까 이렇게 길던 코드가 단 3줄로 바뀌었다. function handleBtn(btnValue) { if (btnValue) { loginBtn.disabled = false; loginBtn.style.opacity=1; loginBtn.style.cursor = "pointer"; } else { loginBtn.disabled = true; loginBtn.style.opacity = 0.5; loginBtn.style.cursor = "default"; } 3항연산자의 기본 구조는 아래와 같다. 이때 true와 false 자리에는 truthy와 falsy의 값으로.. 2023. 6. 22.
CSS로 요소 정중앙에 배치하는 4가지 방법 요소 정중앙 배치하는 방법은 생각보다 다양하다. 나는 주로 display :flex를 많이 쓴다. 정중앙 뿐만아니라 정렬도 할 수 있어서 편한 것도 있고 처음 flex를 배울땐 너무 어려워서 계속 반복하면서 더 써보려고 하다보니 이제는 오히려 더 찾게 되는 것 같다. 그래서 오늘은 요소를 정중앙에 배치하는 방법을 알아보려고 한다. 상황에 따라 원하는 것을 골라 쓰면 될 듯 하다. display: flex; justify-content: center align-items: center; height: 100vh; display: grid; place-items: center; height: 100vh; position: relative; height: 100vh; margin: 0 auto; 2023. 6. 22.
fetch 메소드로 백엔드랑 소통하기 이번주 fetch 함수를 배우고 mock 데이터와 상수 데이터를 만들어서 적용해보는 과제를 해보았는데 백엔드와의 직접적인 소통은 생각보다 어려웠다... 그리고 아직도 리액트가 적응이 안돼서 이게 되네...? 하고 있는 중이라 더 어려웠다. 바닐라자바스크립트로 할 때는 DOM을 직접 조작해야해서 뭔가 꼬고 또 꼬아 다가가는 느낌이었는데 리액트는 그냥 inputValue의 name 값을 가져오면 된다니...! 아직도 적응이 안된다. 리액트로 첨부터 배웠으면 더 쉽게 생각할 수 있었을까 하는 생각도 든다. fetch 함수의 첫번째 인자는 백엔드에게 받는 API 주소이며 두번째는 옵션객체이다. 옵션 객체 안에 method가 GET이라면 옵션객체 전체가 생략 가능하다. 오늘은 로그인과 회원가입 기능이기때문에 PO.. 2023. 6. 22.
CSS 파일 import 순서 알아보기 1. reset.css 브라우저에 기본적으로 적용되어있는 css를 reset해주는 내용은 구글에 검색해보면 나오는 내용을 복붙해주면 된다. 기본적으로 적용되어 있는 p 태그의 margin 등을 지워줘 내가 원하는 스타일을 적용했을 때 문제 없이 적용된다. 이때 문제라는 것은 내가 상상하던 스타일대로 만들어져야하는데 기본 css로 다르게 구현되는 것을 말한다. 나는 보통 이 사이트에서 많이 긁어오는 편이다. 귀찮을까봐 가져왔다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .. 2023. 6. 22.
댓글 컴포넌트화해 분리하고 props로 데이터 전달하기 새로 만들어진 댓글을 컴포넌트화 해서 새 파일로 빼고 관련된 내용을 부모에서 자식으로 데이터를 전달해보도록하겠다. 이미 만들어진 기능을 다시 컴포넌트로 분리하라니...머리가 아파왔다. 기존의 코드는 이렇게 생겼고 반복될 부분만 컴포넌트화 해주기로 했다. 여기서 반복되는 부분은 return 중 p 태그다. {saveComment.map((ele, idx) => { return wecode {ele}; })} 반복되는 p 태그를 빼고 만들어준 CommentFull 컴포넌트에 건내줄 userComment의 요소와 index 값을 props로 넘겨준다. return ( {saveComment.map((ele, idx) => { return ; })} ) 아까 뺐던 반복되는 p 태그를 CommentFull 컴포.. 2023. 6. 19.

티스토리툴바