본문 바로가기

전체 글

 (159)
프리온보딩 프론트엔드 회고 8월 28일 부터 9월 30일 까지 진행한 원티드 프리온보딩 코스에서 기업과제와 강의를 들으며 느꼈던 부분과 후기를 회고로 적어보려고 한다. 다음은 해당 코스에 대한 소개글 링크이다. https://www.wanted.co.kr/events/pre_ob_fe_5 프리온보딩 프론트엔드 코스 | 원티드 AI 채용, 연봉 정보, 이력서, 커리어 콘텐츠까지 커리어 성장에 필요한 모든 것, 원티드에서 만나보세요. www.wanted.co.kr 1. 협업에 대하여 프리온보딩 세션에서는 어떤 기술을 잘 쓰는가에 대한 부분보다는 어떻게 하면 클린한 코드를 작성하고 팀원과 협업을 잘하는 방법을 중점을 두고 진행이 되었다. 강사님은 우리가 왜 협업을 잘해야 하는지 그리고 코드를 작성할때 가독성이 좋은 코드가 나 자신을 위..
[React] - useEffect 훅 실전 활용법(2) *의존성 배열을 없애는 방법 - 왠만하면 리액트에서 의존성 배열을 사용하지 않는게 좋다 왜냐하면 의존성 배열을 관리하는게 생각보다 많은 시간과 노력이 들어가기 때문이다 특히 속성값으로 전달되는 함수를 의존성 배열에 넣는 순간 그 함수는 useCallback 등을 사용해서 자주 변경되지 않도록 신경써서 관리해야 한다 - 위 코드는 의존성 배열을 사용하지 않고 if문으로 fetchAndSetUser 호출 시점을 관리한다 이렇게 의존성 배열을 입력하지 않으면 부수 효과 함수에서 사용된 모든 변수는 가장 최신화된 값을 참조하므로 안심할 수 있다 - 이렇게 작성하면 밑에 코드처럼 fetchSetUser 함수에 useCallback 훅을 사용하지 않아도 된다. * useState의 상탯값 변경 함수에 함수 입력하기..
프로그래머스[LEVEL2] - 구명보트 https://school.programmers.co.kr/learn/courses/30/lessons/42885 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 그리디가 어떻게 풀어야할지 감은 오는데 막상 코딩으로 구현하려고 하면 벽에 막히는 것 같다 대충 설명하자면 people의 입력값 [70, 50, 80, 50]을 내림차순으로 정렬한다 그리고 반복문을 통해서 변수 sum에다 people[light] + people[heavy] 값을 넣는데 이때 sum에 값이 limit보다 크면 heavy만 증가 시키고 그렇지 않으면 light은 감소시켜준..
[Javascript] - require vs import require vs import - 기본적으로 require와 import를 모듈 키워드이다 외부 파일이나 라이브러리를 불러올 때 사용한다. - require는 Node.js에서 사용되고 있는 CommonJs 모듈 키워드이고 import는 ES6에서 새로 모듈 키워드이다 - 둘 다 다른 파일의 코드를 불러온다는 같은 목적을 갖고 있지만 다른 문법 구조를 지니고 있다. 주요 차이점 - require는 CommonJs를 사용하는 Node.js의 키워드지만 import()는 ES6에서 도입된 키워드이다. - require는 파일에 작성한 곳에 남아 있으며 import는 항상 맨 위로 이동한다. - require는 프로그램의 어느 지점에서나 호출할 수 있지만 import()는 파일의 시작 부분에서만 실행할 수 ..
[React] - useEffect 실전 활용법 (1) 의존성 배열 - 의존성 배열은 useEffect 훅에 입력하는 두번째 매개변수이다 의존성 배열의 내용이 변경됐을 때 부수 효과 함수가 실행된다. 부수 효과 함수에서 API를 호출하는 경우 - 부수 효과 함수에서 API를 호출한다면 불필요한 API호출이 발생하지 않도록 주의해야 한다. - 위 예제에서 fetchUser함수는 렌더링을 할 때마다 호출되므로 비효율 적이다. - 이 문제를 해결하기 위해 의존성 배열에 빈 배열을 넣을 수도 있다 하지만 이는 userId가 변경돼도 새로운 사용자 정보를 가져오지 못하기 때문에 올바른 해결책이 아니다. - 이렇게 의존성 배열을 이용해서 위 문제를 해결할 수 있다 이제 userId가 변경될 때만 fetchUser 함수를 호출한다. - 위 예제는 상탯값 needDetai..
[Javascript] - private, protected 실생활 예제 - 커피 머신을 예로 들어보자 외형은 굉장히 심플하다. - 하지만 내부를 들여다보면 디테일한 것들이 많다 하지만 이 모든 것들을 알지 못해도 커피 머신을 사용하는데 지장이 없다. - 외형은 단순하지만 커피 머신을 신뢰할 수 있는 이유는 모든 세부 요소들이 기계 내부에 잘 정리되어 숨겨져 있기 때문이다 만약 커피 머신에서 보호 커버를 제거하면 사용법이 훨씬 복잡해지고 위험한 상황이 생길 수 있다 어디를 눌러야 할지 모르고 감전이 될 수 있기 때문이다. - 프로그래밍에서 객체는 커피 머신과 같다. - 프로그래밍에서 보호 커버를 사용하는 대신 특별한 문법과 컨벤션을 사용해 안쪽 세부 사항을 숨긴다는 점이 다르다 내부 인터페이스와 외부 인터페이스 - 객체 지향 프로그래밍에서 프로퍼티와 메서드는 두 ..
백준 1874 - 스택 수열 https://www.acmicpc.net/problem/1874 1874번: 스택 수열 1부터 n까지에 수에 대해 차례로 [push, push, push, push, pop, pop, push, push, pop, push, push, pop, pop, pop, pop, pop] 연산을 수행하면 수열 [4, 3, 6, 8, 7, 5, 2, 1]을 얻을 수 있다. www.acmicpc.net 문제 설명 1 1 - N까지 stack에 push한다 2 stack의 맨 위에 요소가 sequence의 첫번째 요소와 같다면 sequence와 stack에 pop해주고 result에는 '-'를 push 한다. 3 만약 다르다면 stack에 (a)를 push하고 reult에도 '+'를 push 한다. 4 혹시 stac..
[TypeScript] - 함수 오버로딩 타입스크립트에서 함수 오버로딩이란 ? 오버로딩의 일반적인 개념은 이름은 같지만 매개변수 타입과 반환 타입이 다른 여러 함수를 가질 수 있는 것을 말한다 타입 스크립트에서는 같은 이름의 여러 개를 정의할 수 있다 이때 각 함수는 서로 다른 타입을 가지는 매개변수로 선언되어야 한다. 매개변수의 개수는 동일하지만 타입이 다른 경우 두 개의 함수 선언과 하나의 함수 구현이 있는 동일한 함수가 존재한다 첫번째 함수선언은 문자열 타입인 두 매개변수를 가지며 두번째 함수 선언은 숫자형인 두 매개변수를 가진다. 마지막 함수에는 함수의 본문을 구현해야 한다 반환 타입은 위에서 선언한 두개의 함수에 따라 문자열 또는 숫자형 일 수 있으므로 any 타입으로 정의하며 매개변수도 any 타입으로 정의한다. 매개변수의 개수는 다..

티스토리툴바