일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 비동기
- 접근 제한 라우팅
- 동기
- Redux
- routing
- 7기
- CI/CD
- imagePreview
- updater
- 배포
- socket.io
- Github Actions
- 채팅방
- S3
- 라우팅
- useEffect
- 후기
- qwe
- setstate
- Preview
- previousState
- route
- 미리보기
- 브라우저 렌더링
- 스파르타코딩클럽
- react
- FileReader
- 항해99
- 개발
- Today
- Total
목록2022/07 (21)
삐옹
자바스크립트는 기본적으로 동기적인 언어다. 자바스크립트 엔진, 그러니까 코드를 읽을 때 위에서부터 아래로 한 줄 씩 읽으며 처리한다는 뜻이다. 여기서 일을 처리하는데 비효율성이 생겨났다. 그걸 해결해주기위해 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주차가 되어갈때까지 '그냥 하면되겠지 뭐'라며 코드를 짜던 내 모습이 그려졌다. 설계의 중요성을 느끼며 프로젝트에 들어왔지만 결국 지금의 나를 보면 실천은 하지않았다 할 수 있겠다. 주먹구구식의 개발방식을 하다보니 시야가 많이 좁아져 있는 상태였다. 좁아진 시야를 다시 확장 시켜야한다. 팀원들가 함께 ..
내가 구현하고 싶은 채팅 기능의 일부이다. 채팅 할 수 있는 사람들의 리스트가 있다. (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로 이동 -> 인가 코드 받기 (서버)-> 인가 코드 서버에 전달 -> 엑세스 토큰 요청 (네이버)-> 엑세스 토큰 반환 -> 서버로 엑세스 토큰 보내주기 (서버)-> 클라로 엑세스 토큰 보내주기 (클라)-> 엑세스 토큰 브라우저에 저장