인프런 워밍업 스터디 1기 프론트엔드 지민철 과제 모음

1번2번day4day5day6day9day10day12

3주차 발자국-react

DAY10디즈니 플러스 앱github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/react-netflix-app만약 대략 보았다면 알겠지만 넷플릭스 과제와 굉장히 유사하다. 그 이유는 예상했다시피 복붙이 맞다...시간이 없다는 변명이 있기도 하고 진짜로 첨부터는 못 할거 같아서 결국 아래 배너랑 로그인 화면,로그인 기능만 구현하였다.로그인은 구글로 하였는데 생각보다 오래걸려서 가볍게 로그인 기능만 구현하고 메인화면 오른쪽 위에 있는 유저 구글 프로필 사진은 구현하지 못하였다.DAY12-퀴즈 앱github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/quiz-app사실 혼자 개발한게 아니라 gpt랑 둘이 공동개발한 느낌이다. 버튼하고 이것저것은 MUI에서 받아왔다. tailwind로 해볼까 했는데 준비하는게 너무 오래걸릴듯 하여서 모던 css로 하였다.state를 통해 퀴즈 칸 안의 내용을 바꾸는 구조로 하였다.그런데 내용은 바뀌는데 선택 정보 관련해서 유지되는 상황이 생겨서 js를 많이 수정하였다.

3주차 발자국 작성-react

DAY10디즈니 플러스 앱github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/react-netflix-app만약 대략 보았다면 알겠지만 넷플릭스 과제와 굉장히 유사하다. 그 이유는 예상했다시피 복붙이 맞다...시간이 없다는 변명이 있기도 하고 진짜로 첨부터는 못 할거 같아서 결국 아래 배너랑 로그인 화면,로그인 기능만 구현하였다.로그인은 구글로 하였는데 생각보다 오래걸려서 가볍게 로그인 기능만 구현하고 메인화면 오른쪽 위에 있는 유저 구글 프로필 사진은 구현하지 못하였다.DAY12-퀴즈 앱github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/quiz-app사실 혼자 개발한게 아니라 gpt랑 둘이 공동개발한 느낌이다. 버튼하고 이것저것은 MUI에서 받아왔다. tailwind로 해볼까 했는데 준비하는게 너무 오래걸릴듯 하여서 모던 css로 하였다.state를 통해 퀴즈 칸 안의 내용을 바꾸는 구조로 하였다.그런데 내용은 바뀌는데 선택 정보 관련해서 유지되는 상황이 생겨서 js를 많이 수정하였다.

react에서 api 사용하는법! (fetch)

다음에 도전할 과제가 api를 활용하는 과제인 김에 이참에 api사용방법을 알아보기로 하였다.이번에는 fetch를 통해서 구현해볼 생각이다.fetch()란?자바스크립트 내장 객체 (API 호출하는 역할)fetch() 함수는 찾아보니 window객체에 소속되어 있다고 해서 window.fetch()로 사용되기도 한다고 한다.fetch() 사용 방법fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error));위 코드박스에 있는 방식으로 사용하는 것이 정석적인 방법인 듯 하다.안에 있는 내용들을 해석해보자면 url:api를 사용할 때 불러오는 url인 듯 하다option:불러올때 사용되는 듯 한데 아직은 어디에 어떤 방식으로 사용되는지 잘 모르겠다..then: .then이 붙어있는 부분이 작동되있거나 거부가 됐을 때 작동된다. 위 부분에서는 그냥 불러오면 사용되는 것 같다.response:불러온 값들이 들어가는 부분인 것 같다..catch: 뒤에 붙어있는 error이 나왔을 때 바로 실행하는 것 같다.아마 내용은 이정도가 다인 것 같다.실제 실행fetch(URL) .then((response) => response.json());이렇게 사용하는 것 같다. 과제에서 포켓몬 api를 사용하는 만큼 한번 PokeAPI로 테스트 해 볼 것이다.const poke = () => { fetch("https://pokeapi.co/api/v2/pokemon/ditto") .then((response) => response.json()) .then((data) => { console.log(data); }) .catch((error) => { console.error("Error:", error); }); };위의 코드를 onClick={poke}로 실행해본 결과 라는 결과가 나왔다.위와 같이 불러오는 것은 문제가 없는데 그렇다면 이 값을 어떻게 사용할 수 있을까?가져온 데이터 활용자세히 보면 크게 abilities,cries,forms,game_indices....등이 있고 그 안에 자세한 값들이 있다는 것을 알 수 있다.그런데 출력할 내용 중에 내가 지금 필요한 것은 id와 name이기에 console.log(data);부분을 console.log(data.id,data.name);으로 바꿔서 출력해보면이라는 우리가 원하는 값만 나오게 된다.활용-2(페이지 출력)아까 가져온 값에서 몇가지를 더 추가해서 출력해보았다import React, { useState } from "react"; function App() { const [pokemons, setPokemons] = useState([]); const poke = async () => { const newPokemons = []; for (let a = 1; a name.language.name === "ko" ); const koreanName = koreanNameEntry ? koreanNameEntry.name : data.name; newPokemons.push({ id: data.id, name: koreanName }); } catch (error) { console.error("Error:", error); } } setPokemons(newPokemons); }; return ( Fetch Pokemon {pokemons.map((pokemon) => ( {pokemon.id}: {pokemon.name} ))} ); } export default App; 1.usestate로 바뀌는 값 저장하기2.async와 await로 순차적으로 처리하기3.정보와 species받아와서 json으로 바꾸기4.정보에서 name만 빼고 species에서 language가 ko인 이름(한국어이름)가져오기5.newPokemons에 넣기6.newPokemons에 있던 값을 한번에 state에 집어넣고 출력하기순으로 작동된다.결과적으로는 이렇게 나온다.아직 css가 없어서 일자로 나오지만 이래저래 하면 도감 느낌으로 할 수 있을 듯 하다. POST,PUT,DELETE생각하보니 제목이 api인데 나머지 중요한 3개도 안해서 소개하자면 POSTfetch("URL", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: "Test", body: "Testing!", userId: 1, }), }) .then((response) => response.json())위 방식으로 사용하는데 url: 말 그대로 post용 url이다.body: JSON.stringify({}) :중괄호 안에 들어가는 값이 post 할 값인 것 같다.PUTpost랑 작동이 비슷한 느낌이어서 method가 "PUT"인 것 빼고는 달라지는것이 거의 없는 것 같다.DELETE어떤거 지울지만 고르는것이어서 get과 큰 차이가 없다. 도움받은 글https://velog.io/@fltxld3/React-API-%ED%98%B8%EC%B6%9C%ED%95%98%EA%B8%B0https://jaenam1212.tistory.com/22

