본문 바로가기

분류 전체보기168

210215_TIL 🍎 오늘 한 일 ✔️ React - Recast.ly 유튜브 페이지처럼 데이터에 따라서 영상 목록이 쭉 뜨고, 목록에 있는 영상들 중 중 하나를 선택하면 해당 영상을 볼 수 있는 플레이어가 뜨는 페이지를 리액트를 이용해서 만들었다. 그래도 처음 접했을 때 보다는 편리함을 아주 조금씩 느껴가고 있는데, 데이터 흐름이 일방통행이기 때문에 뭔가 좀 더 복잡한걸 만들게 되면 꼭 각 컴포넌트의 기능과 관계도, 데이터 흐름도를 정리해야겠다는 생각이 들었다. 컴포넌트 단위의 개발에 최적화된 스토리북이라는 도구도 써봤는데 스토리북도 잘 알아두면 유용하게 쓰일 것같아서 (리액트부터 마스터하고) 공부해봐야겠다.! ✔️ Toy - BFS DFS방식을 조금 응용해서 BFS 문제도 풀어보았다. DFS에서의 깊이가 결국 BFS에.. 2021. 2. 16.
210212_TIL 🍎 오늘 한 일 ✔️ React - Lifecycle 이해 페이지가 렌더링되기 전부터 사라질 때까지 컴포넌트는 수명주기라는 것을 갖는다. 모든 컴포넌트는 마운트, 업데이트, 언마운트 세 가지 단계를 거치는데 각 단계별로 몇개의 메서드들이 정해진 순서대로 호출된다. 이렇게 호출되는 메서드들을 lifecycle 메서드라고 한다. 마운트 단계는 DOM 생성 이후 웹 브라우저상에 나타나는 단계이고, 업데이트는 마운트 이후 컴포넌트의 props, state등 변경사항이 생겼을 때를 말한다. 언마운트는 컴포넌트가 DOM에서 제거되는 시기로 말 그대로 컴포넌트 소멸시기라고 할 수 있다. 컴포넌트를 하나 만들고 각 메서드들이 실행되는 시기와 내용을 콘솔창을 통해 눈으로 확인해보니까 좀 더 이해가됐다. 첫 렌더링을 마친.. 2021. 2. 13.
210210_TIL 🍎 오늘 배운 것 ✔️ React 말로만 듣던 리액트를 드디어 배웠다. 아예 처음 접해봐서 공식 가이드부터 봤는데, 생긴걸 보니 일단 당황스러웠다. 자바스크립트랑 HTML이 막섞여서 약간 보기 불편하고 혼종같은느낌..이들었다. 트위틀러를 만들기 전에 좀 익숙해지려고 예제들을 계속 따라해보니까 전체적인 흐름을 조금씩 알 것 같았다. 그리고 사실 지금까지 배웠던 this, OOP같은 개념들을 조금 지나면 까먹지 않을까 하고 걱정했었는데 리액트에서 정말 자주쓰여서 쓸데없는 걱정이었단 것도 깨달았다.. 갑자기 너무 많은 개념들이 쏟아져 들어오기도 했고 내일 보면 또 다시 낯설 것 같아서 설 연휴동안은 리액트에 익숙해지도록 계속 써봐야겠다. ✔️ React로 Twittler 만들기 전에는 순수 HTML, Java.. 2021. 2. 11.
210209_TIL 🍎 오늘 한 일 ✔️ Express Node.js 에 내장되어있는 http 모듈을 이용해 만들었던 http 서버를 express라는 프레임워크를 사용해 리팩토링 했다. 진짜 훠얼씬 간단하기도 하고 미들웨어 종류도 엄청 많았다. get, post, options같은 HTTP 메서드들도 그렇고, url 에 따라 라우팅을 할 때도 그렇고 원래는 if문을 통해 일일이 구분해줬었는데, 아예 자제적인 요청 메서드들이 내장되어있었고 라우터도 제공해줘서 굉장히 간단하고 편했다. 가장 많이 쓰인다는 미들웨어들을 써봤는데 HTTP body(payload) 부분을 받아오게 도와주는 body parser, 모든 요청이나 응답에 cors 헤더를 아예 붙여줘서 따로 헤더를 작성해줄 필요가 없는 cors를 사용해봤다. 직접 콘솔창.. 2021. 2. 10.
210208_TIL 🍎 오늘 한 일✔️ Chatter Server 어제는 이미 구축되어있는 AWS 서버와 연결했었는데, 오늘은 대신 Node.js를 이용해 localhost와 연결해봤다. 서버를 생성하는 곳과 실제로 요청을 처리하는 파일을 구분했는데, 각 파일에서 모듈을 export로 내보내고 다른곳에서 require을 통해 받아와 사용하기도 했다. 작성한 코드를 토대로 처음으로 서버 API 문서도 작성해봤는데 그렇게 많은 내용은 아니었지만 약간 진짜 개발자가 된 느낌이었다ㅎ ✔️ fs모듈로 데이터 관리하기 따로 데이터를 관리하는 json 파일을 만들어 두어 서버가 꺼졌다가 켜져도 데이터가 유지되도록 했다. readFile 메서드로 데이터를 읽어오고, writeFile 메서드로 받아온 데이터를 파일에 추가로 써주어서 해결할.. 2021. 2. 9.
210207_TIL 🍎 오늘 한 일✔️ Toy 복기 지난주에 풀었던 토이 다섯문제를 복습했다. 테스트를 통과시키고 나면 다시 안보고 넘어갔는데 오늘 다시한번씩 보면서 순서도도 그림으로 그려보고 주석도 달아봤다. 가장 크게 느낀점은 변수명을 잘 좀 지어두자는 것.. 그래야 나중에 내가봐도 바로 알아볼 수 있을 것 같다ㅎ 다른 분들의 코드도 보면서 놓쳤던 부분은 없는지, 좀 더 효율적인 코드로 개선해볼 수는 없는지도 생각해보았다. ( + 메모이제이션을 활용해서 고쳐보기..! ) ✔️ CommonJS JavaScript를 브라우저에서뿐만 아니라, 서버사이드 application이나 데스크톱 application에서도 사용하기 위한 노력의 결과이다. 범용적으로 쓰이기 위해서는 '모듈화'가 핵심적이다. 모듈화는 세 가지 조건이 만족.. 2021. 2. 8.
210206_TIL 🍎 오늘 한 일✔️ CORS 정리 CORS에 요청방법이 세 가지가 있는데, Preflight Request, Simple Request, Credential Request 이렇게 나뉜다. 각각에 조건들이 있어서 그 부분에 대해 정리했다. 특히 CORS를 판단하는 시점이 중요하다고 느껴졌는데, 판단 + 응답 파기 여부는 브라우저가 결정 하기 때문에, 요청의 실패나 성공에 상관없이 그 이후에 CORS 위반 여부가 판단된다. 이 점은 테스트를 해보면서 직접 확인할 수 있었다. ✔️ CORS 테스트 클라이언트랑 서버를 분리해서 CORS와 관련된 테스트들을 해봤다. 포트번호가 동일할 때와 다를 때, Allow-Control-Allow-Origin 값을 * 로 했을 때와 origin으로 설정했을 때, 요청시 헤더 .. 2021. 2. 7.
CORS 등장배경 옛날에는 서버에서 내려받은 client로 통신을 했기 때문에, 출처가 같아 의심의 여지가 없었다. 하지만 최근의 웹들을 생각해보면 여기저기서 받은 여러 리소스들을 한 클라이언트가 활용해야할 필요가 생겼다. 이제는 출처가 다르기 때문에 한번쯤은 의심을 해봐야 할 상황이 된 것이다. 이런 배경에서 다른 출처의 리소스에 접근 가능한 권한을 부여하는 정책이 생겨나게 되었다. 이 중 하나가 바로 CORS이다. CORS CORS는 새로운 HTTP 헤더를 추가함으로써 웹 어플리케이션이 출처가 다른 리소스에 접근 권한을 부여하도록 브라우저에게 알려주는 체제이다. 여기서 다른 출처는 프로토콜, 호스트, 포트가 다른 경우를 의미한다. 아래처럼 URL은 스키마(프로토콜), 호스트, 포트번호, 경로, 쿼리문 등으로 .. 2021. 2. 7.
[Javascript 객체] location 객체 location 객체는 window 객체, document 객체의 프로퍼티인데, 주소와 관련된 객체이기 때문에 URL을 변경하거나, 현재 브라우저에 표시된 HTML 문서의 주소와 관련한 다양한 정보를 얻을 수 있다. origin도 확인가능하다. console.log(location) 객체를 살펴보면 url의 구성요소들을 하나씩 확인해볼 수 있다. location 이나 location.href 에 값으로 url을 넣어주면 페이지 이동도 가능하다. location.href = 'http://google.com'; replace, assign 메서드를 이용하면 페이지를 넘나들 수도 있다. 둘의 차이는 이동 후 기록(history)를 남기는지 안남기는지이다. assign은 기록을 남기고, replace는 말 그.. 2021. 2. 6.
210205_TIL 🍎 오늘 한 일 ✔️ node.js로 웹서버 만들기 node.js에서 http 모듈을 이용해 웹서버를 만들었다. HTTP 트랜잭션 해부라는 가이드가 있어서 처음부터 정독해보고 코드를 하나씩 따라쳐보기도 했다. 일단 무작정 따라해보고 어떤 변화가 있는지 살펴보다 보니까 글로 볼 때보다 어떤식으로 돌아가는건지, request객체와 response 객체가 어떤식으로 작동하는지 더 바로 알 수 있었다. 웹서버를 만들고, 클라이언트 부분에서 보낸 POST 요청을 받으면 body부분을 적절히 변환해 다시 body에 담아 응답을 돌려주는게 전체적인 구조였는데 OPTIONS메서드에 따른(preflight request) 응답부분도 따로 작성해보니까 개념으로만 봐서 뭔가 추상적으로 느껴졌던 CORS를 구체적이고 명확하게.. 2021. 2. 6.
210204_TIL 🍎 오늘 한 일 ✔️ CORS, Browser Security Model 네트워크와 관련된 개념들을 배웠는데, 처음 전송되는 도메인과 다른 도메인이 리소스 요청을 했을 때 CORS에 의해 요청된다는 것을 알게되었다. 간단한 흐름을 살펴보면, 서버는 요청에 대해 응답을 할 때 헤더의 Access-Control-Allow-Origin의 값으로 리소스 접근이 허용된 출처를 갖고 브라우저는 이후에 자기가 보낸 요청과 서버의 응답을 비교해 유효성을 판단하게 된다. 이런 CORS는 세가지 상황에 따라 동작하는 방식이 바뀐다.첫번째는 Preflight 요청인데, OPTIONS 메서드를 사용해 브라우저가 본격적인 요청을 보내기 전, 어떤 메서드를 사용할 수 있는지 파악하는 요청이다. 두번째는 일반적인 요청인 Simpl.. 2021. 2. 5.
210203_TIL 🍎 오늘 한 일✔️ 서버 관련 개념 공부 서버와 클라이언트가 어떤 식으로 통신하는 지 자세하게 배웠다. 특히 통신을 위해 사용하는 HTTP 프로토콜에 대해 좀 더 공부를 공부했는데, 개발자 도구의 Network 부분을 보며 요청에 따라 어떤식으로 변하는지를 살펴보기도 했다. 네트워크가 이루어지는 과정을 해부해보는 느낌이라 재밌었다.. ✔️ 채팅앱(CODEPLE) 만들기 서버를 본격적으로 활용해보기 위한 출발점으로 채팅 앱의 클라이언트 부분을 만들어보았다. fetch API를 활용해 GET 요청을 통해 데이터를 받아오고, POST요청을 통해 새로 만든 데이터를 서버로 보내기도 했다. 파라미터 지정을 통해 필터링 하고싶은 객체만 따로 받아와 화면에 로딩하도록 해서 필터링을 구현해보기도 했다. fetch AP.. 2021. 2. 4.
반응형

티스토리툴바