본문 바로가기

전체 글141

useReducer 사용하면서 정리 https://www.youtube.com/watch?v=tdORpiegLg0 [위 별코딩님의 영상을 보고 useReducer개념을 정리해보았습니다.] useReducer는 useState와 마찬가지로 state를 생성하고 관리하는 도구이다. useReducer를 사용하기 좋을 때는 state의 구조가 복잡할때이다. 지금 내가 마주한 문제를 살펴보면 아래와 같이 하나의 state에 객체 배열 형식으로 useState을 사용했는데 이렇게 state를 생성하면 하위 로직에서 제대로 state을 꺼내고 값을 변경하기 어렵다. const [sentences, setSentences] = useState([ { text: "너가 진짜 xxx팬이라고???", top: 0, delay: 0 }, { text: "이번.. 2024. 4. 12.
왜 리액트는 map으로 component을 렌더링할때 key가 있어야 하나? 일단은 간단한 이유를 공식 learning 문서에서 확인할 수 있었다. https://react.dev/learn/rendering-lists Rendering Lists – React The library for web and native user interfaces react.dev 문서의 내용을 번역하면 다음과 같이 나온다. React가 키를 필요로 하는 이유는 무엇일까요? 만약 데스크톱의 파일들이 이름이 없다고 상상해보세요. 대신에 파일을 그들의 순서로 참조해야 할 것입니다 — 첫 번째 파일, 두 번째 파일 등. 이에 익숙해질 수 있겠지만, 한 번 파일을 삭제하면 혼란스러워질 것입니다. 두 번째 파일은 첫 번째 파일이 되고, 세 번째 파일은 두 번째 파일이 되는 식입니다. 폴더 내 파일 이름과 배.. 2024. 4. 3.
왜 onClick과 같은 eventListener들은 콜백 함수를 주로 사용할까? 우리가 onClick같은 함수에 인자를 추가할때 많은 상황에서 콜백 함수를 주로 사용하는 것을 볼 수 있다. 왜 그럴까? onClick = {() => clickBtn()} onClick = {clickBtn} 사실 위와 같은 상황은 별 다른 차이가 없다. 뭐 똑같다고 봐도 상관없다. 단지 아래와 같은 상황에서 콜백 함수를 사용해야 코드가 의도된대로 작동할 것이다. onClick = {(arg) => clickBtn(arg)} onClick = {clickBtn(arg)} onClick에 함수가 괄호를 포함하게 되면 해당 함수를 즉시 실행하게 된다. 인자가 없을 때 onClick = {clickBtn()}을 실행한 것과 같은 상황이 된다. 그러한 이유로 onClick시 실행되려하는 함수에 인자를 넣기위해.. 2024. 4. 3.
2024년 1분기 회고 2024년 시작한지 얼마되지도 않은 것 같은데 벌써 1분기가 막을 내렸다. 사실 많은 일을 한것 같으면서도 남은 것이 그렇게 많지 않은 느낌도 든다. 일단 1월을 생각해보면 아직은 내가 변화하기 전의 모습이다. 이때 시절을 돌아보면 "내가 개발자가 맞나" 라고 싶을 정도로 개발을 안했던 시기이다. 그럼 뭘했냐? 1번은 계절학기를 아직 진행하고 있던 상태였다. 1월 첫째주까지 계절학기를 진행했고 기말고사, 파이널 프로젝트를 준비했던 시기이다. 그럼 이때는 그렇다치자. 그 다음부터 1/8 ~ 2/15까지 정처기를 준비했다. ..... 개발을 하지 않고 정처기를 준비한게 참.... 어리석은 선택이었다. 물론 정처기를 가지고 있으면 좋은 건 맞지만 그렇게까지?? 한달이상을 태울정도로 중요한 시험은 아니었다..... 2024. 4. 1.
IT 5분 잡학 사전 후기 IT 5분 잡학 사전을 노마드코더 노개북 챌린지를 통해서 알고 읽게 되었다. 전체적으로는 이제 막 개발자가 알기로 한 독자를 위한 책이다. 사실 전공자인 나는 대부분의 내용들을 알고 있긴했고 특정 내용들은 노마드코더 유튜브에서도 다룬 내용이여서 나에게는 너무나 친숙한 내용들이 많았다. 저자인 니꼴라스 쌤이 어려운 내용들을 얼만큼 눈높이에 맞게 쉽게 설명하려고 하는 노력들이 많이 보였고 나도 해당 눈높이에 맞게 초심을 다질 수 있는 기회이기도 했다. 개인적으로 노마드코더의 강의를 듣고 해당 챌린지를 참여하는 이유는 니꼬같은 개발자가 되고 싶어서이다. 꾸준히 새로운 개발 공부를 하고 다른 사람에게 도움이 될만한 개발을 하고 노마드 개발자가 되고 싶기에 해당 강의를 듣고 커뮤니티에 참여하고 싶다. 프로그래밍.. 2024. 3. 28.
React환경에서 이미지 경로 설정하는법 html만 공부했다면 img태그에서 이미지를 어떻게 가져오는지 알거다. 위 방식과 같이 하면 되는데 react에서 했는데 이미지가 정상적으로 로드가 안되었다. 뭐지? 싶었다. 일단 해결법은 아래와 같음 이미지 파일의 위치는 public폴더 아래에 있어야 함 왜 그러냐? src폴더는 웹팩으로 처리되고 public 폴더는 웹팩으로 처리되지 않는다. 일반적으로 이미지와 같은 asset파일들은 public에 넣자. 여기서 한가지 더 알아야 할것은 로컬 환경과 실배포환경의 디렉토리 구조는 바뀔 수 있기 때문에 두 환경에서 모두 public폴더 위치를 지정해주는 변수가 있다. process.env.PUBLIC_URL 위 경로가 public폴더의 위치를 의미, 여기서 뭐 process.env.PUBLIC_URL/as.. 2024. 3. 27.
[TIL] IT 5분 잡학사전 챌린지 7일차 에피소드39 ~ 에피소드45 오늘 읽은 범위 39. 인공지능, 머신러닝, 딥러닝, 아직도 구분하기 힘들다고? 40. REST API라니, 휴식 API인가? 이게 대체 뭐죠? 41. 도커가 뭐지? 왜 필요할까? 42. 암호화폐의 진실 43. 하이브리드...앱? 뭐라고요? 44. NFT가 도대체 뭐길래? 45. 멀웨어, 바이러스, 웜 개념 몽땅 정리 책에서 기억하고 싶은 내용 - 기계를 가르치는 2가지 방식, 지도 학습(supervised learning), 비지도 학습(unsupervised learning). - 인간이 기계에게준 라벨을 토대로 학습하는 것을 지도 학습, 라벨이 없으면 비지도 학습. - 멀웨어는 malicious + software으로 컴퓨터를 감시하거나 파괴하는 녀석, 일종의 사이버 무기 - 바이러스는 숙주가 필요.. 2024. 3. 27.
GraphQL로 영화 API 만들기 내용 정리 원래는 프로젝트를 진행해야하지만 잠깐의 현타 + 조급함 덕분에 graphql강의를 들었다. graphql에 대해서는 처음 배우는 것이고 단기간안에 강의 전체를 듣게 되어서 약간의 정리를 해보았다. (많은 기업의 자격요건, 우대요건에는 GraphQL이 포함되어있고 Relay도 사용도 있다.) GraphQL탄생의 이유 REST API의 몇가지 단점을 해결하기 위해서 graphql을 쓴다고 한다. REST API는 매우 효율적이고 뛰어난 통신 방법이지만 두가지 단점을 가지고 있다. 1. Overfetching: 우리가 REST API GET을 통해서 json형식의 데이터를 가져오면 필요 이상의 데이터를 가져올때가 있다. 이는 사용하지 않는 데이터임에도 불구하고 서버에서 가져옴으로 이러한 현상을 overfetc.. 2024. 3. 26.
[TIL] IT 5분 잡학사전 챌린지 6일차 에피소드35 ~ 에피소드38 오늘 읽은 범위 35. 비밀번호는 어떻게 저장될까? 36. 객체 지향 프로그래밍이 뭐죠? 1 37. 객체 지향 프로그래밍이 뭐죠? 2 38. 함수형 프로그래밍이 뭐죠? 책에서 기억하고 싶은 내용 - 해시 함수는 레인보우 테이블을 이용해서 원래의 값을 되찾을 수가 있다. 레인보우 테이블이 털리면? 그걸 방지하기 위해서 솔트를 사용! 솔트는 작으만한 무작위 텍스트이다. - 개발자의 번아웃, 번아웃은 예방하는것, 번아웃이 왔다고 느끼면 이미 늦은거다 오늘 읽은 소감? 스프링으로 코딩을 할때에는 객체지향적인 코드로 클린 코드를 만들기 위해서 노력을 쏟았다. 지금 사용하는 리액트는 반면에 함수형 프로그래밍을 쓰고 있어서 가끔 리액트로 코드를 만들다 보면 이게 맞는 코드인가? 싶을때도 있다. 나중에 클린코드 책을 .. 2024. 3. 26.

티스토리툴바