전체 글

SW 마에스트로 15기 1차 코딩테스트 후기

2024. 02. 24 14:00 - 16:00소마 1차 코딩테스트를 쳤다. 온라인 코딩테스트, 아니 코딩테스트 자체를 처음 쳐보았는데 준비과정부터 끝날 때까지 설레고 감사한 경험이였다. 준비과정은 다음과 같았다. 우선 시험 30분 전에 메일로 받은 코테 링크로 들어간다. 휴대폰으로 신분증을 인식한 뒤, 내 얼굴, 손, 그리고 노트북 화면이 나오도록 거치한다. (여담이지만 내 책상은 100*60정도 되는데 진짜 젤 끝에 폰을 거치하고 나는 그 반대쪽 끝에 와서 시험을 쳤다.. 과연 책상이 작으신 분들은 어떻게 각도를 잡았을까 하는 생각..) 그리고 노트북 카메라로도 정면 얼굴을 녹화하면서 화면 전체 공유를 한 채로 시험이 시작되었다. 시작 10분 전부터 채팅으로 감독관이 피드백을 주신다. 아무생각없이 커..

5탄 [프로그래머스 입문 문제] 코테에 필요한 파이썬 기초 문법 정리

프로그래머스 입문문제 100개 중(정답률 높은 문제 순으로) 100개를 풀면서 헷갈렸던, 몰랐던 문법들을 정리했다.라스트 5탄! 앞에 1-4 탄이 있지만 각각 별개의 문법이라 순서 상관없이 보면 된다. 현재 이코테 기출문제와 소마백준문제집을 중점으로 풀고있는데 거의 몇 가지 문법을 돌려서 쓰게 된다. 하지만 덕분에 이제 기초 문법을 고민하느라 시간을 더 뺏기진 않는다.😃 1. 바다코끼리 연산자 := def solution(id_pw, db): if db_pw := dict(db).get(id_pw[0]): return "login" if db_pw == id_pw[1] else "wrong pw" return "fail" ---------------------- # 바다코끼리 사용 안했을 때 def so..

[2주차] 클로저,이벤트 루프와 비동기 통신의 이해 p.59-79 | 모던 리액트 딥다이브

*** 읽을 때 주의할 css 1. [링크] 2. 밑줄 밑줄에 대한 개념 설명 3. h1제목 4. h2제목 모던 리액트 딥다이브 [2주차] 클로저,이벤트 루프와 비동기 통신의 이해 p.59-79 (자세한 예시는 꼭 책을 참고하시길 추천합니다.) 1.4 클로저 1.4.1 클로저란? 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합 *변수가 코드 내부에서 어디서 선언됐는지 말하는 것 함수가 속한 렉시컬스코프를 기억하여 함수가 그 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능 1.4.2 변수의 유효 범위, 스코프 전역 스코프 (global scope) 전역 레벨에 선언 브라우저 환경에서 전역 객체는 window이다. 함수 스코프 함수 레벨에 선언 자바스크립트 특징 { }블럭이 ..

코딩테스트 파이썬 | 백준 SW마에스트로 모음집, 프로그래머스 고득점 kit 문제 답 모음집

- 백준 SW마에스트로 12기 지원대비 문제풀이 - 프로그래머스 고득점 kit - SQL 고득점 kit - 이코테 기출문제 답과 간단설명 및 문제별로 링크를 걸어놨다. README를 참고하길 바란다. GitHub - MaraisLee/coding_test: 코딩테스트 연습 코딩테스트 연습. Contribute to MaraisLee/coding_test development by creating an account on GitHub. github.com 혹시 필요하신 분들, ⭐️눌러놓고 맛있게 잘 사용하세요. 계속 업뎃될 예정! 소마 코테 1차까지 달려보자아~

노트북 변경시 프론트엔드 개발자의 초기 셋팅

