일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- route
- 브라우저 렌더링
- Preview
- S3
- 개발
- previousState
- 후기
- Github Actions
- 채팅방
- Redux
- useEffect
- 스파르타코딩클럽
- updater
- socket.io
- routing
- 비동기
- qwe
- 항해99
- react
- setstate
- CI/CD
- 라우팅
- imagePreview
- 동기
- 미리보기
- 접근 제한 라우팅
- 배포
- rendering
- 7기
- FileReader
- Today
- Total
목록분류 전체보기 (105)
삐옹
상황 로그인을 하고나서 workspace 배열 내에 데이터 유무에 따라 처음 로그인한 사람(뉴비)과 기존 유저에게 다른 화면을 보여주어야 한다. 생각 할 것 앱의 상태에 따른 state 관리가 핵심이다. workspace 배열 내에 데이터 유무에 따라 유저의 상태를 어떻게 표현 할 것인지 명시한다. (앱의 상태를 나타내는 state를 만든다.) 로그인 일 때와 아닐 때를 구분한다 뉴비인지 아닌지 판단하는 상태를 만들기 로딩 중 일 떄와 아닐 때 를 구분하는 상태만들기.(스피너를 위함! 난 꼭 스피너를 넣어야겠음!) +) 로그인 상태 유지하기 순서대로 코드로 살펴보기 상황 별 유저의 상태 // App.js // 정리해보면 유저의 상태는 3가지로 나뉜다 // 워크스페이가 있는지 없는지 판단 중일 떄 -> "..
상황 채팅 목록에서 팀원의 프로필을 클릭 시 채팅 방으로의 join과 leave 이벤트가 모두 이루어져야했다. 문제 클릭했을 때 join과 leave가 하나의 함수 안에서 함께 쓸 수 있는가? (어떻게 떠남과 들어옴을 같이하지..?) 함께 쓰일 수 있다면 어떤 제한을 걸어주어야 하는걸까? 해결 역시 스택오버플로우 너무너무 좋은 인사이트를 얻었다.! moveRoom 이라는 함수를 만들어서 이동 전의 방이름 from과 이동 후의 방이름 to을 인자로 받아서 leave이벤트와 join이벤트에 담아 보내주면 되는 것 이었다. 그런데! 맨 처음 입장을 하게되면 oldRoom 이라는건 당연히 없다 그 상태에서 분명 에러가 날 것이라며 혼자 쉐도우 복싱을 해댔는데, 결론은 없어도 아무 문제없었다. // 입장 + 퇴장..
무엇이 문제인가? 서버로부터 데이터 리스트를 받아와 성공 처리로 3가지 카테고리로 나누어 각각의 state에 갱신했다. 그러면 각각의 저장된 state값을 화면에 map을 돌려 뿌려주면 되는 상황. 문제가 발생한 이유는 무엇인가? useEffect에 의해 첫 마운트 후 데이터 리스트를 받아와 map안에 switch문을 돌려 미리 만들어놓은 각 카테고리 state 별로 갱신해주었다. 데이터 리스트에는 내가 생성한 23개의 데이터가 분명 쌓여있는데.. 새로 고침을 눌러도 분명 잘 남아있는데.. 각 카테고리 state에는 가장 최근에 추가한 데이터 단 한개만 들어온다. 그래서 화면에는 초라하게도 1개의 데이터만이 보인다. 시도해 본 것 데이터 생성 후 새로고침하면 데이터 갯수가 1개 추가되어 있는가? ✅ 데이..
어떤 문제점을 겪었는가? POST 요청으로 게시글을 추가하고, useEffect를 이용해 게시글 목록을 가져오는 GET 요청에서 무한 요청이 걸렸다. 좀더 두면 노트북이 터져버릴 것 같아 서둘러 브라우저를 닫아버렸다. 왜 이런 문제가 발생했는가? POST요청 const [allBoard, setAllBoard] = useState([]); ... // board 생성 const handleSubmit = (e) => { e.preventDefault(); axios({ method: "post", url: "http://54.180.29.68/api/post", data: data, headers: { Authorization: `Bearer ${getItemFromLs("myToken")}`, }, }..
항상 자신과 팀을 돌아보기 소통의 중요성은 늘 깨닫고 있었지만 깨닫고만 있던게 문제였다. 해결을 위해 발벗고 뛰어야 했었다. 그러나 그러지 않았던 결과는 생각지 못 했던 좌절감들을 맛 보여주었다. 하지만 이런 좌절감 또한 내 성장의 밑거름이라 믿는다! 이 실패를 밑거름 삼아 동료들에게 긍정적인 에너지와 영감을 주는 사람이 꼭 되고싶다. MVP 3주 동안 코드 짜는데만 열중하다가 지금와 생각해보니 내가 뭘 한거지? 싶은 생각이 먼저 들었다. 왠만하면 바쁘더라도 순간순간 바로 정리를 하는 습관을 들이고 안된다면 메모에 자세히 적어놓자. ps) 항해 동기 중 엘리트 자리르 꿰차고 계신 지은님께 트러블 슈팅을 언제 하시냐 여쭤보니. 해결방법을 찾아서 머리를 탁! 칠때 바로 작성을 한다고 하신다. ㅋㅋㅋㅋㅋㅋㅋㅋ..
뒤도 안돌아보고 프로젝트를 진행한지 어언 3주차.. 시간에 비해 한건 많이 없는 것 같지만 이쯤되니 생각났다. 언제까지 http:localhost:3000을 보고만 있어야할까. 야레야레.. 나 말야.. 이런거 지긋지긋 하.다.고 . 당연한 말이지만 localhost에서만 작동하는 서비스는 서비스로서 전혀 의미가 없다. 솔직히 배포하면 CI / CD 를 또 하라는데 난 그게 뭐고 왜 해야하는지도 잘 모른다. 알아보는 김에 S3로 배포하는 이유도 정확히 알아볼까한다. 정말 가벼운 마음으로 S3, CI/CD, CI/CD를 도와주는 툴들, Github actions 에 관해 정리해본다! S3 Simple Static Storage. 웹사이트를 배포할 경우 기반이 되는 HTML파일- 거의 예외없이 index.ht..
자바스크립트는 기본적으로 동기적인 언어다. 자바스크립트 엔진, 그러니까 코드를 읽을 때 위에서부터 아래로 한 줄 씩 읽으며 처리한다는 뜻이다. 여기서 일을 처리하는데 비효율성이 생겨났다. 그걸 해결해주기위해 ajax, fetch, setTimeOut 같은 것들이 나타났다. react에서는 setState가 그렇고.. 이번 파이널 프로젝트에서 실시간 채팅 기능을 넣기로 했다. 어떤 값을 setState로 업데이트 하면서 바로 그 다음 줄에 함수를 동시에 실행시켰어야 했다. 포인트는 업데이트된 값을 인자로 받는 함수였다는 것. 보기좋게 에러를 띄웠다.. 인자로 오는 값이 빈값인걸 보니 얼핏 들었던 setState의 비동기적 특성 때문에 일어난 것임을 짐작했다. 상황 1. setState()에 의해 업데이트된..
브라우저에 화면이 렌더링되는 원리에 대해 설명해주시겠어요?🧐 브라우저는 동기적으로 화면 구성에 필요한 html,css,javasript 파일들을 서버로부터 받아옵니다. 브라우저가 입력된 url에 의해 html파일을 받으면 html을 먼저 파싱하게되고 이때 DOM트리를 만듭니다. 이때 link 태그를 만나서 stylesheet를 내려받게 될 경우 CSS파싱을 통해 CSSOM트리를 만듭니다. 두 개의 트리가 완성이 되면 둘을 합쳐서 렌더 트리를 만들고, 레이아웃 작업을 통해서 사용자에게 그려줄 영역을 계산한 뒤 사용자에게 보여줍니다. javascript는 렌더링 엔진이 아닌 자바스크립트 엔진에 의하여 처리가 됩니다. 브라우저가 html을 파싱하다가 scipt 태그를 만나면 DOM트리 만들기를 잠시 중단하고 ..
이번주는 갑자기 혼자가 되어 정신없이 달렸던 주이다. 혼자라는 생각에 오히려 자신감이 붙기도 하고 용기가 생기기도 하고, 가끔은 나도 프론트 동료와 함께 개발해보고 싶기도 하고 뭐 그랬다. 그래도 분명 팀원들과 함께 잘 헤쳐나갈 것이다. 이번주 배운것 트러블 슈팅🤗 이번 주 가장 인상 깊었던 것은 항해 5기 출신인 멘토님의 트러블 슈팅 강연내용이었다. 강연 시작에 앞서 엔지니어의 중요한 덕목을 물어보셨는데, 여러 덕목 중에서도 문제 해결 능력의 중요성을 강조하셨다. 그러면서 어떤 상황에서 어떻게 문제를 해결해나가고 어떤 방식접근해가면 되는지 친절히 설명을 해주셨다. 혼자 정리해본 내용을 5가지 적어보았다. 혼자 해결 vs 물어보고 해결하는데에는 트레이드 오프가 있다. 시간이 없을 땐 고민 시간 줄이고 일..
그런 생각이 들었다. 피그마도 디자인이 나오고 있고, 뷰도 잘 만들고 있고, 이것저것 열심히 하고 있는데, 왜 난 아직도 우리 프로젝트가 머릿속에 잘 떠오르는 걸까. 2주가 넘었는데 말이다. 생각나는 이유도 변명도 다양하다. 나만 이렇게 느끼는건지 싶기도 하고. 하지만 스스로 내려본 가장 명확한 결론은 '소통의 부재'이다. api 설계, 프레임워크, 플로우 차트 뭐하나 확실하게 머릿속에 그려지는게 없다. 2주차가 되어갈때까지 '그냥 하면되겠지 뭐'라며 코드를 짜던 내 모습이 그려졌다. 설계의 중요성을 느끼며 프로젝트에 들어왔지만 결국 지금의 나를 보면 실천은 하지않았다 할 수 있겠다. 주먹구구식의 개발방식을 하다보니 시야가 많이 좁아져 있는 상태였다. 좁아진 시야를 다시 확장 시켜야한다. 팀원들가 함께 ..