삐옹

싱글스레드 - 자바스크립트는 싱글스레드 언어이다. - 싱글 스레드? 자바에서는 각 스레드 별로 역할을 지정해줄 수 있다. (이 일은 스레드 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쓰고 기술, 오류정리도 해야된다.. 하기싫어...도 해야지 ^^

Show me your place 초기목표는 무엇이었는가? 게시글을 올리고 좋아요, 댓글, 스크랩 기능을 쓸 수 있는 기본적인 sns 서비스 구현. 실제 어떤 일이 일어났는가? 구현 성공 게시글 작성, 댓글 작성 기능 구현 *댓글은 새로고침해야 업데이트가 이루어진다?! 구현 실패 게시글과 댓글의 수정, 삭제 기능은 아예 손도 못 댔다.. 마이페이지(내가 쓴 글과 스크랩한 게시물 확인 가능) 초기목표와 실제 결과의 차이는 왜 발생되었는가? 기본 기능을 구현하는데 시간을 많이 할애했다. 백엔드에서 이미지를 업로드하는 부분이 막혔다고 나도 마음이 붕 뜬것이 한 몫 했다. 모든 api의 시작점이 되는 게시물을 작성, 조회하는 기능을 빠르게 만들었으면 좋았겠지만, 그 시간에 mockAPI로 알맞은 요청값들을 미리..

const DetailComment = ({ boardId }) => { const [newComment, setNewComment] = useState(""); const [commentArray, setCommentArray] = useState([]); const updateComment = (e) => { setNewComment(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); const currentKey = localStorage.getItem("jwt-token"); if (newComment === "") { alert("내용을 입력해주세요"); } else { axios .post( `http://3.39.223..

오늘은 axios를 통해 서버에서 가짜 데이터를 불러와 메인페이지와 상세페이지에 뿌려주는걸 성공했다. 메인페이지를 성공하니 도미노처럼 상세페이지도 생각보다 쉽게 성공했다. 이 시간까지 안 잔 보람이 있는 하루. 서버 구현에 대한 부담이 줄다보니 과제를 하면서 아쉬운 부분들이 점점 더 눈에 들어오기 시작했다. 라우팅, 컴포넌트 재사용, 폴더 구조에 대한 부분들을 잘 배워서 꼭 리팩토링해보고 싶다. 오늘 배운 것 login 상태에 따라 다른 화면 보여주기 해결법 Nested routing + Outlet 동적라우팅 해결법 Url parameter + useparams [url접근 억제] https://velog.io/@hyewonkkang/react-router-dom-%EA%B6%8C%ED%95%9C-%E..