내 경험으로 도움이 되는/TIL (13) 썸네일형 리스트형 2024.10.23 React State / Render tree 최근 코드 수정 중 useState setter가 말을 안들어서 render가 되지 않는 상황이 발생했다.예전에 겪은 상황은 객체를 초기 useState set을 해놓으면 객체 안에 있는 데이터가 바뀌어도 dependency 참조가 바뀐걸 인지 못해서 set을 못하는 건줄 알았는데, 생각지도 못한 곳에서 해답을 찾았다. React 공식 문서에 따르면,State 는 Render tree 위치에 연결되고, 같은 컴포넌트라면 그 자리에 Rendering 되는 한 state를 유지한다는 것이었다.React는 JSX 마크업이 아닌 UI tree에서의 위치에 관심이 있다는 것을 기억하라고 문서에서도 강조한다. 내가 겪은 상황은 Modal위에 또 다른 Modal을 띄워야 되는 상황이었고, 두번째 Modal의 상태가 .. 2024.08.12 <label> 오늘 일하다가 실수로 label tag 안에 label tag를 넣는 실수를 하였다.그런데 그것도 문제였지만, label tag의 쓰임새를 모르고 단순히 요소 이름을 붙이는것으로만 사용하고 있었다.. label을 클릭하면 그 안에 들어가 있는 children (보통은 input)이 반응하는 것을 모르고 있었다. label tag는 2가지 방식으로 사용 가능하다. 1. 명시적이름 2. 암시적 이름 이렇게 써야되는지도 모르고 label과 input을 분리해서 컴포넌트를 만들어 버렸다...(어쩐지 reactAria에서 TextField에 label이 없다고 경고를 띄웠는데 이유가 있었구나) label tag안에 interactive한 tag (a, button 같은)를 넣으면 label tag와 관련된 .. 2024.08.08 File Download s3에 저장되어 있는 자료를 서버에서 받은 URL로 다운로드를 하려는 상황에서a tag href에 다운로드 링크를 넣으면 손쉽게 끝날줄 알았지만 자꾸 이미지가 열리기만해서 열심히 서칭해봄. 그 중 발견한 글에서보안 이슈로 인하여 2018년 말부터 다운로드할 리소스가 동일한 출처 또는 동일한 서버에서 제공되지 않은 경우링크를 클릭해도 다운로드가 트리거 되지 않고 해당 이미지 주소로만 이동한다는 사실을 알게 되었다. 그럼 결국 직접 blob을 만들어서 다시 URL을 얻어서 해야되나 생각을 했지만, 뭔가 너무 비효율적이라는 생각을 했고그 와중에 Content-Disposition이 눈에 들어왔다.찾아보니 Disposition은 컨텐츠의 성향을 알려주는 속성으로 defalut는 inline인데, 아래처럼 at.. TIL - 2022.04.11 1. TypeScript 어느 회사든 TypeScript는 필수가 되었다. 평소에 TypeScript가 부족하다고 느껴 앞으로 공부할 예정이다. 우선 기초부터 쌓고 그 이후 진행 중인 프로젝트에 적용할 생각이다. 2. 오늘 하루 느낀 점 컨디션이 별로라 일요일 하루 쉬었다. 잘 쉬지 못해서 그런지 몸 상태가 썩 좋지는 않아 집중이 잘 되지 않는다. 이제 슬슬 잠도 일찍 자고 생활 패턴을 좀 바꿔야겠다는 생각을 하였다. 나태해지지 말자 TIL - 2022.04.09 1. 코딩 테스트 대부분 문자열을 다루는 문제들이 나왔다. 정규 표현식을 사용할 상황이 나올 줄 몰랐는데 결국 정규 표현식으로 구현한 문제도 있었고, 단순 문자열 + 구현 문제도 나왔다. 마지막 문제는 template 관련 문제였는데 시간이 모자라 결국 풀지 못했다. 실제 프로젝트에서 정규 표현식을 얼마나 사용할지는 모르겠지만 정규 표현식 관련 내용 중 변수를 받아서 replace를 하려고 한다면 아래와 같이 이용하면 된다. //manyCharArray에 있는 원소 값을 대소문자 관계없이 공백으로 replace for (let char of manyCharArray){ let regText = new RegExp(char, "gi"); answer = answer.replace(regText, ''); .. TIL - 2022.04.08 1. 코딩 테스트 문제 풀기 스택, 큐, 구현 문제 위주로 풀면서 자바스크립트 문법 확인 어떻게 풀 것인가에 대한 생각을 먼저 정리하고 구현할 것 자바스크립트 문자열 처리(trim 등)에 유의하자 TIL - 2022.04.07 1. 면접 준비 면접 스터디 중 원티드 멘토님께서 인성 면접을 도와주셨다. 실제 면접에 자주 나오는 질문을 해주시고 내가 답을 하면 피드백을 해주셨다. (정말 감사합니다!) - 피드백 내용 질문에 대한 대답을 듣는데 뭔가 좀 더 이야기가 나올 것 같은데 끊어버렸다. 즉, 완결성이 부족하다. 두괄식으로 답하는 연습이 필요하다. 대답에 대한 명확한 근거를 제시해주면 좋을 것 같다. 2. 코딩 테스트 문제 풀기 완전 탐색 문제를 풀었다. 감이 좀 떨어져서 그런지 빠른 시간 내에 풀지 못했다. 코딩 테스트 문제 해결력이 곧 어떠한 기능을 구현하는 데 있어 도움이 많이 될 것이라 생각된다. 내일은 코딩 테스트 위주로 공부 예정 3. 개인 프로젝트 진행 useLocation을 이용하여 메뉴 탭 클릭 시 pathna.. TIL - 2022.04.06 1. 면접 준비 면접 스터디 준비 (인성 면접) 2. 오늘 배운 개발 지식 CSS 지식이 정말 부족하다는 것을 깨달았다. 박스 모델부터 display의 속성 중 inline, inline-block의 차이, float의 의미를 제대로 설명하지 못했다. 박스 모델 같은 경우에는 포스팅을 하였고 (https://help-solomon.tistory.com/105) inline과 inline-block 추가로 block의 차이는 아래와 같다. - inline : 줄 바꿈 없이 다른 요소들과 함께 한 줄로 나란히 콘텐츠가 정렬, width와 height가 무시된다. content가 차지하고 있는 크기만큼의 공간만 차지한다. 부모 요소 너비를 초과하면 새 행으로 자동 줄 바꿈 - block : 전 후 줄 바꿈이 .. 이전 1 2 다음
