정도영 Tech-Blog 정도영 Tech-Blog

오늘은 세션의 중요 내용 중 하나는 면접관이 구직자의 레퍼지토리를 확인할 때 무엇을 중점적으로 보는지, 지양해야하는 것은 무엇인지에 대한 주제였습니다. 특히, 레퍼지토리 리드미의 중요성을 많이 강조하셨는데 이 리드미 파일 하나로 이 프로젝트의 첫 인상이 많이 좌지우지된다고 하셨고 무엇이 리드미 파일에 기술되어야하는가에 대해 배웠습니다. 지금까지 수행했던 프로젝트나 이번 기술과제의 리드미 파일에도 나름 필요한 정보를 기술했다고 생각했지만 어떤 부분을 좀 더 보완해야할지 생각해볼 수 있는 시간이었습니다. 그 중 확실히 필요성을 느꼈던 부분은 아래와 같습니다. 1. 레퍼지토리의 구성 컴포넌트와 함수 등이 어떤 폴더 구조로 정리되어 있는지 명확하게 기술해 면접관 또는 동료들이 빠르게 원하는 코드를 찾아보고 이해..

1. 리액트와 타입스크립트, Next를 독학해서 공부하고 그걸 가지고 혼자 세 개의 프로젝트를 수행하고 포트폴리오를 만들었다. 다른 구직자들을 보니까 혼자 수행한 프로젝트는 퍼져서 흐지부지되거나 처음에 계획했던 요구사항의 사이즈를 좀 줄여서 수정하게되는데, 나는 어떻게해서든 끝까지 계획하고 구현하려고 했던 사항들을 구현해낸다. 다른 취준생들이랑 교류를 좀 해보기 전에는 몰랐는데, 그게 나의 가장 큰 장점이라고 생각함. 물론 이건 1~2 년차 급에게만 먹히는 장점이라는 생각이 들긴하는데.. 개인적으로 이런 부분을 보면 객관적으로 나는 실력을 떠나서 성실하고 꾸준한 취준생이라고 생각은 든다. 실력이야 뭐 요새 다 잘하는 사람밖에 없으니. 2. 방통대 컴퓨터과학과 편입해서 3학년 수료 및 학점 평균 4.0 이..

1. 지원 자격 및 수료 조건에는 20개 이상이라고 되어있지만, 실질적으로는 시장 상황을 고려해서 최소 200개 정도의 이력서를 제출해야하지 않을까 싶습니다! 중고 신입으로서 이전의 직장은 70개의 서류 지원 끝에 합격하게 되었지만, 저번 달부터는 몇 십개의 지원 서류를 넣어야 서류가 겨우 하나 통과되는 신세계(?)를 맛보고 있기 때문에 이번 구직 시기에는 스스로의 역량을 좀 더 끌어올림과 동시에 더 적극적인 이력서 제출을 할 생각입니다. 따라서, 수료 조건인 20개의 서류 지원과 별개로 더 많은 서류 지원이 필요하다고 생각하기에 스스로 그 기준을 200개 정도로 생각해보았습니다. 경제 상황 때문에 확실히 이전보다 서류 합격률이 매우 낮아짐을 체감하고 있지만 본 교육 과정을 통해 프론트엔드 신입 지원자로..

webpack module의 plugins 속성은 loader들로 번들링된 js 파일의 후처리를 담당합니다. 전 글에서 plugin들은 클래스의 인스턴스를 호출하여 해당 plugin이 제공하는 후처리 로직을 번들링할 때마다 적용한다고 작성했습니다. 사실 loader나 plugins 모두 프론트엔드 개발 패키지를 다운 받을 때 필요한 요소들이 모두 함께 받아지지만, 무엇이 어떤 방식을 사용해 완성된 번들링 파일을 만드는지 궁금했기 때문에 여기에 정리를 하려고 합니다. 참고로 공부한 webpack의 설정 기준은 현재의 5버전이 아닌 4버전 기준입니다. 1. BannerPlugin new webpack.BannerPlugin({ banner: ` Build time: ${new Date().toLocaleSt..

기존에 막연했던 Next.js의 hydration 개념을 짧지만 명확히 정리해보려 합니다. 일단 hydration은 '수분을 공급하다'라는 뜻의 영어 동사인 hydrate의 명사형입니다. 저는 hydration이 단순히 사용자가 Next.js로 제작한 사이트에 진입하면 pre-rendering된 html을 받은 후에 다른 페이지로 이동할 때 서버에서 필요한 React 실행 코드를 받아 React의 csr방식으로 부드러운 화면 전환을 가능하게 하는 것이 어플리케이션에 수분을 공급하는 행위에 비유한 것이라고 생각하여 이것을 hydration이라고 생각했습니다. 하지만 Next.js에서 hydration는 조금 더 깊은 의미를 가집니다. 이것을 이해하려면 먼저 일반적인 html와 Next.js의 자바스크립트 ..

redux-toolkit으로 전역 상태 객체를 사용하다가 발생한 이슈입니다. 문제의 발생 배경은 rtk 라이브러리로 특정 객체를 전역 상태로서 사용하고 있었고 프로그램이 시작될 때, 해당 객체의 초기값에 존재하는 속성(빈 배열 내부)에 class와 new 연산자로 다른 타입의 객체를 만들어 초기 상태를 만들어주고 있었습니다. export const surveySlice = createSlice({ name: 'test', initialState: { value: { head: { title: 'test', desc: '' }, body: [ new Test() ] } }, reducers: {} } 그리고 그 클래스의 정의는 아래의 형식으로 제작했습니다. class Test { title: string;..

전의 포스트에 이어서 작성하는 내용입니다. 전 포스트에서 웹팩의 주요 속성으로 mode, entry, output, module(loader)이 무엇인지 짧게 작성했습니다. var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'none', entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { port: 9000, }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html', }..

이전 1번 문제에서 SEO에 대한 문제를 언급했듯이, SPA 사이트들은 검색 엔진 최적화에 무력해 사용자들에게 노출될 기회가 적어집니다. 따라서, 설계한 어플리케이션 서비스가 폐쇄적인 특정 소수만이 사용하는 서비스가 아니라 널리 노출되어 높은 인지도를 갖게 하려면 SEO에 대한 처리가 필수적입니다. SEO는 검색 엔진 최적화를 의미하는데, SEO에 이슈가 발생한다면 구글 같은 검색 엔진에서 우선순위에 밀려날 수 있습니다. 이렇게되면 잠재적 소비자들에게 어플리케이션 서비스를 노출할 기회가 적어지게 됩니다. 가장 유명한 검색 엔진인 구글을 예시로 들어보겠습니다. 구글 크롤러는 임의적으로 사이트를 방문한 다음 그 사이트에서 링크가 걸린 사이트로 계속 이동을 하면서 각 사이트의 html 문서의 텍스트 노드와 문..