노트북, 혹은 pc 등 개발도구를 변경할 때마다 프론트엔드 개발자의 초기 셋팅을 구글링하는게 지쳐서 정리해본다. 앞으로 초기 셋팅할 경우가 생겼을 때 이 글을 먼저 보고, 그 후 생기는 오류들을 구글링하면 될 것 같다. 준비물: 최신 커밋한 깃 허브 레포지토리, .env 파일, 맥북, 인내심 맥북인 경우, ** iterm2에서 진행 1. 아래 링크 프론트엔드 개발자의 맥북에어 m1 16g 256gb + 투명케이스 20살때부터 거의 7년간 쓴 내 소중한 마이크로소프트 서비스 랩탑이 고장났다.. 배터리가 방전되서 아예 켜지지가 않는다ㅜ 내장 배터리라서 배터리만 따로 갈아끼우는게 더 일이라 맥북을 알아 mariais.tistory.com 에서 iterm2 및 기초 세팅한다. 2. node 설치 (npm 같이 ..

[1주차] 자바스크립트의 동등 비교, 함수, 클래스 | 모던 리액트 딥다이브 공부

1.1 자바스크립트의 동등 비교 1.1.1 자바스크립트의 데이터 타입 원시타입 객체가 아닌 모든 타입, 메서드를 갖지 않음 boolean 0, NaN, ””, null, undefined 모두 falsy 한 값 null 명시적으로 비어 있음을 나타내는 값 undefined 선언됐지만 할당되지 않은 값 number 최대 2^53-1저장 가능 string 템플릿 리터럴(백틱``사용, 줄바꿈0, 표현식0) symbol 고유한 값을 나타낼 때 사용, Symbol()함수 사용 bigint number의 숫자 크기 제한을 극복, ES2020 객체타입 object 원시 타입 이외의 모든 것 배열, 함수, 정규식, 클래스 참조를 전달 (=참조 타입) 1.1.2 값을 저장하는 방식의 차이 원시 타입 변하지 않는 형태의 ..

프론트엔드 개발자의 맥북에어 m1 16g 256gb + 투명케이스

20살때부터 거의 7년간 쓴 내 소중한 마이크로소프트 서비스 랩탑이 고장났다.. 배터리가 방전되서 아예 켜지지가 않는다ㅜ 내장 배터리라서 배터리만 따로 갈아끼우는게 더 일이라 맥북을 알아보았다. 마침 당근에 가성비 있는 금액으로 맥북에어 m1 16g 256gb (배터리 사이클 30회, 100%) 가 올라와서 바로 구매했다 ㅎㅎ 개발자는 16g이지 😙 며칠 간, 기본 셋팅을 마치고 현재 사용하고 있는 모습 (vscode +item2) 아래는 참고한 사이트들이다. 설명이 매우 잘 되어있다! 나중에 맥북을 다시 바꿨을 때 다시 참고해도 좋을 것 같아 링크를 남겨둔다. [참고 1] macOS 맥북 개발 환경 구축 방법 총 정리 Mac 초기 셋업, Docker, Homebrew 등 LainyZine에서 연재중인 ..

에라토스테네스의 체 | 프로그래머스 소수찾기 | 파이썬

프로그래머스 > 코딩테스트 > 알고리즘 고득점 Kit > 완전탐색 > 소수찾기 문제를 해결하기 위해 구글링을 하다가 '에라토스테네스의 체'를 알게 되었다. '에라토스테네스의 체'는 수학에서 소수를 찾는 빠르고 쉬운 방법이다. 고대 그리스 수학자 에라토스테네스가 발견했다고 한다. 알고리즘은 아래와 같다. 이렇게 풀어 설명한 것을 보면 되게 쉽게 느껴지는 알고리즘이다. 하지만 이렇게 간단하게 생각하기까지가 참 어려운 것 같다... 아래는 python(3.6.4)으로 구현한 코드이다. def prime_list(n): # 에라토스테네스의 체 초기화: n개 요소에 True 설정(소수로 간주) sieve = [True] * n # n의 최대 약수가 sqrt(n) 이하이므로 i=sqrt(n)까지 검사 m = int..

next.js grid, map 안의 background image 최적화 및 글자 위에 보이기 | pages router

[참고] Optimizing: Images | Next.js Optimize your images with the built-in `next/image` component. nextjs.org 1. next/Image 태그를 import 한다 2. fill 과 objectFit, sizes를 아래코드와 같이 설정한다. 3. Image태그의 부모요소에 position: "relative"를 설정한다. (크기가 지정되어있지 않을 경우 width, height도 설정) ++ background-image 위에 글자 보이게 하는법 4. Image태그의 부모요소 (여기서는 Item)의 background-color를 투명하게 만든다. 5. 글자를 div 태그로 감싸고 absolute를 준다. 6. 중앙정렬 한다...

Next.js pages router favicon 및 title 태그 넣는 폴더 위치 (전역설정)

프로젝트 시작을 app router가 안정적이지 않을 때 시작했다. 그래서 pages 폴더 구조를 가지고 있는데 파비콘 설정 및 타이틀 태그 설정법이 잘 안보여서 글을 올린다. 각 페이지별 설정도 있지만 간단한 프로젝트용으로 전역적인 파비콘설정이 필요한 경우 아래와 같이 적용하면 된다. - 꼭 next/head에서 불러온 Head를 사용해야한다. - icon(favicon) 경로는 public이 자동으로 기준이 되있기 때문에 그아래 경로부터 적으면 된다. 전체코드 import "@styles/globals.css"; import "@styles/quill.css"; import type { AppProps } from "next/app"; import { Noto_Sans, Source_Serif_4 }..

클론코딩의 장점

클론 코딩의 장점은 실리콘 벨리의 우수한 개발자들의 코드를 공짜로 볼 수 있는 것이다. 그래서 대기업 IT회사의 사이트를 클론 코딩하면 매우 도움이 된다. 주의할 점, 포트폴리오에는 큰 도움이 되지 않는다. 클론코딩을 하면서 습득한 기술, 혹은 기능 구현을 내 프로젝트에 적용해 보여주는 것이 더 낫다.

개발자 스터디를 운영하면서 생기는 고민들

2023.10 - 12: 동기부여 스터디 1회차 2024.01 - 현재: 스터디 2회차 동기부여용 개발 스터디를 만든 동기 1. 비전공자에 지방러라 주변에 같이 개발공부하는 사람이 없다. 2. 정보 교환을 할 사람이 없다. 3. 혼자 공부하자니 자꾸 미루게 된다. 4. 다른 개발자들은 어떤 걸 공부하나 궁금하다. 5. 괜찮은 강의나 프로그램, 회사 정보를 알고 싶다. 6. 각자 할일에 방해되지 않는, 부담스럽지 않은 스터디여야 한다. 6. 나같은 사람들에게 관리자로서 단지 소통할 수 있는 공간을 마련해주고 싶었다. 스터디 운영방식(간략) - 매주 목표설정 및 공유 - 주 1회이상 하루 공부 인증 - 주 1회이상 모각코 참여 스터디를 운영하면서 생긴 고민들 1. 단톡방이 너무 조용하다. 2. 익명이라 잘 ..

프론트엔드 개발자에게, 블로그의 장점

2023.11.12. 옵시디언 플러그인을 시작으로 Marais's IT Home 블로그를 시작했다. 옵시디언 플러그인이 2월말에 종료된다는 것을 듣고 왠지 추억에 젖어서 개발자에게 블로그의 장점에 대해 기록해본다. 개발자에게 블로그가 중요하다는 이야기는 수도없이 들었었지만 장벽이 높아보여서 엄두도 못내고 있었는데,, 지금까지도 활발하게 적고 있을 줄이야. 역시 뭐든 너무 힘들이지 않고 자연스럽게 시작해야 꾸준히 하게 되는 것 같다. 마레 IT 블로그의 개설 이유 구글링을 하다보면 원하는 정보를 한국어로 찾기 힘든 경우가 종종 있다. 혹은 설명이 내 기준 자세하지않고 약간의 기본지식을 필요로 해서 따라가는데 어려움을 겪는 경우가 많았다. 나는 개 mariais.tistory.com 위의 이유로 블로그를 시..

Next.js useSelectedLayoutSegment | 현재 있는 페이지의 주소를 알고 싶은 경우

next의 공식문서에 따르면, " useSelectedLayoutSegment 는 클라이언트 컴포넌트 훅으로 이 것이 불러와진 레이아웃의 한 단계 아래의 경로 segment를 알 수 있다. 이 훅은 nav UI (특히, tab과 같이 그 주소 segment에 따라서 스타일이 바뀌는경우) 에 유용하다." 만일 내가 '/home' 에 있다면, 아래 코드를 작성했을 때 home이 불러와진다. import { useSelectedLayoutSegment } from "next/navigation"; ------------- const segment = useSelectedLayoutSegment(); console.log(segment); //home 한단계 더 밑의 경로까지 알고 싶다면, ex) /home/a..

useSearchParams | Next.js 13 app router (간단함)

제로초 강의를 듣다가 정확히 이해가 되지않아서 next의 공식문서를 찾아본 결과이다. 'useSearchParams'는 클라이언트 사이드 훅인데, 현재 url의 쿼리 스트링을 알 수 있게 해준다. 아래의 예시가 참 잘 되어있다. - 문법은 get(' ')을 반드시 사용해야한다. 'use client' import { useSearchParams } from 'next/navigation' export default function SearchBar() { const searchParams = useSearchParams() const search = searchParams.get('search') // URL -> `/dashboard?search=my-project` // `search` -> 'my-..