![]()
프론트엔드 개발자 = 리액트 개발자 ?이 물음은 이제 개발 업계에서 거의 반사적으로 거의 그렇다라는 대답을 받는다.프론트엔드 채용 공고나, 강의, 교육 부트캠프, 심지어 바이브 코딩을 시작한다 하고 "...프로젝트 만들어 줘"라고 프롬프트를 작성하면 AI는 React 프로젝트로 작성을 해준다... 이런 걸 보면 리액트는 사실상 프론트엔드의 디폴트가 되지 않았나... 싶다..https://s-o-o-min.tistory.com/entry/%ED%95%AD%ED%95%B4-%ED%94%8C%EB%9F%AC%EC%8A%A4-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-6%EC%A3%BC%EC%B0%A8-%ED%9A%8C%EA%B3%A0%EC%B1%95%ED%84%B02-%..
![]()
🌊 우리의 꿈벌써 10주차가 끝나고 항해가 종료 되었다. 블로그를 쓰기로 마음 먹었지만, 7주차에서 블로그 작성이 종료되어 좀 많이 아쉽기도하다... 좋은 사람들을 많이 만나고 꾸준히 네트워킹하는 것은 정말 좋은 것 같다.(항해에서 인연을 만나 연애도 시작했다는... 다들 항해 하셔서 좋은 인연 만드세오) 항해를 하면서 내가 성장했다고 느껴지긴 하는데 정확하게 무엇이 달라졌을까? 짧지만 길었던 지난 항해를 돌아보면서 나의 성장을 보자.🔑 그래서, 뭘해야 되지?코스 커리큘럼엔 `React`, `TypeScript`, `TDD` 라는 주제가 있었다. 난 이거 모르는데.... 개강 하기 전 모르고 가면 나는 사르르 녹아내리며 하차를 할 것 같았기에, 사전 스터디를 시작했다. https://s-o-o-min..
![]()
🧑💻 언어 및 제출 결과사용 언어: TypeScript,통과 여부: ✅🧠 풀이 설명첫 번째 시도우선 투포인터로 하는 방법밖엔 생각나지 않아서 대충 간만 보겠습니다.생각나는것은 left를 중심으로 두고 right++ 시켜 비교한 뒤, 만약 펠린드롬이라면 배열에 담아두고, 아니라면 그냥 넘어가게 하고,right가 끝나면 left를 --시켜서 한번더 right를 굴리고, 이걸 left가 0이 될때까지 반복하는 걸로 생각했습니다.예를 들면"babad" 라면left = 2 부터 시작하고 right = 3 부터 시작해서 a, d를 left와 비교해서 안나오면 left를 -- 하고 right는 ++해서 다시 비교left = 1 부터 시작하고 right = 2 부터 시작해서 b, a, d 를 left 와 비교했..
![]()
이전 주차 포스팅 2025.05.02 - [항해99 플러스/회고] - [항해 플러스 프론트엔드] 4주차 회고 - 화요일의 저주 { sel.value = 'p1'; ad" data-og-host="s-o-o-min.tistory.com" data-og-source-url="https://s-o-o-min.tistory.com/entry/%ED%95%AD%ED%95%B4-%ED%94%8C%EB%9F%AC%EC%8A%A4-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-4%EC%A3%BC%EC%B0%A8-%ED%9A%8C%EA%B3%A0-%ED%99%94%EC%9A%94%EC%9D%BC%EC%9D%98-%EC%A0%80%EC%A3%BC" data-og-url="https://..
![]()
🧑💻 언어 및 제출 결과사용 언어: TypeScript, ...통과 여부: ✅🧠 풀이 설명첫 번째 시도괄호가 잘 닫혔는지 판별하는 문제입니다.우선 괄호의 개수가 짝수가 아니면 false를 반환하고, 첫 번째 괄호가 닫힌 괄호면 false를 반환합니다.그 뒤 괄호를 하나씩 확인하면서 열린 괄호는 스택에 추가하고, 닫힌 괄호는 스택에서 마지막 요소를 확인해서 짝이 맞는지 확인합니다.짝이 맞지 않으면 false를 반환하고, 짝이 맞으면 스택에서 마지막 요소를 제거합니다.stack에 남는게 없다면 괄호가 잘 닫힌 것이고, 남는게 있다면 괄호가 잘 닫히지 않은 것입니덩())) 케이스에서 true를 뱉어 버리는 문제가 있어 fail 했습니다.const isValid = (s: string): boolean ..
![]()
리액트란리액트란 사용자 인터페이스를 만들기 위한 라이브러리(자주사용되는 기능들을 모아놓은것)이다.라이브러리 VS 프레임워크리액트를 설명하기 앞서 프레임워크와 라이브러리의 차이를 간단히 알아보자면 프로그램의 흐름에 대한 제어 권한 차이다 쉽게말해 프레임워크는 제어 권한이 개발자가 아닌 프레임워크가 가지고 있는 반면, 라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 사용하는 형태기 때문에 자유로울 수 있다고 얘기 할수있다.리액트의 장점DOM장점을 설명하기 앞서 DOM 대해 간단히 설명해보자면 Document Object Model의 약자로 웹페이지를 정의하는 하나의 객체다. 쉽게 말해 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇이라고 보면 된다.Virtual DOM그렇다면 Vir..
![]()
useMemo() useState, useEffect 외에 자주 사용하는 useMemo를 학습해보자. useMemo 훅은 Memoized value를 return 하는 훅이다. useMomo 훅과 바로 뒤에 나올 useCallback훅을 이해하기 위해서는 먼저 Memoized value가 무엇인지 알고있어야 한다. useMemo와 useCallback 훅에서는 memoization이라는 개념이 나오는데, 컴퓨터 분야에서 memoization은 최적화를 위해서 사용하는 개념이다. 비용이 높은, 즉 연산량이 많이 드는 함수의 호출 결과를 저장해 두었다가 같은 입력 값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해 놨던 호출 결과를 바로 반환하는 것이다. 이렇게 하면 결과적으로 함수 ..
![]()
PropsProps의 특징Props의 중요한 특징은 read-only 즉 읽기 전용이라는 것이다.읽을 수만 있다는 것은 값을 변경할 수 없다는 말이기도 하다.props의 값은 리액트 컴포넌트가 엘리먼트를 생성하기 위해서 사용하는 값이다.그런데 이 값들이 엘리먼트를 생성하는 도중에 갑자기 바뀌어 버리면 제대로된 엘리먼트가 생성 될 수 없다.마치 붕어빵이 다 구워진 이후에 속재료를 바꿀 수 없는 것과 마찬가지다.다 구워진 이후에 속재료를 바꾸려면 붕어빵의 배를 갈라야 하는데 그렇게 하면 제대로된 상품으로 판매할 수 없을 것이다.그렇다면 다른 Props의 값으로 엘리먼트를 생성하려면 어떻게 해야 할까?그럴 때는 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를 생성하면 된다.이 과정에서 엘리먼트가 렌더링 되는..
![]()
🧑💻 언어 및 제출 결과사용 언어: TypeScript통과 여부: ✅🧠 풀이 설명소수를 구하는 문제고, 소수란 1보다 큰 자윤수 중 1과 자기 자신만을 약수로 가지는 수입니다.첫 번째 시도1 ~ n 까지의 수를 배열로 만든 뒤 요소들을 각각 소수인지 판별하는 방식으로 작성하려고 했습니다.(110), (25), 제곱근 , (52), (101) 이렇게 제곱 근을 기준으로 대칭이기 때문에 제곱근 이하만 판별하면 될 것 같습니다.1은 소수가 아니기 때문에 1을 제외하고 n보다 작은 수니 -1 해줍니다.그 뒤 요소들을 각각 소수인지 판별하는 방식으로 작성했습니다.691731인 케이스에서 Submission Result: Time Limit Exceeded 타임에러가 났습니다..const countPrime..
![]()
🧑💻 언어 및 제출 결과사용 언어: JavaScript통과 여부: ✅🧠 풀이 설명첫 번째 풀이indexOf만 쓰면 되는거라 생각은 했지만 그럼 재미 없을 거 같아서 다른 풀이들을 풀었습니다.const strStr_indexOf = (haystack, needle) => haystack.indexOf(needle);두 번째 풀이const strStr = (haystack, needle) => { for (let i = 0; i 반복을 haystack.length - needle.length만큼만 한 이유를 예를 들어 설명하자면, 첫 번째 인자 length가 5, 두 번째 인자 length 3일 경우 탐색 하는 인덱스는 0 ~ 2, 1 ~ 3, 2 ~ 4, 입니다. 그러므로 탐색할 글자(두 번째 인..
