분류 전체보기41 React에서 이미지 불러오기(public, src) React에서는 저장된 이미지가 public폴더에있는지 src폴더안에 있는지에 따라 불러오는 방법이 다르다. public 폴더에 저장할 경우 public > images에 저장되어있는 이미지를 불러오기 위해서는 태그를 사용해주면 된다. 주의 할 점은 public 폴더안의 파일은 ../src/images/main.jpg 이런식으로 경로 설정을 해주면 이미지가 불러와지지 않는다. 위와 같이 public안의 폴더나 파일의 경로로 바로 불러와준다. src 폴더에 저장할 경우 src폴더 안에서 이미지를 불러오기 위해서는 img의 src에 직접 경로를 넣어주지 않고, import해와야지만, 이미지가 불러와진다. 해당 파일이 있는 위치를 상대경로로 import해오고 img의 src값으로 넣어주면 이미지가 불러와진다... 2021. 12. 6. React 설치 및 간단 사용법 기존에는 webpack과 babel을 하나하나 설정해야했지만, create-react-app이 생기면서 가장 보편적인 패턴으로 react를 빠르게 개발할 수 있게 도와준다. 설치 npx create-react-app [폴더명] 현재 폴더에서 설치하려면 npx create-react-app . npx를 사용하는 이유에 대해서 궁금하다면 클릭 실행 및 빌드하기 설치를 한 후에 npm start를 하면, script에 있는 start가 실행되면서 localhost:3000에서 화면이 띄어진다. 이 화면에서 network탭에 들어가보면 사이트의 용량이 나오는데 생각보다 높다. 개발용으로 실행되는 것이기 때문에 압축하지 않았기에 용량이 클 수밖에는 없다. 실제 서비스에서는 용량을 최적화하여야 하기 때문에npm b.. 2021. 12. 1. 프로그래머스 소수만들기 문제(javaScript) 프로그래머스 소수만들기 문제 설명 숫자가 담긴 배열에서 서로 다른 3개의 숫자의 합이 소수인 경우의 개수를 구하는 문제이다. ex) [1,2,3,4]이 주어지면, 1+2+4 = 7 의 경우만 소수이기 때문에 1을 리턴해야한다. 우선 3개의 숫자를 조합해서 나올 수 있는 합을 알아야하기 때문에 3중 for문을 사용하였다. 그리고 isPrime이라는 소수판별 함수를 만들어 3개 숫자의 합이 만들어질때, isPrime의 인자로 넣었다. 이렇게 되면 isPrime의 결과로 소수이면 true, 소수가 아니면 false가 나오게 된다. 그래서 true가 나올때마다 result값을 하나씩 증가시켜 마지막에 result를 리턴하였다. function solution(nums) { //1. 3중 for문을 사용하여 nu.. 2021. 11. 30. React에 대해서 정리해보자 React react는 view부분을 컴포넌트 단위로 개발하는 자바스크립트 라이브러리이다. 또, react는 단지 유저 인터페이스를 만들기 위한 라이브러리이기 때문에 가볍다. 프레임워크와 라이브러리 차이 프레임워크 틀이 있고, 우리가 채워 넣어서 사용할 수 있으나 틀을 벗어나기는 어렵다. 그리고 보통 단 한가지의 프레임워크만 사용한다. 다른 프레임워크나 라이브러리를 사용할 경우 충돌이 생길 수 있기 때문이다. 사용하지 않는 기능도 구현되어있기 때문에 상황에 따라서 무겁게 느껴진다. 라이브러리 필요한 곳에 사용하면 되고, 다른 라이브러리와 충돌할 일도 없다. 프레임워크 처럼 모든 기능이 구현되어있지 않아서 가볍다. Angular대체가 React인가? angular와 react를 비교하는 경우가 있는데 이것.. 2021. 11. 29. 나만의 심리테스트 만들기 회고 판다코딩 - 나만의 심리테스트 사이트 만들기의 회고 글 요즘 프론트 개발에도 관심을 가지고 있어서 공부중이다. 프론트 개발은 대부분 리액트나 뷰와 같은 라이브러리를 사용하여 개발한다. 바로 리액트를 공부하려고 했지만, html, css, js에 미흡하다고 생각하여 간단한 토이프로젝트로 진행하는 강의를 듣게 되었다. 그 강의가 바로 판다코딩님의 나만의 심리테스트 사이트 만들기이다. 이 토이 프로젝트는 html, css, js로만 개발을 하였고, 리액트에서 jsx를 사용하여 컴포넌트 단위로 개발하는 것이 얼마나 편한지에 대해서 느낄 수 있게 해주었다. 동적인 서비스를 만들기 위해서 js로 기능을 만들고, js에서 html을 사용하기 위해 dom을 사용하였는데 생각보다 어렵게 느껴졌다. 우선은 js파일을 리팩.. 2021. 11. 29. javascript ++연산자 리액트, node만 사용하다보니 html, css, js의 기초적인 부분이 미흡하여 간단하게 다시 익히기 위해 프로젝트를 따라하면서 배우는 중이다. 여기서 ++ 연산자에 대해서 몰랐던 부분을 알게 되었다. answerButton.addEventListener( "click", () => { const children = document.querySelectorAll(".answerButton"); for (let i = 0; i < children.length; i++) { children[i].disabled = true; // 버튼 비활성화 children[i].style.display = "none"; } goNext(qnaIdx++); }, false ); 우선 문제의 코드는 위와 같다. 코드 내.. 2021. 11. 27. 이전 1 2 3 4 5 6 7 다음