인프런 워밍업 클럽 FE DAY12 과제

github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/quiz-app이래저래 완성은 하긴 했으나 하루나 걸려서 만들었따....mui등을 이용하여 만들었으며 gpt의 힘도 조?금 빌렸다...물론 gpt의 힘을 빌리는게 잘못된건 아니지만 너무 의존하는 느낌이 든다...무튼 완성은 했으나 세세한 디테일은 빼먹은 느낌이고 화면도 깔끔하지는 않다...나중에 버튼이랑 UI거슬리는것좀 바꿔야 할 것 같다...

인프런 워밍업 클럽 FE DAY10 과제

github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/react-netflix-app솔직히 넷플릭스에서 조금만 바꾼 후 대부분을 복붙을 하였다...대부분을 복사했음에도 불과하고 로그인 하나 구현하는데 몇시간이 사용되었다.결론적으로는 reactgoogleoauth랑 context를 통해 구현하였다.. 물론 새로고침을 하거나 이전에 했었으면 다시 해야 한다는 단점이 있고 회원가입은 아직 못만들었다는 단점이 있다...과제의 완성이랑 코딩 공부 중 우선해야할것은 후자인데 점점 바뀌는 것 같다...원래는 헤더에서 구글 정보도 받아와야 하지만 감도 오지 않아서 하지 못하였다...

2주차 발자국 작성-js,react

DAY6:비밀번호 생성 링크제작과정:일단 html,css로 기본적인 모양을 잡고 js로 모양 생성을 시작했다.작동 순서는 숫자 입력 받기 - 체크된 조건 확인하기 - 램덤으로 숫자를 정해서 조건을 지정 - 그 안에서 또 랜덤으로 지정해서 숫자를 집어넣고 그걸 아스키코드를 통해 넣었다. DAY9:예산안 작성 링크지금 상태가 css를 제대로 지정을 안해서 보기가 좀 거시기하다...무튼 느낀점은..1.역시 react는 어렵다.. 진짜 배운지 얼마 되지 않아서 그런지 어려웠고 강의도 완전히 보지를 못해서 더 어려웠다...2.usestate가 더 쉬울순 있겠지만 그렇다고 쉽지도 않다.. 생각해보니 원래 그렇기는 한 것 같다.. ㄴ결국 gpt의 힘을 좀 빌렸다..3.그래도 최소한의 가능 구현을 해서 다행인 것 같다.이번에 보완할 점은 버튼 디자인 좀 바꾸고 (이름 가격 버튼) 이거를 좀 정렬을 시켜야 할 것 같다.. 이제 최소2개는 더해야 하는데..큰일났네...

인프런 워밍업 클럽 FE DAY9 과제

github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/list1느낀점이 굉장히..상당히..좀...많았다...일단 생각은 usestate 사용하면 어렵지 않게 할 수 있을 줄 알았는데 react가 거의 처음이다 보니 생각대로 전혀 되지가 않았고 이거 하는데 거의 2일이 걸렸다... 결국 gpt의 힘을 약간 빌렸다...다음에 다시 이번에 짠 코드를 보고 다시 이해하며 해야 할 것 같다...

내가 모르는 js기초 문법들(=>,reduce,foreach...)

