window.location 객체는 브라우저 창의 현재 URL을 표현하며, 다양한 방법으로 사용자가 페이지를 이동하거나 URL 정보를 다루는 데 사용될 수 있습니다. window.location 객체는 주요한 여러 속성과 메서드를 가지고 있습니다. window.location.href : 전체 URL을 얻거나 설정하는 데 사용됩니다. 아래는 그 예시 ``` console.log(window.location.href); // 현재 페이지 URL을 출력 window.location.href = 'http://www.example.com'; // 페이지를 www.example.com으로 이동 ``` window.location.replace(URL) : 지정한 URL로 이동하되 브라우저의 히스토..
.env 파일은 환경 변수를 저장하는 데 사용되는 파일입니다. 여기에는 데이터베이스 연결 문자열, API 키, 암호 등과 같은 민감한 정보를 저장할 수 있습니다. 이 파일은 저장소에 커밋되지 않아야 하며, 각 개발자나 환경에 따라 달라질 수 있는 설정을 관리하는 데 유용합니다. .env 파일을 사용하면 코드가 서로 다른 환경에서 실행될 수 있게 되며, 그로 인해 개발, 테스트, 프로덕션 등에서 약간씩 다른 설정을 적용하는 것이 가능해집니다. CRA(Create React App)와 Vite에서 .env 파일을 사용하는 방법에는 약간의 차이가 있습니다. CRA(Create React App) CRA에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 이러한 변수는 REACT_APP_ 접두사로 ..
https://codesandbox.io/s/wonderful-feather-hlqvxt?file=/src/pages/Todos.jsx 1. 페어리뷰(level3) : select map으로 뿌려줬어야함 쿠산님과 페어프로그래밍: redux 10번은 더 써봐야함. 안보고 쓸 수 있도록. ->codesandbox 2. 공부 열심히 하되, 실제 코드를 안보고 쓰는 습관을 들여볼것(아주 기본적인 것은 그렇게 해야 손에 익힐 수 있음) 코드컨벤션 만들기. 설계 이후 코딩 시작할것. 깨끗하게 작성하는 습관 들일 것. codesandbox에서 해보면 바로바로 적용이 되어서 좋음. (하드용량 차지 걱정도 없음) 3. 내일 소셜로그인 미리 준비하고 읽어갈것. 너무 어렵다. 목요일 테스트 있음.
1. 블로그 제작 with 민승님 redux복습 infinity scroll + 스켈레톤 UI 제작. 2. figma 기본적인것 다루어보기. 첫번째 조별 과제 -> 같이 기획하고, 같이 api명세서 작성하고, 같이 와이어프레임을 상세하게 그릴 것. 구글등에 클래스, 변수명 규칙을 찾아보고, 일관적이고 세련된 변수명 규칙을 지어놓을것. react query+recoil이 대세라고 함. 큰 노트에 전체 그림을 그림그리며 파악하는거 좋음. github project->issue 자동연결 해보기. git-> pullrequest redux로 input상태관리하는것 익숙해질것. redux처럼 middleware 표로 만들어보기. 디버깅, 공식문서. 함께 협업한 민승님의 TIL 오늘은 태현님과 함께 블로그 프로젝트..
리엑트의 라이프사이클 매서드, react hook 모든 리엑트 컴포넌트는 아래와 같은 라이프사이클이 존재한다. 저, 리액트의 라이프사이클 메서드는 컴포넌트가 생성되고, 업데이트되고, 사라질 때 동작하는 코드를 넣을 수 있게 도와준다고 보면 된다. 그 중에서도 대표적으로는 constructor, componentDidMount, componentDidUpdate, componentWillUnmount 가 있다. 처음에는 클래스형 컴포넌트가 주로 사용되었는데, 이 친구들은 라이프사이클 메서드를 이용해서 상태 관리나 라이프사이클 이벤트를 처리했다. 그런데 리액트 v16.8부터 Hook이라는 걸 도입하면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다. useState는 컴포넌트의 상태를 관리하고, us..
redux의 기본버전의 데이터 흐름을 이해해야 toolkit을 쓰던 미들웨어를 쓰던 이해가 갈것 같아서 클론을 해봐도 머리에 안들어와서 표로 만들어 보았다. 여기서 todosContainer.js는 connect함수가 아닌 useDispatch, useSelector를 사용하면 없어도 되고 한단계 단순해지지만, 그럴경우 dispatch를 사용하는 함수를 useCallback으로 감싸주고, 해당 부모 컨테이너가 리랜더링될 경우, props가 바뀌지 않아도 리렌더링이 되므로, 해당 컴포넌트를 React.memo로 감싸주어야 한다. 작성중..
1. 오늘 한것 react level3 과제 - 버튼, 모달만들기 (민승님 -> 포탈 사용) - input, select 만들기 postman설치, api키 저장 youtube 클론코딩 시작 tailwind css 기본셋팅(reset.css가 tailwindcss보다 하위에 있으면 안됨!!) 기본 tailwind 시작. react-router-dom 6.4버전 사용법 2. 궁금한것 styled-components 이름짓는 방법 (Modal컴포넌트를 분리할때, 파일명도 모달이고 내부 컴포넌트 최상위도 모달인데 뭘 바꿔야하지?) 3. 어제한것 자바스크립트 복습: promise, async, await
1. 오늘 한일 리엑트 강의 정리중. redux정리 2. 하고싶어진 일 tailwind 오늘중으로 리엑트 강의 완강후 복습.(리엑트개념정리강의. 클론코딩부분 제외) react query까지. 용어정리(개념보다 용어가 어려움. 그 단어에 익숙해져야, 그 단어로 파생되는 개념을 빠르게 이해할 수 있음) 커스텀훅 사용해보기. (값이 아닌 로직을 재사용. use어쩌구 이렇게 이름지으면 너무 근사할것 같음.) 3. 해야했었는데 어제 til 빼먹음. 4. 참고 자료 https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/ FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블 이혁원(..
기억해야 할 것 패키지 설치 yarn add redux react-redux 폴더구조 생성 src > redux > config > configStore.js src > redux > modules > todos.js users.js... configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; import todos from '../modules/todos'; const rootReducer = combineReducers({ todos, }); const store = createStore(rootReducer); export default store; index.js impor..
https://leehwarang.github.io/2020/07/28/setState.html React의 setState가 어떻게 동작하는지에 대해 설명하고 있습니다. 여기서 설명하는 주요 개념은 setState가 비동기적으로 동작한다는 것입니다. JavaScript에서 비동기적(asynchronous)이라는 말은 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행한다는 의미입니다. React의 setState 메소드 역시 비동기적으로 동작합니다. 다시 말해, setState를 호출하면, React는 이를 '예약'하고, 모든 JavaScript 실행이 끝난 후에 일괄적으로 상태를 업데이트합니다. 이것이 setState의 비동기적인 특성입니다. 예를 들어, 아래의 코드를 보겠습니다...
1. 오늘 한 일 알고리즘스터디 - 귤고르기 https://school.programmers.co.kr/learn/courses/30/lessons/138476 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 구현코드 로직 // 1. key, value 자료구조를 사용 => key 값에 귤의 크기, value값에 개수로 정리 // 2. 정리한 값을 value가 큰 순서대로 정렬 가능한가? // 3. 개수가 큰 값부터 빼낼 때, value값과 k값을 비교해서 k가 더 크다면 k - value => //answer + 1, k가 더 작다면 answer에 +1 ..
1. 오늘 한 일 kakao 검색 API 미니프로젝트 https://github.com/taehyunkim3/study-react-search GitHub - taehyunkim3/study-react-search: 리엑트 스터디 2-search 리엑트 스터디 2-search. Contribute to taehyunkim3/study-react-search development by creating an account on GitHub. github.com 스파르타코딩 react 심화 redux 2. 배운것 axios, REST API 이용해서 데이터 받아오기.->API 명세서 읽고 반영하기. rafce useSelector redux .env VITE .env 3. 리팩토링시 반영할 것 + 이해해야 하..
.env파일을 가지고 작업을 하는데 분명 .gitignore에 선언을 해뒀음에도 불구하고 자꾸 git status를 하면 눈에 보이는 현상이 발생하는 경우가 있다. 이는 .env파일이 이미 원격 저장소에 푸시가 되어있는 상황이라서 그렇다. 해결방법은 간단하다 원격 저장소의 .env파일을 지우면 되는것이다 git rm .env --cached git commit -m "remove .env file from git repo" git push 보통 원격 저장소에는 .env파일을 직접 올리지 않고 .env.example 같은 형식으로 다르게 올려서 공유한다. (key값만 빼놓음) 위에 명령어로는 로컬 파일은 지워지지 않으니 걱정 말것. .gitignore에 .env 관련 파일들이 제대로 적혀있나 확인 한번 하..
1. 오늘 한 일 특강(김태선 튜터님) 클론코딩(진행중. search) 깃헙 정리 리엑트 심화주차 수강 2. 오늘 삽질 뭘 해야할지 애매해서 이것하다가 저것하다가 결국 아무것도 끝내지 못함. 기록은 하지만 정리를 하지 않아서 결국 똑같이 증발되어 같은걸 계속 찾고있음. 블로그 정리의 필요성. 시간이 어느정도 걸리더라도 할애해야함. 코딩 전체 시간의 50%이상, 코딩테스트 하루 한시간, CS스터디 하루 1.5시간+ 3. 오늘 배운것 Redux. git, gh axios vite 배운건 반드시 새롭게 글로 정리할것.
1. 오늘 한 일 페어 나영님과 todolist 제작 리덕스 공부. 2. 요즘 며칠 한일 정리를 못함. git commandline으로 사용하는 방법 익힐것. rebase? usememo, useCallback, React.memo -> 사용 용도 익힐것. onSubmit, onChange, onClick-> useCallback 거의 붙여야 함 contextAPI CSS빠르게 하는것 익힐것.
Todo import { createStore } from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO" const addToDo = (text) => { return { type: ADD_TODO, text } } const deleteToDo = (id) => { return { type: DELETE_TODO, id } } const reducer = (state = [], actio..
1. 한일 페어프로그래밍 리뷰 기술멘토님 면담 2. 느낀점 기초의 중요성. 기초부터 탄탄하게 다져진 페어분의 코드를 보며 많은 생각을 함. 3. 삽질 내가 짠 코드 설명을 못함 ->완전한 이해를 하지 못함 + 변수명이 직관적이지 않음 + 폴더구조가 복잡함. 4. 내일 리엑트 숙련과정 수강 (수요일 저녁까지 완료)
virtual DOM, props, state 리엑트는 가상돔이라는 개념을 가지고 있음. 가상돔은, 브라우저가 랜더링하기 위해 생성하는 DOM을 매번 전부다 새로 생성하는게 아니라, 매번 DOM의 사본을 가상돔이라는 이름으로 생성해서, 기존 DOM과의 차이점만 비교해서 랜더링 함. 이로써 랜더링 해야하는 DOM의 범위를 제한해서 브라우저 랜더링 속도를 향상시킴. state는 이런 DOM을 업데이트 할때, 재랜더링의 기준이 되는 데이터임. 가상dom은 state의 메모리변화값을 감지하여, 변화유무를 판단함. 이 과정의 특성상, 메모리 값이 변하지 않고 데이터가 변하는 경우 데이터 변화를 시스템이 감지할 수가 없어 여러 문제가 발생. 따라서 리엑트에서 배열, 객체등의 자료를 다룰때 불변성을 유지하는것이 매우..
경원님 블로그 보고 정리 잘 해주셔서 그걸로 공부하고, 모르는 부분을 여기에 남겨보기로 함. https://rosie0418.tistory.com/114 리액트 입문주차 1주차 - 1 1. React란? ⅰ. React란? A JavaScript library for building user interfaces 공식문서에서 소개내용 유저 인터페이스를 빌딩하기위한 자바스크립트 기반의 라이브러리 UI란 사용자에게 보여주기 위한 사용자가 rosie0418.tistory.com 중요한 부분 모음 단축속성 const name = "wonjang"; const age = 21; const testObj = { name, // age: age, 키와 value가 같은 모양이 있으면 ES6에서 이를 생략할수 있게해줌 ..
2023.06.23 21:25작성 1. 오늘 한일 리엑트 주차 시작 리엑트 todolist 제작 https://github.com/taehyunkim3/todolist_99_1/tree/main GitHub - taehyunkim3/todolist_99_1: 항해99 15기 주특기1주차 레벨1 항해99 15기 주특기1주차 레벨1. Contribute to taehyunkim3/todolist_99_1 development by creating an account on GitHub. github.com 코드리뷰 특강 https://tech.kakao.com/2022/03/17/2022-newkrew-onboarding-codereview/ 효과적인 코드리뷰를 위한 리뷰어의 자세 안녕하세요, 톡FE파트에서 ..
1. 오늘 한 일 알고리즘 시험(6/6) react localstorage 이용해서 다크모드 상태 저장하기. 기술매니저님 미팅 랜선 술자리 2. 토요일까지 할일 토요일 9시 리엑트 스터디 -> 페이지네이션 3. 일요일까지 할일 시간포멧 라이브러리 firebase -> 로그인 기능 json server API DB 변수명 정리 라우터 -> 상세정보 useEffect, useState 정리 오늘 푼 문제 답안 function solution(n) { let array = n.toString().split('').reverse(); //문자열화->배열화->뒤집기 const sum = array.reduce((acc, curr) => acc + Number(curr), 0); //합계 계산 return arra..
1. 오늘 한 일 https://kthdev.tistory.com/165 [프로그래머스]소수 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/12977 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 kthdev.tistory.com https://kthdev.tistory.com/164 [프로그래머스]신규 아이디 추천. 정규식 문제 https://programmers.co.kr/learn/courses/30/lessons/72410 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와..
https://school.programmers.co.kr/learn/courses/30/lessons/12977 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 여기서 가장 시간을 많이 잡아먹은 부분은 쓸데없이 중복을 제거해버린것. 여기서 가능한 모든 소수의 경우의 수를 구하는 것이라 중복이 있어도 별개의 소수로 계산이 되는건데 쓸데없이 set을 이용해서 중복을 제거해서 계속 오류가 나왔다. 이건 1차로 해매다가 결국 지워버렸던 것 function solution(nums) { let set = new Set(); for(i in nums){ for(le..
https://programmers.co.kr/learn/courses/30/lessons/72410 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 완전한 정규식 문제. 여기 나오는 정규식 사용법은 어느정도 다 익히고 있어야 할듯 함. 여기서 가장 시간을 많이 잡아먹은건 new_id를 할당을 안해줘서, 아무리 해도 변경 없이 나와버렸던 것. new_id = new_id.어쩌구 로 바뀐걸 기존꺼에 할당을 해줘야하는데 자꾸 깜박한다. 기본중의 기본. 아래는 나의 코드 function solution(new_id) { new_id = new_id .toLowe..
https://school.programmers.co.kr/learn/courses/30/lessons/42889 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 딱 객체로 하면 좋은 문제인데, 객체를 다루는 방법을 계속 고민하다가 결국 배열로 풀기는 했다. 다만 시간복잡도가 엄청나게 증가해서 3000ms이상 걸리는 테스트케이스가 존재함. 아래는 내가 작성한 답안 function solution(N, stages) { let points = []; let stageSort = []; for(let i = 1; i a>=i).length; let clear ..
1. 오늘 한 일 팀원들과 알고리즘 풀이, 리뷰 나머지 일정은 개인 사정으로 거의 못하고, 대신 다음날 5시부터 하는중. 잠에서 깨는데 3-4시간정도 소요되어서, 새벽에 일찍 일어날 필요성이 있음. 2. 오늘 한 삽질 멘탈, 텐션 관리가 정말 중요함. 이게 관리가 안되면, 아무것도 할 수가 없고, 시간을 흘러감. 결과적으로 항해 99일의 1%을 반쯤 날리며 큰 교훈을 얻음. 공부하는게 문제가 아니라, 공부하고 싶은 마음을 계속 유지하는게 중요한 것임. 하지만 그 중요성을 깨달은 것을 양분삼아 남은 기간을 더 알차게 채우기로 함. 3. 그래서 다음날(21일, 사실 오늘) 할 일 투두리스트 리펙토링 (로컬스토리지 이용해서 새로고침에 대응하고, 리스트도 저장되게 해보기. ) 알고리즘 2시간, 최대 3시간 이하..
0. 작성일? 2023년 6.19 월요일 1. 오늘 어떤 일을 했는지? 리엑트 투두리스트 다크모드 완성. 최원장님 면담 이현주 기술매니저님 면담 알고리즘풀이(하루2~3시간씩) 항해 출석체크 프로그램 소스코드 분석(타이머부분만) -> 블로그글 작성 https://kthdev.tistory.com/156 [react/jotai]항해99 출석체크 페이지 시간이 계속 느려지는 이유 이름 지우는게 너무 힘들었다. 항해99 과정에서 선의의 경쟁? 을 위해 출석체크를 하는 페이지가 있는데, 이 페이지의 시계는 5시간정도 뒤에 보면 1시간이상 느려져있다. 우리는 아마 항해99의 kthdev.tistory.com 코드변조의 위험성과 웹 보안에 대한 간단한 고찰 https://kthdev.tistory.com/155 코드..
