일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- rendering
- 스파르타코딩클럽
- 개발
- Github Actions
- Preview
- FileReader
- S3
- updater
- 채팅방
- imagePreview
- route
- useEffect
- 라우팅
- 동기
- qwe
- 7기
- 비동기
- 배포
- socket.io
- 미리보기
- CI/CD
- 접근 제한 라우팅
- previousState
- react
- Redux
- 후기
- 항해99
- routing
- 브라우저 렌더링
- setstate
- Today
- Total
목록분류 전체보기 (105)
삐옹
내가 구현하고 싶은 채팅 기능의 일부이다. 채팅 할 수 있는 사람들의 리스트가 있다. (A유저, B유저, C유저) -> A유저를 클릭 시 A유저에게 채팅을 할 수 있다. -> B유저를 클릭하면 A유저와의 채팅을 끝내고 B유저와 채팅을 할 수 있다. -> C유저를 클릭하면 B유저와의 채팅을 끝내고 C유저와 채팅을 할 수 있다. * 실시간이냐고? 오브콜스 와이낫. 실행 순서 서버와 socket.io 연결. 방에 입장 + 대화목록 불러오기 불러온 대화목록 화면에 뿌리기 채팅을 치면 채팅목록에 저장하고 대화목록을 다시 화면에 뿌리기 지금껏 나눈 채팅을 대화목록에 저장하고 방 떠나기 간략히 말하자면 방 입장 -> 채팅 -> 방 나가기 + (다른) 방 입장 -> 채팅 -> 방 나가기 + (다른) 방 입장 + 채팅 ..
상황 달력 라이브러리를 사용하는건 크게 어렵지 않다. 왼쪽은 react-datePicker에서 기본으로 주는 css를 임포트해서 적용시킨 것이다. 오 좋은데? 하지만 나는 디자이너님이 주신 달력 디자인 대로 만들어야 하니니 이대로 쓸 수 없다. 커스터마이징을 해보자. 먼저 바꿔야 할 몇가지를 정리해보자. 1. 헤더에 월, 년도 말고 월만 나타나게 하기 2. 월~일 알파벳 앞에서 3글자까지 표시하기(Su -> Sun) 3. 오늘 표시하는 dot 스타일링 변경 방법1. 넘겨준거 쓰기 - 실패🤔 import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; //.. 코드 맨 상단에 임포트해 온 기본 ..
백3프1 괜찮아! 백엔드3명과 협업해가는 방법을 조금씩 알아가고 있다. 포스트맨이나 썬클같은 api 요청을 미리 확인할 수 있는 플랫폼은 기본이고 나와 무언가 작업하기 전에 반드시 나와 무엇을 해야하는지를 분명히 적어달라고 부탁했다.부탁보단 협박에 가까웠던 것 같아 미안하다. 그런 부분에서 예민해진 것도 사실이다. 하지만 혼자 프론트를 맡게된 상황에서 조금이라도 지체되는 시간은 곧 전체적인 개발 속도의 저하로 이어졌기에 나 모르게 나를 이해하고 배려해줬을 우리 팀원들이 고마웠다. 거 노션 참 잘 썼군. 좀 낫다. 하연이 영준이 연욱이 나도 화이스팅!(호이스팅 + 화이팅 이란 뜻). https://www.notion.so/ae87955ec3954a3aaf624d0a6ff1fcad 기능 소통의 창구 달력추가..
같은 팀 프론트 한명이 나가서 혼자가 되었다. 열심히 한다고는 많이 하긴했는데, 이러다가도 막히는 부분이 나오면 백엔드에선 나를 기다리는거 말곤 대안이 없으니 그게 가장 걱정이다. 다행히 매니저님께서 수료생 중 한 명을 구해서 충원해준다하셨다. 새로 들어왔을 때 모든걸 다 설명해주어야 한다는 귀찮음이 차라리 혼자하는게 낫겠지 싶었지만, 내가 아닌 팀을 위한다면 프론트를 충원하는게 맞다. 내일은 뷰에 좀 집중해서 하자. 뷰가 어느정도는 좀 나와야 기능들 정리가 될 듯. 정말 열심히 해야한다. 아니 잘 해야 한다 자는 시간 빼곤 모두 집중하자.
1. 프로세스와 스레드의 차이 2. 멀티프로세스와 멀티스레드 프로세스와 스레드의 차이 프로세스 프로세스란 운영 체제 위에서 실행중인 프로그램을 말합니다. 주소 공간, 파일 ,메모리 등을 운영체제로부터 할당받고 이것들을 모두 프로세스라고 합니다. 구체적으로는 프로그램의 코드를 담는 코드 섹션, 전역변수를 담는 데이터 섹션, 동적으로 생긴 데이터들을 담는 힙 섹션, 호출 된 함수, 리턴 값, 지역 변수 등 임시데이터를 담는 스택 섹션 총 4개의 섹션으로 구성됩니다 *PCB(Process Control Block) 프로세스에 대한 중요한 정보를 담고 있는 운영체제의 자료구조이다. 스레드 스레드는 프로세스의 실행 단위, 작업의 여러 갈래라고 할 수 있습니다.프로세스 내의 주소공간이나 자원을 공유할 수 있습니다...
처음에 네아? 네아가 뭐지? 했는데 네이버아이디 줄임말??;; 별다줄.. 각설하고 구현 코드보단 소셜로그인이 어떻게 이루어지게 되는지에 관한 전체 그림을 이해하기 위한 목적으로 포스팅을 해보겠다. 한줄 정리 (클라) 로그인 -> 콜백url로 이동 -> 인가 코드 받기 (서버)-> 인가 코드 서버에 전달 -> 엑세스 토큰 요청 (네이버)-> 엑세스 토큰 반환 -> 서버로 엑세스 토큰 보내주기 (서버)-> 클라로 엑세스 토큰 보내주기 (클라)-> 엑세스 토큰 브라우저에 저장
1. 이번주 배운것 2. 느낀것 3. 내게 아쉬웠던 것 4. 이번 WIL의 키워드 - 실전 프로젝트를 진행하며 기술적으로 막혔던 부분은 무엇인가요? 해결했다면 어떻게 해결했는지 과정을 작성해주세요! 이번주 배운것 소셜 로그인. 이번주는 소셜로그인(구글)으로 시작해서 소셜로그인(네이버)으로 끝났다. 결과는 구글로그인한테 쥐어터지고 네이버랑 짝짝꿍했다. 구글은 불과 1,2달 전에 새로운 버전의 로그인 라이브러리가 새로나왔다. 그런데 최근에 신규로 프로젝트 만든사람은 구버전꺼는 아예 못 쓴다단다. 그걸 유툽에 올라온 구글소셜로그인 강의 다 듣고, 혼자 에러랑 삽질하다가 알게되었다. (자막도 없는 강의를 얼마나 집중해서 들었는데..) 말그대로 '라이브러리'이기 때문에 사실 그거 없이도 잘 쓸수 있는 방법이 있을..
입력값 받기 복잡해보여서 백준은 피하고 피해왔는데 스터디를 백준으로 하게되었으니 다른 방도가 없다. 노드로 입력값을 받아 보자. 저마다 입력값을 받는 방식이 조금씩 다르기 때문에 내게 맞는 방식을 찾아 정리하는게 좋다. 그렇게 정리해본 코드이다. // 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..