분류 전체보기
React에 Font Awesome 적용하기
React에 Font Awesome 적용하기
2022.05.09개요 기존 HTML, CSS 파일을 React로 변환하는데 Font Awesome에서 가져온 태그가 적용되지 않는 문제가 발생하여 이를 해결하는 방법을 정리하고자 함. Font Awesome 설치 // Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지 설치 $ npm i @fortawesome/fontawesome-svg-core // Font Awesome을 리액트 컴포넌트 형태로 사용하기 위한 패키지 설치 $ npm i @fortawesome/react-fontawesome // 필요한 아이콘 파일 설치(코드의 자세한 내용은 아래에서 설명) $ npm i -S @fortawesome/free-solid-svg-icons 위 코드를 입력하고 나면 node_modules 하위..
React 공식문서 주요개념 읽기 - 1
React 공식문서 주요개념 읽기 - 1
2022.05.08개요 리액트를 다루기에 앞서 리액트 공식문서를 읽어보고 정리하며 공식문서를 읽는 습관, 리액트의 기본적인 개념과 문법을 익히는 시간을 가지고자 한다. 💁♂️ 로 표시한 내용은 글을 읽고난 후 저의 생각정리이며, 나머지는 공식문서의 내용과 일치합니다. JSX 소개 JSX란? const element = Hello, world!; 위 태그 문법은 string, HTML 둘 다 아니다. JSX라 하며 자바스크립트를 확장한 문법이다. JSX는 React element를 생성한다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 둘 다 포함하는 "Component"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. 즉 기존에는 .html 파일과, .js 파일을 분리하여 연결해서 사용..
React란 무엇인가?
React란 무엇인가?
2022.05.07개요 리액트를 처음 다루게 되었는데 그전에 리액트가 무엇인지 이해하고 넘어가는 시간을 갖도록 한다. Why React? 새로운 기술을 학습할 때는 이 기술이 어떤 철학을 가졌는지, 어떤 문제를 해결하기 위해서 만들어졌는지 이해하는 것이 중요하다. 웹 역사는 1세대부터 3세대까지 발전하는데 이러한 기술의 발전과 새로운 기술을 만들어 내는 것은 많은 자원이 투입되는 행위이다. 그럼에도 기술이 계속 발전되는 이유는 그 시대 요구조건과 해결해야 하는 것들이 복잡해지기 때문이다. 웹에서 복잡해진다는 의미는 사람들과 상호작용하며 사용자들이 원하는 기능은 많아지고 개발자들이 처리할 UI가 많아진다는 것이다. 이러한 상황에서 프론트엔드 개발자들은 기술의 한계를 느끼고 새로운 기술인 Front-end Framework을..
위코드 2주차 회고 - 위스타그램 (Vanilla JS)
위코드 2주차 회고 - 위스타그램 (Vanilla JS)
2022.05.07지난주에 HTML+CSS, JavaScript를 각 2.5일 동안 공부하는 시간을 가졌다. JavaScript로 어려웠던 문제를 풀면서 성공적인 일주일을 마쳤다고 생각함과 동시에 인스타그램 클론 코딩을 하게 되었다(너무 짧은 거 아닌가🤷♂️). 어느 정도 틀은 잡힌 상태로 시작해서 여러 이벤트를 구현할 줄 알았지만, 백지상태에서 아무런 도움 없이 스스로 HTML+CSS를 작성하고 여러 이벤트를 구현해야 했다. 인스타그램 기능을 모두 구현, 클론하는 프로젝트는 아니고 'HTML+CSS+JavaScript를 잘 적용할 수 있는가?'를 위한 시간이 아니었을까 싶다. 다소 짧은 시간인 1주일 동안 내가 학습한 내용으로 웹 페이지 모양을 갖출 수 있다는 것이 신기했다. 특히 인스타그램 형태를 따라 하기 위해서 ..
위코드 1주차 회고 - 절대적 학습량
위코드 1주차 회고 - 절대적 학습량
2022.05.02위코드에 들어오고 벌써 일주일이라는 시간이 지났다. 이 일주일이라는 시간은 새로운 환경에 적응할 시간도 없이 주어진 내용을 학습하고 과제를 제출하다 보니 사라져 버렸다. 개발자를 꿈꾸는 다양한 사람들을 오프라인에서 만나보니 뒤처질까 봐 개발 공부를 시작하고 나서 이렇게 열심히 공부하고, 자투리 시간에 하나라도 더 익혀야겠다는 마음을 가졌던 적이 없었다. 위코드에 들어오기 전까지는 3개월 안에 많은 것을 얻어갈 수 있을지 의문이었지만 벌써 바뀌고 있는 나를 마주하고선 정말 잘 선택했다는 안도감이 들었다. 이제 일주일밖에 지나지 않았지만 다양한 내용을 빠르게 학습하면서 '나는 지금까지 개발 공부를 하는 것이 아니라 놀고 있었구나'라는 생각이 들었다. 이렇게 원하던 위코드를 수강하기 시작했고 어떤 마음으로 부..
replit 30. getExamResult 함수 구현
replit 30. getExamResult 함수 구현
2022.05.02Assignment 1. 인자 scores는 다음과 같은 객체이다. 객체 요소의 갯수 및 키의 이름들은 달라질 수 있다. 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있다. { '생활속의회계': 'C', '논리적글쓰기': 'B', '독일문화의이해': 'B+', '기초수학': 'D+', '영어회화': 'C+', '인지발달심리학': 'A+' } 2. 인자 requiredClasses는 다음과 같이 문자열로 된 배열이다. 3. 다음 조건을 만족하는 객체를 리턴하도록 함수를 구현하라. 3-1. scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 한다. 단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 한다. 3-2. requiredClasses 배열의 요소로는 존재하지만, scor..
replit 22. 최소값, 최대값 사이의 랜덤수 리턴
replit 22. 최소값, 최대값 사이의 랜덤수 리턴
2022.05.01Assignment 최소값(min), 최대값(max)을 받아 그 사이의 랜덤수를 return하는 함수를 구현하시오. My code function getRandomNumber(min, max) { retrun (Math.random()*(max-min))+min; } 매우 짧은 코드이지만 풀지 못했던 문제로 정리해보려 한다. 난수생성 Math.random(); // 0 ~ 0.999999 우선 Math.random()은 0이상 1미만의 부동소숫점 의사 난수를 반환한다. 1을 포함하지 않는다는 점이 중요하다. 최대값 설정 // 0이상 최대값 미만의 난수 생성 Math.random() * 최대값 // 0
replit 19. sliceCityFromAddress 함수 구현
replit 19. sliceCityFromAddress 함수 구현
2022.05.01Assignment 1. sliceCityFromAddress 함수는 address를 인자로 받는다. 2. address는 주소를 나타내는 string이다. 3. 주어진 주소가 어느 도시 인지를 찾아 해당 주소에서 도시 부분만 삭제한 새로운 주소를 return한다. 4. 도시는 무조건 "시"로 끝난다. ex) "서울시" 5. "도"와 "시"는 주소에 한 번만 포함되어 있다. My code function sliceCityFromAddress(address) { let findDo = address.indexOf("도"); let findCity = address.indexOf("시"); if(findDo !== -1 && findCity !== -1) { // 주소에 "도", "시"가 모두 있는 경우 r..
replit 17. divideArrayInHalf 함수 구현
replit 17. divideArrayInHalf 함수 구현
2022.05.01Assignment 1. divideArrayInHalf 함수는 array를 인자로 받는다. 이 array는 숫자 값으로만 구성되어 있으며 총 5개의 element로 구성되어 있다. 2. divideArrayInHalf 함수는 인자로 들어온 array로 부터 새롭게 구성된 배열 result을 return한다. 3. array 요소들 중 10과 같거나 작은 값의 요소들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 return한다. 4. 재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소까지 이다. 즉, 배열의 뒷 요소부터 재구성을 진행한다. 5. 예를 들어 인자로 들어오는 array가 다음과 같을때 [1, 20, 10, 5, 100], resul..