본문 바로가기

JS12

useReducer 사용하면서 정리 https://www.youtube.com/watch?v=tdORpiegLg0 [위 별코딩님의 영상을 보고 useReducer개념을 정리해보았습니다.] useReducer는 useState와 마찬가지로 state를 생성하고 관리하는 도구이다. useReducer를 사용하기 좋을 때는 state의 구조가 복잡할때이다. 지금 내가 마주한 문제를 살펴보면 아래와 같이 하나의 state에 객체 배열 형식으로 useState을 사용했는데 이렇게 state를 생성하면 하위 로직에서 제대로 state을 꺼내고 값을 변경하기 어렵다. const [sentences, setSentences] = useState([ { text: "너가 진짜 xxx팬이라고???", top: 0, delay: 0 }, { text: "이번.. 2024. 4. 12.
GraphQL로 영화 API 만들기 내용 정리 원래는 프로젝트를 진행해야하지만 잠깐의 현타 + 조급함 덕분에 graphql강의를 들었다. graphql에 대해서는 처음 배우는 것이고 단기간안에 강의 전체를 듣게 되어서 약간의 정리를 해보았다. (많은 기업의 자격요건, 우대요건에는 GraphQL이 포함되어있고 Relay도 사용도 있다.) GraphQL탄생의 이유 REST API의 몇가지 단점을 해결하기 위해서 graphql을 쓴다고 한다. REST API는 매우 효율적이고 뛰어난 통신 방법이지만 두가지 단점을 가지고 있다. 1. Overfetching: 우리가 REST API GET을 통해서 json형식의 데이터를 가져오면 필요 이상의 데이터를 가져올때가 있다. 이는 사용하지 않는 데이터임에도 불구하고 서버에서 가져옴으로 이러한 현상을 overfetc.. 2024. 3. 26.
[HTML/CSS/Javascript] no-more-algorithm 회고 이번에는 아주아주아주아주아주아주아주아주아주 간단한 프로젝트를 해보았다. 이건 별로 뭐 어디다 말하기도 부끄러운 그런 프로젝트이지만 매우 개인적인 이유로 시작한 토이 프로젝트이다. 나는 쉴때 유튜브를 많이 본다. 그렇기에 다양한 영상 시청 덕분에 알고리즘은 아주 재미있는 영상들을 추천영상으로 띄워주고는 한다. 그런데 코딩을 하기 위해 유튜브를 볼때 유튜브의 추천 영상은 너무나도 짜증이난다. 막 이 영상을 보라고 유혹하는 듯하다. 이외에도 단순히 내가 얻고자 하는 지식이외에도 영상에 집중하지 못하게 하는 요소들이 너무 많다라고 생각했다. 그래서 코딩 공부를 할때는 영상에만 집중할 수 있고 이외의 부차적인 정보들을 닫을 수 있는 기능의 extension을 제작해봐야겠다 라고 생각했다. 일단 크롬 익스텐션을 만.. 2024. 3. 15.
프로젝트 방향성, 결과물 쌓기 방식 변경 프론트엔드 공부를 해오면서 포트폴리오 즉 프로젝트를 완성시키는 데에 내 나름대로의 기준은 하나를 배우면, 그것에 바탕으로 규모에 상관없이 프로젝트를 완성하고 또 새로운 걸 배우고 프로젝트를 하고의 반복이었다. 그래서 지금까지 html,css배우고 프로젝트, js, ES6배우고 프로젝트, reactJS배우고 프로젝트 이런걸 반복하고 있었는데 사실 토이 프로젝트의 규모는 계속 반복하고 있었는데 지금 만들고 있는 퀴즈 사이트는 css와 js실력 향상을 목표로 처음부터 끝까지 바닐라js로만 구현을 하려고 했는데 그렇게해서 얻는 이득이 적다고 생각이 들었다. reactJS, typescript, expressJS, nextJS, redux다 자격요건에서 요구하는 스택들이고 이 스택들은 하나하나 순차적으로 진화해온.. 2024. 3. 5.
VanillaJS로 웹서비스 만들기 - 중간 검토1 HTML, CSS3, Javascript ES6까지 기본적인 개념을 배우고, 토이프로젝트까지 진행하였지만 구글링 그리고 여러 자료를 통해서 CSS  JS의 탄탄한 기본 개념이 신입을 뽑을 때 보는 중요한 요소라고 하여 이제까지 배운 바닐라JS으로만 하나의 괜찮은 서비스를 만들어보기로 하였다. 막상 프로젝트를 하다 보니 구현하고 싶은 기능들도 많고 해서 제작 기간이 점점 늘어나고 있지만 그만큼 많이 배우고 완성도 있는 프로젝트를 만들 수 있다고 생각이 든다. 주제 일단 이번 프로젝트의 주제는 축구 퀴즈 사이트이다. 지난 1년동안 재미있는 퀴즈 사이트가 많이 생겼다고 생각이 든다. 평소에 유튜브를 보면 재미있는 퀴즈 사이트를 통해 방송을 하는 유튜버들도 많았고 실제로 플레이해봤을 때 재미있는 경험을 했다... 2024. 3. 3.
flex 개념, 특징 정리 flex는 페이지의 element들을 다양하게 배치할때 사용하기 좋은 속성이다. 일단 flex에 대해서 알아야할 2가지 중요한 특징이 존재한다. 1. flex container와 flex element flex를 사용하기 위해서는 2요소에 flex관련 특성을 설정하여야 한다. 첫번째는 element들이 정렬될 범위를 지정하는 flex container. 그리고 정렬될 element인 flex element이다. html으로 보면 아래와 같은 코드의 상황에서 flex를 사용한다. 1 2 3 4 5 이럴때 .container에 display:flex를 통해서 flex를 적용할 수 있다. .container { display: flex; } 2. main axis와 cross axis flex element들.. 2024. 2. 27.
[HTML/CSS/JS] to do list 만들어보기 회고 https://main--transcendent-bunny-41a741.netlify.app/ 노마드 코더의 바닐라JS 크롬 앱 만들기 수업을 듣고 복습 그리고 지금까지 배웠던 HTML, CSS, Javascript를 연습할 겸 수업에서 다루었던 프로젝트를 다시 한번 직접 제작해보았다. 사실 강의에서 기능들의 구현을 이미 상세하게 설명해주었기 때문에 대부분의 javascript에서 마주친 문제가 그렇게 크지는 않았다. 다만 강의에서 설명하지 않았던 기능 그리고 강의에서 설명해주었지만 다시 직접 구현할때 떠올리기 어려웠던 인사이트는 다시 한번 적어 남겨보도록 하겠다. 어려웠덤 점들 - Javascript 1. 정해진 날짜와 현재 시간과의 날짜 계산 해당 앱을 만들면서 오른쪽 상단에 내가 언제부터 프론트 기.. 2024. 2. 27.
ES6 Promise 연습문제 브금온! Q1. 태그의 이미지 로딩 성공시 특정 코드를 실행하고 싶다! Promise문법의 then, catch 함수를 사용해 싶습니다, 어떻게 코드를 짜면 될까요? 답: 더보기 resolve는 조건을 만족했을 때 사용되는 함수, reject는 반대이다. resolve를 부르면 .then()을 쓰고, reject이면 catch()를 사용한다. Q2. Ajax 요청이 성공하면 무언가 코드를 실행하고 싶습니다. https://codingapple1.github.io/hello.txt 라는 경로로 GET 요청을 하면 인삿말이 하나 딸려옵니다. 여기로 GET 요청을 해서 성공하면 Promise의 then함수를 이용해서 Ajax로 받아온 인사말을 콘솔창에 출력해주고 싶습니다. 어떻게 하면 될까요? 답: 더보기 .. 2024. 2. 25.
constructor, prototype 연습문제 Q1. 다음 코드의 출력 결과는? function Parent() { this.name = 'Kim'; } var a = new Parent(); a.__proto__.name = 'Park'; console.log(a.name); 답: 더보기 Kim Q2. 모든 array에 적용할 수 있는 함수를 직접 새로 만들려면 어떻게 해야할까요? var arr = [1,2,3]; arr.remove3(); console.log(arr); //[1,2] 답: var arr = [1, 2, 3]; Array.prototype.remove3 = function (element) { for (var i = 0; i < this.length; i++) { if (this[i] === 3) { this.splice(i, 1.. 2024. 2. 24.

티스토리툴바