일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 |
- setstate
- S3
- Redux
- 라우팅
- imagePreview
- 미리보기
- 7기
- CI/CD
- rendering
- 비동기
- 동기
- 브라우저 렌더링
- useEffect
- socket.io
- 개발
- 스파르타코딩클럽
- 항해99
- react
- route
- FileReader
- Github Actions
- 접근 제한 라우팅
- 배포
- 채팅방
- routing
- qwe
- updater
- 후기
- previousState
- Preview
- Today
- Total
목록2022/06 (24)
삐옹
입력값 받기 복잡해보여서 백준은 피하고 피해왔는데 스터디를 백준으로 하게되었으니 다른 방도가 없다. 노드로 입력값을 받아 보자. 저마다 입력값을 받는 방식이 조금씩 다르기 때문에 내게 맞는 방식을 찾아 정리하는게 좋다. 그렇게 정리해본 코드이다. // 1. 하나의 값을 입력받을 때 const input = require("fs").readFileSync("./input.txt").toString().split(" "); console.log(input[0]); // 2. 공백으로 구분된 한 줄의 값들을 입력받을 때 const input = require("fs").readFileSync("./input.txt").toString().split(" "); const arr = []; input.map((a..
1. 디자이너1 + 프론트2 + 백엔드3 첫 협업 시작 2. 개발 들어가기 전에 미리미리 부지런히 공부해두기 디자이너1 + 프론트2 + 백엔드3 첫 협업 시작 생각만 해도 가슴이 웅장해졌던 조합이 눈 앞의 현실로 다가왔다. 다행히도 노드의 하연님과 마음이 맞아 팀에서 부리더를 맡게 되었다. 너무나 다른 6명이 하나의 프로젝트를 만들기위해 뭉쳤다 '소통이 뭐 얼마나 중요하길래 그래?' 라는 구닥다리 마음가짐으로 임했다가는 정말 큰일날 뻔 했다. 평생을 다르게 살아온 6명이 모였으니(게다가 다른 분야를 공부한 사람들), 그 중심점을 찾기는 여간 쉽지않은 일이다. 디자이너님을 만난지 둘 째날. 팀원들과 소통을 하고 진행하는데 있어 스스로 껄끄럽지 못하다는 느낌을 받았다. 마찰이 있었던 것은 아니다. 처음 만난..
이번 실전 프로젝트에서 실시간 채팅을 구현하기로 하였다. 지금껏 한번도 socket.io를 다뤄본적도, 사실 그게 뭔지도 모르기 때문에 혼자서 socket.io를 이용해서 실시간 채팅 웹 사이트를 구현해보기로 했다.🌝 What Socket.IO is Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server. It consists of: a Node.js server: Source | API a Javascript client library for the browser (which can be also run from Node.js): S..
싱글스레드 - 자바스크립트는 싱글스레드 언어이다. - 싱글 스레드? 자바에서는 각 스레드 별로 역할을 지정해줄 수 있다. (이 일은 스레드 A에서 하고 저 일은 스레드 B에서 해야지) - 근데 자스는 그렇게가 안됨. 그런데도 우리가 쓰는 대부분의 앱들을 동시적(실은 동시적이 아니라 contetxt switching이 일어난다) 으로 돌아간다. - 그 이유는 바로 js가 실행되는 브라우저에는 여러가지 쓰레드가 들어있기 때문이다. 그래서 웹 API들을 이용하게되면 멀티스레딩이 가능하다. 게다가 이벤트 루프를 사용해서 더 다양한 동작을 실행할 수 있다. 구조 자바스크립트 엔진은 변수를 생성해서 오브젝트를 할당하거나 문자, 숫자 할당하게 될때 저장하는 memory heap과 실행되는 함수를 차곡차곡 쌓아놓는(L..
어제부터 6주 간의 실전 프로젝트가 비로소 시작되었다. 디자이너님과의 프로젝트 주제 선정에서 작은 의견차이가 있었는데, 당연한 일이다. 각자가 가진 열망이나 니즈는 다르니까. 처음 만난 디자이너님이었기에 어떻게 대해야할지, 어떤 식으로 진행을 해나가고, 디자이너님의 영역을 건들지 않는 선에서 우리의 뜻을 전해야하는지 많이 어려웠다. (미팅 시간도 충분치 않았음 ) 하지만 다행히도 의견이 맞춰졌고 오늘 기획과 와이어프레이밍 부분에서 꽤나 값진 진전이 있었다. 실시간 채팅 토이프로젝트를 위한 socket.io 와 자바스크립트 기본을 다져가고있다. 이번 프로젝트에 실제로 들어갈 기능이라 실시간 채팅을 공부하는게 재미있다. 배운 것 드림코딩 1. Bubbling, Capturing: 이벤트가 자식-> 부모로 전..
스펙 React, Redux toolkit, middleware 상황 axios로 받아온 값을 화면에 렌더링 해주려고 하니 자꾸만 값이 undefined라고 뜬다. 받아온 값은 콘솔에 잘 뜨는데 대체 뭐가 잘 못된걸까. 시도 이 에러가 뜨는 경우는 받아온 값이 아직 다 받아지기 전에 화면에 뿌려주려고 할 떄 빈번히 일어난다. 그래서 3가지를 먼저 시도해보았다. 1. &&연산자와 조건문 const PostDetail = () => { const params = useParams(); const boardId = Number(params.postId); const dispatch = useDispatch(); const post = useSelector((state) => state.postReducer);..
서론 진행 중인 프로젝트에 업로드 할 파일의 이미지를 미리보여주는 기능을 넣어 보고싶어서 내용을 알아보다가, 단순히 코드 복붙을 하고 싶지않아 정리하게 되었다. Web API 인 FileReader라는 객체를 이용하여 구현해보았다. React에서 이미지 미리보기 마크업 ... const [imgSrc, setImgSrc] = useState(""); return( 이미지업로드 {imgSrc && } { encodeFileToBase64(e.target.files[0]); }} /> ) ... 동작원리 onChage함수 안에서 e.target.files를 콘솔에 찍어보면 선택된 파일의 목록(FileList)이 나온다 fileList를 자바스크립트에서 파일에 접근할 수 있도록 한다 file 객체를 읽어서 b..
서론 클라이언트에서 안전하게 로그인을 요청하는 방법을 알려면 다음의 세 가지를 먼저 이해해야 한다. 1. 로그인은 어떻게 이루어지나 2. 브라우저 저장소의 종류와 보안 이슈 3. 브라우저 저장소 별 장단점 로그인은 어떻게 이루어지나 1. 세션 id를 이용하는 방식 (1) 클라이언트에서 로그인을 시도하면 (2) 서버에서 세션을 생성한다. (3) 생성한 세션에서 세션 id를 클라이언트에게 보내주게 되면 (4) 클라이언트에서는 받아온 세션id를 브라우저에 저장한다. (5 )그 뒤 사용자 인증이 필요한 데이터 요청 때 서버에 세션 id 값을 보내면 (6) 서버는 그 id를 통해 세션을 불러와 유효한지 확인하는 방식으로 인증한다. 2. JWT를 이용하는 방식(ft. refresh token, access tok..
1. 회고 첫 협업을 진행하며 느낀 아쉬운 점 첫 번쨰, 동료와의 의사소통이 능률과 효율에 얼마나 영향을 끼치는지 실감했다. 명료한 의사소통을 나누지 못하면 명료하지 못한 코드와 결과가 나오게된다. 결국 시작부터 확실하게 잡고 들어가야 한다는 말이다. 그런 의미에서 이번 클론 미니프로젝트 주차의 시작은 꽤 괜찮다고 볼 수 있겠다. 두 번쨰, 어떤 문제에 관하여 직접 고민하거나 누군가에게 설명하면서 가르쳐 줄 떄 지식의 폭과 깊이가 매우 깊어진다. 먼저 물어볼 생각을 하기보단, 이 문제를 감싸고있는 전체적인 흐름에서부터 상세한 부분으로 좁혀나가다보면 생각보다 그 해결법이 찾아지는 경우가 많았다. 그리고 내가 아는걸 설명해줄 때 비로소 그 지식이 내 것이 되는 느낌이 든다. 적극적으로 물어봐준 팀원들 덕분에..
지난 주에 겪었던 많은 시행착오와 고민들 덕분인지 진행이 보다 수월하다. 어 이거 어제도 쓴 내용인가? 오늘은 내게 담당된 뷰를 구현하고, 나보다 좀더 많은 부분을 담당했던 팀원이 담당했던 로그인과 회원가입 부분을 도맡아서 진행 중 이다. 모달창으로 로그인, 회원가입 기능을 만들기로 했다. 구현 중에 조금 애를 먹었지만 부딫히는 문제들에 하나 씩 접근하며 풀어나가 결국 해결했다. 어쩔지 모르겠을땐 화이트보드 앞으로가서 그려보면 도움이 많이 된다. 내일은 널널하게 쉬다가 저녁부터 해야지. 내일 저녁에 WIL쓰고 기술, 오류정리도 해야된다.. 하기싫어...도 해야지 ^^