본문 바로가기

분류 전체보기129

React / part.1 CRA CRA(Create-React_App)란? 리액트 프로젝트를 시작하는데 필요한 개발 환경을 구축해주는 도구(toolchain)이다. 1. CRA를 이용한 프로젝트 구축 터미널에서 프로젝트를 시작하고자 하는 폴더에 진입한다. cd [ 프로젝트를 구축할 폴더명] 프로젝트를 설치한다.이때 프로젝트명은 대문자 혹은 소문자로 작성한다(~!()^*)등의 일부 특수문자는 에러 발생 npx create-react-app [프로젝트명] 프로젝트 폴더 진입 cd [프로젝트명] 로컬 서버에 띄우기 npm start http://localhost:3000 이라는 로컬 서버주소를 확인 2. CRA 초기 폴더 및 파일 구성 node_modules, .gitignore, package.json 상관관계 이해하기 node_modul.. 2023. 4. 21.
React/ Part.1 Node.j & npm 1. Node.js 등장 배경 자바스크립트는 웹 브라우저에서 동작하기 위한 언어로 웹브라우저 밖에서는 사용할 수 없었다 하지만 자바스크립트를 웹 브라우저 밖에서 사용하고자하는 개발자들의 니즈가 늘어남에 따라 웹 브라우저가 아닌 작업환경에서 동작할 수 있도록해주는 도구가 필요해졌다. ⇒ 자바스크립트의 탈 웹 2. Node.js란? Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 실행 환경이다. 3. npm(Node Package Manager)이란? Node.js를 이용해서 실행할 수 있는 자바스크립트 파일들의 묶음이 package이다. 패키지를 손쉽게 설치하고 관리하기 위한 도구가 NPM(Node Package Manager) node = ios / npm (Node .. 2023. 4. 21.
React / intro : 리액트란? 리액트란 무엇인가? 들어가기에 앞서 리액트의 등장 배경을 통해 리액트의 필요성을 알아보자. 새로운 기술을 이해하기 위해서는 그 기술이 나오게된 배경을 먼저 이해하는 것이 중요하다. 어떤 배경에서 어떤 문제를 해결하기 위해 만들어 졌는지를 알면 그 기술을 더 쉽게 이해할 수 있다. 1. Web Application의 발전 상호작용이 적고 단순한 과거의 웹페이지와 달리 현재의 웹페이지는 상호작용이 많고 페이지의 규모 또한 커졌다. 쉽게 말해 예전에는 사용자가 수동적으로 정보를 받는 입장이었다면, 현재의 사용자는 다양한 액션을 취해 다양한 결과를 얻을 수 있게되었다. 2. 프론트엔드, 프레임워크(Framework)와 라이브러리(Library)의 등장 규모가 커짐에 따라 복잡해진 웹어.. 2023. 4. 21.
JS/ 로그인 버튼 활성화 / addEventListener "keyup"이 아닌 "input" 사용해야 하는 이유 유효성 검사를 통해 조건 충족 시 로그인 버튼이 활성화 되는 기능 구현중, input에 유저의 액션이 있을 때 유효성 검사를 하도록 하는데 addEventListener를 사용했다. 기존에는 addEventListener("keyup")을 사용했었는데, keyup이 아닌 input을 사용하는게 더 적합하다는 것을 알게 되었다. keyup이 아닌 input을 사용해야 하는 이유 우선 지금 구현하고자 하는 기능에 대한 세부적인 조건에 대해 먼저 명시하자면, (무조건적으로 keyup이 틀리고 input이 맞는 것은 아니다.) HTML JS function loginForm (x) { return document.getElementsByClassName(x)[0] } loginForm("loginId").add.. 2023. 4. 13.
git & github 사용하기 시작하기에 앞서... git과 github를 사용하는 이유? git은 버전관리를 효율적으로 할 수 있는 도구로 개발 과정에서 기록을 남기고 추후 다시 되돌아가야하는 상황에서 이정표 역할을 한다. github는 hub라는 글자 그대로 개발되는 과정과 프로덕트를 온라인 저장소에 저장하고 공유할 수 있도록 해준다. git과 밀접한 상호작용이 있으나 같은 것은 아니다. 다수가 협업하여 개발하는 상황에서 편리성을 제공한다. 언제 어떤 개발을 누가 했는지 관리할 수 있다. 코드 리뷰가 가능하고 안전하게 코드들을 merge 할 수 있다. 사용하는 방법은 크게 두가지 상황에 따라 나뉜다. 1. 새로운 프로젝트를 시작할 경우 2. 이미 진행중인 프로젝트를 개발할 경우 1. 새로운 프.. 2023. 4. 12.
<img>와 background-image 속성 /Semantic Web, Semantic Tags 태그를 이용하는 방법과 background-image 속성을 이용하는 방법의 차이점 둘다 시각적으로는 같은 효과를 낼 수 있지만, 사용하는 목적이 조금 다르다. 크게 웹접근성과 업무 효율성 측면에서 구분해 사용될 수 있다. 태그를 이용하는 방법 1. 해당하는 이미지가 구체적인 정보를 담고 있을 때 이미지가 정보 전달을 목적으로 사용되는 경우 태그의 alt 속성을 이용해 웹접근성을 높일 수 있다. 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다. alt 속성은 사용자가 느린 네트워크 환경, src 속성값의 오류, 시각 장애인용 스크린 리더 사용 등으로 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다. 그렇기 때문에 태그를 이용해 background.. 2023. 3. 8.
7~8월의 기록 자바스크립트와 알고리즘 HTML,CSS에 대한 기본기를 학습하면서 코딩노트에 기록했던 내용들을 블로그에 정리하는 시간을 가졌습니다. 한동안 코딩 노트를 작성하지 않고 공부했었는데 자바스크립트와 알고리즘을 공부하면서 다시 코딩 노트를 쓰게 되었습니다. 저는 직접 손으로 써봐야 코드 구조가 잘 파악되는 타입입니다. 손으로 작성하는 방법은 확실히 시간은 더 오래 걸려도 학습에는 큰 도움이 되었습니다. 그동안 공부하며 틈틈이 쓴 내용이 꽤 많아져서 찾아보기 쉽도록 블로그에 정리해야 할 것 같아 우선 스캔본을 올립니다. 2022. 8. 21.
알고리즘/ JS 최대공약수GCD 최소공배수 LCM 구하기 한장으로 정리하는 알고리즘 직접 제작한 자료입니다. 오류가 있을 경우 댓글로 알려주세요.😉 2022. 8. 21.
JavaScript /querySelectorAll와 addEventListener 함께 사용하기 querySelectorAll와 addEventListener 함께 사용하기 querySelectorAll은 배열로 요소를 출력하기 때문에 addEventListener와 함께 쓰면 오류가 발생합니다. (querySelector는 오류가 발생하지 않고 querySelectorAll만 발생합니다.) 이때는 반복문을 이용해서 각 배열안의 요소를 지정해주면 됩니다. 아래는 반복문을 이용한 예시입니다. (예시 코드는 네비게이션 드롭메뉴 효과를 만들기 위해 작성한 코드를 가져왔습니다.) const Menu = document.querySelectorAll(".mian"); const subMenu = document.querySelectorAll(".sub"); for (let i = 0; i < Menu.len.. 2022. 7. 23.

티스토리툴바