전체 글

[React] 컴포넌트 리렌더링(Re-Rendering) 조건

React의 렌더링 최적화를 필수적으로 해야하는 프로젝트를 하다보니 React에서 리렌더링을 하는 조건에 대해 자세히 공부하게 되었다. 렌더링(Rendering)이란? 사용자 화면에 View(내용)를 보여주는 것을 렌더링이라고 한다. React 엘리먼트를 루트 DOM노드에 렌더링 하려면 둘다 ReactDOM.render()로 전달하면 된다. 초기 렌더링이란 어떠한 UI관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 사용자 화면에 뷰를 보여주는 것을 초기 렌더링이라고 한다. 리액트에서는 렌더링을 다루는 render 함수가 있다. 리렌더링(Re-Rendering)이란? 리렌더링은 사용자가 화면에 뷰를 다시 새롭게 보여준다는 의미인데 이것을 업데이트 과정을 거친다. 또는 조화 과정을 거친다 라고 표현한..

CSS에서 레이아웃을 구성하는 2가지 방법 : Flex & Grid

회사 프로젝트 내에서 한 화면에 많은 컴포넌트와 데이터를 담아야 할 일이 많아 레이아웃에 대해서 깊게 고민해보게 되었다. 복잡한 레이아웃을 쉽게 구축할 수 있게 해주는 CSS Grid와 Flex에 대해서 알아보자. 1. CSS Grid grid는 2차원으로 아이템을 배치할 수 있는 레이아웃으로 행과 열을 제어할 수 있다. 구성 요소 그리드 컨테이너 : 전체 그리드를 담고 있는 요소 그리드 아이템 : 그리드 컨테이너의 자식 요소 그리드 라인 : 그리드 컨테이너 내부의 자식 요소들을 나누는 선 1-1) Grid 부모 컨테이너 속성 display : 그리드 컨테이너를 정의 grid-template-columns : 명시적 열의 크기를 정의 grid-template-rows : 명시적 행의 크기를 정의 grid..

[MIL] 데브코스에서의 10월 & 2023년 10월 회고록

1. 백엔드와의 협업 프로젝트 시작 10월의 가장 대표적인 일이 아니었나 싶다. 백엔드와의 협업을 해본 적은 있지만 새롭게 만난 사람과 바로 협업을 시작해본 적은 처음이라 긴장도 많이 되었고 걱정도 많이 되었다. 기획 단계에서 가장 많이 중재, 설득, 조정 등의 과정이 많이 일어나기도 하고 프론트엔드 팀원들끼리도 새로 만난지 얼마 되지 않았어서 여러 모로 신경이 많이 쓰이는 기간이었다. 돌이켜 보았을 때 내가 잘 대처했다고 생각하는 부분은, 여러 기획 아이디어를 많이 낸 점, 또한 프로젝트 주제가 정해졌을 때 거기서 추가, 수정할 만한 부분에 대한 의견을 적극적으로 제시했다는 점이다. 또한 나의 개인적인 욕심보다는 다른 팀원들의 의견을 더 수렴하려고 노력했던 것 같다. 사실 어느 주제에서나 본인이 하기 ..

[MIL] 2023년 9월 회고

주니어 개발자 준비생(?)이자 막학기 학생이자 데브코스 교육생의 회고 벌써 2023년도 후반부를 넘어 2023년도의 끝이 다가오고 있고 데브코스 합격했다고 좋아한지가 엊그제 같은데 최종 프로젝트만을 앞두고 있다. 싱숭생숭한 기간이니만큼 이전에 썼던 회고글과는 좀 다르게 글을 써보고 싶다. 1. 정보처리기사 합격, SQLD 시험 응시 및 불합격 9월 1일, 팀프로젝트 시작날이라 강남 교육장에 가야 했던 날이었는데 9월의 시작을 기분 좋게 맞이했다. 별건 아니지만 정보처리기사 실기에 합격해서 나에게 첫 자격증이 생겼다. 좋아하는 팀원들을 만나러 가기 전 더 텐션이 올라갔던 날이었다. 9월 9일에는 SQL 개발자(SQLD) 시험이 있었는데, 팀프로젝트 기획 기간과 겹쳐 SQLD에 많은 시간을 쏟지 못했다. 시..

[취준기록] SK Telecom junior Talent 개발 직군 코딩테스트 후기

