Tech is created to fix problem

JS와 파이어베이스를 활용해서 프로필 등록관리하는 사이트를 만들었다. 그런데 ES6 클래스 문법 강의를 듣고 리액트를 사용하지 않고, 순수 JS로 컴포넌트, 상태관리, 라우터를 구현하는 것을 보고 리팩토링하면 리액트 선수학습에 도움이 될 거라 생각해서 약 1주일간 리팩토링 작업에 돌입했다! 파일구조 전후 기존) js 폴더 안에 페이지 기준으로 파일들이 있었음 이후) js 폴더 안에 components, core, routes, store로 각 기능별로 나누었음 제일 먼저 만든 파일은 core.js 파일이다. 이 파일에는 총 2개의 클래스와 1개의 함수를 내보내고 있다. 1) Component 클래스는 돔요소를 생성하고 렌더링한다. 또한 props와 state 인자를 받아 Component의 속성으로 정의..

리액트 첫 클론 프로젝트! 그 흔하디 흔한 영화 검색 사이트이다. 이걸로 시작하는게 국룰 아닌가! 자식에게 데이터 전달하기 append() 인자로 map 으로 돌린 아이템들을 넣어주고 싶은데, 배열이 직접 들어가지는 못한다. 그래서 아래 두 가지 방법 forEach 를 사용해서 돔을 각각 만들어 붙이는 것, 그리고 map 으로 돌려서 만든 돔을 붙이는 것 이 두가지를 사용할 수 있다. const ulEl = document.querySelector('ul'); const fruits = ['apple', 'banana', 'orange']; fruits.forEach(fruit => { const liEl = document.createElement('li'); liEl.textContent = frui..

과제기간 : 23.08.08~23.08.18 깃헙코드 : https://github.com/furaha707/ListApp_JS 이번에는 느낀 점을 먼저 적어보자 처음에는 과제 안내를 받았을 때 정말 막막했다 내가 혼자 데이터 파일을 만들어서 불러오고 그것을 출력한 정도로만 만들어봤고 CRUD 앱을 제대로 만들어본 적이 없었다 그리고 실시간 DB를 연동한 경험도 많이 없어서 난이도가 매우 높게 느껴졌었다 처음엔 user flow를 머릿속으로 먼저 그려보고 디렉토리 구성을 하고 그리고 주로 버튼에 이벤트를 걸어서 동작하다 보니까 버튼과 기능에 따른 함수 이 두가지를 작성하다 보니 작업하면서 점차 확장시키고 싶은 기능들이 생각이 났다 그때그때 오류 나면 검색하면서 firebase 사용법도 익히고 예외처리도 ..

이번 2차 과제는 약 2주라는 시간 동안 javascript로 사진 관리자 서비스를 만드는 것이었다 프로필 등록 / 수정 / 삭제를 해야하는데 여기서 필수는 첫째, 이미지를 등록 관리 할 수 있어야 했고 둘째, AWS S3 / Firebase 같은 서비스를 이용하는 것이 필수 조건이었다 AWS S3와 Firebase 둘 다 한 번쯤은 사용해 본 적이 있긴 했지만 그 당시에는 말 그대로 따라친 수준이어서 습득된 상태가 아니었다 그래서 이번에 세팅하는 첫 시작부터 많이 헤맸다 우선, 과제를 시작하고 진행하는 과정에서 부딪혔던 점들을 먼저 적어보고자 한다. 1. class 모듈화 현재 인강으로 듣고 있는 주제가 class 모듈화이기 때문에 그 방식을 활용해서 과제를 하고 싶었다 그런데 인강으로 그 개념을 활용..

지난시간에 이어서 이번엔 코드리뷰를 토대로 수정을 해보자! 지난 포스팅 : https://furaha.tistory.com/18 1. 인라인으로 스타일 준 부분을 scss 에서 변수사용으로 바꿔보자 오류) 색상중에 몇가지만 색상으로 인식이 안되길래 왜지 싶었는데, 변수명 $ 뒤에 숫자로 시작했기 때문이었다,,ㅎㅎ 해결) 변수명을 $color- 로 앞부부을 전부 통일해주었다. 2. main.js 에서 로직이 아닌 부분은 별도 파일로 뺀 후 import 하여 사용하자! 로직이던 데이터이던 상관하지 않고 모두 main.js에 넣어주니까 거의 1000줄을 돌파하고 있었다.. 용도에 맞게 js 파일도 모듈화시켜서 사용하자. export import 를 사용하려 했는데 아래 2가지 오류가 났다. 오류-1) Unca..

그라폴리오 클론코딩을 했다. 사이트 선정 이유는 필터링을 연습해보고 싶었다. 구글링 하면서 어찌저찌 구현해 봤지만 계속 막히는 부분이 생겼고 해결하려고 하다 보니 많은 것을 익히게 되었다. 구현한 링크 : http://grafolio.dothome.co.kr/main/main.html 먼저, 첫 섹션은 카테고리와 스와이퍼의 조합이다. 스와이퍼는 익히 써왔고, 어느 정도 스와이퍼 이슈에 대해 다뤄왔다. 그래서 첫 번째 오류가 났을 때, 원인에 대해서 유추는 가능했다. 오류 1) 필터링을 하는데 Swiper 안에 item 들을 바꿔줄때마다 swiper가 가로값을 잡지 못함❗️ 왜? swiper 는 실행될 때 인라인으로 wrapper, container, slide-item 모든 요소에 내가 설정한 옵션(ex..

Q1. 아래 배열에서 모든 사람들의 이름을 Park 으로 바꾸는 코드를 작성해주세요. (map 활용, spread 연산자 활용) A1. 내가 푼 답 let students = [ {id: 1, name: 'Kim', score: {math: 50, english: 70}}, {id: 2, name: 'Kim', score: {math: 80, english: 60}}, {id: 3, name: 'Lee', score: {math: 70, english: 50}}, ] const newArray = students.map(student => ({...student, name : 'Park' })); console.log(newArray); Q2. 아래 배열에서 이름이 Kim 인 사람들을 찾고, score ..

Q1. 아래 객체에서, 영어 점수의 총합을 계산하는 코드를 작성하세요. (reduce 활용) A1. 내가 푼 답 let scores = { Kim: {math: 50, english: 70}, Park: {math: 70, english: 60}, Lee: {math: 80, english: 50} } let array = []; for (const key in scores){ array.push(scores[key].english); } const result = array.reduce((acc,cur) => acc+cur, 0); console.log(result); Q2. 아래 배열에서, 수학 점수가 60점 이상인 사람들만 남기는 코드를 작성하세요. (filter 활용) A2. 내가 푼 답 let ..

Q1. 당신은 컴퓨터와 업, 다운 게임을 하려고 합니다. 컴퓨터가 1 ~ 100 까지의 수 중에서 하나를 랜덤하게 고르면, 당신은 컴퓨터가 고른 숫자가 무엇인지를 찾아내야 합니다. 당신이 숫자를 하나 부르면, 컴퓨터는 그 숫자가 처음 고른 숫자보다 큰 지, 작은 지 여부만 알려줍니다. (컴퓨터가 30을 골랐고, 유저가 10을 불렀다면, 컴퓨터가 고른 숫자가 더 크기에 컴퓨터는 ‘업’ 이라고 말함) (반대의 경우 ‘다운’) 당신이 숫자를 맞힐 때까지 게임이 계속되도록 코드를 작성하세요. (숫자를 부르는 것은 prompt 활용) (유저가 숫자만 입력한다고 가정하고, 예외처리는 하지 않아도 됩니다.) A1. 내가 푼 답 let comNum = Math.floor(Math.random() * 100); let ..

Q1. 당신은 컴퓨터와 가위 바위 보 게임을 하려고 합니다. 당신이 가위, 바위, 보 중에서 하나를 선택하면, 컴퓨터는 가위, 바위, 보 중에서 하나를 랜덤하게 고릅니다. 이때 승부의 결과를 출력하는 코드를 작성하세요. (유저가 이겼다면 “유저: 승, 컴퓨터: 패” 와 같은 형식으로 출력) (유저가 가위, 바위, 보 중에서 하나만 입력한다고 가정하고, 예외처리는 하지 않아도 됩니다.) A1. 내가 푼 답 function game(user, com) { if (user === '가위' && com === '보') { alert('user가 승리했습니다'); } else if (user === '바위' && com === '가위') { alert('user가 승리했습니다'); } else if (user =..

Q1. 매개변수로 숫자를 받아서 해당 수의 출력하는 함수를 작성해보세요. (ex. 2가 들어오면, 2 4 6 8 10 12 14 16 18 20 을 차례로 출력) (매개변수는 1개) A1. 내가 푼 답 let answer = []; function count(num) { for (let i = 1; i

Q1. 1 부터 100 까지의 수 중 짝수만 출력하는 반복문을 작성해보세요. A1. 내가 푼 답 for (let i = 1; i

Q1. prompt 를 활용하여, 사용자로부터 입력받은 점수가 95 이상이면 A, (95 미만이고) 90 이상이면 B, (90 미만이고) 85 이상이면 C, 85 미만이면 F 를 출력하는 조건문을 작성해보세요. A1. 내가 푼 답 let Uscore = prompt('점수를 입력해주세요'); if (Uscore >= 95) { alert('A') } else if (Uscore >= 90) { alert('B') } else if (&& Uscore >= 85) { alert('C') } else { alert('F') } Q2. prompt 를 활용하여 사용자로부터 숫자를 2번 입력받아, 두 숫자가 모두 홀수라면 ‘홀수’, 두 숫자가 모두 짝수라면 ‘짝수’ 라고 출력하는 조건문을 작성해보세요. A2. ..