공대생 개발일지 공대생 개발일지

* 문제점 : 딱히 없음 그냥 렌더링되는 거 보려고 설치함 * 설치방법 : - 크롬확장 프로그램으로 아래의 링크에 들어가서 설치(아님 그냥 검색해도 됨) https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 035a41c4e on 7/10/2023. chrome.google.com * 사용목적 - 렌더링되는 부분을 시각적으로 보고 싶었음 - 아래처럼 렌더링 되는 곳에 색 들어오는 거 *사용방법: ..

* 문제상황 : 각 페이지의 로직부분을 모두 hook으로 만들다 보니, 각 hook에 대한 type 설정이 필요하게 됐다. 기본타입은 기본타입에 맞게 넣고(string, number 등) 함수는 함수에 맞게 넣었는데( (e:ChangeEvent)=>void) , setState는 어떻게할지 몰랐었다 * 해결방안 : setState는 따로 타입이 있었다 Dispatch 요거를 넣어주면 된다

* 문제 상황 : 몇몇 페이지에 "프로텍티드 라우터"를 적용하여 로그인을 안 한 유저는 url로 접근이 불가능하도록 막았다. : 즉, 순서가 Ex. 커뮤니티 글 작성 페이지 -> 로그인이 안되어 있으므로 로그인 페이지로 이동 이 되는 건데, 맞딱뜨린 로그인 페이지에서 "뒤로 가기"를 눌러도 "커뮤니티 글 작성 페이지"로 돌아가기 때문에 생각한 뒤로 가지 않아지는 상황이 발생한다 * 해결방법 : useNavigate 의 replace return sub ? : : 프로텍티드 라우터에 replace를 넣었다 : 즉, sub(로그인유무판단변수)가 true이면, 사용자가 입장하려고 하는 으로 보내주면 되고, 아닐시 {"/login"} 으로 보내주면 된다. : 이 때, login 페이지에 replace={true..

- DNS (Domain Name System Servers) : '도메인 이름 시스템 서버' URL들의 이름과 IP 주소를 저장하고 있는 데이터 베이스임. 즉, 웹 사이트를 위한 주소록이라고 생각하면 됨. 원래 우리가 사용하는 TCP/IP를 통해 만들어진 주소, 즉 IP로 만들어진 주소는 숫자로 이루어져 있음(63.3453.342.454) 그런데 이거 그대로 쓰면 사용자들이 어케 기억함 ; 그래서 URL 이라는 쉬운 이름을 붙여준 거임 그래서 DNS로 URL을 보내면 원래 IP 주소를 보내줌 - HTTP : 클라이언트와 서버가 서로 통신할 수 있게 하기 위한 언어를 정의하는 어플리케이션 규약 : 즉, 요청과 응답으로 이루어져 있어 "어떤 데이터를 달라" 고 요청하면 "이 데이터 줄게"라고 응답하는 것 ..

https://realmojo.tistory.com/300 프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트) 프론트엔드 기술면접 실제현업 질문 모음 최근 1년 간 프론트엔드 면접을 7번 정도 본 것 같다. 국내 IT 대기업 N사만 여러번, K사, 온라인쇼핑몰 C사 등등 여러군데를 면접을 진행했으며 비록 떨 realmojo.tistory.com https://xiubindev.tistory.com/119 실제로 받은 프론트엔드 개발자 면접 질문 모음 첫 번째 직장에는 운 좋게 바로 들어가서 일을 시작했기 때문에, 제대로 취업 준비를 해본 경험이 없었다. 그래서 이번에 다시 프론트엔드 개발자로 취업 준비를 하면서 코딩 테스트 공부도 하 xiubindev.tistory.com

Fact (사실: 무슨 일이 있었나?) Feeling (느낌: 무슨 느낌이 들었나?) Finding (배운 점: 어떤 인사이트를 얻었나?) Future action (향후 행동: 앞으로 무엇을 해야 할까?) Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?) 3. Finding - CSS : Grid - Flex와 비교해봤을 때, Grid로 화면을 구성하는 게 장점이 크다 판단, Gird를 통해 화면을 구성해보기로 했다 - Grid의 장점 1) 2차원임 : Flex는 1차원적으로 구성되지만, Grid를 사용하면 2차원적으로 사용할 수 있음 2) gap 주기가 좋음, 즉 간격설정하기가 좋음 : 직접 사용해보며 느낀 건데, flex와 달리 행열사이에 모두 ga..

Fact (사실: 무슨 일이 있었나?) Feeling (느낌: 무슨 느낌이 들었나?) Finding (배운 점: 어떤 인사이트를 얻었나?) Future action (향후 행동: 앞으로 무엇을 해야 할까?) Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?) - 씁.. 회고가 TIL이었음을 지금 깨달음 - 알려준 4F이 회고 기술 중 하나였음 - 괜히 회고가 뭔지 몰라서 찾아봄 1. Fact : 예,, 저는 멍청이 입니다.. Type Scirpt를 공부 하나도 안했는데, Type Script로 개발을 진행하는 사람이 있다? 그 사람이 바로 나예요.. 똑똑이 두 분과 함께 하다보니 감사하게도 Type Script와 RTK-Query, mockupserver로..

https://velog.io/@kmlee95/React-Typescript-eslint-prettier%EC%84%A4%EC%A0%95 React + Typescript eslint, prettier설정 ESLint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능을 한다. 쉽게 말해 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구이다.Prettier : 코드의 스타일을 velog.io 관련 자료