개발자, 특히 프론트엔드 개발자라면 DOM에 대해서 많이 들어봤을 것이다 가상DOM이니, 리액트를 사용할 땐 DOM에 직접 접근하지 마라... 등등 DOM이 뭔지 몰라도 html을 작성하고 프레임워크를 사용해서 웹페이지를 만드는데 아무런 지장이 없다하지만, DOM이 뭔지 모르고 넘어간다면 앞으로의 개발 인생이 찝찝할 것DOM(Document Object Model)은 말 그대로 Html 텍스트(Document)를 객체화(Object)한 모델이다왜 객체화 시켜야하냐고 한다면, Html 텍스트로 휘뚜루마뚜루 적는다고 그게 갑자기 웹사이트가 되는 것이 아니기 때문이고, 브라우저에게 이것좀 만들어달라고 해야해서, 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재해야 함 브라우저가 이해할 수 있는 구조 =..

useCallback이 뭔지 모르겠어요 ㅜㅜ 리액트는 컴포넌트의 상태가 변경되면 리렌더링을 진행한다고 useState편에서 설명했다 리액트는 리렌더링을 진행하면서 컴포넌트의 코드를 위에서부터 다시 읽어내는데이 과정에서 함수를 만나게 된다면, 똑같은 함수여도 새롭게 메모리에 할당해 버리는 것이다리액트 : ㅎㅎ 아래와 같은 코드가 있다고 가정해보자 (설명을 위해 많은 부분을 생략한 코드임)...const handleClick = () => { doSomething();} 수상한 버튼 ... 이 버튼 위에 뭔가 바뀌어서 컴포넌트가 리렌더링 된다면 버튼은 전혀 바뀌지 않았는데, props 받고 있는 handleClick의 참조값이 변경되어(리액트가 새롭게 메모리에 할당해버렸기 때문)버튼이 새롭게 렌더링 되어버리..

useEffect를 사용해서 state값을 변경했더니 무한반복이 발생해요 ㅜㅜ useEffect가 뭔지 먼저 알고가보자 useEffect는 컴포넌트 마운트 이후 외부 효과(Effect)를 동기화하기 위한 훅임(ex. 데이터 패칭, api 호출, 채팅방 연결...)useEffect(() => {setup func}, [deps]) setup 함수와 의존성 배열로 이루어져 있으며의존성 배열의 값이 변경되면 useEffect의 콜백함수가 실행된다 무한 반복이 발생한다?혹시 의존성 배열에 state 값을 넣지 않았나 확인해보자const [count, setCount] = useState(0);useEffect(() => { setCount(count + 1);}, [count]); 마운트 이후 state값이 ..

