분류 전체보기215 토스 Next 2022 코딩테스트 프론트 후기 이번에 토스에서 2022 Next 개발자 챌린지라는 채용 프로그램을 열었습니다. 평소 토스라는 회사에 관심이 있어 프로그램에 참여하였고, 결과적으로는 코딩 테스트에서 불합격하게 되었지만 간단하게 후기를 작성해봅니다. 나의 상황 우아한테크코스를 진행하며 한창 프로젝트에 열중하고 있다가, 토스 Next 2022가 열린다는 소식을 들었습니다. 작년에 이어서 올해도 열릴거라 생각은 하고 있었지만, 마지막으로 알고리즘 문제를 풀어봤던게 우테코 지원 당시의 코딩 테스트였을 정도로 코딩 테스트에 대한 대비를 따로 하고있지 않아 자신감은 없었습니다. 물론 문제들은 예전에야 많이 풀어보긴 했지만, 당시 대부분 C++를 사용해서 해결했을 뿐더러 그마저도 기억이 흐릿해져 알고리즘 문제가 나온다면 풀 자신이 없었기에 큰 기대.. 2022. 8. 12. JSX 알아보기 JSX는 리액트를 사용한다면 많은 분들이 익히 만나보셨을 문법입니다. 저도 리액트 프로젝트를 하며 당연하게 사용하고 있지만 안타깝게도 JSX가 무엇인지, 정확히 어떤 역할을 하고 있는지는 잘 모르고 있습니다. 오늘은 공식 문서와 몇 가지 예제를 통해 JSX에 대해 조금 더 깊게 알아보겠습니다. JSX가 왜 필요할까요? const element = Hello, world!; 위 코드는 공식 홈페이지에 기재된 가장 간단한 JSX 예시입니다. 변수 element에 할당된 태그로 감싸진 구문이 바로 우리가 알고있는 JSX입니다. 잠시 리액트가 아닌, 순수한 자바스크립트를 사용하던 시절로 돌아가보겠습니다. 우리의 프로젝트는 대략 이런 방식을 따라 흘러가게 됩니다. 자바스크립트 파일이 정적인 HTML, CSS 문서.. 2022. 7. 24. React.Memo 사용하기 React의 컴포넌트는 props라고 하는 입력을 받아 화면을 나타내는 JSX 엘리먼트를 반환합니다. 이러한 컴포넌트의 조합을 통해 우리가 보는 페이지를 구성하고, 하나의 완성된 결과물을 출력할 수 있게 됩니다. 리액트는 상황에 따라 다양한 화면을 보여주기 위해 지속적으로 컴포넌트를 갱신하는데, 이를 리렌더링이라고 합니다. 리렌더링 덕분에 컴포넌트는 정적인 반환에서 벗어나 많은 역할을 할 수 있었습니다. 컴포넌트가 사용자가 원하는 화면을 반영하려면 언제 리렌더링이 일어나야 할까요? 가장 확실한 방법으로는, 매 밀리초마다 컴포넌트를 렌더링 하면 정보의 누락없이 항상 최신 상태의 컴포넌트를 보여줄 수 있습니다. 하지만 그 방법은 너무 많은 리렌더링이 일어나고, 많은 리렌더링은 나쁜 사용자 경험으로 이어지기 .. 2022. 7. 11. 2022년의 절반을 돌아보며 며칠 비가 내리더니 이제는 푹푹 찌는 여름 날씨가 시작되었다. 어느 때보다 바쁘고 격정적인 한 해를 보내고 있는데 정작 앞에 놓인 일들을 온 힘을 다해 쳐내기만 할 뿐 제대로 돌아보고 쉰 적이 없었다. 이렇게 소중한 시간은 다시 오지 않을텐데... 이렇게 아무것도 남기지 않고 흘려보낼수는 없지 않을까? 지금이라도 열심히 회고 글을 써보기로 했다. 무엇을 하고 있었지? 작년 가을이 끝나갈 무렵, 우아한테크코스 4기 모집 공고를 보고 곧바로 지원하게 되었다. 우테코야 전부터 여기저기서 워낙 많이 언급되었던 곳이라 꼭 해보고 싶었는데 마침 잘 됐다 싶었다. 대입도 정시였고, 딱히 어딘가에 지원한 경험이 없어서 자소서라는걸 써 본 경험이 전무했던 내가 흐릿했던 기억들을 되살리며 인생 처음으로 제대로 된 자소서를.. 2022. 6. 27. 리액트의 에러 경계 (React Error Boundaries) 이전 글에서 클래스의 생명주기 단계 중, 리액트의 훅이 지원하지 않는 메서드가 일부 있다고 하였습니다. 그 중 하나가 이번 글의 주제인 에러 경계(Error boundaries) 를 형성하는 componentDidCatch 단계입니다. 오늘은 에러 경계란 무엇이고, 어떻게 등장하게 되었으며 사용하는 방법은 무엇인지 알아보겠습니다. 에러 경계 에러 경계란 컴포넌트의 하위 단계에서 발생하는 에러를 잡아내어 비정상적인 화면 대신 우리가 지정한 폴백 UI를 보여주는 리액트 컴포넌트의 한 종류입니다. 리액트 프로젝트를 개발해보신적이 있다면, 한 번쯤 런타임에서 에러가 발생했을때 실행중인 화면에 에러 내용이 오버레이 되어 표시되는 것을 보신적 있을겁니다. 이 화면은 create-react-app에 포함된 패키지 중.. 2022. 6. 5. 리액트의 추가 훅 (React Additional Hooks) 이전 포스팅인 리액트의 기본 훅에서 이어집니다. 리액트의 추가 훅 지난번에 소개한 리액트의 기본 훅 세 가지에 더해, 리액트에서는 총 일곱 가지의 추가 훅을 제공합니다. 추가 훅은 기본 훅들에 약간의 변경을 더하거나, 특별한 경우에 사용할 수 있도록 설계되었습니다. 하나씩 알아보겠습니다. useReducer import { useReducer } from 'react'; const [state, dispatch] = useReducer(reducer, initialArg, init); useReducer는 useState를 대체하는 훅입니다. useState가 단순히 상태를 선언하고, setState 함수를 반환해 준 것에 더해서 useReducer는 다양하고 복잡한 로직들을 dispatch를 통해 처리.. 2022. 5. 17. 이전 1 ··· 11 12 13 14 15 16 17 ··· 36 다음
