post
-
2) project
프론트의 서버 인증 (쿠키, 토큰, 세션) 2
회원가입 / 로그인을 구현하며, 권한이 있는 유저인지 인증하는 과정에서 많은 일을 겪었습니다. 아마 프로젝트를 백엔드와 함께 구현하면서 많이 일어나는 일이겠죠. 1) CORS 에러와의 싸움 2) 401과 403 코드의 콜라보 3) 응답 헤더에 접근 불가 4) 요청헤더에 토큰 넣기 해결했던 과정들을 공유하고, 다시 되새기는 시간을 갖도록 하겠습니다. 3) 응답 헤더에 접근 불가 서버에서 응답헤더에 토큰을 넣어 보내주었는데, 개발자 도구로 확인했을 때는 있었던 토큰이 무슨 수를 써도 접근이 불가여서 많은 시간을 썼습니다. 💡접근이 불가능한데, 응답 헤더를 어떻게 확인하나요? → 토큰 확인이 안되는데 서버는 보냈다고 할 때, 진짜 보낸 게 맞는 지 확인해야합니다. 브라우저의 개발자 도구에서 Network에 들..
-
1) study(project)
CI / CD 를 통한 Github Action, Netlify
프론트엔드 페이지를 배포하기 위해 Netlify를 사용해보게 되었습니다. 정말 간단하게 배포가 가능하며, git에 push만 해도 자동으로 build와 배포가 이루어지는 프로그램입니다. 이걸 사용해보니, 이렇게 간단히 CI/CD가 이루어지나? 싶더라구요. 그래서 이 사이트를 소개할 겸, CI/CD와 Github Action에 대해 알아보겠습니다. 💡 CI/CD가 뭔가요? 꼭 해야하는 건가요? → 개발부터 배포까지의 단계를 자동화하여 빠르고 효율적이게 배포할 수 있게 하는 것입니다. 하지 않으면 배포가 불가한 것은 아니지만, 배포 후 업데이트를 하거나 수정을 하는 경우 빌드부터 배포를 다시 하는 것이 아닌 자동으로 진행시키기 때문에 따로 시간을 낼 필요가 없습니다. 따라서 빠르게 수정본의 테스트가 가능하며..
-
JavaScript
객체 지향 프로그래밍 (클래스와 인스턴스) in JS
- 객체 지향 프로그래밍 : 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴 하나의 모델이 되는 청사진을 우리는 "class" 그것을 바탕으로한 객체는 "instance object (instance)" 라고 부른다. [클래스] 클래스는 ES5 이후 , ES6 부터 사용되는 문법으로 생성자 함수로 만들었었지만, 이젠 class 키워드로 만드는 문법이다. //ES5 문법 function Menu(category, name, price){ // 인스턴스가 만들어질 때 실행되는 코드 this.category = category; this.name = name; this.price = price; } //ES6문법 class Menu{ constructor(categ..
-
TIL
HTML 리스트 (+ 태그들의 관계성)
HTML 의 목록태그 리스트 데이터들을 정리하여 카테고리 형식으로 만들어 줄 수 있어, 시각화하여 페이지를 꾸미기 위해서도, 비슷한 데이터끼리 정렬할 때에도 사용되어 자주 사용하는 태그입니다. 1. Unordered List : 정렬되지 않은 목록 (순서없이 나열되는 리스트) 리스트1 리스트2 리스트3 HTML 삽입 미리보기할 수 없는 소스 => 순서표시는 없고, 점으로 리스트의 목록이 나열된 형태가 된다. (ul의 기본으로 설정되어있는 점은 css를 통해 list-style : none 으로 없애거나 다른 모습으로 변경이 가능하다) *정렬되지 않은 목록이라고 하여, 랜덤으로 리스트가 나오는 것은 아니다. 리스트의 모습은 html 상에서 적었던 순서 대로 나온다. 2. Ordered List : 정렬된 ..