리액트에서 useState의 setter 함수를 사용해서 값을 변경해도 보이는 값은 변경되지 않는 일이 발생할 때가 있음 콘솔을 찍어봐도 값이 바뀌었지만, 화면에 표시되고 있는 값이 바뀌지 않는다면분노를 잠시 추스리고, 리액트가 상태변경을 어떻게 감지하는지 알아야 리액트의 밀당을 이해할 수 있다 type User = { name: string; age: number; }; const [user, setUser] = useState({ name: "John", age: 20 });위와 같은 코드에서, 인풋값으로 새로운 나이를 받는다고 생각해보자 const onClickChangeAge() => { //잘못된 예제 user.age = Number(inputRef.current..

웹페이지를 만들다 보면 텍스트가 기본 폰트로 먼저 보였다가, 잠시 후에 내가 설정한 폰트로 바뀌는 경우가 있다.이걸 FOUT(Flash of Unstyled Text)라고 한다. 글자 깜빡임이 거슬린다면 태그에서 preconnect와 preload 속성을 함께 사용하는 걸 고려해볼 수 있다.FOUT이 왜 발생하는가 브라우저는 HTML과 CSS를 모두 파싱한 다음에야 폰트가 필요하다는 걸 알게 된다.웹폰트가 외부 서버에 있다면 다음과 같은 절차를 밟는다.DNS 조회서버 연결 (TCP, TLS)실제 폰트 파일 다운로드이 과정이 다 끝나야 폰트가 적용되기 때문에, 그 사이에는 시스템 기본 폰트가 잠깐 보이게 된다.preconnect: 연결 미리 열기 preconnect는 브라우저에게 이 서버와 미리 연결하라..

더보기스포 : 1차 면접에서 탈락함 ㅠ싸피 2학기가 종료되기 전, 기업연계 프로젝트를 진행하고 있던 시기에 SK AX에 지원했었는데서류에 합격해서 필기 전형을 보게 되었다. 필기전형은 SKCT, AICT, AI 면접으로 이루어져있었다. SK 인적성은 어렵기로 유명했지만,다른 기업 면접을 진행하고 있었기 때문에 SKCT를 따로 준비하지는 않았다.인적성이라는게 단기간에 준비가 불가능할 것이라고 생각했음 AICT는 찾아봐도 후기가 거의 없었는데, 코딩하면서 GPT, 클로드, 커서 등 AI를 많이 활용해봤다면 문제없이 통과할 수 있을 것이라고 생각한다. AI 면접 또한 그냥 면접 준비한다고 생각하고 준비하면 문제 없을 것이라고 생각한다. 오래 지나지 않아서 필기 결과가 나왔다는 문자를 받았다.AICT는 어렵지..

싸피가 끝난지 한달 가까이 되어가는데 이제서야 작성하는 이유는... SK AX 필기, 면접 준비 등등 때문에... 나중에 기억하기 위해서 1년 간의 싸피 생활 기록합니다.모든 내용은 12기 기준입니다.입과 전 우선 500자 내외의 짧은 자기소개서를 제출하고 나서, CT(Computational Thinking) 테스트를 봤던 것으로 기억한다. CT 테스트에 합격하고 나면, 인터뷰(면접) 참석 메일이 도착했다. 나는 따로 면접 스터디를 구하지는 않았는데, 상당 수의 교육생들이 면접 스터디를 구해서 준비를 했다고 들었다.같이 스터디를 한 친구가 함께 합격한다면 2학기 생활이 편해질 수도 있으므로, 하는 것을 추천하고 싶다.(하지만 나는 다시 돌아가도 혼자 준비할 것 같음) 합격 후에는 희망 트랙 조사와 사..

1. var- 선언과 초기화가 동시에 이루어짐 (호이스팅 되며 undefined로 초기화 됨. 참조해도 오류 발생 x)- 재할당 가능- 재선언 가능- 함수 레벨 스코프 2. let- 선언과 초기화가 분리되어 이루어짐 (호이스팅 되며 선언은 되지만, 참조하면 오류 발생)- 재할당 가능- 재선언 불가- 블록 레벨 스코프 3. const- 선언과 초기화가 분리되어 이루어짐 (호이스팅 되며 선언은 되지만, 참조하면 오류 발생)- 재할당 불가- 재선언 불가- 블록 레벨 스코프 4. var vs let, const- 초기화 시점이 다름. var는 참조 에러 발생 x 5. TDZ (Temporal Dead Zone)선언과 초기화 사이의 구간 -> 이 때 호출하면 참조 에러 발생함수 선언문은 TDZ가 없지만, ..

2학기 공통 프로젝트를 시작할 때만 해도 길어 보였던 7주라는 시간이,어느새 다 끝나고 벌써 다음 프로젝트를 준비하고 있다. 프로젝트는 예비부부를 위한 스마트 웨딩플래너 서비스였고,우수 프로젝트에 선정되어 발표회에도 참가하게 되었다.개발을 SSAFY에서 처음 시작했으니,공통 프로젝트는 당연하게도 관통에 이어 내 두 번째 프로젝트였으며, 6명이 FE, BE, 인프라를 나눠서 담당하는 첫 대규모(?) 프로젝트였다고 할 수 있겠다. 전공자와 함께하게 되는 첫 번째 프로젝트였기에, (경험자 + 전공자)프론트 엔드와 팀을 해서 노하우와 스킬을 훔치겠다는 마음가짐으로 팀 구성을 시작했다.하지만 SSAFY 특성상 프론트 엔드 개발을 희망하는 사람이 거의 없었기에, 경험자는 고사하고 전공자 프론트 엔드를 찾기도 힘들었..

공통 발표회까지 드디어 끝 ㅜSSAFY 2학기 공통 프로젝트의 주제는 스마트 결혼준비 플래너같은 데이터(일정, 완료상태)를 한 페이지의 여러 컴포넌트(캘린더, 남은 일정, 다음 일정)에서 공유했음axios만을 사용해서 데이터를 요청했다면, 매 컴포넌트마다 불필요하게 동일한 요청을 보냈을 것(store에 저장하기에는 데이터 양이 많아질 수도 있고, 내 기준 변경이 많은 데이터라고 생각하여 store에 저장하지 않았음)React-Query의 useQuery를 사용시 불필요한 여러 번의 네트워크 전송을 막을 수 있을 것이라고 생각, 일정 호출에서 useQuery를 사용(신부 혹은 신랑이 배우자의 아이디를 등록하면 일정이 공유되어 같은 데이터를 수정하기에, staleTime은 따로 설정하지 않았음) 1.0 us..