분류 전체보기
[코테 후기] 21년 CJ ENM 상반기 공채 코딩 테스트 후기
[코테 후기] 21년 CJ ENM 상반기 공채 코딩 테스트 후기
2021.04.12프로그래머스에서 1시간 30분 동안 2문제 봤습니다. 채점 결과가 나오지 않아서 잘 풀었는지는 모르겠습니다. (히든 테스트 케이스 존재.) 난이도는 높게 쳐야 백준 실버3 정도 되는 것 같았습니다. 1번, 2번 두 문제 다 문자열과 관련이 있었습니다. 1번 문제는 정규 표현식을 사용할 줄 알면 쉽게 풀 수 있고, 2번 문제는 문자열과 스택을 활용한 구현 문제였습니다. 개인적인 견해지만 올 해 기업 코딩 테스트는 문자열과 관련된 알고리즘이 초반부 문제로 많이 나오는 듯 합니다. 지금까지 저는 ide툴을 활용 가능한 코딩 테스트를 진행했습니다. 그래서 프로그래머스 내 에디터에 코드를 작성하는 것이 익숙치 않았습니다. 이번이 처음 프로그래머스 에디터에만 의존한 첫 번째 코딩 테스트였습니다. 규칙상 프로그래머스..
[React] useMemo / useCallback / React.memo
[React] useMemo / useCallback / React.memo
2021.04.11useMemo useMemo Hook은 성능 최적화를 위하여 사용됩니다. 사실 useMemo 함수를 알기 전에 메모이제이션(memoization) 개념을 알고 있으면 좋습니다. 간단하게 설명하고 넘어가겠습니다. 메모이제이션이란 기존에 수행한 연산의 결과값을 변수나 어딘가에 저장하고 동일한 입력이나 행동이 들어올 경우 그 값을 재활용하는 프로그래밍 기법을 말합니다. 이를 잘 활용하면, 중복 연산을 피할 수 있고 애플리케이션의 성능을 최적화시킬 수 있습니다. 이 메모이제이션 개념이 들어간 로직을 간편하게 사용할 수 있게끔 해주는 것이 useMemo hook입니다. useMemo 함수는 2개의 인자를 받습니다. 1. 결과값을 생성해주는 함수 2. 기존의 결과값을 재활용 여부의 기준이 되는 기존 배열 즉, 어떤..
[React] 배열 항목 제거, 수정 / useEffect
[React] 배열 항목 제거, 수정 / useEffect
2021.04.09배열에 항목 제거하기 배열에 항목을 제거할 때에는 어떻게 해야 하는지 알아보겠습니다. 먼저, UserList에서 각 User 컴포넌트를 보여줄 때, 삭제 버튼을 렌더링 하겠습니다. UserList.js import React from "react"; function User({ user, onRemove }) { const {username, email, id} = user; return ( {username} ({email}) onRemove(id)}>삭제 ); } function UserList({ users, onRemove }) { return ( {users.map((user) => ( ))} ); } export default UserList; 결과 화면 User 컴포넌트의 삭제 버튼이 클릭될..
[React] 배열 렌더링 / useRef 활용 / 배열에 항목 추가
[React] 배열 렌더링 / useRef 활용 / 배열에 항목 추가
2021.04.04배열 렌더링하기 리액트에서 배열을 렌더링하는 방법을 알아보겠습니다. sample.js const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 만약에 이 내용을 컴포넌트로 렌더링한다면 가장 기본적인 방법으로 비효율적이지만, 그냥 그대로 코드를 작성하는 것 입니다. UserList.js import React from 'react'; function User({ user }) { return ( {user.u..
[React] input 상태 관리하기 / 여러개의 input 상태 관리하기 / useRef
[React] input 상태 관리하기 / 여러개의 input 상태 관리하기 / useRef
2021.04.03input 상태 관리하기 간단하게 React에서 Input 태그 안의 상태를 관리하는 법을 알아보겠습니다. 먼저 결과 코드입니다. App.js import React from "react"; import InputSample from "./InputSample"; function App() { return ; } export default App; InputSample.js import React, { useState } from "react"; function InputSample() { const [text, setText] = useState(""); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setTe..
[React] props / 조건부 렌더링
[React] props / 조건부 렌더링
2021.03.27props를 통해 컴포넌트에게 값 전달하기 props는 propreties의 줄임말입니다. 주로 부모 컴포넌트에서 자식 컴포넌트로 특정 값을 전달할 때 사용합니다. App.js (부모) import React from "react"; import Hello from "./Hello"; function App() { return ( ); } export default App; Hello.js (자식) import React from "react"; function Hello() { return 안녕하세요! } export default Hello; 초기 구성 코드입니다. 화면에는 "안녕하세요!" 가 렌더링 될 것입니다. 부모 컴포넌트는 App.js이고 자식 컴포넌트는 Hello.js입니다. 부모 컴포넌트에..
[React] 리액트는 어쩌다가 만들어졌을까? / 리액트 컴포넌트 / JSX
[React] 리액트는 어쩌다가 만들어졌을까? / 리액트 컴포넌트 / JSX
2021.03.24리액트는 어쩌다가 만들어졌을까? JavaScript를 사용하여 DOM을 변형하기 위해서는 브라우저의 DOM select API를 사용하여 특정 DOM을 선택한 뒤에 특정 이벤트가 발생하면 변화를 주는 작업을 해야 합니다. 참고로 DOM에 대한 설명은 bbangson.tistory.com/62 이 링크에 있습니다. [JavaScript] 실습 - 카운터 만들기 / 모달 만들기 카운터 만들기 "간단한 카운터 만들기" 실습을 해보겠습니다. 왼쪽 +1 버튼을 누르면 위에 있는 숫자가 올라가고, 오른쪽 -1 버튼을 누르면 숫자가 내려가는 실습입니다. 숫자의 초기 값은 0으로 bbangson.tistory.com 즉, 브라우저의 DOM을 선택하고 이벤트를 걸어주는 규칙을 이용해서 DOM을 변형시켜줘야 합니다. 작은..
[JavaScript] 실습 - 카운터 만들기 / 모달 만들기
[JavaScript] 실습 - 카운터 만들기 / 모달 만들기
2021.03.21카운터 만들기 "간단한 카운터 만들기" 실습을 해보겠습니다. 왼쪽 +1 버튼을 누르면 위에 있는 숫자가 올라가고, 오른쪽 -1 버튼을 누르면 숫자가 내려가는 실습입니다. 숫자의 초기 값은 0으로 설정해뒀습니다. 코딩은 CodeSandbox에서 진행했습니다. 어떻게 이걸 만들 수 있을까요? 우선 중요한 것은 HTML5과 JS를 연동시켜야 합니다. 어떻게 연동 시킬 수 있을까요? 코드를 보면서 설명해 드리겠습니다. 먼저 html 코드입니다. 0 +1 -1 HTML 파일에서 JS파일을 연동 시키는 방법은 태그 안에 여기서 알아야 할 점은 div 태그 안에서 style은 줄 수 있다는 것과 display: none을 줌으로서 초기 설정은 안보이게 만든다는 것입니다. 당연합니다. 모달은 버튼을 클릭해야 보이는 것..
[JavaScript] 비동기 처리의 이해 - promise, async / await, promise.all, promise.race
[JavaScript] 비동기 처리의 이해 - promise, async / await, promise.all, promise.race
2021.03.15비동기 처리의 이해 - 동기적 (Synchronous) 작업이 끝날 때까지 기다린 후 다음 작업을 처리합니다. 다음 작업은 이전 작업이 끝날 때까지 멈추고 기다려야 합니다. - 비동기적 (Asynchronous) 작업의 흐름이 멈추는 일 없이 동시에 모든 작업을 처리할 수 있습니다. 기다리는 과정에서도 다른 함수를 호출할 수 있습니다. 간단하게 사진으로 비교해 보겠습니다. (벨로 퍼트님 강의에서 캡처했습니다.) 동기적인 코드 예시입니다. function work() { const start = Date.now(); for(let i=0; i { const start = Date.now(); for(let i=0; i {}, 0) 함수를 통해 비동기적으로 코드를 구현할 수 있습니다. setTimeout 함..