본문 바로가기

분류 전체보기123

Github profile 꾸미기 & 정리 ing 📍 github profille 정리 리스트 ✔ 프로필 미모티콘 생성 ✔ 프로필 README 꾸미기 ✔ 2주 프로젝트 README 정리 ✔ 4주 프로젝트 README 정리 ✔ 2주 프로젝트 리팩토링 ✔ 4주 프로젝트 리팩토링 (ing) 📎 프로필 미모티콘 생성 사회적인 (?) 나의 모습을 그리고싶었는데 캐릭터에 화장하는 게 어렵더라 ㅎ.. 😂 제페토보다는 사람같아서, 만족 ! ^__^ 📎 프로필 README 꾸미기 개인적으로 미니멀한 디자인을 좋아해서 나를 소개할 때 꼭 필요한 정보만 골라 컴팩트하게 구성해보았다. + 공식문서 밥 먹듯 보자는 의미에서 각 언어의 공식문서 링크도 연결해놨다. 😉 📎 2주 프로젝트 README 정리 📎 4주 프로젝트 README 정리 📎 2주 프로젝트 리팩토링 📎 4주 프로.. 2022. 2. 11.
프로젝트 수기 기록을 정리하며. 📍 재정비 시간 본격적으로 취업 준비에 앞서 이전 기록들을 정리하는 시간을 가졌다. 복잡하게 얽혀있던 폴더와 파일들, 어지럽게 적어놨던 메모들, 일기들 ... 📍 프로젝트 수기 프로젝트 초반에 생각나는대로 이것저것 적어놨던 기록. ✍🏻 프로젝트 후반의 기록. ✍🏻 확실히 로직이 정리된 느낌이 강하다. 페이지네이션 구현 로직 💡 lodash의 chunk 메서드를 활용했다. react-grid-layout 쓰기전 redux로 배열 상태 전역 관리할 때 .. 결국 redux를 쓰지 않게 된 그런 슬픈 이야기 😂 서버 API 를 수정하면서 작업 + 보내야할 데이터 많음 = 환장 조합 메모해가면서 진행했다 😉 2022. 2. 10.
kakao Map API Geocoder CORS Error 📌 문제 상황 프로젝트 리팩토링하면서 localhost 환경에서 웹을 테스트하고 있었다. 카카오 지도 자체는 잘 뜨는데 마커가 안찍히는 문제가 발생했다. ??? 뭘까 ??? 자바스크립트 키도 있고 지도도 잘 뜨는데 ... 뭐지 ??? 콘솔창을 확인해보니 Response to preflight request dosen't pass access control check : Redirect is not allowed for a preflight request 에러 메세지가 떴고, 그 내부를 들여다보니 geocoder 를 불러오는 과정에서 오류가 나고 있었다. 📌 해결 방법 문제는, 배포된 프로젝트 도메인에서는 모든 기능이 잘 동작했다. 카카오 Developer 안에서도 도메인 등록을 잘 해놨기에 내 문제는 아.. 2022. 2. 1.
22.01.26 코드스테이츠 4주차 Final Project 회고록 👀 4주차 Final Project 회고록 📌 4주차 두 번째 프로젝트의 시작 2주 프로젝트가 끝나고 쉼없이 4주 프로젝트가 시작되었다. 대화를 많이 하고 기획을 꼼꼼히 하기로 다짐했던 만큼 5일의 시간을 들여 계획했다. 운 좋게도, 내가 하고싶었던 아이디어로 웹을 만들게 되었다. 아이디어를 간단히 소개하자면 : -> 기획 의도 사진은 생각보다 많은 정보를 담고 있습니다. "사진을 저장하다 = 추억을 기억한다" 는 의미가 통하는 시대입니다. 갤러리의 수많은 사진들 사이에서 내가 원하는 사진 한장을 찾아 헤매본 적이 있으신가요 ? 정보의 저장은 쉬워졌지만 해당 정보를 제대로 관리할 수 있는 도구는 많지 않습니다. 블로그와 SNS에서 본 사진을 보고 반해 찾아간 장소의 주변에서 놀거리를 찾지 못해 당황한 적.. 2022. 1. 28.
21.12.26 코드스테이츠 2주차 First Project 회고록 👀 2주차 First Project 회고록 📌 2주차 첫 번째 프로젝트의 시작 팀원 모두 "첫" 프로젝트 경험이다 보니 배운 걸 복습하면 된다는 가벼운 생각으로 임했다. 그런데 아이디어 이야기를 하면할수록 큰 가닥이 잡히고, 해낼 수 있겠는데 ..? 라는 용기가 생겼다. 스토리 라인을 탄탄히 짰고 업무 분배도 기간에 맞춰 계획했다. 모두들 할 수 있다는 자신감에 부푼 채 프로젝트를 시작했다. 📌 우리팀이 잘한 점 📎 팀프로젝트와 직접적으로 관계없는 내용의 질문이더라도 팀원 모두가 함께 고민했다. 프로젝트를 하면서 대화의 생산성과 상관없이, 대화 자체를 많이 해야한다는 것을 느꼈다. 팀 프로젝트에서 빠질 수 없는 "GitHub 관리" 를 예로 들어보겠다. 우리 팀은 깃허브를 대화 주제로 삼았을 때, ✔ G.. 2022. 1. 27.
Token & Token-based Authentication 의 동작 과정 (feat. JWT) 📌 Token ? 프로그래밍 언어에서의 token 문법적으로 더 이상 나눌 수 없는 기본적인 언어 요소를 말한다. 키워드나 연산자, 구두점 등이 token 이 될 수 있다. 네트워크에서의 token 네트워크를 따라 돌아다니는 암호화된 비트열이다. 각 네트워크에는 오직 하나의 token 만 존재하므로 2개 이상의 컴퓨터가 동시에 메세지를 전송할 가능성을 사전에 차단한다. 보안시스템에서의 token 크레딧 카드 크기의 작은 장치를 말한다. 사용자가 처음에 암호를 입력하면, 카드는 네트워크에 접속할 수 있는 ID를 수시로 변경해가며 표시해준다. --> 공유 자원 접근에 대한 동기화를 보장하기 위해 사용되는 추상적인 개념이다. --> token 을 가진 사람이라면 누구나 특정 자원에 배타적 접근이 허용되고 (선.. 2021. 11. 26.
Session & Session-based Authentication 의 동작 과정 📌 Session ? 클라이언트가 서버에 data 를 저장할 수 있는 방법 중 하나로, 특정 저장 공간을 의미한다. session 은 특별한 경우가 아니라면 사용자가 웹 브라우저를 접속한 시점부터 종료하는 시점까지 유지된다. 📌 Session-based Authentication 동작 과정 ? 📎 express-session 모듈 // express-session 모듈 const express = require('express'); const session = require('express-session'); const app = express(); app.use( session({ secret: , resave: , saveUninitialized: , . . . cookie: { domain: , p.. 2021. 11. 25.
Cross-Site Scripting ( XSS ) 공격 📌 XSS ? Cross-site Scripting 의 약자이며, 웹 상에서 일어나는 기초적인 공격 방법의 일종. 악의적인 사용자가 공격하려는 사이트에 script 를 넣는 기법을 말한다. ( script의 형태는 다양하다 ) 보통 사이트에 접속한 사용자의 쿠키나 세션, 토큰 등 민감한 정보를 탈취하는 데 사용된다. ◾ Stored XSS ( Persistent XSS ) 저장형 XSS 공격 ( 지속형 XSS 공격 ) 일시적으로 공격하는 것이 아니라 지속적으로 피해를 입히는 XSS 공격을 말한다. 해커가 삽입한 script 가 DB에 저장되어, 악성 코드가 삽입된 웹 페이지를 본 사용자들에게 지속적으로 공격이 가해진다. 사용자가 입력한 값이 DB에 저장되고, 저장된 그대로 클라이언트 단에 보여질 때 이 .. 2021. 11. 24.
Cookie 와 Cookie options (Set-Cookie) 📌 Cookie ? 서버에서 클라이언트에 data 를 저장할 수 있는 방법 중 하나로, 작은 크기의 문자열을 말한다. 서버에서 클라이언트에 cookie 를 전송할 수도 있고, 클라이언트에서 서버로 cookie 를 전송할 수도 있다. -> cookie 를 이용해 데이터를 저장하고, 원할 때 불러와 다시 사용할 수 있다. ◾ Cookie 형식 = 쿠키는 name=value 쌍으로 정보를 저장한다. 📌 Cookie Options ? 서버가 클라이언트에 cookie 로 데이터를 저장하는 건 맘대로 할 수 있지만 역으로 클라이언트에서 서버로 다시 불러오는 건, 지정된 조건을 만족할 때만 가능하다. cookie에 데이터를 저장하면서 원하는 조건을 지정해줄 수 있다 ( 조건 설정은 option임 ). ✔ Expire.. 2021. 11. 23.