전체 글
-
[CS] 1일차 상태관리를 왜 할까요?Frontend/FE CS 2024. 3. 4. 17:27
기술면접 예상질문 1일차 예상 질문 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 상태(state)란 무엇인가? React에서 상태관리를 어떻게 하느냐에 대한 답을 하기 전, 상태(state)란 react에서 무엇인가? 상태의 정의는 웹 어플리케이션을 render하는데 있어 영향을 미칠 수 있는 값 이다. react에서 페이지가 리렌더링 되는 가장 큰 예시 두가지는 props와 state이다. 상태가 렌더링에 영향을 주기 위한 값으로 존재하기 위해서는 한 가지 요소가 필요하다. 바로 동적인 값, 즉 변하는 값 이라는 조건이다. 그게 State 값이다. 간단하게 말해서 "변수"다. (주의* 변수는 변경되어도 화면이 바뀌지 않는다. 하지만 state는 변경되면 자동으로 화면이 바뀐다..
-
[개인프로젝트] Ps-Market 트러블슈팅 (수정중)프로젝트 2024. 3. 1. 03:03
Ps-Market trouble Shooting 프로젝트 기간 1차 2024.01 - 2024.02 (4주) 2차 2024.03 - 진행 중 1인 기획, 제작, 개발, 배포 e-commerce 서비스 trouble Shooting 문제점: 로그인 스테이트 값이 유지가 안됨 해결 => 로컬스토리지에 상태 값을 저장시켜 로그인이 계속 풀려버리는 상황을 해결. 문제점: firebase에 글을 작성할 시 해당 글에 대한 id값이 firebase database로 안 넘어감 해결 => 해당 작성 글에 id값이 넘어오지 않아 디테일 페이지작성 및 진도에 큰 지장 초래. id값은 addDoc함수를 거치고 나서 자동으로 생성되기 때문에 id값을 updateDoc를 활용하여 추가로 넣어주는 과정이 필요. 기존에 변수를 ..
-
[TIL] 231025 TILTIL 2023. 10. 25. 15:04
오늘 할 일 Udemy JavaScript 강의를 듣고 있다. 꾸준히 보자. 블로그의 임시저장 글은 15개가 넘어가면 저장이 안되나..?? 게시는 안했지만 꾸준히 작성했던 글들이 전부 날아가 있어서 멘붕이 왔다. 하.................. 글 마무리 짓고 완성하여 게시하는 습관을 들이자. 자바스크립트 강의 듣기 Deep Dive 22장 this 훝어보기 오늘 한 일 & 더 봐야 할 키워드 자바스크립트의 개념 기초 근본에 충실하자 쓸수록 느끼는데 티스토리 마크다운 구리다.. 안되는 문법이 많아... 내가 잘 활용을 못하는거겠지 아마도..????
-
[TIL] 231019 TILTIL 2023. 10. 25. 14:42
내가 오늘 공부한 내용 Modern javascript Deep Dive 책을 매주 스터디 하고 있다. 그냥 애초에 5번이상은 돌려봐야겠다는 각오로 보는 중이다. 현재 16장까지 진행하였고 생각보다 내용이 많이 헷갈리고 부가적으로 챙겨서 공부 해야줘야 할 내용이 많음을 느꼈다. 내가 공부한 내용을 남기는 것이 중요하다는건 잘 인지하고 알고 있지만 공부는 하더라도 그걸 남긴다는게 쉽지않다. 그래도 해야지 뭐 어쩌겠어. 더 봐야 할 키워드 모던 자바스크립트 스코프 스코프란 식별자가 유효한 범위를 말한다. 렉시컬환경 네임스페이스란? 네임스페이스 패턴 (좀 더 딥하게 검색해서 확인해볼 것) 객체의 프로퍼티 끝내면 다시 확인하기 var, let, const의 차이 이부분은 최대한 딥하고 디테일하게 공부할수록 좋은..
-
[JavaScript] Deep Dive 01장 프로그래밍Modern JavaScript Deep Dive 2023. 9. 13. 18:51
Intro JavaScript의 개념공부의 필요성을 느껴 스터디를 만들었다. 교재는 모던 자바스크립트 Deep Dive로 정했으며 연말까지 완독하는 것을 목표로 한다. 스터디의 목적은 자바스크립트의 개념 정리와 기술면접 대비, 면접 연습. 자바스크립트에 대한 깊은 공부를 목표로 하고 있으며 지속적이고 목표지향적으로 달려가기위해 스터디원들과 매주 정해진 분량을 사전공부 후 서로 질문리스트를 작성하여 서로 답변 및 토론, 발표 등을 하는 것으로 채택하였다. Deep Dive를 기본으로 하되 추가 레퍼런스 등을 참고하여 이해한 내용을 바탕으로 공부하고 정리하고 싶어서 작성한다. 더불어 마크다운 또한 아직 낯설어서 연습이 필요하다. 익숙해지고 혼자서만 이해하고 볼 수 있는게 아니라 다른사람들이 봐도 이해할 수 ..
-
[JavaScript] Webpack, babel, Polyfill 이란?Frontend/JavaScript 2023. 8. 29. 20:02
Webpack, babel, Polyfill이란? Webpack, babel, Polyfill의 차이 Webpack이란? Webpack은 모듈을 번들시키는 역할을 한다. 번들러의 종류 1.Webpack 2.Broserify 3.Parcel이 중 Webpack은 가장 대중적으로 사용되는 모듈 번들러이다. Webpack은 의존관계에 있는 자바스크립트, css, 이미지 등의 리소스들을 하나(또는 여러개)의 파일로 번들링한다. 동시에 성능을 향상시키기 위해서 필요하다면 다시 분리도 가능하다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없다. 그리고 여러개의 자바스크립트 파일을 하나로 번들링하므로 HTML파일에서 script 태그로 여러개의 자바스크립트 파일을 로드해..
-
[프로그래머스] 공배수알고리즘/프로그래머스 2023. 7. 10. 23:54
https://school.programmers.co.kr/learn/courses/30/lessons/181936 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ✏️나의 풀이 아니 근데 진짜 쉬운 거라서 그다지 포스팅 할 생각이없었는데 다른사람풀이가 너무 기발해서 포스팅 갈긴다. 일단 나의 풀이 function solution(number, n, m) { a = number%n; b = number%m; let answer = a === 0 && b === 0 ? 1 : 0; return answer; } 정말 심플하게 풀었다. a,b의 나머지를 구해서..
-
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 25일차 - 4주차 수요일.스나이퍼 팩토리 2023. 6. 30. 02:51
4주차 2번째 수업 날. 1번째 수업 때 진행했던 리액트 라우터에대해 간단하게 복습하고 과제로서 주어졌던 무비웹 만들기에 대한 리뷰를 하였다. 다른팀들이 만든 것 들을 보니 이미 배우지않은 것들을 활용하여 굉장히 잘 만들었다. 벌써 리덕스를 사용하여 상태관리를 하기도 하고.... 저기에 리덕스를 쓸게 있나싶긴한데 이미 저렇게 활용한다는 거에 대해 놀랍다. 스피너도 넣은 팀도 있고 다들 열의가 넘친다. 오프라인으로 할걸 그랬나.. 그리고 이날은 오후에 프로젝트 설명도 같이 있었던 날이다. Custom Hook 1. 여러컴포넌트에서 공통된 로직을 재사용하기 위해 만들어진 함수 2. 일반적으로 use 접두사를 사용하여 이름을 지정 3. 커스텀 훅은 로직을 추상화하고 컴포넌트로부터 분리하여 재사용성과 코드 가독..