공부 기록일지📚

📚Day1 로그인의 개념에 대해서 짚어보는 시간을 가졌다. 서비스 관점에서 로그인의 정의를 생각해보면 된다. 인가, 인증, 권한 부여 1. 로그인 구현 중 "백엔드"가 하는 것 사용자 식별 접근 및 동작 제어 2. 로그인 구현 시 "프론트"가 고려해야 할 것 권한이 없는 자원에 접근하지 않는 구조 만들기(e.g. 고객에게 음식점 사장님의 페이지와 데이터가 보여지면 안된다.) 만약 버튼을 안보이게 했더라도 권한이 없는 사용자가 url을 통해 접근하려고 한다면, 권한이 없는 자원의 존재를 모르도록 한다(404page를 보여주는 등) 2-1. FE 최소한의 구현 요구사항 로그인 페이지 로그인 인증관련 데이터 관리 로그인 상태에 따른 화면/ 기능 제어 로그아웃 강의 중간에 실습을 하는 시간을 20분정도 갖게 되..

🟡 문제 상황 git status 명령어로 현재 commit 상태를 확인할 때,한글로 작성된 파일들이 제대로 보이지 않는 현상이 발생했다. 아래와 같이 숫자로 표현되고 영어로 작성된 파일들은 제대로 보인다. 🟡 원인 core.quotepath 설정: 일반적이지 않은 문자를 탈출문자로 처리하는 기능 core.quotepath가 큰 바이트를 가진 문자를 탈출문자로 인식하여 파일명이 깨지게 된다고 한다.(기본 세팅이 true값으로 되어있기 때문이다.) 한글 인코딩이 UTF-8에 들어가 0x80 보다 큰 바이트를 가진 escape 문자 처리가 되어 "unusual"인 케이스로 포함되기 때문에 위와 같은 문제상황이 발생한 것이므로 해당 세팅을 false로 지정해주면 정상적으로 작동한다. 🟡 해결 방법 터미널 창에..

프론트엔드 과제를 하면서 구현되어있는 백엔드 api를 쓰기 위해 로컬에서 서버를 켰는데 네트워크 요청이 자꾸 실패하는 상황이었습니다. 첫번째로 원인 파악에 나선 것은 endpoint 였는데, 아무리 봐도 문제가 없었고 next.js에서 서버를 구동했을 때, 붉은 폰트가 나오는 것이 에러메세지가 아니라 정상 구동됐을 때도 저렇게 떴기 때문에 제대로 읽지 못하고 넘겨버린 것이 문제였습니다. 결론적으로 1시간정도 헤맸었는데 그냥 8080 포트를 이미 사용중인 프로그램이 있기 때문에 해당 프로그램을 kill해주면 되는 문제였습니다. (에러 메세지가 뜨면 제대로 확인하자..^ ^) 8080포트로 다른 프로그램을 실행 시킨 기억이 없어서 vscode를 다 끄고 다시 재가동했어도 똑같은 에러메세지가 발생해서 결국 직..

실제 업무를 겪으면서 FE개발자가 해결해야할 보안적 이슈(권한이 없는 사용자, 웹 스토리지), 비동기 처리, JWT 토큰 refreshtoken의 특징, API 요청이 여러 개 갔을 때(비동기 처리의 연장선) 그리고 무한 스크롤 페이징 처리 시 DOM의 최적화 등 해결방법에 대해 FE개발자님과 얘기를 나눴습니다. 외에도 최근에 관심있는 툴이나 제가 개인적으로 궁금했던 점을 여쭤볼 수 있었는데요. 개인적으로 이런 기회가 쉽게 있지않아 저에게는 값진 시간이었습니다. 아 또한, Next에 대해서도 여러가지 견해를 들을 수 있었습니다. 예를 들어 Next가 제공하는 이미지 최적화가 정말 효율적인가에 대해서 얘기하였는데 제공하는 기능을 그냥 갖다쓰는 것이 아니라 어떤 방법이 베스트인가부터 비교하면서 잘 생각하고 ..