이번에 강의를 들으면서 뭔가 당연히 알아야한다는 느낌으로 설명이 나오는데 완전히 처음보는 문법들이 있었다.일단은 그러려니 했었는데 js코테 문제를 풀어보고 다른 사람들 풀이를 보는데 그곳에서도 비슷한 문법들이 나오길래 이번 기회에 그냥 그 문법들을 정리해보기로 하였다.js 화살표 문법 (=>)일반적으로 함수를 만드는 방식을 간편하게 바꾼 것이 화살표 문법(arrow function)이다.사용 방식은 let func = (arg1, arg2, ...argN) => expression방식이다.let (함수명) = (매개변수's) => (함수 내용)의 방식이다.이렇게 설명만 한다면 감이 잘 오지 않을 수 있으니 간결한 사용 예시를 들어본다면let sum = (a, b) => a + b;이다. 만약 받는 인수가 없는 경우에는let sayHi = () => alert("안녕하세요!");방식으로 작성한 후sayHi();를 입력하면 된다.약간 더 활용을 추가하면 삼항연산자를 추가하여서let welcome = (age alert('안녕') : () => alert("안녕하세요!");방식으로 작성 할 수 있다.그리고 내용을 여러줄로 적어야 할 경우에는let sum = (a, b) => { let result = a + b; return result; };방식으로 적어야 한다.※주의점※화살표 함수에서는 this 사용 시 주의해야 한다.var name = "Global"; let user = { name: "Inpa", sayHi: function() { console.log(this.name); } }; user.sayHi(); // Inpa위 경우는 일반 함수라서 this.name이 Inpa로 나오지만var name = "Global"; let user = { name: "Inpa", sayHi: () => { console.log(this.name); } }; user.sayHi(); // Global위 경우는 화살표 함수라서 this.name이 Global로 나온다.js reducereduce의 일반적인 사용 방법은const arr = [1, 2, 3, 4, 5] arr.reduce(function (acc, cur, idx) { console.log(acc, cur, idx); return acc + cur; }, 0);이다.acc는 accumulator의 약자로 현재까지의 cur(=currentValue)의 누적 값들을 의미한다.cur은 currentValue의 약자로서 arr[index]의 값을 의미한다.idx는 index의 약자로 현재 값이 arr을 기준으로 몇번째(0~)인지를 의미한다.이게 일반적인 사용법중 하나인 배열 요소의 합산 예시이다.다른 활용방법으로는 map구현이 있다.const arr = [1, 2, 3, 4, 5] const result = arr.reduce(function (acc, cur) { acc.push(cur % 2 ? "홀수" : "짝수"); return acc; }, []); console.log(result); // [ '홀수', '짝수', '홀수', '짝수', '홀수' ] 위 방법은 arr의 값들은 순차적으로 집어넣은 후 홀수면 홀수,짝수면 짝수가 되도록 새로운 배열을 만든 것이다.마지막에 있는 []의 정체는 initialValue로 그냥 초기값이다.※알면 좋은 것들※1. 사실 단순 함수를 만들것이면 화살표가 더 "간결"하다.(무조건적으로 좋지는 않다.)2. 배열을 끝값부터 하고싶으면 reduceRight가 있다.js foreachforeach는 개념자체는 상당히 간단하다.var arr = ['가','나','다','라']; arr.forEach(function(item,index,arr2){ console.log(item,index,arr2[index+1]); })보다시피 arr의 값들을 안에 있는 함수에 순차적으로 집어넣는 구조이다.앞의 코드를 실행시키면가 0 나 나 1 다 다 2 라 라 3 undefined 가 출력된다.순서대로 (현재 들어간 값, 현재 들어간 값의 index값,현재 index+1의 값)번외-for in과 for offor in은 객체({key:value}의 형태)에 사용 할 수 있다.var obj = { a: '가', b: '나', c: '다' }; for (var key in obj) { console.log(key, obj[key]); // a 가, b 나, c 다 }key에다가 obj의 key값을 넣는 방식으로 작동된다. for of는 for in과는 유사하면서도 다른데 for of는 key가 아닌 값만을 순차적으로 집어넣는다.var iterable = [10, 20, 30]; for (var value of iterable) { console.log(value); // 10, 20, 30 }보다시피 value에 iterable의 값들이 순차적으로 들어가고 출력된것을 확인할 수 있다.py의 for문같은 느낌인 것 같다.

인프런 워밍업 클럽 FE DAY6 과제

gitub:https://github.com/asdf1596/jsStudy/tree/main/gwajae/day6저번에 약간 gpt로 과제를 어정쩡하게 넘긴 것이 마음에 걸려서 이번에는 당연하지만 gpt를 거의 사용하지 않았다...후기:글자를 랜덤으로 만드는 과정이 상당히 어려웠다... 만약 코드를 본다면 알겠지만 굉장히 이상한 방식으로 random을 통해 만들어냈다. 덕분에 완전히 랜덤이 되었기는 하나 알고리즘에 단점도 있고 분명히 더 쉬운 방법도 있을 듯 하다.. 다른분들 것도 참고해보면 좋을 듯 하다...