Youngble_개발스토리

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org 교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다..

미니프로젝트 보여줘 홈즈 다방 과 같은 집을 구하거나 입주자를 구하기위한 소셜 커뮤니티 사이트이다. 요번주는 그전주에 배운걸 프론트엔드 +백엔드 협업 과정을 배웠다. 안그래도 그전주까지 파이어베이스를 이용하여 서버와 연동하고 데이터상태관리, 컴포넌트 구성등을 따라가느냐고 복습할시간도 없고 정리할시간도 많이 없었는데 그걸 이용해 파이어베이스를 버리고 백엔드로 서버를 구축하고 DB 를 만든걸 써야했는데, 처음 2틀간 그전에 배운걸 조금 다시 복습을 하면서 큰틀은 지난주걸 참고하고 그대로 쓰되 이해하면서 처음부터 다시 틀을 잡았다. 우리가 필요한 컴포넌트와 페이지를 와이어프레임에 넣었고, api 를 통해 무엇을 백엔드와 프론트간에 똑같이 써서 request,response를 받을지 정하였다. 처음이라 그런지 ..

깃, 깃허브 정리 (협업) 깃허브 배포자 Repo 를 만들고 만들고난후 메인페이지에서 나오는 순서대로 진행하여 init 과 branch 를 main 으로 바꾸어준다. 그리고 setting 에서 Manage Access 에서 같이 협업할분을 초대한다. 깃허브 협업자. 초대를 받은 access를 승낙을 한후 클론할 폴더를 새로 만들고 그 폴더안에서 git clone [주소] 를 해준다. 그리고 git branch [이름] 으로 자기가 따로 쓸 브랜치를 만들어주고 git checkout 으로 만든 브랜치로 이동설정한후. 코드를 수정한것을 add, commit, push 를 해준다. 그럼 해당 브랜치에 같을때 Push 하여 들어온 파일들이 있다. 이것을 나중에 PR Pull Request 를 해줘서 Merge ..

요번주는 심화주차로 그전에 기본과 숙련과정에서 배운걸 +해서 많은 기능과 세분화된 컴포넌트, 상태관리, 리덕스,파이어베이스 쓸때 좀더 편리하게 쓸수있는 툴?라이브러리 사용해보았다. 6일안에 4주차 강의들 다 듣고 CRUD와 로그인,회원가입, 무한스크롤,댓글,좋아요 기능까지 해야하는등 많아서 다 구현하지 못하고 큰 흐름만 배우는걸로 만족했다. 심화과정 과제화면 우리 흔히 보는 인스타그램과 같은 같은 기능을 쓰게 되었는데 확실히 기능과 컴포넌트들이 많으니 코드도 길어지고 로직을 따라가기가 여간 쉽지 않긴했다. 다음주부턴 백엔드쪽과 협업을 하면서 미니프로젝트를 하게되는데 복습도 계속하면서 리액트를 좀더 편하게 사용할수있도록 해야겠다. Problem 과 해결과정 처음 스크린샷처럼 InifinityScroll 컴..

https://programmers.co.kr/learn/courses/30/lessons/17683 코딩테스트 연습 - [3차] 방금그곡 방금그곡 라디오를 자주 듣는 네오는 라디오에서 방금 나왔던 음악이 무슨 음악인지 궁금해질 때가 많다. 그럴 때 네오는 다음 포털의 '방금그곡' 서비스를 이용하곤 한다. 방금그곡에서는 TV, programmers.co.kr 내가푼방식 function solution(m, musicinfos) { var answer=[]; var numb=[]; for(var i=0; i< musicinfos.length; i++){ var b= musicinfos[i].split(","); var totalmusicplay=0; var end= (b[1].substr(0,2)/1)*6..

syntactic sugar는 한국어로 직역을 하자면 '문법적 설탕'이다. 이 문법적 설탕(syntactic sugar)라는 것이 의미하는 것은 문법적 기능은 그대로인데 그것을 읽는 사람이 직관적으로 쉽게 코드를 읽을 수 있게 만든다는 것이다. 예를 들면 다음과 같은 것들이 있다. // syntatic sugar sample function () { } // 13 typing 이렇게 함수는 13글자를 타이핑해야 선언을 할 수 있다. 그런데 이걸 syntactic sugar로 표현을 한다면 다음처럼 줄일 수 있다. () => { } // 8 typin 보기에 훨씬 직관적이면서도 쓰는 것이 훨씬 간편해졌다. function Obj() { } Obj.prototype.method = function () { ..

