반응형

프론트엔드 6

[php]다중 탭 접속 쿠키 공유 문제..세션 스토리지 사용하자.

php를 쓰면 보통 php는 서버단 세션을 사용할 것이다. 왜냐면 진짜 안전하니까... 서버가 관리하니 외부 노출이 안되서 너무 좋다. 이번에는 js 라이브러리의 모듈에서 특정 값을 추출해 이를 서버로 던져줘야 해서 해당 값을 가져와야 했는데, 처음에 손쉽게 쿠키를 사용했다. 아니면 방법이 없어서.... 이게 나중에 발견된 문제였는데, 다중 접속시 쿠키값이 공유가 되어 덮어 쓰는 문제가 생겼다. 이걸 어떻게 해결하나 싶었는데, 고민하다가 front-end단의 세션스토리지가 있더라. 이름이 같아서 생각하지 못 한 부분이었다. 찾아보니 프론트엔드단의 세션스토리지도 서버의 세션처럼 한개의 탭이나 창을 열면 그때마다 새로 세션스토리지를 생성한다. 그로 인해 덮어쓰기가 진행되지 않아 모든 값을 여기로 던져버렸다 ..

취업/PHP 2021.12.14

[나만의 페이지] 포트폴리오용 개별 사이트 제작

위코드에 졸업한지도 오래되었지만, 요즘 코로나 시국이라 웹 개발자(코더)가 늘어나서 그런지 취업이 너무 힘들다. 기존에 내가 wecode에서 작업한 1,2차 회사홈페이지 클론으로는 도저히 취업이 힘들기에 나만의 작품이 있어야 한다고 판단. 그러므로 해당 페이지를 직접 만들어보기로 했다. 오랜만에 코드를 직접 치니 갑자기 막 헷깔려서 약간 헤매고 있다. 뭘 불러와야되더라? 이러고 있지만 구글링하니 바로 나와서 ㅎㅎ 글자 폰트는 뭐로 바꾸지? 이런 것들이 갑자기 생각이 안나서 깜짝 놀랐다. 뭐 그래봤자 바로 검색해서 찾아서 적용했고 말이다. 물론 리덕스도 잘 리덕스 데브툴즈 연동했다. initialState값을 적용해서 해당 값을 잘 읽어오고 있다. (리덕스는 처음 적용중이라 action 함수쪽에서 뭘로 적..

[Node] 프론트엔드와 백엔드 연결하여 서버에서 작동구현.

방법은 간단했다. 프론트엔드단에서 npm build나 yarn build로 정적 파일을 구축하고, 이를 서버측에서 이러한 파일을 사용할 수 있도록 라이브러리(koa-static)를 설치하여 정적파일을 읽는 기능을 구현하여 소비자가 요청시에 해당 프로그램을 읽게 연동시키면 된다. 이를 몰라서 어떻게 구현하나 고민이 많았는데, 간단했다. const buildDirectory = path.resolve(__dirname, "../../blog-frontend/build"); app.use(serve(buildDirectory)); app.use(async ctx => { // Not Found이고, 주소가 /api로 시작하지 않는 경우 if (ctx.status === 404 && ctx.path.indexO..

코딩/Node.js 2021.02.24

[Node] 노드를 공부하면서 이해했는데, 의문점이 생겼다.

const http = require('http'); const fs = require('fs'); const app = http.createServer((req, res)=> { let url = req.url; if(req.url == '/') { url = app.js; } if(req.url == '/favicon.ico') { return res.writeHead(404); } res.writeHead(200); res.end(fs.readFile(__dirname + url)); }) app.listen(3000) 나는 프론트엔드 개발자로서 Node.js를 공부하고 있다. 그런데, 백엔드쪽에서 배포해본적이 없어서 그러는데, if(req.url == '/') { url = app.js; /* a..

코딩/Node.js 2021.01.25

[위코드] TIL(Today I am learned) -22(2차프로젝트 시작/트립어드바이저)

이번주 월요일에 적어야할 내용을 목요일에 적고 있다. ꒰( ˵¯͒ꇴ¯͒˵ )꒱ 우리가 해야할 사이트는 tripadvisor로 선정되었고, 모두가 경악하였다. 〣(ºΔº)〣 1차 프로젝트보다 훨씬 어려운 사이트를 선정되었기때문이다. ٩(͡◕_͡◕ 여기저기 이전 1차에 비해서 많이 어려워진 스크롤이벤트, 여러 기능들이 많아졌기에 그러하다. youtu.be/NDQAJ3PJ2kU 트립어드바이저 본홈페이지 해당 기능을 설명하기 위한 유튜브 링크 이중에서 내가 구현해야할 기능은 로그인, 회원가입을 맡았다. 원래는 다른것을 해야하지만, 이전 1차에서 구현하지 못한 모달을 위해서 그냥 받아들였다. 그리고 최대한 빨리 다른 페이지를 할것이다. ◝(⁰▿⁰)◜ 하는 마음으로 프로젝트를 시작했다. 의외로 난항이었던 것이 구글..

위코드 10기 1차 프로젝트 클론코딩 후기.(이솝/aesop)

youtu.be/tCugSJzPjZY 팀명 : ok-bujangnim 구성원 : 프론트 엔드 3명, 백엔드 2명. 프론트엔드 3명 최운정(PM), 배정규, 송수호 백엔드 2명 최홍일, 이문영 프로젝트 gihub: github.com/kasumil/10-ok-bujangnim-frontend kasumil/10-ok-bujangnim-frontend Aesop 사이트 클론 위코드 10기 팀프로젝트. Contribute to kasumil/10-ok-bujangnim-frontend development by creating an account on GitHub. github.com 나의 소개 나의 이름은 송수호입니다. 부트캠프인 위코드의 시작일인 2020년 6월 22일이 제 개발 경력의 시작이자. 개발자로..

728x90