저번에 읽었던 [You Don't know JS 타입과 문법, 스코프와 클로저] 가 흥미로웠어서 같은 시리즈의 this와 객체 프로토타입, 비동기와 성능을 빌려왔습니다. 외에 JavaScript 자바스크립트 성능 최적화(올빼미가 그려진..) 책을 빌려와 봤는데요. 저번에 읽었던 부분은 기초적인 부분이고 (분량도 그리 많지 않음)제가 이미 여럿 접했던 내용이라 2-3일만에 독파가 가능했습니다. 이번에는 잘 모르겠네요 ㅎㅎ 시간을 크게 할애하고 싶지는 않아서 우선 빠르게 훑어보려고 합니다. 내용이 좋으면 소장해놓고 필요할 때 찾아보는 용도가 됐으면 합니다. 여담으로 면접을 보고 온 회사에서 디자인패턴, 알고리즘, 네트워크 관련 질문을 주셔서 이 부분에 대해서도 공부해야 할 것 같습니다. 저번에 유투브에서 T..

면접 준비를 하면서 정말 생각보다 너무 많이 모른 채로 무작정 코드를 작성했구나 반성하게 된다. 면접 질문 중 리액트 선정 이유에 대해서 설명하였는데 리액트의 단방향 데이터 바인딩 덕분에 흐름을 파악하기 쉽다는 장점을 들었을 때 팀원 중에서 "리액트는 그러면 단방향 데이터 바인딩만 하고 양방향은 안되냐"는 질문을 하셨다. 내가 알기론 양방향 데이터 바인딩이 되지만 주로 단방향 데이터 바인딩인 것으로 알고 있어서 제대로 대답하지 못했다! 또한, 데이터 바인딩과 이벤트 전파에 대한 추가 질문을 던지셨는데 내가 생각했던 리액트의 단방향 데이터 바인딩은 state를 props로 내려주는 것만 생각하고 있었어서 이벤트와 직접적으로 연관이 있는 줄은 몰랐다. (이건 제대로 찾아봐야 할 거 같다 데이터 바인딩에서 "..

Q. 프로토타입이 뭔가요? 그리고 프로토타입 상속은 어떻게 작동하나요? 프로토타입: 부모의 유전자가 자식에게 유전되는 것처럼부모 객체의 정보가 프로토타입이라는 유전자에 저장되고 자식 객체는 그 프로토타입을 참조한다.extends와 super를 써서 상속받을 수 있다. Q. Ajax에 대해 가능한 자세히 설명하세요. AJAX 탄생배경 Ajax는 HTTP의 TP(Transfer Protocol)의 대전제인 "사용자가 URL을 요청할 때에만 서버에서 해당 페이지를 꺼내준다"의 한계때문에 탄생했습니다. 즉 , 브라우저가 웹 서버에 무엇인가 요청하려면, 페이지를 이동해야만 하는데 그런 식으로 웹페이지를 이동하는 방식으로 만들어버리면 유저 사용성이 많이 떨어지는 한계가 있었습니다. 그렇기 때문에 구글은 HTTP규약..

🔥🔥 표시: 개인적으로 어렵게 느낀 질문 체크 Q. React는 Framework인가요, Library 인가요? 이 둘의 차이는 무엇인가요? React는 라이브러리입니다. 라이브러리와 프레임워크의 차이는 제어 권한을 누가 가지고 있으냐 입니다. 라이프러리는 사용자(개발자)가 권한을 가지고 있으며 프레임워크는 반대로 프레임워크가 권한을 가지고 있습니다. 리액트로 만든 어플리케이션의 제어를 사용자가 API를 호출함으로써 제어할 수 있기 때문에 React는 라이브러리라고 볼 수 있습니다. Q. React가 무엇인지 간단히 설명할 수 있나요? React는 SPA(Single Page Application)을 위한 사용자 인터페이스(UI)를 구축하는데 사용되는 오픈 소스 JavaScript 라이브러리입니다. Re..