2023. 9. 9 (토) 11시 - 13시 1. 2시간 4문제 2. 자바스크립트 언어를 지원해주었기 때문에 자바스크립트로 문제를 풀었다. 3. 코딩테스트는 프로그래머스를 통해 진행되었다. 4. 시간시간시간 부족 5. 3문제를 풀었고 2문제는 완벽히 맞았을 것 같고 1문제는 틀렸을 것 같은 느낌이다. 만약 2문제만 맞았다면 2솔까지 합격시켜 주시길,,,,,,,,,,,,,,,, 가장 쉽다고 생각했던 1번에서 시간을 50분이나 써서 쉬운 문제에서 시간을 최대한 단축시키는게 중요한 것 같다는 생각을 했다. 시간이 좀 더 있었으면 애매하다고 생각했던 한 문제를 좀 더 정확하게 풀 수 있었을 것 같은데 1번 문제에서 시간을 많이 쓴게 아쉬웠다. 또한 4문제 모두 문제가 길고 복잡해서 이해하는 데에 시간을 많이 썼..

[MIL] 프로그래머스 프론트엔드 데브코스 8월 회고록

1. 8월에 나는 무엇을 했나 8월은 데브코스 안에서 팀이 바뀐 달이었다. 새로운 팀원들과 친해지며 팀에 적응을 해나가고 좋은 팀원들을 만나 많은 대화를 나눴다. -새로운 팀 빌딩 8월부터는 새로운 팀원분들과 함께 하게 되었다. 단합도 잘 되고 너무 잘 맞아서 덕분에 8월 한 달을 즐겁게 보낼 수 있었다. 10월이면 다시 흩어지겠지만 9월에 같이 프로젝트 하며 서로 많이 성장할 수 있는 계기가 되었으면 좋겠다. 각자의 영역에서 최선을 다 하는 팀원들을 보면서 항상 많이 배우고 있다. 나도 우리 팀원들처럼 팀에 어떤 방식으로든 기여할 수 있는 사람이 되어야겠다. - Vue 과제 Vue과제로 영화 정보 검색 서비스를 개발했다. Vue는 익숙하지 않아 기능이 많지 않아도 구현하는 데에 시간이 좀 걸렸던 것 같..

[MIL] 프로그래머스 프론트엔드 데브코스 7월 회고록

데브코스에서의 7월 한 달을 회고해보고자 합니다. 항상 회고를 하다보면 의도치 않게 반성문이 되는 경우가 많았는데, 잘한 점은 짚고 넘어가면서도 현재의 문제점을 보완하기 위해 어떤 것을 시도할 수 있을지에 대해 기록하며 돌아보도록 하겠습니다. 1. 무엇을 했고 무엇을 배웠나? 7월 한달은 vue, typescript, scss 에 대해 학습하였다. 영상 강의도 길고 양이 많아 따라가기만으로도 벅찼다. 1.1) vue 공식문서 학습, typescript 개념 다시 보기, scss 과제 1.2) 두 달 간 했던 스터디 마무리 : 두 달 간 미니 프로젝트 스터디를 진행했다. 7월에는 각자의 프로젝트를 진행 및 관리하며 공부한 점, 수정한 점에 대해 자유롭게 발표하는 형식으로 진행되었다. 내가 예전에 했던 프로..

[TIL] 데브코스 특강 - '함께 자라기' 김창준님 특강 후 요약 및 느낀 점

오늘 김창준님 특강에서 들었던 내용을 바탕으로 정말 간단한 til을 적어봐야겠다. 특강은 특별한 주제가 있었다기보다는 다른 분들의 질문을 바탕으로 답변해주시는 식으로 진행되었다. 정말 간단하게 키워드만 적을 것이기 때문에 원래 노션에 정리하려다가 혹여나 이 간단한 글을 바탕으로 인사이트를 얻는 분들도 있을테니 블로그에 적기로 했다. 아래 영상을 바탕으로 실천해보려는 목적도 있다😎 https://youtu.be/L7zWucx7TR8 1. 데일리 스크럼을 효과적으로 하기 위한 방법론 요약 : 어제 뭐했는지, 오늘 뭐할건지를 이야기하는 시간은 단순히 커피챗일 뿐, 스크럼이라 할 수 없다. 스크럼의 중요 요소는 관찰, 조정, 장애물이다. 어제 어땠는지를 관찰한 후 조정하는 것으로 그 사이에 무슨 장애물이 있었는..