우리가 실시간으로 ‘감사합니다’ 를 검색할때 ㄱ,ㅏ,ㅁ,ㅅ,ㅏ,ㅎ,ㅏ,ㅂ,ㄴ,ㅣ,ㄷ,ㅏ라고 칠때 연관 검색어가 같은걸 빨리 바꿔줄수있는데 너무 빨리 한다면 서버 요청이 날아가는걸 막기위해 특정시간마다 1번씩 또는 키보드 입력이 멈출때만 1번 연관검색이 뜨게 줄일수있다. 따라서 이런 연관 검색어 부분의 여러차례 빈번하게 발생하게되는 랜더링도 막아 줄수있다. 또한 파이어스토어에서는 무료 요청횟수가 한정적이라 더이상 요청못할수도있다. 따라서 이런걸 막기위해서 debounce와 Throttle 을 사용한다. Debounce란? 이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행한다. 일정시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소한다. throttle이란? 일정시간동안 일어난 이벤트를 모아서 주..

심화과정으로 배워야할 내용과 구현해야할 기능들이 많아서 몇일동안 블로그 관리를 못했다. 기존의 배운 CRUD를 이제 많은 컴포넌트 단위로 잘르고 페이지와 최소화 컴포넌트를 이어서 만드는등 아직 많이 해보지않았어서 이해하는데 애를 먹었다. 그리고 기존의 방식으로 firebase나 리덕스에 연결하는게 아니라 redux-actions 로 좀더 간결하게 쓸수있도록 해주는등 아직도 생소한게 많아서 이건 WIL 일때 정리해도록하겠다. 오늘은 회원가입시 이메일형식으로 아이디를 입력받아야하기 때문에 정규식을 써서 test를 하는 방식을 배웠다. 정규식은 // 안에 내용을 쓰는데 처음부터 해석하면 ^는 처음 맨앞에 나올 문자를 정해준다. 숫자와 영대소문자가 가능하다. 그다음엔 ()로 이루워져있는데 뒤에 *을 사용하기위함..

숙련주차인 4주차를 거치면서 우리가 배우는 함수형 컴포넌트로 사용하는것에 대해서 어느정도 익숙해진것같다. 그안에서 기존에 배웠던 클래스방식의 라이프사이클이 어떻게 이루워지는지 알게되었고 왜 클래스방식보단 함수형태로 쓰는지 알게되었다. 클래스로 쓸때는 자바스크립트의 지식도 많이 요구되어서 this 바인딩이나, 클로져, state의 흐름등도 알아야하고 제약이 많이있었다. 하지만 함수형 컴포넌트를 쓰면서 이러한 클래스의 기능등을 리액트 훅을 써서 간단하고 짧지만 모든 기능을 할수있게 해주는게 편하다고 생각했다. 요번주차때 가장 집중하고 또 이해하는데 시간을 많이 투자한건 역시 redux의 구조와 어떤 흐름으로 이루어지는지, 그리고 Redux의 휘발성 데이터를 유지하기위해 파이어베이스 스토어를 사용할때 어떻게 ..

주특기과정동안 리액트의 컴포넌트의 특성을 배우기위해 클래스형 컴포넌트와 함수형 컴포넌트 를 배웠다. 부랴부랴 배우면서 어느정도 큰틀을 알게되었지만 useEffect의 정확한 구조와 왜 쓰는지에 대해서는 어렴풋이 알기만했다. 요번주차에서 이 useEffect 이 무엇이고 어떤 구조고 어떻게해서 쓰게되는지 정리하고 싶었다. useEffect함수의 기본 구조는 아래와 같다. React.useEffect(()=> { Didmount 부분과 DidUpdate 부분 return () ⇒ willunmount 할부분 }, [두번째인자부분]) useEffect을 설명하기전에 기본 라이프사이클 구조를 보자면 위와 같이 이루워지는데 useEffect을 사용하는 함수형 컴포넌트는 클래스컴포넌트와 다르게 하나하나 compon..